/* Layout: full-screen sea canvas, thin HUD strip on top, harbor ledger as a parchment sheet over the sea.
   Single deliberate theme (night-sea + parchment), so no light/dark switch. */
:root {
  --sea: #0f3f52;
  --sea-deep: #08222d;
  --parch: #efe3c4;
  --parch-2: #e0cc9c;
  --ink: #2a1d10;
  --ink-soft: #6b5638;
  --brass: #c08f2e;
  --blood: #b4412c;
  --kelp: #5b9a56;
  --foam: #f6f1e3;
  --f-display: "IM Fell English SC", "Noto Serif TC", "Iowan Old Style", Georgia, serif;
  --f-ui: "Barlow Semi Condensed", "Noto Sans TC", "Microsoft JhengHei", "Arial Narrow", system-ui, sans-serif;
  --ts: 1;              /* UI size setting (js/options.js): 0.5 to 2.5 */
  color-scheme: dark;
}
html, body { height: 100%; }
[hidden] { display: none !important; }
body { background: var(--sea-deep); color: var(--foam); font-family: var(--f-ui); overflow: hidden; overscroll-behavior: none; }
#game { position: fixed; inset: 0; touch-action: none; }
#game canvas { display: block; }

/* HUD */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.bars { display: grid; gap: 6px; width: min(46vw, calc(220px * var(--ts))); }
.bar { container-type: inline-size; position: relative; height: calc(18px * var(--ts)); border-radius: 3px; background: rgba(8,34,45,.75); border: 1px solid rgba(246,241,227,.25); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .2s; }
.bar.hp i { background: linear-gradient(#d45a43, var(--blood)); }
.bar.cargo i { background: linear-gradient(#ddb04e, var(--brass)); }
.bar span { position: relative; display: flex; justify-content: space-between; padding: 0 6px; font-size: min(calc(12px * var(--ts)), 8cqw);   /* a phone's bar is narrow: the text follows its width */ line-height: calc(18px * var(--ts)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.bar.full { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(192,143,46,.45); }
.side { display: grid; justify-items: end; gap: 6px; }
.purse { display: flex; gap: 8px; align-items: baseline; background: rgba(8,34,45,.75); border: 1px solid rgba(246,241,227,.25); border-radius: 3px; padding: 2px 8px; }
.purse small { font-size: calc(11px * var(--ts)); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.purse b { font-size: calc(17px * var(--ts)); color: #f0c766; font-variant-numeric: tabular-nums; }
.lang { pointer-events: auto; font: inherit; font-size: calc(13px * var(--ts)); font-weight: 700; color: var(--foam); background: rgba(8,34,45,.75);
  border: 1px solid rgba(246,241,227,.35); border-radius: 3px; padding: 3px 9px; cursor: pointer; justify-self: start; }
.lang.on-sheet { color: var(--ink); background: transparent; border-color: rgba(42,29,16,.35); }
#lv { font-size: calc(12px * var(--ts)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; max-width: var(--mini-w, 124px); overflow-wrap: anywhere; }   /* "Lv N · next X%" wraps inside the chart's column instead of reaching into the toast lane */
@media (max-height: 430px) { #lv .lvp { display: none; } }   /* a landscape phone: the level stays, the "next X%" goes (the ledger still shows it) */
#mini { width: 112px; height: 112px; border-radius: 50%; border: 2px solid rgba(192,143,46,.7); background: var(--sea-deep); box-shadow: 0 2px 10px rgba(0,0,0,.4); }

#hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 5; pointer-events: none;
  font-size: min(calc(14px * var(--ts)), 6.5vw); letter-spacing: .04em; background: rgba(8,34,45,.7);   /* on a phone a big size would wrap into the coach card above */ padding: 6px 12px; border-radius: 3px; transition: opacity .6s; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
/* the dock ring's prompt, under the ship (the camera follows it): js/mooring.js */
#moor { position: fixed; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); z-index: 6; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
  font-size: calc(15px * var(--ts)); text-align: center; color: #f6f1e3; background: rgba(8,34,45,.78); border: 1px solid rgba(240,199,102,.45); border-radius: 3px; padding: 5px 12px; }
#moor[hidden] { display: none; }
#toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + max(92px, 28px + 64px * var(--ts)));   /* the bars above it grow with the UI size */ transform: translateX(-50%); z-index: 11; pointer-events: none;
  font-family: var(--f-display); font-size: min(calc(22px * var(--ts)), 9vh); color: var(--foam); text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity .3s; text-align: center; width: max-content; max-width: calc(100vw - 32px); }
#toast.on { opacity: 1; }
/* On narrow screens the chart fills the top-right corner, so toasts drop below it instead of running under it. Wider
   than that the toast stays clear of the chart on its right (the 44px is its padding and border plus a gap). */
@media (min-width: 561px) { #toast { max-width: min(calc(100vw - 32px), calc(100vw - 2 * (var(--mini-w, 124px) + 44px))); } }
@media (max-width: 560px) { #toast { top: calc(env(safe-area-inset-top, 0px) + 32px + 50px * var(--ts) + var(--mini-w, 124px)); font-size: calc(19px * var(--ts)); } }

/* Floating joystick */
#joy { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgba(246,241,227,.45); background: rgba(246,241,227,.08); z-index: 4; pointer-events: none; }
#joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(246,241,227,.5); }

/* Harbor ledger */
#port { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: rgba(4,18,24,.55);
  padding-block: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 12px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sheet { box-sizing: border-box; width: min(100%, max(calc(560px * var(--ts) + 40px), 440px));   /* the floor keeps the fixed-size poster and rows inside a small-UI sheet */ max-height: 100%; overflow-y: auto; background: var(--parch); color: var(--ink); border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(150,110,50,.25); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 20px 0; }
.sheet header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.eyebrow { font-size: calc(12px * var(--ts)); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.sheet h1 { font-family: var(--f-display); font-weight: 400; font-size: calc(34px * var(--ts)); line-height: 1; margin: 2px 0 0; text-wrap: balance; }
.sheet h2 { font-family: var(--f-display); font-weight: 400; font-size: calc(22px * var(--ts)); margin: 0 0 8px; }
.gold-big { text-align: right; }
.gold-big b { display: block; font-size: calc(26px * var(--ts)); color: #8a5d0c; font-variant-numeric: tabular-nums; }
.msg { margin: 0; font-size: calc(16px * var(--ts)); line-height: 1.4; }
.msg em { font-style: normal; font-weight: 700; color: #8a5d0c; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(14px * var(--ts)); color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats b { color: var(--ink); }
.hint-s { margin: -4px 0 8px; font-size: calc(14px * var(--ts)); color: var(--ink-soft); }

/* Gun deck (js/deck-art.js): the ship bow-up in the middle column on a canvas, larboard guns left of it, starboard right,
   bow guns above, stern guns below; an SVG leader line runs from each button to its muzzle on the hull. */
.deck { position: relative; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) var(--shipw, 30%) minmax(0, 1fr);
  grid-template-areas: "bow bow bow" "left ship right" "stern stern stern"; gap: 10px 12px; }
.dk-art, .dk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dk-lines line { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.dk-lines line.halo { stroke: rgba(239,227,196,.75); stroke-width: 3.4; }
.dk-lines circle { fill: var(--brass); stroke: var(--ink); stroke-width: 1.2; }
.dk-lines .on line:not(.halo) { stroke: var(--blood); stroke-width: 2; }
.dk-lines .on circle { fill: var(--blood); r: 4.5px; }
.dk-ship { grid-area: ship; aspect-ratio: var(--ship-ar, 1 / 2); align-self: center; }
.dk-grp { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dk-bow { grid-area: bow; } .dk-stern { grid-area: stern; }
.dk-left { grid-area: left; align-items: flex-end; } .dk-right { grid-area: right; align-items: flex-start; }
.dk-left, .dk-right { justify-content: center; }
.dk-grp .slots { display: flex; gap: 8px; }
.dk-left .slots, .dk-right .slots { flex-direction: column; gap: 6px; width: min(100%, calc(104px * var(--ts))); }
.dk-left .lbl, .dk-right .lbl { width: min(100%, calc(104px * var(--ts))); text-align: center; }
.dk-bow .slot, .dk-stern .slot { flex: 0 1 calc(84px * var(--ts)); }   /* shrinks when two guns would not fit a phone's width */
.deck .lbl { font-size: calc(12px * var(--ts)); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-soft); }
.slot { font: inherit; font-size: calc(13px * var(--ts)); font-weight: 700; padding: 8px 4px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--parch-2); color: var(--ink); cursor: pointer; line-height: 1.15; min-width: 0; }
.slot:hover { background: #ead8aa; }
.slot.empty { border-style: dashed; border-color: rgba(42,29,16,.5); background: rgba(224,204,156,.35); color: var(--ink-soft); font-weight: 600; }
.slot.sel { background: var(--ink); color: var(--parch); box-shadow: 0 0 0 3px var(--brass); }
.slot.sel small { color: rgba(239,227,196,.75); }
/* the picked gun's card and the gun store (js/gunbay.js), between the gun deck and the armory */
.gcard { margin-top: 12px; padding: 10px 12px; border: 1.5px solid var(--brass); border-radius: 4px; background: rgba(224,204,156,.4);
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.gcard .nm { font-size: calc(17px * var(--ts)); font-weight: 700; }
.gcard .nm small { font-weight: 600; font-size: calc(13px * var(--ts)); color: var(--ink-soft); margin-left: 6px; }
.gcard .ds { grid-column: 1 / -1; font-size: calc(13px * var(--ts)); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gcard .ds b { color: var(--ink); } .gcard .ds .up { color: #2f6b2b; }
.gcard .hint-s { grid-column: 1 / -1; margin: 2px 0 0; }
.gcard > .hint-s:only-child { margin: 0; }
.gacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gacts .btn { min-width: 0; }
.gacts .btn.on { background: var(--ink); color: var(--parch); box-shadow: 0 0 0 3px var(--brass); }
/* what the last move did, with Undo (js/gunbay.js): a status line above the picked gun's card */
.gnote { margin: 12px 0 0; padding: 6px 10px; border-left: 4px solid #3f6b2a; background: rgba(63,107,42,.12); border-radius: 0 3px 3px 0; font-size: calc(14px * var(--ts)); font-weight: 600;
  display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.gnote.tip { border-left-color: var(--brass); background: rgba(224,204,156,.45); display: block; }
.gnote .btn { flex: none; min-width: 0; padding: 4px 12px; }
.gnote + .gcard { margin-top: 8px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
/* side views of the guns (js/gun-art.js): beside a name in the card and armory, above it on a stored-gun button */
.gsv { height: calc(22px * var(--ts)); width: auto; vertical-align: middle; margin-right: 8px; image-rendering: auto; }
.gsv.sm { display: block; height: calc(18px * var(--ts)); margin: 0 auto 2px; }
.slot small { display: block; font-weight: 500; font-size: calc(11px * var(--ts)); color: var(--ink-soft); }
/* in the deck the text follows the deck's own width (a container), so the large UI sizes still fit a phone's narrow gun columns */
.dk-left .lbl, .dk-right .lbl { font-size: min(calc(12px * var(--ts)), 5cqw); }
.deck .slot { font-size: min(calc(13px * var(--ts)), 5.2cqw); overflow-wrap: anywhere; }
.deck .slot small { font-size: min(calc(11px * var(--ts)), 4.4cqw); }
/* Big gun deck (10+ ports a side, js/gundeck.js): tight one-line ports, and a ship cell as tall as the longest side so the
   rows line up with the hull; the picked gun's card sticks above the sheet's footer so it stays in view while you tap through. */
.deck.dense { row-gap: 8px; }
.deck.dense .dk-ship { aspect-ratio: auto; height: calc(var(--rows) * 36px * var(--ts)); }   /* one row per port: 33px buttons and a 3px gap */
.deck.dense .dk-left .slots, .deck.dense .dk-right .slots { gap: 3px; }
.deck.dense .slot { padding: 3px 2px; min-height: calc(33px * var(--ts)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; line-height: 1.15;   /* a finger-sized target in the compact deck (#68) */ font-size: min(calc(12px * var(--ts)), 4.4cqw); }
.deck.dense .slot small { display: inline; margin-left: 3px; font-size: min(calc(10px * var(--ts)), 3.8cqw); }
.deck.dense .slot.empty small { display: none; }

.list { display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(42,29,16,.25); }
.item:first-child { border-top: 0; }
.item .nm { font-size: calc(17px * var(--ts)); font-weight: 700; }
.item .nm small { font-weight: 600; font-size: calc(13px * var(--ts)); color: var(--ink-soft); margin-left: 6px; }
.item .ds { grid-column: 1; font-size: calc(13px * var(--ts)); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.item .ds b { color: var(--ink); }
.item .ds .up { color: #2f6b2b; }
.btn { grid-row: 1 / span 2; grid-column: 2; font: inherit; font-weight: 700; font-size: calc(15px * var(--ts)); min-width: 104px; padding: 9px 12px; border-radius: 3px; cursor: pointer;
  border: 0; background: var(--ink); color: var(--parch); font-variant-numeric: tabular-nums; }
.btn:disabled { background: rgba(42,29,16,.25); color: rgba(42,29,16,.6); cursor: default; }
.btn.max { background: transparent; color: var(--ink-soft); border: 1.5px solid rgba(42,29,16,.3); }
button:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.sheet footer { position: sticky; bottom: 0; z-index: 3; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px) * 0); background: linear-gradient(transparent, var(--parch) 30%); display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.sail { font-family: var(--f-display); font-size: calc(24px * var(--ts)); padding: 8px 28px; border: 0; border-radius: 3px; background: var(--blood); color: var(--foam); cursor: pointer; box-shadow: 0 3px 0 #6e2416; }
.sail:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e2416; }
.textbtn { font: inherit; font-size: calc(13px * var(--ts)); background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 6px 0; }

@media (prefers-reduced-motion: reduce) { .bar i, #toast, #hint { transition: none; } }
@media (max-width: 420px) { .deck { column-gap: 8px; } .sheet h1 { font-size: calc(28px * var(--ts)); } }

/* Big desktop screens: the sea is framed like 1280x720 (js/view.js), so the overlays grow with it instead of shrinking
   into the corners. Whole-box zoom keeps fixed-width bars and their text in proportion. #bossArrow is placed in CSS
   pixels by script, so it stays unzoomed. */
@media (min-width: 1500px) and (min-height: 900px) {
  #hud, #hint, #toast, #coach, #achToast, #bossBar, #seaBanner, #port, #title, #pause, #logbook, #victory, #wanted { zoom: 1.25; }
}
@media (min-width: 2400px) and (min-height: 1300px) {
  #hud, #hint, #toast, #coach, #achToast, #bossBar, #seaBanner, #port, #title, #pause, #logbook, #victory, #wanted { zoom: 1.5; }
}
/* ship lines: the yard's comparison with the ship you sail (js/ship-lines.js) */
.item .ds.cmp { font-size: calc(12.5px * var(--ts)); }
.item .ds.cmp i { font-style: normal; color: var(--ink-soft); }
.item .ds.cmp .gain { color: #2f6b2b; font-weight: 700; }
.item .ds.cmp .loss { color: var(--blood); font-weight: 700; }