/* Tides of Dominion: tar, iron and overcast water.
   UI material from the art direction brief. */

:root{
  --deep:#1b2c2a; --open:#25403b; --shallow:#3d5e52; --foam:#c8cdbf;
  --sand-wet:#7d6e4f; --sand-dry:#9a8862; --scrub:#4c5334; --rock:#575147; --cliff:#2a2620;
  --tar:#15120e; --plank:#271f17; --iron:#47433d; --rivet:#7a746a; --brass:#8a6c38;
  --bone:#d9d0b8; --dim:#8f8770;
  --hp:#5c9c3a; --shield:#3b7cb6; --enemy:#c23a2b; --gold:#d3a23a; --jewel:#e7e2d6;
  --crit:#e0782a; --safe:#7fa38a;
  --trough:#0d0b09;
  --stencil:'Big Shoulders Stencil Display', 'Barlow Condensed', sans-serif;
  --body:'Barlow Condensed', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --hud-scale:1;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b1412;
  font-family:var(--body); color:var(--bone); overscroll-behavior:none}
body{touch-action:none; user-select:none}

#app{position:fixed; inset:0}
/* While the fleet loads, the gap under the canvas is the working sea, not a
   flat slab: the same water texture the chart will show, tiled at its own size.
   The canvas covers it the moment the first frame is drawn. */
#game-root{position:absolute; inset:0;
  background:#16302c url(../assets/deepwater.webp) repeat;
  background-size:512px 512px}
#game-root canvas{display:block}
#fog-layer{position:absolute; inset:0; width:100%; height:100%; z-index:10; pointer-events:none}

/* ---------- type helpers ---------- */
.stencil{font-family:var(--stencil); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ---------- panels: tar + iron ---------- */
.panel{
  position:relative;
  background:rgba(21,18,14,.92);
  border:1px solid var(--iron);
  border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(122,116,106,.25), inset 0 0 22px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.55);
}
.panel::before{ /* corner rivets */
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background-image:
    radial-gradient(circle at 5px 5px, var(--rivet) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--rivet) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 5px calc(100% - 5px), var(--rivet) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--rivet) 0 1.3px, transparent 1.9px);
}
.panel-body{padding:8px 10px}
.plank-inset{background:var(--plank); border:1px solid #120f0b; border-radius:3px}

/* ---------- HUD layout ---------- */
#hud{position:absolute; inset:0; pointer-events:none; z-index:20; font-size:calc(13px*var(--hud-scale))}
.hud-panel{position:absolute; pointer-events:auto}
/* default: wide / landscape. Corners hold the panels, quick bar centre-bottom. */
#panel-status{top:8px; left:8px; width:min(300px,34vw)}
#panel-target{top:8px; right:8px; width:min(250px,30vw)}
#panel-minimap{bottom:8px; left:8px; width:min(250px,26vw)}
#panel-quickbar{bottom:8px; left:50%; transform:translateX(-50%); width:max-content; max-width:96vw}
#panel-menu{bottom:8px; right:8px}

/* portrait: status and target share the top, quick bar the bottom. The chart
   and the menu sit just above the quick bar, small, so the sea around the ship
   stays open and the NPC name plates are not buried under the HUD. */
@media (orientation: portrait){
  #panel-status{width:min(300px,54vw)}
  #panel-target{width:min(250px,40vw)}
  #panel-status .drag-strip{gap:4px; padding:4px 6px 3px}
  #panel-status .drag-strip .title{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #panel-status .drag-strip .lvl{font-size:9.5px; white-space:nowrap; margin-left:auto}
  /* Keep the dock prompt compact on a tall phone so the harbour stays visible. */
  #port .gate-note{display:none}
  #port .gate-card{padding:6px 12px 7px}
  #panel-minimap{left:8px; bottom:74px; width:min(182px,44vw)}
  #panel-menu{right:8px; bottom:74px}
  #hint{top:158px; bottom:auto}
  #banner{top:158px}
}
@media (orientation: landscape){
  #hint{bottom:66px}
  /* The chart is capped to the space under the status panel, so on a tall
     landscape screen it never rides up over the HUD. */
  #panel-minimap{width:min(250px, 27vw, calc(100vh - 210px))}
}

/* drag strips */
.drag-strip{display:flex; align-items:center; gap:8px; padding:5px 10px 4px; cursor:grab;
  border-bottom:1px solid rgba(71,67,61,.7); background:linear-gradient(180deg, rgba(39,31,23,.7), rgba(21,18,14,0))}
.drag-strip:active{cursor:grabbing}
.drag-strip .title{font-size:16px; line-height:1; color:var(--bone)}
.drag-strip .lvl{font-size:12px; color:var(--brass); margin-left:auto}

/* chalk ritual corner motif, large panels only */
.chalk-corner{position:absolute; top:-1px; left:-1px; width:34px; height:34px; pointer-events:none; opacity:.9}
.chalk-corner svg{width:100%; height:100%}

/* ---------- bars ---------- */
.bar{position:relative; height:15px; margin:5px 0; background:var(--trough);
  border:1px solid var(--iron); border-radius:2px; overflow:hidden}
.bar.small{height:12px; margin:4px 0}
.bar .fill{position:absolute; top:0; left:0; bottom:0; width:100%; background:var(--hp); transition:width .12s linear}
.bar .lag{position:absolute; top:0; left:0; bottom:0; width:100%; background:rgba(217,208,184,.4);
  transition:width .4s ease-out; z-index:1}
.bar .fill{z-index:2}
.bar .txt{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; overflow:hidden;
  font-size:11px; color:#efe9d7; text-shadow:0 1px 2px #000, 0 0 3px #000}
.bar-hp .fill{background:linear-gradient(180deg,#6fb046,#4d8730)}
.bar-shield .fill{background:linear-gradient(180deg,#4a8ec6,#2f6491)}
.bar-xp{height:11px}
.bar-xp .fill{background:linear-gradient(180deg,#d3a23a,#8a6c38)}
.bar-xp .txt{font-size:10px; line-height:11px}
.bar[data-bar="thp"] .fill,.bar[data-bar="thp"]{--hp:var(--enemy)}
.bar[data-bar="thp"] .fill{background:linear-gradient(180deg,#d24b3a,#a12c1f)}

/* wallet */
.wallet{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; font-size:13px; color:var(--bone)}
.wallet .cur{display:inline-flex; align-items:center; gap:4px}
.wallet .mono{font-size:13px}
.wallet .clabel{font-family:var(--body); font-size:10px; color:var(--dim); letter-spacing:.05em}
.wallet .glyph{width:14px; height:14px; display:inline-block; flex:0 0 auto; position:relative}
.wallet .coin{background:radial-gradient(circle at 35% 30%, #f0cf7a, #b8862c 70%); border:1px solid #6d4e14; border-radius:50%}
.wallet .jewel{background:linear-gradient(135deg,#e7c9dd,#b06a8f 55%,#6f3f5c); border:1px solid #7d5470; border-radius:3px; transform:rotate(45deg)}
.wallet .dust{background:linear-gradient(180deg,#f2f4ff,#9fb0ee);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.wallet .food{background:linear-gradient(180deg,#c98f52,#7c5124 70%); border:1px solid #5d3d1c; border-radius:3px}
.wallet .food::before{content:''; position:absolute; left:2px; right:2px; top:4px; height:1.5px; background:rgba(40,26,10,.6)}
.wallet .food::after{content:''; position:absolute; left:2px; right:2px; bottom:4px; height:1.5px; background:rgba(40,26,10,.6)}

/* ---------- target viewport ---------- */
.target-body{display:flex; gap:8px; align-items:stretch}
.target-port{width:58px; height:58px; flex:0 0 auto; border:1px solid var(--iron); border-radius:3px;
  background:radial-gradient(circle at 50% 40%, #22322f, #101a18 75%); overflow:hidden; display:flex; align-items:center; justify-content:center}
.target-port img{max-width:88%; max-height:88%; transform:rotate(-18deg); filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.target-stats{flex:1 1 auto; min-width:0}
.distance{margin-top:4px; font-size:12px; color:var(--dim); text-align:right}
.target-type{margin-top:3px; font-size:11px; color:var(--dim); opacity:.85; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* On a narrow screen the target panel is tight: shrink the portrait and the
   stat text so the HP numbers fit inside their bar instead of clipping. */
@media (max-width:560px){
  .target-body{gap:6px}
  .target-port{width:44px; height:44px}
  .bar[data-bar="thp"],.bar[data-bar="tshield"]{height:11px; margin:3px 0}
  .bar[data-bar="thp"] .txt,.bar[data-bar="tshield"] .txt{font-size:9px; letter-spacing:-.02em}
  .distance{margin-top:2px; font-size:11px}
}
#panel-target.hostile #target-name{color:var(--enemy)}
#target-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#panel-target.none .target-body{display:none}
#panel-target.none .target-port{display:none}
#panel-target.none #target-name{color:var(--dim)}

/* ---------- minimap ---------- */
#minimap{display:block; width:100%; height:auto; aspect-ratio:1/1; border:1px solid #0d0b09; border-radius:3px; background:#16302c}
.drag-strip-mini{padding:3px 9px 2px}
.drag-strip-mini .title{font-size:13px}

/* chart minimize: shrinks the panel to a small tab */
.panel-min{position:absolute; right:4px; top:2px; width:20px; height:17px; padding:0; line-height:1;
  font-family:var(--mono); font-size:14px; background:linear-gradient(180deg,#31271c,#211a12);
  border:1px solid var(--iron); border-radius:3px; color:var(--bone); cursor:pointer; z-index:4}
.panel-min:hover{border-color:var(--rivet); color:#fff}
#panel-minimap .drag-strip{padding-right:54px}
.panel-world{right:26px}
.panel-world .ico{width:13px; height:13px; display:block}
#panel-minimap.minimized{width:auto !important}
#panel-minimap.minimized .panel-body{display:none}
#panel-minimap.minimized .drag-strip{border-bottom:none}
#panel-minimap.minimized .resize-grip{display:none !important}

/* ---------- world map overlay ---------- */
#worldmap{position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  padding:2vh 2vw; background:rgba(8,7,5,.72); pointer-events:auto}
#worldmap.hidden{display:none}
#worldmap .wm-card{position:relative; width:min(760px,94vw); max-height:92vh; display:flex; flex-direction:column;
  padding:0; background:rgba(21,18,14,.98)}
#worldmap .panel-body{padding:8px 10px 4px; overflow:hidden; display:flex; justify-content:center}
#worldmap-canvas{display:block; width:auto; height:auto; max-width:100%; max-height:calc(92vh - 104px);
  aspect-ratio:6/5; border:1px solid #0d0b09; border-radius:3px; background:#122a26}
#worldmap .modal-close{top:5px; right:8px}
#worldmap .wm-legend{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0 10px 10px;
  font-size:11px; color:var(--dim); letter-spacing:.04em}
#worldmap .wm-legend span{display:inline-flex; align-items:center; gap:5px}
#worldmap .wm-legend .dot{width:9px; height:9px; border-radius:50%; display:inline-block}
#worldmap .wm-legend .dot.you{background:#f0e7cd; box-shadow:0 0 0 1px #000}
#worldmap .wm-legend .dot.foe{background:#d24b3a}
#worldmap .wm-legend .dot.safe{background:#5c9c3a}
#worldmap .wm-legend .dot.pvp{background:#8a3a2a}
#worldmap .wm-legend .line{width:16px; height:0; border-top:2px dashed #d24b3a; display:inline-block}

/* ---------- quick bar ---------- */
.quickbar{display:flex; flex-wrap:wrap; gap:5px; padding:7px 8px; justify-content:center}
.slot{position:relative; width:clamp(30px,6vw,42px); height:clamp(30px,6vw,42px);
  background:linear-gradient(180deg,#31271c,#241c13); border:1px solid var(--iron); border-radius:3px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden}
.slot .key{position:absolute; top:1px; left:3px; font-family:var(--stencil); font-size:11px; color:var(--dim); letter-spacing:0}
.slot .count{position:absolute; right:3px; bottom:1px; font-family:var(--mono); font-size:11px; color:var(--bone); text-shadow:0 1px 2px #000}
.slot .ico{width:70%; height:70%; color:#b7ad93}
.slot .itico{width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.slot:hover{border-color:var(--rivet)}
.slot.active{border-color:var(--brass); box-shadow:inset 0 0 0 1px rgba(138,108,56,.5)}
.slot .cd{position:absolute; inset:0; background:conic-gradient(rgba(0,0,0,.7) var(--cd,0deg), transparent 0); z-index:2}
.slot .cdtxt{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; color:#fff; text-shadow:0 1px 2px #000}

/* Attack / cancel controls on the hot bar. */
.qb-actions{display:flex; gap:5px; margin-left:3px; padding-left:7px;
  border-left:1px solid rgba(71,67,61,.6); align-items:center}
.qb-act{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:clamp(50px,13vw,70px); height:clamp(30px,6vw,42px); padding:0 4px; cursor:pointer;
  background:linear-gradient(180deg,#31271c,#211a12); border:1px solid var(--iron); border-radius:3px;
  color:var(--bone); font-family:var(--stencil)}
.qb-act .ico{width:18px; height:18px; color:#b7ad93}
.qb-act .lbl{font-size:10px; letter-spacing:.04em; line-height:1; white-space:nowrap}
.qb-act:hover{border-color:var(--rivet); color:#fff}
.qb-act.attack.active{border-color:var(--enemy); box-shadow:inset 0 0 0 1px rgba(194,58,43,.65); color:#ffd9cf}
.qb-act.attack.active .ico{color:#e2604d}
.qb-act.cancel.active{border-color:var(--brass); box-shadow:inset 0 0 0 1px rgba(138,108,56,.55)}
.qb-act.repair.active{border-color:#6fb046; box-shadow:inset 0 0 0 1px rgba(111,176,70,.6); color:#e8f3d8}
.qb-act.repair.active .ico{color:#8fc95e}
.qb-act.disabled{opacity:.4; pointer-events:none}

/* ---------- menu icons ---------- */
.menu-row{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:5px 5px; justify-items:center}
.menu-item{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:44px;
  padding:5px 2px 4px; cursor:pointer; border-radius:3px; color:var(--dim); background:transparent; border:1px solid transparent}
.menu-item .ico{width:22px; height:22px}
.menu-item .lbl{font-family:var(--stencil); font-size:10px; letter-spacing:.04em; white-space:nowrap}
.menu-item:hover{color:var(--bone); border-color:rgba(71,67,61,.7); background:rgba(39,31,23,.5)}
.menu-item .ico{color:currentColor}

/* ---------- banner ---------- */
#banner{position:absolute; top:118px; left:50%; transform:translateX(-50%); z-index:30; pointer-events:none;
  padding:7px 30px; font-size:clamp(20px,4.4vw,34px); color:var(--bone); opacity:0;
  background:rgba(21,18,14,.9);
  border:1px solid var(--iron); border-radius:3px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6), 0 3px 12px rgba(0,0,0,.6);
  text-shadow:0 2px 4px #000; white-space:nowrap}
#banner.show{animation:bannerIn 2.5s ease forwards}
@keyframes bannerIn{0%{opacity:0; letter-spacing:.3em}12%{opacity:1; letter-spacing:.06em}80%{opacity:1}100%{opacity:0}}
#banner.safe{color:var(--safe)} #banner.danger{color:var(--enemy)} #banner.gate{color:var(--enemy)}

/* ---------- map border prompt ---------- */
#gate{position:absolute; left:50%; top:186px; transform:translateX(-50%); z-index:62; pointer-events:none}
#gate.hidden{display:none}
#gate .gate-card{pointer-events:auto; padding:10px 16px 12px; text-align:center; min-width:220px}
#gate .gate-title{font-size:20px; color:var(--bone)}
#gate .gate-note{font-size:12px; color:var(--dim); margin:3px 0 8px}
#gate .gate-actions{display:flex; gap:8px; justify-content:center}
#gate .iron-btn{font-size:14px; padding:6px 18px}
#gate.locked .gate-title{color:var(--enemy)}
#gate.locked .gate-note{color:var(--enemy)}
#gate .iron-btn.disabled{opacity:.4; pointer-events:none}

/* ---------- capital port prompt + boarding ---------- */
#port{position:absolute; left:50%; top:150px; transform:translateX(-50%); z-index:62; pointer-events:none}
#port.hidden{display:none}
#port .gate-card{pointer-events:auto; padding:8px 14px 10px; text-align:center; min-width:0; max-width:min(300px,86vw)}
#port .gate-title{font-size:17px; color:var(--brass)}
#port .gate-note{font-size:11px; color:var(--dim); margin:3px 0 7px; line-height:1.35}
#port .gate-actions{display:flex; gap:8px; justify-content:center}
#port .iron-btn{font-size:13px; padding:5px 16px}
/* ---------- boarding prompt: Board or Attack ---------- */
#board-prompt{position:absolute; left:50%; transform:translateX(-50%); bottom:118px; z-index:62;
  pointer-events:none; width:min(340px,92vw)}
#board-prompt.hidden{display:none}
#board-prompt .board-card{pointer-events:auto; padding:10px 14px 12px; text-align:center;
  border-color:var(--enemy)}
#board-prompt .board-title{font-size:18px; color:#ffd9cf; letter-spacing:.04em}
#board-prompt .board-note{font-size:11px; color:var(--dim); margin:3px 0 9px; line-height:1.35}
#board-prompt .gate-actions{display:flex; gap:8px; justify-content:center}
#board-prompt .iron-btn{font-size:14px; padding:8px 18px; pointer-events:auto}
#board-btn{border-color:var(--enemy); color:#ffd9cf; background:linear-gradient(180deg,#4a201a,#2a120e)}
#board-attack{border-color:var(--iron)}
#board-result{position:absolute; left:50%; top:180px; transform:translateX(-50%); z-index:62; pointer-events:none;
  width:min(360px,90vw)}
#board-result.hidden{display:none}
#board-result .gate-card{pointer-events:auto; padding:12px 16px 14px; text-align:center}
#board-result .gate-title{font-size:20px; color:var(--brass)}
#board-result.good .gate-title{color:#8fd06a}
#board-result.bad .gate-title{color:var(--enemy)}
#board-result .gate-note{font-size:12px; color:var(--dim); margin:3px 0 8px; line-height:1.4}
#board-result .rows{text-align:left; max-height:34vh; overflow:auto}
#board-result .gate-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px}

/* Pirate test passed: level-up reward, in the boarding-card material. */
#test-result{position:absolute; left:50%; top:180px; transform:translateX(-50%); z-index:62; pointer-events:none;}
#test-result.hidden{display:none}
#test-result .gate-card{pointer-events:auto; padding:12px 16px 14px; text-align:center}
#test-result .gate-title{font-size:20px; color:#8fd06a}
#test-result .gate-note{font-size:12px; color:var(--dim); margin:3px 0 8px; line-height:1.4}
#test-result .rows{text-align:left; max-height:34vh; overflow:auto}
#test-result .gate-actions{display:flex; gap:8px; justify-content:center; margin-top:10px}
.iron-btn.disabled{opacity:.4; pointer-events:none}
.ptab[hidden]{display:none}
.modal-panel select{background:#241c13; color:var(--bone); border:1px solid var(--iron); border-radius:3px; padding:3px 6px}

/* ---------- hint ---------- */
#hint{position:absolute; bottom:calc(var(--y) + 4px); left:50%; transform:translateX(-50%);
  z-index:18; font-size:10px; color:var(--dim); background:rgba(21,18,14,.94); padding:3px 12px; border-radius:3px;
  border:1px solid var(--iron); pointer-events:none; text-align:center; line-height:1.2;
  white-space:nowrap; max-width:96vw; opacity:.9; transition:opacity .8s ease}
#hint.faded{opacity:.25}
@media (max-width:760px){ #hint{bottom:calc(var(--y) + 2px)} }

/* ---------- settings button ---------- */
.iron-btn{background:linear-gradient(180deg,#31271c,#211a12); border:1px solid var(--iron); color:var(--bone);
  border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--stencil); letter-spacing:.05em; text-transform:uppercase}
.iron-btn:hover{color:#fff; border-color:var(--rivet)}
.iron-btn .ico{width:20px; height:20px}
#settings-btn{position:absolute; top:calc(var(--y)); right:calc(var(--x)); z-index:25; width:36px; height:36px; display:none}
.iron-btn.big{font-size:18px; padding:10px 26px}

/* ---------- modal / module panels ---------- */
#panels-layer{position:absolute; inset:0; z-index:40; pointer-events:none}
.modal-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:82vh; overflow:auto; pointer-events:auto; z-index:41; background:rgba(21,18,14,.97)}
.modal-panel .panel-body{padding:12px 14px 16px}
.modal-panel h2{font-size:22px; margin:0 0 6px; color:var(--bone)}
.modal-panel p{font-family:var(--body); font-size:14px; color:var(--dim); line-height:1.5; margin:6px 0}
.modal-close{position:absolute; top:6px; right:8px; width:26px; height:26px; line-height:1; font-size:16px;
  background:transparent; border:1px solid var(--iron); border-radius:3px; color:var(--dim); cursor:pointer; z-index:2}
.modal-close:hover{color:var(--bone)}
.tabs{display:flex; gap:2px; margin:8px 0 10px; flex-wrap:wrap}
.tab{font-family:var(--stencil); font-size:14px; letter-spacing:.05em; padding:5px 14px; cursor:pointer;
  border:1px solid var(--iron); border-bottom:none; border-radius:3px 3px 0 0; color:var(--dim); background:rgba(39,31,23,.4)}
.tab.active{color:var(--bone); background:rgba(39,31,23,.9)}
.tree{display:flex; gap:14px; flex-wrap:wrap}
.tree .branch{flex:1 1 150px; border-left:1px solid var(--iron); padding-left:10px}
.tree .branch h3{font-size:16px; margin:0 0 6px; color:var(--brass)}
.node{font-size:13px; color:var(--bone); padding:3px 0; border-bottom:1px dashed rgba(71,67,61,.4)}
.node .cost{float:right; color:var(--brass); font-family:var(--mono)}
.rows{font-size:14px}
.row{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid rgba(71,67,61,.35)}
.row .k{color:var(--bone)} .row .v{color:var(--dim); font-family:var(--mono)}
.tag{font-size:11px; color:var(--dim); border:1px solid var(--iron); border-radius:2px; padding:1px 6px; margin-left:6px}
.locked-note{color:var(--enemy); font-size:13px}

/* ---------- Jewel Vault: premium currency bought with real money ---------- */
.jv-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:10px 0 4px}
.jv-card{background:linear-gradient(180deg, rgba(39,31,23,.85), rgba(21,18,14,.9));
  border:1px solid var(--iron); border-radius:4px; padding:10px 12px; display:flex; flex-direction:column; gap:4px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.5)}
.jv-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.jv-head .stencil{font-size:17px; color:var(--bone)}
.jv-price{color:var(--brass); font-size:14px}
.jv-get{display:flex; align-items:center; gap:8px; margin-top:2px}
.jv-get .jewel{width:18px; height:18px; display:inline-block; flex:0 0 auto; position:relative;
  background:linear-gradient(135deg,#e7c9dd,#b06a8f 55%,#6f3f5c); border:1px solid #7d5470; border-radius:3px; transform:rotate(45deg)}
.jv-amount{color:var(--bone); font-size:15px}
.jv-sub{font-size:11px; color:var(--dim)}
.jv-bonus{color:var(--gold)}
.jv-bonus.none{color:var(--dim)}
.jv-note{font-family:var(--body); font-size:12px; color:var(--dim); line-height:1.35; min-height:30px; margin:2px 0 4px}
.jv-buy{margin-top:auto}
@media (max-width:420px){ .jv-grid{grid-template-columns:1fr 1fr} .jv-head .stencil{font-size:15px} }


/* The ship size ladder: the six classes drawn to scale, smallest to largest, so
   growth from Sloop to Man-o-War is seen at a glance. The equipped hull is lit. */
.ship-ladder{display:flex; align-items:flex-end; justify-content:space-between; gap:3px;
  min-height:186px; padding:10px 4px 4px; margin:8px 0 4px; border-radius:4px;
  background:linear-gradient(180deg, rgba(10,30,27,0), rgba(10,30,27,.6));
  border-bottom:1px solid rgba(71,67,61,.45); overflow:hidden}
.ship-ladder .sl-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px}
.ship-ladder .sl-hull{width:auto; max-width:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.ship-ladder .sl-hull.mine{filter:drop-shadow(0 0 5px var(--brass))}
.ship-ladder .sl-name{font-size:9px; line-height:1.15; text-align:center; color:var(--dim)}
.ship-ladder .sl-name.mine{color:var(--brass)}

/* The six sizes side by side. */
.ship-table{font-family:var(--mono); font-size:11px; margin-top:4px;
  border:1px solid rgba(71,67,61,.45); border-radius:4px; overflow:hidden}
.ship-table .st-head,.ship-table .st-row{display:grid;
  grid-template-columns:1.5fr .8fr .9fr .5fr .6fr .6fr .5fr; gap:4px; padding:5px 8px; align-items:center}
.ship-table .st-head{background:rgba(39,31,23,.7); color:var(--brass);
  font-family:var(--stencil); font-size:11px; letter-spacing:.04em}
.ship-table .st-row{border-top:1px solid rgba(71,67,61,.3); color:var(--dim)}
.ship-table .st-row.mine{background:rgba(138,108,56,.18); color:var(--bone)}
.ship-table .st-name{color:var(--bone)}

/* While a panel is open it is the only thing on screen: the panels it would
   otherwise stack over and cut off step aside, and the world stays readable. */
#hud.modal-open #panel-target,
#hud.modal-open #panel-menu,
#hud.modal-open #hint,
#hud.modal-open #board-prompt,
#hud.modal-open #gate,
#hud.modal-open #port,
#hud.modal-open #board-result,
#hud.modal-open #test-result { display:none !important }
#hud.modal-open #panel-minimap{ opacity:.55 }

/* On a phone held upright a dialog is a bottom sheet, not a full-screen slab:
   the sea and the player's ship stay in view above it, so the page reads as a
   game in use rather than a menu. */
@media (orientation: portrait){
  .modal-panel{left:0; right:0; top:auto; bottom:0; transform:none; width:100vw;
    max-height:48vh; border-radius:10px 10px 0 0; border-bottom:none}
  /* On a tall phone the dock and border prompts sit just above the quick bar,
     clear of the status panels above and the toast line below. */
  #gate, #port{top:auto; bottom:140px}
  #toast-layer{top:27%}
}

/* Landscape phones: the dialog is a side drawer, so the sea, the ship and any
   pickups stay in view instead of being buried under a centred menu. */
@media (orientation: landscape) and (max-height: 620px){
  .modal-panel{left:auto; right:1.5vw; top:auto; bottom:74px; transform:none;
    width:min(440px,42vw); max-height:calc(100vh - 96px)}
  /* Prompts sit clear of the quick bar and off the ship. */
  #gate{top:auto; bottom:96px}
  #port{top:auto; bottom:96px}
  /* A short landscape screen: the dock prompt is a compact bar well below the
     ship's centre, so the sloop stays in view. */
  #port .gate-note{display:none}
  #port .gate-card{padding:6px 12px 7px}
  #port .gate-title{font-size:15px}
  #board-result{top:auto; bottom:74px}
  #board-prompt{bottom:96px}
  /* Banners and toasts stay over the open sea, never on the drawer. */
  #banner{left:27%}
  /* A short landscape screen has little height: the status panel drops its XP
     line, and the chart is sized to sit in the left column, under the status
     and clear of the centred quick bar, so no two panels overlap. The top
     panels also slim down, so the sea and the hulls are not buried under chrome. */
  #panel-status{width:min(250px,31vw)}
  #panel-target{width:min(208px,27vw)}
  #panel-status .bar-xp{display:none}
  #panel-status .wallet{margin-top:3px}
  #panel-minimap{bottom:66px;
    width:max(116px, min(280px, 30vw, calc(50vw - 212px), calc(100vh - 238px)))}
  #panel-menu{bottom:66px}
  .slot{width:clamp(26px,5vw,38px); height:clamp(26px,5vw,38px)}
  .qb-act{width:clamp(44px,10.5vw,64px)}
}

/* ---------- movable / resizable chrome ---------- */
.hud-panel .resize-grip{position:absolute; right:0; bottom:0; width:16px; height:16px; display:none; cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 45%, rgba(160,138,92,.9) 45%, rgba(160,138,92,.9) 55%, transparent 55%),
             linear-gradient(135deg, transparent 62%, rgba(160,138,92,.6) 62%, rgba(160,138,92,.6) 70%, transparent 70%);}
#hud.unlocked .hud-panel{outline:1px dashed rgba(160,138,92,.72); outline-offset:2px}
#hud.unlocked .hud-panel .resize-grip{display:block}
#panel-quickbar.unlocked{outline-offset:4px}
.lock-flash{position:absolute; top:-2px; left:-2px; width:500px; color:var(--ribbon,#c8cdbf)}

/* ---------- toasts ---------- */
#toast-layer{position:absolute; left:50%; top:22%; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; gap:5px; align-items:center; pointer-events:none;
  max-width:94vw}
.toast{font-family:var(--stencil); text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(12px,3.2vw,15px);
  color:var(--bone); background:rgba(21,18,14,.9); border:1px solid var(--iron); border-radius:3px; padding:4px 14px;
  opacity:0; animation:toastIn 1.8s ease forwards; text-shadow:0 1px 2px #000; white-space:nowrap; max-width:94vw;
  overflow:hidden; text-overflow:ellipsis}
@keyframes toastIn{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}

/* ---------- intro: a small non-blocking card, no dimming veil ---------- */
#intro{position:absolute; inset:0; z-index:50; display:flex; align-items:flex-start; justify-content:center;
  padding-top:15vh; background:none; pointer-events:none}
#intro.hidden{display:none}
.intro-card{width:min(460px,88vw); padding:16px 18px 16px; text-align:center; pointer-events:auto}
.intro-card h1{font-size:clamp(26px,7vw,46px); margin:2px 0 2px; color:var(--bone)}
.intro-card .sub{font-size:clamp(11px,2.4vw,15px); color:var(--brass); letter-spacing:.22em; margin:0 0 10px}
.intro-card .intro-line{font-family:var(--body); font-size:clamp(13px,3.2vw,16px); color:#c9c1aa; margin:0 0 14px; line-height:1.3}

/* ---------- narrow screens ---------- */
@media (max-width:760px){
  .drag-strip .title{font-size:14px}
  .panel-body{padding:6px 8px}
  .bar{height:13px}
  .bar .txt{font-size:10px}
  .menu-item .lbl{font-size:9px}
  /* A phone keeps its sea: the menu folds to one compact row of icons. */
  #panel-menu .menu-row{grid-template-columns:repeat(7,auto); gap:1px; padding:3px 4px}
  .menu-item{min-width:0; padding:3px 3px; gap:0}
  .menu-item .lbl{display:none}
  .menu-item .ico{width:19px; height:19px}
}
/* hint placement must follow the base rule above. */
@media (orientation: portrait){ #hint{top:158px; bottom:auto; max-width:92vw} }
@media (orientation: landscape){ #hint{bottom:66px; max-width:56vw} }
/* portrait: the menu folds to a compact two-row block beside the chart, so it
   never sits over the quick bar. */
@media (orientation: portrait){ #panel-menu .menu-row{grid-template-columns:repeat(4,auto)} }

/* The toast rule lives above, so this override must come after it: on a
   landscape phone the toasts stay over open water, clear of the side drawer. */
@media (orientation: landscape) and (max-height:620px){
  #toast-layer{left:50%; top:19%}
}

/* ---------- the port map: go ashore ---------- */
.modal-panel[data-panel="portmap"]{width:min(660px,94vw)}
.pm-intro{margin:2px 0 10px !important}
.pm-plan{position:relative; width:100%; height:clamp(240px,46vh,430px);
  border:1px solid var(--iron); border-radius:4px; overflow:hidden;
  background:#122e29 url('../assets/port_map_bg.webp') center/cover no-repeat;
  box-shadow:inset 0 0 26px rgba(0,0,0,.6)}
/* A dark vignette and a chart wash, so the pins read over the painted port. */
.pm-plan::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(8,19,15,.06), rgba(8,19,15,.5) 92%)}
.pm-place{position:absolute; transform:translateX(-50%); z-index:2;
  width:clamp(80px,23%,120px); display:flex; flex-direction:column; align-items:center; gap:0;
  cursor:pointer; text-align:center; color:var(--bone); font-family:var(--body);
  background:linear-gradient(180deg, rgba(21,18,14,.22), rgba(21,18,14,.84) 70%);
  border:1px solid rgba(122,116,106,.45); border-radius:4px;
  padding:4px 4px 4px; box-shadow:0 3px 10px rgba(0,0,0,.55); transition:border-color .12s, transform .08s}
.pm-top{top:6%} .pm-mid{top:40%} .pm-low{top:72%}
.pm-place:hover{border-color:var(--brass)}
.pm-place:active{transform:translateX(-50%) translateY(1px)}
.pm-bld{width:100%; height:auto; max-height:64px; object-fit:contain; display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.pm-cap{font-size:12px; letter-spacing:.04em; color:var(--bone); line-height:1.1; text-shadow:0 1px 2px #000}
.pm-sub{font-size:9px; color:var(--dim); line-height:1.2; text-shadow:0 1px 2px #000}
@media (max-width:520px){ .pm-cap{font-size:11px} .pm-sub{font-size:8.5px} .pm-bld{max-height:56px} }

/* On a short landscape phone the drawer has little height, so the port map
   takes the whole drawer, drops the preamble and keeps every marker in frame
   rather than letting the last row fall off the bottom edge. */
@media (orientation: landscape) and (max-height:620px){
  .modal-panel[data-panel="portmap"]{top:10px; bottom:10px; transform:none; max-height:none}
  .modal-panel[data-panel="portmap"] .pm-intro{display:none}
  .pm-plan{height:calc(100vh - 156px); min-height:150px}
  .pm-top{top:2%} .pm-mid{top:31%} .pm-low{top:58%}
  .pm-place{width:clamp(64px,17%,92px)}
  .pm-bld{max-height:44px}
  .pm-sub{display:none}
  .pm-cap{font-size:10px}
}

/* ---------- edge scroll bars + view controls ---------- */
#edge-scroll{position:absolute; inset:0; z-index:15; pointer-events:none}
.edge-bar{position:absolute; opacity:0; pointer-events:none; transition:opacity .18s, filter .12s;
  background:rgba(211,162,58,.0)}
body.edge-on #edge-scroll .edge-bar{opacity:1; pointer-events:auto}
/* Moored at a port: no edge scrolling. */
body.at-port #edge-scroll{display:none}
.edge-top{top:0; left:0; right:0; height:26px;
  background:linear-gradient(180deg, rgba(211,162,58,.55), rgba(211,162,58,.06) 70%, transparent)}
.edge-bottom{bottom:0; left:0; right:0; height:26px;
  background:linear-gradient(0deg, rgba(211,162,58,.55), rgba(211,162,58,.06) 70%, transparent)}
.edge-left{top:0; bottom:0; left:0; width:26px;
  background:linear-gradient(90deg, rgba(211,162,58,.55), rgba(211,162,58,.06) 70%, transparent)}
.edge-right{top:0; bottom:0; right:0; width:26px;
  background:linear-gradient(270deg, rgba(211,162,58,.55), rgba(211,162,58,.06) 70%, transparent)}
.edge-bar::after{content:''; position:absolute; inset:0; margin:auto; width:0; height:0;
  border:6px solid transparent; opacity:.75}
.edge-top::after{border-bottom-color:var(--bone); top:1px}
.edge-bottom::after{border-top-color:var(--bone); bottom:1px}
.edge-left::after{border-right-color:var(--bone); left:1px}
.edge-right::after{border-left-color:var(--bone); right:1px}
.edge-bar:hover,.edge-bar:active{filter:brightness(1.5)}

#view-controls{position:absolute; right:34px; top:50%; transform:translateY(-50%); z-index:22;
  display:flex; flex-direction:column; gap:6px; pointer-events:auto}
.view-btn{width:38px; height:38px; padding:0; font-family:var(--mono); font-size:20px; line-height:1;
  color:var(--bone); background:rgba(21,18,14,.82); border:1px solid var(--iron); border-radius:4px;
  cursor:pointer; box-shadow:inset 0 0 10px rgba(0,0,0,.5)}
.view-btn:hover{color:#fff; border-color:var(--brass)}
.view-btn:active{transform:translateY(1px)}
@media (max-width:520px){ #view-controls{right:32px; gap:5px} .view-btn{width:34px; height:34px; font-size:18px} }
/* A short landscape screen keeps the right column for the menu, so the view
   controls sit in a row along the top centre, over open water. */
@media (orientation: landscape) and (max-height:620px){
  #view-controls{right:auto; left:50%; top:6px; transform:translateX(-50%); flex-direction:row}
  .view-btn{width:34px; height:34px; font-size:18px}
}