/* Game shell: title, pause, settings / how to play / credits panels, first-voyage coach, HUD additions.
   Same night-sea + parchment theme as the ledger; every font size scales with --ts (the text size setting). */

/* ---- screen states: the title owns the whole screen, pause hides the transient sea hints ---- */
body.on-title #hud, body.on-title #hint, body.on-title #joy, body.on-title #coach { display: none !important; }
body.on-title.scale-preview #hud { display: flex !important; }   /* size sliders: the HUD shows behind the settings panel */
body.on-title #toast { z-index: 25; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
body.on-pause #hint, body.on-pause #joy { display: none !important; }
#port .sheet { scroll-padding: 16px 0 96px; }   /* focus moves never land behind the sticky footer */
#port .sheet:focus { outline: none; }            /* the sheet only holds focus so stray fire keys press nothing */

.shell { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden;   /* the track never grows past the screen, so a wide child cannot push a panel off it */
  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)); }
.shell.dim { background: rgba(4,18,24,.6); }
.shell.sub { z-index: 30; }

/* ---- title ---- */
.title { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(4,18,24,.12), rgba(4,18,24,.82) 100%); }
.title-card { width: min(100%, calc(680px * var(--ts, 1)));   /* grows with the UI size, so the logo never needs a sideways scroll */
   max-height: 100%; overflow-y: auto; text-align: center; display: grid; justify-items: center; gap: 10px; padding: 8px 0; }
.crest { width: calc(84px * var(--ts)); height: calc(84px * var(--ts)); filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.logo { margin: 0; display: grid; gap: 4px; font-weight: 400; line-height: 1; }
.logo-en { font-family: var(--f-display); font-size: min(calc(clamp(42px, 12vw, 78px) * var(--ts)), 12.5vw);   /* the larger text sizes must still fit a phone */ letter-spacing: .07em; color: var(--foam);
  text-shadow: 0 3px 0 rgba(8,34,45,.9), 0 0 28px rgba(0,0,0,.55); }
.logo-zh { font-family: "Noto Serif TC", var(--f-display); font-weight: 600; font-size: calc(26px * var(--ts)); letter-spacing: .6em; padding-left: .6em;
  color: #f0c766; display: flex; align-items: center; justify-content: center; gap: 14px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.logo-zh::before, .logo-zh::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, #c08f2e); }
.logo-zh::after { transform: scaleX(-1); }
.tagline { margin: 2px 0 6px; display: grid; gap: 2px; font-size: calc(15px * var(--ts)); color: rgba(246,241,227,.85); text-shadow: 0 1px 4px #000; }
.tagline [lang="zh-Hant"] { font-family: "Noto Sans TC", var(--f-ui); font-size: .92em; letter-spacing: .08em; }
.menu { display: grid; gap: 10px; width: min(100%, calc(300px * var(--ts)), calc(100vw - 32px)); margin-top: 6px; }
.mbtn { font-family: var(--f-display); font-size: calc(22px * var(--ts)); padding: 9px 16px; min-height: 48px; border-radius: 3px; cursor: pointer;
  color: var(--foam); background: rgba(8,34,45,.72); border: 1px solid rgba(240,199,102,.4); transition: background .15s, border-color .15s; }
.mbtn:hover, .mbtn:focus-visible { background: rgba(15,63,82,.9); border-color: #f0c766; }
.mbtn.primary { background: var(--blood); border-color: transparent; box-shadow: 0 3px 0 #6e2416; }
.mbtn.primary:hover, .mbtn.primary:focus-visible { background: #c64d36; }
.mbtn.danger { background: #7d2a1c; border-color: #d9493a; }
.mbtn:active { transform: translateY(2px); }
.confirm { width: min(100%, 340px); display: grid; gap: 10px; background: rgba(8,34,45,.85); border: 1px solid rgba(240,199,102,.4); border-radius: 4px; padding: 14px; }
.confirm p { margin: 0; font-size: calc(15px * var(--ts)); line-height: 1.45; }
.confirm .menu { width: 100%; margin: 0; }

/* ---- parchment panels (pause, settings, how to play, credits) ---- */
.panel { box-sizing: border-box; width: min(100%, calc(480px * var(--ts) + 40px)); max-height: 100%;   /* border-box: padding counts inside the 100%, so a phone panel never pokes past the screen */ 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); padding: 20px 20px 0; display: grid; gap: 14px; align-content: start; }
.panel.small { width: min(100%, calc(360px * var(--ts) + 40px)); padding-bottom: 18px; }
.panel.wide { width: min(100%, calc(600px * var(--ts) + 40px)); }
.panel.scroll { overflow-y: auto; overscroll-behavior: contain; scroll-padding: 16px 0 90px; }
.panel.small.scroll { padding-bottom: 0; }
.panel h2 { font-family: var(--f-display); font-weight: 400; font-size: calc(30px * var(--ts)); line-height: 1; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.panel .eyebrow + h2 { margin-top: -8px; }
.panel h3 { font-family: var(--f-display); font-weight: 400; font-size: calc(21px * var(--ts)); margin: 0 0 6px; }
.panel .note { margin: 0; font-size: calc(13px * var(--ts)); color: var(--ink-soft); line-height: 1.4; }
.pf { position: sticky; bottom: 0; margin: 0 -20px; padding: 12px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  background: linear-gradient(transparent, var(--parch) 30%); }
.pmenu { display: grid; gap: 8px; }
.pbtn { font: inherit; font-weight: 700; font-size: calc(16px * var(--ts)); min-height: 44px; padding: 9px 16px; border-radius: 3px; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.pbtn:hover { background: rgba(42,29,16,.08); }
.pbtn.primary { background: var(--ink); color: var(--parch); }
.pbtn.danger { border-color: var(--blood); color: var(--blood); }
.pbtn:disabled { opacity: .5; cursor: default; }
.pmenu .pbtn { width: 100%; text-align: left; }
.pmenu .pbtn.primary { font-family: var(--f-display); font-weight: 400; font-size: calc(22px * var(--ts)); text-align: center; }

/* settings rows */
.sg { display: grid; gap: 8px; padding-bottom: 4px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; font-size: calc(15px * var(--ts)); font-weight: 600; }
label.srow { grid-template-columns: minmax(0, 1fr) minmax(120px, 46%) 3.2em; }
.srow.fxq { grid-template-columns: 1fr; }   /* four choices: the label above, the buttons below, wrapping two by two when the text is large or the screen narrow */
.srow.fxq .seg { display: flex; flex-wrap: wrap; }
.srow.fxq .seg button { flex: 1 1 22%; min-width: 0; }
@media (max-width: 420px) { .srow.fxq .seg button { flex-basis: 40%; } }
.srow output { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-soft); font-size: calc(13px * var(--ts)); }
.srow input[type="range"] { width: 100%; accent-color: var(--blood); min-height: 32px; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.seg button { font: inherit; font-weight: 700; font-size: calc(14px * var(--ts)); min-height: 40px; min-width: 52px; padding: 6px 12px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink); }
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--parch); }
#setReset { justify-self: start; }
/* While a size slider is held the panel goes fully transparent (it keeps its place, so the drag carries on) to show the
   game behind it; only a small readout of the value stays (#scaleBadge, js/options.js). */
#p-settings { transition: background .15s; }
#p-settings .panel { transition: opacity .15s; }
#p-settings.previewing { background: transparent; }
#p-settings.previewing .panel { opacity: 0; }
body.scale-preview #title, body.scale-preview #pause { opacity: 0; pointer-events: none; }   /* the title / pause menu behind settings goes too */
#scaleBadge { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); z-index: 60;
  padding: 8px 16px; border-radius: 999px; background: rgba(16, 24, 32, .82); color: #f6d27a; font-weight: 700; font-size: calc(16px * var(--ts, 1)); line-height: 1.2;
  pointer-events: none; white-space: nowrap; }

/* how to play */
.ht { font-size: calc(15px * var(--ts)); line-height: 1.5; }
.ht p { margin: 0 0 8px; }
.ht ul { margin: 0 0 8px; padding-left: 20px; }
.ht .ctl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.ht .ctl dt { font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .82em; padding-top: .2em; }
.ht .ctl dd { margin: 0; }
.ht kbd { font: inherit; font-weight: 700; font-size: .85em; display: inline-block; min-width: 1.7em; text-align: center; padding: 0 5px;
  border: 1px solid rgba(42,29,16,.45); border-bottom-width: 2px; border-radius: 3px; background: rgba(255,255,255,.35); line-height: 1.5; }
.ht .legend { list-style: none; padding: 0; display: grid; gap: 6px; }
.ht .legend li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.sw-aim { display: block; height: 0; border-top: 3px dashed; position: relative; }
.sw-aim::after { content: ""; position: absolute; right: -2px; top: -6px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sw-aim.hit { color: #e03a1f; }
.sw-aim.miss { color: #c99b18; border-top-width: 2px; }
.sw-aim.reload { color: rgba(42,29,16,.3); border-top-width: 2px; width: 60%; }
.sw-badge { font-style: normal; font-weight: 700; font-size: .85em; text-align: center; padding: 1px 6px; border-radius: 2px; background: var(--c); color: #1b1410; }
.sw-badge.dark { color: #fff6ea; }
.sw-mark { width: 56px; height: 28px; border-radius: 3px; background: #1d4766; }   /* painted by js/chart-legend.js */
.sw-ring { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; border-radius: 50%; border: 2px dashed var(--ink-soft); }
.sw-x { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; position: relative; }
.sw-x::before, .sw-x::after { content: ""; position: absolute; left: 45%; top: -10%; width: 2.5px; height: 120%; background: #d9493a; transform: rotate(45deg); }
.sw-x::after { transform: rotate(-45deg); }

/* ---- first-voyage coach card: floats over the sea, sits in the ledger while docked ---- */
#coach { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + max(64px, 28px + 36px * var(--ts)));   /* above the hint line, which grows with the UI size */ z-index: 7;
  width: max-content; max-width: min(calc(100vw - 32px), calc(440px * var(--ts))); pointer-events: none;
  background: rgba(8,34,45,.9); color: var(--foam); border: 1px solid rgba(240,199,102,.5); border-left: 4px solid #f0c766; border-radius: 3px;
  padding: 5px 12px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
/* the card hops to the top while the ship it points at is in the lower half (js/tutorial.js drawGuide) */
#coach.up { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + min(max(140px, 28px + 96px * var(--ts)), 38vh)); }   /* never lower than 38% of the screen: a huge UI size on a short window must not push it off the bottom half */
@media (max-width: 700px) { #coach.up { top: calc(env(safe-area-inset-top, 0px) + min(max(178px, 28px + 134px * var(--ts)), 38vh)); } }   /* a phone's compass and chart reach lower */
#coach .coach-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
#coach .eyebrow { color: #f0c766; font-size: min(calc(11px * var(--ts)), 4.4vh); }
#coach p { white-space: pre-line; margin: 1px 0 0; font-size: min(calc(14px * var(--ts)), 5.6vh); line-height: 1.35; }   /* short screens: the card must not climb into the bars */
#coach .textbtn { pointer-events: auto; color: rgba(246,241,227,.75); min-height: 26px; }
#coach.in-sheet { position: static; transform: none; width: auto; max-width: none; z-index: 0;   /* a grid item honors z-index: it would ride over the sticky header */ background: rgba(240,199,102,.22); color: var(--ink);
  border-color: rgba(138,93,12,.45); border-left-color: #8a5d0c; box-shadow: none; }
#coach.in-sheet .eyebrow { color: #8a5d0c; }
#coach.in-sheet .textbtn { color: var(--ink-soft); }

/* ---- HUD additions: pause button, sail level ---- */
.hudrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#pauseBtn { display: grid; place-items: center; min-width: calc(30px * var(--ts)); align-self: stretch; }
.ic-pause { display: block; width: 10px; height: 11px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.sail-ind { display: inline-flex; align-items: center; gap: 6px; background: rgba(8,34,45,.75); border: 1px solid rgba(246,241,227,.25); border-radius: 3px;
  padding: 2px 8px; font-size: calc(12px * var(--ts)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; }
.sail-ind > span:first-child { opacity: .7; }
.sail-ind .pips { display: inline-flex; gap: 2px; align-items: flex-end; }
.sail-ind .pips i { width: 5px; border-radius: 1px; background: rgba(246,241,227,.22); }
.sail-ind .pips i:nth-child(1) { height: 6px; } .sail-ind .pips i:nth-child(2) { height: 9px; } .sail-ind .pips i:nth-child(3) { height: 12px; }
.sail-ind .pips i.on { background: #f0c766; }
.sail-ind b { min-width: 4.2em; color: #f0c766; }
.sail-ind.by-mouse { border-color: rgba(240,199,102,.7); }   /* the held mouse button owns the sail: W / S are ignored (js/input.js) */

/* ---- ledger footer ---- */
.foot-l { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- focus: keyboard gets :focus-visible from the browser; a gamepad has no keyboard event, so show focus always ---- */
body.pad-nav button:focus, body.pad-nav input:focus { outline: 3px solid var(--brass); outline-offset: 2px; }
.shell :focus-visible { outline: 3px solid #f0c766; outline-offset: 2px; }
.panel :focus-visible { outline-color: var(--brass); }

@media (pointer: coarse) { .textbtn { min-height: 40px; } .lang { min-height: 34px; } }
@media (max-width: 420px) { .ht .ctl { grid-template-columns: 1fr; } .ht .ctl dt { padding-top: 6px; } label.srow { grid-template-columns: 1fr 3.2em; } label.srow input { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .mbtn { transition: none; } }

/* ---- roadmap panel (js/roadmap-panel.js): the roadmap page framed in a tall parchment panel ---- */
.panel.roadmap { width: min(100%, 1320px); height: 100%; padding-bottom: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
#rmFrame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 3px; background: #08222d; }
/* Navy heat (js/heat.js): five stars in the HUD row, sized by font-size so the UI size slider (--ts) scales them with the text. */
.heat-ind { border-color: rgba(240,120,90,.45); }
.heat-ind .stars { display: inline-flex; gap: .18em; }
.heat-ind .stars i { --p: 0%; width: 1em; height: 1em; background: linear-gradient(90deg, #f0c766 var(--p), rgba(246,241,227,.22) var(--p));
  clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 80% 92%, 50% 71%, 20% 92%, 31% 58%, 2% 36%, 38% 35%); }
.heat-ind .stars i.on { background: #ff7a55; }
.heat-ind b { min-width: 2.4em; color: #ff9c7a; }
.heat-ind.hot { animation: heatPulse 1.1s ease-in-out infinite alternate; }
@keyframes heatPulse { to { border-color: rgba(255,122,85,.95); } }
@media (prefers-reduced-motion: reduce) { .heat-ind.hot { animation: none; } }
/* title: English | 中文, above the buttons so a reader of either language finds it first (js/menu.js) */
.tlang { display: inline-flex; margin: 6px 0 2px; border: 1px solid rgba(240,199,102,.5); border-radius: 3px; overflow: hidden; }
.tlang button { font: inherit; font-weight: 700; font-size: calc(14px * var(--ts)); min-height: 38px; min-width: 84px; padding: 4px 14px; border: 0; cursor: pointer; color: var(--foam); background: rgba(8,34,45,.72); }
.tlang button + button { border-left: 1px solid rgba(240,199,102,.5); }
.tlang button[aria-pressed="true"] { background: #f0c766; color: #1b1410; }
.tlang button:hover:not([aria-pressed="true"]), .tlang button:focus-visible { background: rgba(15,63,82,.95); }