:root {
  /* "Night at the chart table": dark ink around the sky, brass for what you
     touch, parchment where the navigator writes. The sky stays the brightest
     thing on screen; nothing in the frame competes with it. */
  --bg: #0b1220;
  --bg-2: #0e1626;
  --panel: rgba(20, 30, 50, 0.78);
  --panel-solid: #131d31;
  --raised: rgba(34, 44, 66, 0.6);
  --line: rgba(201, 164, 92, 0.16);
  --line-strong: rgba(201, 164, 92, 0.32);
  --text: #ece3cf;
  --muted: #aaa08a;
  --dim: #7d7462;
  --accent: #c9a45c;             /* brass: the one interactive colour */
  --accent-dim: rgba(201, 164, 92, 0.15);
  --warn: #cc604a;
  --gold: #e0c07a;

  /* Paper: the chart, the result card, later the logbook. */
  --parchment: #efe5cb;
  --parchment-ink: #2a2418;
  --parchment-muted: #6b5f48;
  --parchment-line: rgba(90, 70, 40, 0.25);
  --sea: #1f6b63;                /* your fix */
  --oxblood: #9c3b2e;            /* the truth, and errors on paper */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --topbar-h: 56px;
  --rail-w: 372px;
  --gap: 14px;
  --pad: 16px;
  --radius: 12px;

  /* The sky is the main screen: it fills the window but stops short of the
     bottom, so the edge of the next card shows and the page reads as
     scrollable without needing to be told. */
  --sky-h: clamp(420px, calc(100vh - var(--topbar-h) - 112px), 1040px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms var(--ease);
  --med: 220ms var(--ease);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 20% -10%, #16213a 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.muted { color: var(--muted); }
.tiny { font-size: 12px; line-height: 1.55; }

::selection { background: var(--accent-dim); }

/* Scrollbars: present but quiet. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(190, 160, 100, 0.45); background-clip: content-box; }

/* --- top bar --------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--topbar-h);
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 18, 32, 0.82);
  backdrop-filter: blur(14px);
}

/* The name keeps its own case: in capitals "WHERESKY" loses the break between
   its two words. */
.topbar h1 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.03em;
  font-weight: 650;
  color: var(--gold);
  white-space: nowrap;
}

.round-badge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(201, 164, 92, 0.28);
  border-radius: 20px;
  padding: 3px 11px;
  white-space: nowrap;
  flex: none;
}

.layer-info { flex: 1; display: flex; gap: 12px; align-items: baseline; min-width: 0; }
#layer-name { font-weight: 600; white-space: nowrap; font-size: 13.5px; }
#layer-blurb { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#btn-help, #btn-sound, #btn-music {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; font-weight: 700;
  display: grid; place-items: center;
  flex: none;
}
#btn-sound .snd-off, #btn-music .snd-off { display: none; }
#btn-sound[aria-pressed="false"], #btn-music[aria-pressed="false"] { color: var(--dim); }
#btn-sound[aria-pressed="false"] .snd-on { display: none; }
#btn-sound[aria-pressed="false"] .snd-off, #btn-music[aria-pressed="false"] .snd-off { display: inline; }

/* --- the menu -------------------------------------------------------- */

.menu { position: relative; flex: none; }

.menu-button {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  color: var(--muted);
}
.menu-button:hover:not(:disabled) { color: var(--text); }
.menu-button[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(201, 164, 92, 0.3);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 35;
  width: 300px;
  max-height: calc(100vh - var(--topbar-h) - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  animation: fadeUp 160ms var(--ease);
}
.menu-panel.hidden { display: none; }

.menu-panel button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 11px;
  background: transparent;
  border: none;
  border-radius: 8px;
}
.menu-panel button:hover:not(:disabled) {
  background: rgba(52, 60, 82, 0.7);
  transform: none;
}
.menu-panel .mi-title { font-size: 13px; font-weight: 600; color: var(--text); }
.menu-panel .mi-layer {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 10px;
  padding: 1px 7px;
}
.menu-section {
  padding: 10px 11px 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.menu-section:first-child { padding-top: 6px; }
.menu-panel .mi-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* --- controls -------------------------------------------------------- */

select, button, input {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 11px;
  transition: background var(--fast), border-color var(--fast),
              color var(--fast), transform var(--fast), box-shadow var(--fast);
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

button { cursor: pointer; }
button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: rgba(52, 60, 82, 0.7);
  transform: translateY(-1px);
}
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.35; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  color: #1a1405;
  border-color: var(--accent);
  font-weight: 650;
  letter-spacing: 0.01em;
}
button.primary:hover:not(:disabled) {
  background: #d8b673;
  border-color: #d8b673;
  box-shadow: 0 4px 18px rgba(201, 164, 92, 0.22);
}
button.ghost { background: transparent; }

/* --- page layout ------------------------------------------------------ */

/* Two columns, and only the left one scrolls: the sky is the main screen and
   the rail beside it -- clock, sights, position -- stays put while you work
   down the page. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  align-items: start;
  gap: var(--gap);
  padding: var(--gap);
}

.stage {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.sky-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sky-wrap {
  position: relative;
  width: 100%;
  height: var(--sky-h);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #03050b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 0 80px rgba(0, 0, 0, 0.5);
}

#sky {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
#sky.dragging { cursor: grabbing; }
#sky:focus { outline: none; }
#sky:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The wheel over the sky zooms rather than scrolls, so the way down the page
   is spelled out instead of left to be discovered. */
.scroll-cue {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.scroll-cue:hover:not(:disabled) {
  color: var(--text);
  background: rgba(52, 60, 82, 0.5);
}
.scroll-cue svg { animation: nudgeDown 2.6s var(--ease) infinite; }

@keyframes nudgeDown {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(3px); }
}

/* --- hints ------------------------------------------------------------- */

.sky-controls .seg.hidden { display: none; }
#btn-hints.active { color: var(--accent); background: var(--accent-dim); }

/* Opens under the sky's top-right controls (above them on a phone, where
   the controls sit along the bottom edge). */
.hint-panel {
  position: absolute;
  top: 54px; right: 14px;
  z-index: 4;
  width: min(330px, calc(100% - 28px));
  max-height: calc(100% - 68px);
  overflow-y: auto;
  padding: 10px 10px 8px;
  border-radius: 11px;
  background: rgba(10, 16, 30, 0.92);
  border: 1px solid rgba(201, 164, 92, 0.32);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  font-size: 12.5px;
  animation: fadeUp 200ms var(--ease);
}
.hint-panel.hidden { display: none; }
.hint-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 4px 8px;
  font-family: var(--serif); font-size: 15px; font-weight: 600;
}
.hint-head .muted { font-family: var(--sans); font-size: 12px; font-weight: 400; }
.hint-close { margin-left: auto; padding: 2px 8px; font-size: 12px; }

.hint-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  text-align: left;
  background: var(--raised);
}
.hint-row:hover:not(:disabled) { transform: none; }
.hint-title { font-weight: 600; }
.hint-cost { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.hint-blurb { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.45; }
.hint-row.used { opacity: 0.55; }
.hint-row.used .hint-cost { color: var(--muted); }
.hint-row.armed { border-color: var(--accent); background: var(--accent-dim); }

.hint-note { margin: 8px 4px 0; font-size: 12px; color: var(--gold); line-height: 1.45; }
.hint-log {
  list-style: none; margin: 10px 0 0; padding: 8px 4px 0;
  border-top: 1px solid var(--line);
}
.hint-log li { margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
.hint-log li b { font-weight: 600; }
/* Check my fix: banded verdicts per sight. */
.verdict-agree { color: #8fd0bf; font-weight: 600; }
.verdict-close { color: var(--gold); font-weight: 600; }
.verdict-far { color: var(--warn); font-weight: 600; }

@media (max-width: 720px) {
  .hint-panel { top: auto; bottom: 84px; right: 10px; left: 10px; width: auto; max-height: 60%; }
}

/* --- the clock strip under the sky (narrow layouts only) --------------- */

.clock-strip { display: none; }

.cs-top { display: flex; align-items: center; gap: 12px; }
.cs-time { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#cs-utc {
  color: var(--gold);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-gst { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; }
#cs-gst { font-size: 13px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.cs-fix { flex: none; padding: 10px 16px; }

.cs-controls { display: flex; gap: 6px; }
.cs-controls button {
  flex: 1; min-width: 0;
  min-height: 42px;
  padding: 0;
  font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* Holding a clock button repeats it, so a long press must not open the
   phone's text-selection or callout menu instead. */
[data-advance] {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The last sight, read out where the thumb already is: on a phone the sight
   log is a long scroll away, and a tap on a star shows no tooltip. */
.cs-sight {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  padding: 5px 2px 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  font-family: var(--mono); font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cs-sight:hover:not(:disabled) { background: transparent; transform: none; color: var(--text); }
.cs-sight .cs-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cs-sight .cs-alt { color: var(--accent); white-space: nowrap; }
.cs-sight .cs-more { margin-left: auto; white-space: nowrap; color: var(--dim); }
.cs-sight.fresh .cs-alt { animation: sightFlash 900ms var(--ease); }

@keyframes sightFlash {
  0%   { color: #fff; text-shadow: 0 0 10px var(--accent); }
  100% { color: var(--accent); text-shadow: none; }
}

@media (max-width: 1080px) {
  .clock-strip {
    display: flex; flex-direction: column; gap: 9px;
    padding: 11px 12px 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
}

/* --- what you scroll down to ----------------------------------------- */

.stage-extra { display: flex; flex-direction: column; gap: var(--gap); }

.brief h2 { margin-bottom: 18px; }
.brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px 26px;
}
.brief-grid h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.brief-grid p { margin: 0 !important; font-size: 12.5px; line-height: 1.6; }
.brief-grid i { color: var(--gold); font-style: normal; }
.brief #btn-help-2 { margin-top: 18px; }

/* --- floating sky controls ------------------------------------------- */

.sky-controls { position: absolute; display: flex; gap: 9px; z-index: 3; }
.sky-controls.top-left  { top: 14px; left: 14px; }
.sky-controls.top-right { top: 14px; right: 14px; }

.seg {
  display: flex;
  background: rgba(10, 16, 30, 0.7);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.seg button {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 7px 13px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--muted);
  transform: none;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--text); background: var(--accent-dim); transform: none; }
.seg button.active { color: var(--accent); background: rgba(201, 164, 92, 0.16); }

/* The language switch: the same control in the top bar, the menu and the
   welcome card. Each language is named in itself. */
.seg.lang-switch { box-shadow: none; backdrop-filter: none; flex: none; }
.lang-switch button { font-family: var(--sans); }
.topbar-lang button { padding: 5px 9px; font-size: 11.5px; font-family: var(--mono); }
.menu-lang {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 11px;
}
.menu-panel .lang-switch button {
  display: block;
  padding: 5px 10px;
  border-radius: 0;
  font-size: 12px;
}
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.sky-hintbar {
  position: absolute;
  bottom: 14px;
  right: 16px;
  display: flex;
  gap: 18px;
  font-size: 11.5px;
  background: rgba(10, 16, 30, 0.62);
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 3;
  opacity: 0.75;
  transition: opacity var(--med);
}
.sky-wrap:hover .sky-hintbar { opacity: 1; }
.sky-hintbar b { color: var(--text); font-weight: 600; }

.star-tip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: rgba(10, 15, 28, 0.93);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
  transform: translate(14px, -50%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  animation: tipIn 120ms var(--ease);
}
.star-tip.hidden { display: none; }
.star-tip .tip-name { color: var(--accent); font-weight: 600; }
.star-tip .tip-sub { color: var(--muted); }

/* The loupe. Placed by main.js above the finger, centred on its own middle. */
.loupe {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate(-50%, -50%);
}
.loupe.hidden { display: none; }
.loupe canvas {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(10, 15, 28, 0.55);
}
.loupe-caption {
  background: rgba(10, 15, 28, 0.93);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  color: var(--muted);
}
.loupe-caption { text-align: center; line-height: 1.5; }
.loupe-caption b { color: var(--accent); font-weight: 600; }

/* The sight log as a bottom sheet. */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet.hidden { display: none; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 14, 0.55);
  opacity: 0;
  transition: opacity var(--med);
}
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 72vh; max-height: 72svh;
  display: flex; flex-direction: column;
  background: var(--panel-solid);
  border-top: 1px solid var(--line-strong);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--med);
  touch-action: none;
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet.dragging .sheet-panel { transition: none; }
.sheet-grip {
  flex: none;
  align-self: stretch;
  height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: grab;
}
.sheet-grip::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--line-strong);
}
.sheet-grip:hover:not(:disabled) { background: transparent; transform: none; }
.sheet-body { overflow-y: auto; touch-action: pan-y; min-height: 0; }
.sheet-body > .instrument { margin: 0; border: none; background: transparent; padding: 0 0 4px; }

@keyframes tipIn { from { opacity: 0; transform: translate(8px, -50%); } }

/* --- the rail -------------------------------------------------------- */

/* Sticky, with its own scrollbar: the clock and the position box stay in
   reach no matter how far down the page the sky has been left behind. */
.rail {
  position: sticky;
  top: calc(var(--topbar-h) + var(--gap));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-height: calc(100vh - var(--topbar-h) - var(--gap) * 2);
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}

.instrument {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  backdrop-filter: blur(10px);
  transition: border-color var(--med), box-shadow var(--med), background var(--med);
}

.instrument h2 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--med);
}

.step {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0;
  flex: none;
  transition: background var(--med), color var(--med),
              border-color var(--med), box-shadow var(--med);
}

/* The active step is lifted, not shouted. */
.instrument[data-active="true"] {
  border-color: rgba(201, 164, 92, 0.28);
  box-shadow: 0 0 0 1px rgba(201, 164, 92, 0.06), 0 8px 30px rgba(0, 0, 0, 0.3);
}
.instrument[data-active="true"] .step {
  background: var(--accent); color: #1a1405; border-color: var(--accent);
  box-shadow: 0 0 14px rgba(201, 164, 92, 0.35);
}
.instrument[data-active="true"] h2 { color: var(--text); }

.instrument p { margin: 9px 0 0; }

details.instrument summary { list-style: none; cursor: pointer; }
details.instrument summary::-webkit-details-marker { display: none; }
details.instrument summary h2 { margin: 0; transition: color var(--fast); }
details.instrument summary:hover h2 { color: var(--text); }
details.instrument summary h2::after { content: ' ▸'; margin-left: auto; }
details.instrument[open] summary h2 { margin-bottom: 14px; }
details.instrument[open] summary h2::after { content: ' ▾'; }
details.instrument[open] .toggles { animation: fadeUp 220ms var(--ease); }

/* --- chronometer ----------------------------------------------------- */

.readout { font-family: var(--mono); }
.readout.big {
  font-size: 21px;
  color: var(--gold);
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
}
.readout-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.time-controls { display: flex; gap: 6px; margin-top: 12px; }
.time-controls button {
  flex: 1; padding: 7px 0;
  font-family: var(--mono); font-size: 11.5px;
}

/* --- sight log ------------------------------------------------------- */

.log {
  max-height: 190px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12px;
  margin: 0 -4px;
  padding: 0 4px;
}
.log .empty-note { font-family: inherit; margin: 0; }

.sight-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  animation: fadeUp 240ms var(--ease);
}
.sight-row:last-child { border-bottom: none; }
.sight-row .alt { color: var(--accent); font-variant-numeric: tabular-nums; }
.sight-row .bearing { color: var(--dim); font-size: 11px; }
.sight-row .drop {
  background: none; border: none; color: var(--dim);
  padding: 2px 6px; font-size: 15px; line-height: 1;
  border-radius: 5px;
}
.sight-row .drop:hover {
  color: var(--warn); background: rgba(204, 96, 74, 0.12);
  transform: none; border-color: transparent;
}

.row { display: flex; gap: 9px; margin-top: 12px; }
.row button { flex: 1; }

.fix { margin-top: 14px; font-family: var(--mono); font-size: 12px; }
.fix:empty { margin-top: 0; }
.fix .fix-pos {
  color: var(--accent); font-size: 15px;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  animation: fadeUp 240ms var(--ease);
}
.fix .residual { color: var(--muted); margin-top: 3px; }

.warnbox {
  color: var(--warn);
  background: rgba(204, 96, 74, 0.07);
  border: 1px solid rgba(204, 96, 74, 0.25);
  border-radius: 9px;
  padding: 11px 13px;
  margin-top: 11px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  animation: fadeUp 240ms var(--ease);
}

.alt-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.alt-fix {
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: left;
  padding: 7px 11px;
  background: rgba(204, 96, 74, 0.09);
  border-color: rgba(204, 96, 74, 0.3);
  color: var(--text);
}
.alt-fix:hover {
  border-color: var(--warn);
  background: rgba(204, 96, 74, 0.17);
}

/* --- the position box ------------------------------------------------- */

.position-box {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.position-box h2 { margin: 0; }

.chart-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color var(--fast);
}
.chart-wrap:hover { border-color: var(--line-strong); }
.chart-wrap:focus-within { border-color: var(--accent); }

/* A thumbnail, deliberately: fine work happens full screen. */
.chart-wrap.mini { height: 150px; }

/* Absolutely positioned inside .chart-wrap, and that is load-bearing rather
   than cosmetic. A canvas in normal flow uses its own height ATTRIBUTE as its
   intrinsic size, while _resize() sets that attribute from the measured box --
   so the two chase each other and the chart grows a hundred pixels past its
   grid row on every frame. Taking it out of flow breaks the loop: the wrapper
   decides the size, the canvas only ever follows. */
#chart, #chart-big {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  outline: none;
}
#chart.dragging, #chart-big.dragging { cursor: grabbing; }

.chart-wrap.big { flex: 1; min-height: 0; }

.chart-controls {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.chart-controls button {
  width: 26px; height: 26px;
  padding: 0;
  display: grid; place-items: center;
  font-size: 13px;
  background: rgba(10, 16, 30, 0.78);
  backdrop-filter: blur(8px);
}

/* The route to the full-screen chart is the loudest thing in this box: the
   thumbnail is for orientation, the placing happens big. */
.expand-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(201, 164, 92, 0.3);
}
.expand-cta:hover:not(:disabled) {
  color: var(--accent);
  background: rgba(201, 164, 92, 0.22);
  border-color: rgba(201, 164, 92, 0.5);
}

.coord-fields { display: flex; gap: 9px; }
.coord-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.coord-field > span, .coord-field > label {
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.coord-field input { font-family: var(--mono); width: 100%; min-width: 0; }

/* Latitude carries its own lock. */
.lat-row { display: flex; gap: 5px; min-width: 0; }
.lat-row input { flex: 1; }
.lock-btn {
  flex: none; padding: 0 9px;
  font-size: 11.5px; letter-spacing: 0.02em;
}
#in-lat[readonly] {
  color: var(--accent);
  border-color: rgba(201, 164, 92, 0.45);
  background: var(--accent-dim);
  cursor: default;
}
.lock-btn.locked {
  color: var(--accent);
  border-color: rgba(201, 164, 92, 0.45);
  opacity: 1;
}

.lat-lock-note {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  border-left: 2px solid var(--accent);
  background: rgba(201, 164, 92, 0.08);
  font-size: 12.5px; line-height: 1.5;
  animation: fadeUp 320ms var(--ease);
}
.lat-lock-note.hidden { display: none; }
.lat-lock-note b { font-family: var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.lat-lock-note.poor { border-left-color: var(--warn); background: rgba(204, 96, 74, 0.08); }
.lat-lock-note.poor b { color: var(--warn); }

/* The sight budget and the instrument's terms. */
.sight-count { text-transform: none; letter-spacing: 0.02em; font-family: var(--mono); }
.sight-count.over { color: var(--warn); }
.sight-rules { margin: -6px 0 10px; }
.sight-rules.hidden { display: none; }
.sight-rules b { color: var(--text); font-weight: 600; }

.score-sights {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
.score-sights.hidden { display: none; }
.score-sights .cost { color: var(--warn); }
.score-sights .ok { color: var(--accent); }

.chart-readout {
  position: absolute;
  left: 8px; top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(10, 16, 30, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
.chart-readout.static {
  position: static;
  backdrop-filter: none;
  background: rgba(10, 16, 30, 0.5);
  line-height: 1.7;
}
.chart-readout b { color: var(--accent); font-weight: 600; }

.position-box #btn-submit { width: 100%; padding: 10px; }

/* --- the full-screen chart ------------------------------------------- */

.overlay.fullscreen { padding: 0; background: rgba(5, 8, 14, 0.92); }

.chart-modal {
  background: var(--panel-solid);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 22px 14px;
  animation: cardIn 220ms var(--ease);
}
.chart-modal header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.chart-modal header h2 {
  margin: 0; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.chart-modal header .chart-readout { margin-left: auto; font-size: 12px; }
.chart-modal header button { width: 30px; height: 30px; padding: 0; flex: none; }
.chart-modal footer {
  display: flex; align-items: center; gap: 12px;
}
.chart-modal footer > span { flex: 1; }
.chart-modal footer button { min-width: 140px; }

.result-actions { display: flex; gap: 10px; margin-top: 24px; }
.result-actions button { flex: 1; padding: 11px; }

/* --- hint toggles ---------------------------------------------------- */

.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px 18px; }
.toggles label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; cursor: pointer; color: var(--muted);
  transition: color var(--fast);
}
.toggles label:hover { color: var(--text); }
.toggles input { accent-color: var(--accent); cursor: pointer; }
/* What the layer takes away: shown, so the player knows it exists, but off. */
.toggles label.locked { color: var(--dim); cursor: not-allowed; opacity: 0.6; }
.toggles label.locked:hover { color: var(--dim); }
.toggles label.locked input { cursor: not-allowed; }
.toggles .hint-toggles-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11.5px; }

/* --- overlays -------------------------------------------------------- */

.overlay {
  position: fixed; inset: 0;
  background: rgba(5, 8, 14, 0.82);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  z-index: 40;
  padding: 24px;
  animation: overlayIn 200ms var(--ease);
}
.overlay.hidden { display: none; }

/* Scroll position is kept, only frozen: the page is still where it was when
   the overlay closes. */
body.overlay-open { overflow: hidden; }

.result-card {
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 32px 36px;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: cardIn 280ms var(--ease);
}
.result-card h2 {
  margin: 0; font-size: 36px;
  font-family: var(--mono); color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.verdict { font-size: 15px; margin: 12px 0 22px; }

/* --- score breakdown ------------------------------------------------- */

.score-rows { display: flex; flex-direction: column; gap: 14px; text-align: left; }

.score-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--muted);
}
.score-row-head .pts {
  font-family: var(--mono); color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score-bar {
  height: 7px;
  background: rgba(150, 130, 95, 0.16);
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 5px;
}
.score-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #a8853f, var(--accent));
  border-radius: 4px;
  transition: width 700ms var(--ease);
}
.score-bar i.poor { background: linear-gradient(90deg, #7e2f24, var(--warn)); }

.score-row-sub {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.score-distance {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.diagnostics { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
.diagnostics li {
  font-size: 12.5px; line-height: 1.5;
  padding: 8px 11px; margin-top: 7px;
  border-radius: 8px;
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 130, 95, 0.07);
}
.diagnostics li.bad  { border-left-color: var(--warn); background: rgba(204, 96, 74, 0.08); }
.diagnostics li.good { border-left-color: var(--accent); background: rgba(201, 164, 92, 0.08); }
.diagnostics li.note { color: var(--muted); }

.reveal { margin-top: 22px; font-weight: 600; font-size: 15px; }

/* --- the result, docked over the chart --------------------------------- */

/* No backdrop and no pointer capture of its own: the chart behind it stays
   lit and can still be panned and zoomed while the card is up. Clear of the
   chart's header and footer, so "Next round" is reachable from either. */
.overlay.docked {
  background: none;
  backdrop-filter: none;
  pointer-events: none;
  place-items: center end;
  padding: 72px 28px 76px;
  animation: none;
}
.overlay.docked .result-card {
  pointer-events: auto;
  width: 400px;
  max-height: 100%;
  padding: 26px 28px;
  background: rgba(13, 18, 32, 0.94);
  backdrop-filter: blur(14px);
  animation: dockIn 380ms var(--ease);
}
.overlay.docked .result-card h2 { font-size: 34px; }

@keyframes dockIn {
  from { opacity: 0; transform: translateX(28px); }
}

/* The card's parts arrive in order: score, verdict, the two halves, the
   rest. --i is set per child by main.js. */
.result-card.stagger > * {
  animation: fadeUp 420ms var(--ease) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
/* The longitude bar follows the latitude bar rather than racing it. */
#r-lon-bar { transition-delay: 220ms; }

#btn-chart-result.hidden, #btn-chart-lock-lat.hidden { display: none; }

.circle-legend { margin-top: 14px; text-align: left; }
.circle-legend.hidden { display: none; }
.circle-legend-head { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.circle-legend-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; padding: 3px 0;
}
.circle-legend-row i {
  flex: none; width: 14px; height: 3px; border-radius: 2px;
}
.circle-legend-row span:nth-of-type(2) {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Narrow: a bottom sheet over the lower half of the chart. */
@media (max-width: 860px) {
  .overlay.docked { place-items: end stretch; padding: 0; }
  .overlay.docked .result-card {
    width: auto; max-width: none;
    max-height: 58vh; max-height: 58dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding: 20px 20px 18px;
    animation-name: sheetIn;
  }
  .overlay.docked .result-card h2 { font-size: 28px; }
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(40px); }
}

.help-card {
  max-width: 600px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
  padding: 32px 36px;
}
.help-card h2 { font-family: inherit; font-size: 23px; color: var(--gold); }
.help-card h3 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 8px;
}
.help-card p { margin: 12px 0; font-size: 14px; }
.help-card p.tight { margin: 9px 0; }
.help-card ol { margin: 9px 0; padding-left: 22px; font-size: 14px; }
.help-card li { margin: 8px 0; }
.help-card b { color: var(--text); }
.help-card i { color: var(--gold); font-style: normal; }
.help-card .credits a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.help-card .credits a:hover { color: var(--text); }

/* Help that names the wheel and the keys is for a mouse; a phone gets its
   own line. */
.only-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .only-fine { display: none; }
  .only-touch { display: inline; }
}

/* --- the tutorial ----------------------------------------------------- */

.tutorial-card {
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  width: min(1040px, 94vw);
  height: min(760px, 90vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: cardIn 260ms var(--ease);
  overflow: hidden;
}

.tutorial-card > header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.tutorial-card > header h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.tutorial-card > header button {
  margin-left: auto;
  align-self: center;
  width: 30px; height: 30px; padding: 0;
  flex: none;
}

.tutorial-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
}

/* The lesson list doubles as the table of contents and the progress bar:
   where you are, what is left, and what the whole thing covers, in one column
   that never moves. */
.tutorial-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.tutorial-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
}
.tutorial-nav button:hover:not(:disabled) {
  background: rgba(52, 60, 82, 0.6);
  color: var(--text);
  transform: none;
}
.tutorial-nav button .n {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--raised);
  font-family: var(--mono);
  font-size: 10.5px;
}
.tutorial-nav button.active { color: var(--text); background: var(--accent-dim); }
.tut-group {
  padding: 12px 10px 4px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.tut-group:first-child { padding-top: 2px; }
.tutorial-nav button.active .n {
  background: var(--accent); color: #1a1405; border-color: var(--accent);
}

.tutorial-body {
  overflow-y: auto;
  padding: 22px 32px 30px;
  outline: none;
}
.tutorial-body .lesson-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.08em;
}
.tutorial-body h2 {
  margin: 6px 0 16px;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
}
.tutorial-body h3 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px;
}
.tutorial-body p { margin: 12px 0; font-size: 14px; max-width: 62ch; }
.tutorial-body .lesson-lead { font-size: 15px; color: var(--text); }
.tutorial-body b { color: var(--text); font-weight: 600; }
.tutorial-body i { color: var(--gold); font-style: normal; }

.tutorial-body svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 620px;
  margin: 20px 0;
  background: rgba(10, 16, 30, 0.5);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* The worked example is the point of each lesson, so it is the one block that
   looks like an instrument rather than like prose. */
.worked {
  margin: 20px 0;
  max-width: 62ch;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  background: rgba(201, 164, 92, 0.05);
}
.worked h4 {
  margin: 0 0 10px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.worked-rows {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  font-size: 12.5px;
}
.worked-rows dt { color: var(--muted); }
.worked-rows dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.worked-rows dd b { color: var(--accent); font-weight: 600; }
.worked-rows .rival { color: var(--warn); }
.worked-note {
  margin: 12px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--muted);
  line-height: 1.6;
}

.lesson-steps, .lesson-watch { max-width: 62ch; padding-left: 20px; font-size: 14px; }
.lesson-steps li, .lesson-watch li { margin: 10px 0; }
.lesson-watch { list-style: none; padding-left: 0; }
.lesson-watch li {
  padding: 9px 12px;
  border-radius: 8px;
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 130, 95, 0.07);
  font-size: 13px;
}
.ui {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 5px;
  padding: 1px 6px;
}

.tutorial-card > footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
}
.tutorial-card > footer > span { flex: 1; }
.tutorial-card > footer button { min-width: 120px; }

.help-actions { display: flex; gap: 10px; margin-top: 24px; }
.help-actions button { flex: 1; padding: 11px; }
/* The briefing is a long card; its way out stays in sight at the foot of it
   rather than waiting below the credits. */
.help-card .help-actions {
  position: sticky; bottom: -32px;
  margin: 24px -36px -32px;
  padding: 14px 36px 22px;
  background: var(--panel-solid);
  border-top: 1px solid var(--line);
}
.help-card:focus { outline: none; }
@media (max-width: 720px) {
  .help-card .help-actions { bottom: -26px; margin: 20px -22px -26px; padding: 12px 22px 18px; }
}

/* --- sidereal time and the almanac -------------------------------------- */

/* GST is half of every longitude, so it gets the second-biggest number in
   the rail, right under the date. */
.gst-line { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; }
.gst-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 6px;
  padding: 1px 7px;
  cursor: help;
}
#gst-readout { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.deg { color: var(--muted); font-size: 0.86em; }

.sight-row .gst { font-size: 11px; color: var(--accent); opacity: 0.85; }
.sight-row .gst .deg { color: var(--dim); }

.almanac-note { margin: 0 0 10px !important; }
.almanac-tools { display: flex; gap: 8px; margin-bottom: 8px; }
.almanac-tools input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 12px; }
.almanac-tools button { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }
.almanac-scroll {
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.almanac-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.almanac-table th {
  position: sticky;
  top: 0;
  background: var(--panel-solid);
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
}
.almanac-table td { padding: 5px 9px; border-bottom: 1px solid rgba(150, 130, 95, 0.08); }
.almanac-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.almanac-table td .deg { display: block; font-size: 10.5px; }
.almanac-table tr:hover td { background: rgba(201, 164, 92, 0.05); }

/* --- the bonus question ------------------------------------------------ */

/* Under the View / All-sky switch: on the sky, because it is about the sky,
   and small, because it is optional. */
.bonus-chip {
  position: absolute;
  top: 58px;
  left: 14px;
  z-index: 3;
  width: min(300px, calc(100% - 28px));
  padding: 10px 12px 11px;
  border-radius: 11px;
  background: rgba(10, 16, 30, 0.82);
  border: 1px solid rgba(224, 192, 122, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  animation: fadeUp 220ms var(--ease);
}
.bonus-chip.hidden { display: none; }
.bonus-head {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.bonus-star { margin-right: 2px; }
.bonus-head { display: flex; align-items: center; gap: 4px; }
.bonus-collapse {
  margin: 0 0 0 auto !important;
  width: 22px; height: 22px; padding: 0 !important;
  display: grid; place-items: center;
  background: transparent; border-color: transparent;
  color: var(--muted);
}
.bonus-chip.collapsed { width: auto; padding: 0; }
.bonus-expand {
  margin: 0 !important;
  padding: 7px 12px !important;
  background: transparent;
  border: none;
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bonus-expand:hover:not(:disabled) { background: rgba(224, 192, 122, 0.08); transform: none; }
.bonus-q { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.bonus-text { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.bonus-chip button { margin-top: 9px; padding: 5px 12px; font-size: 12px; }
.bonus-chip.answering {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(224, 192, 122, 0.25), 0 6px 22px rgba(0, 0, 0, 0.4);
}
.bonus-chip.answering .bonus-head { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; }
.bonus-chip.right { border-color: rgba(201, 164, 92, 0.45); }
.bonus-chip.right .bonus-head { color: var(--accent); }
.bonus-chip.wrong { border-color: rgba(204, 96, 74, 0.35); }
.bonus-chip.wrong .bonus-head { color: var(--warn); }

#sky.answering { cursor: crosshair; }

.result-bonus {
  margin-top: 16px;
  padding: 10px 13px;
  border-radius: 9px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: rgba(224, 192, 122, 0.05);
}
.result-bonus.hidden { display: none; }
.result-bonus b { color: var(--text); }
.result-bonus.right { border-left-color: var(--accent); background: rgba(201, 164, 92, 0.07); }
.result-bonus.right b { color: var(--accent); }

/* Far from the present the year is the headline; this says it in words. */
.era-readout {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gold);
  opacity: 0.85;
}
.era-readout.hidden { display: none; }

/* --- training: the coach ---------------------------------------------- */

/* Above every overlay (40), because the coach speaks over the full-screen
   chart and over the result card -- that is where half its lines belong. */
.coach {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 45;
  width: 372px;
  max-height: min(560px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid rgba(224, 192, 122, 0.35);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(224, 192, 122, 0.06);
  backdrop-filter: blur(12px);
  animation: cardIn 240ms var(--ease);
  overflow: hidden;
}
.coach.hidden { display: none; }

.coach header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px 16px;
}
.coach-kicker {
  flex: 1;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.coach header button {
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  font-size: 13px;
  color: var(--muted);
  border-color: transparent;
}
.coach header button:hover:not(:disabled) { color: var(--text); transform: none; }

.coach-progress { height: 2px; background: var(--line); }
.coach-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 420ms var(--ease);
}

.coach-body {
  padding: 14px 16px 4px;
  overflow-y: auto;
  min-height: 0;
}
.coach h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.coach-text { font-size: 13px; line-height: 1.6; color: #c3cde6; }
.coach-text b { color: var(--text); font-weight: 600; }
.coach-text i { color: var(--gold); font-style: normal; }
.coach-aside {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.coach-p { margin: 10px 0 0; }
.coach-list { margin: 8px 0 0; padding-left: 18px; }
.coach-list li { margin: 3px 0; }

/* The instruction is the one line that must survive minimising. */
.coach-task {
  margin: 10px 16px 0;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--accent-dim);
  border: 1px solid rgba(201, 164, 92, 0.3);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}
.coach-task::before { content: '▸  '; }
.coach-task.done { background: rgba(201, 164, 92, 0.22); }
.coach-task.done::before { content: ''; }
.coach-task.hidden { display: none; }

.coach-note {
  margin: 8px 16px 0;
  padding: 8px 11px;
  border-radius: 8px;
  border-left: 2px solid var(--gold);
  background: rgba(224, 192, 122, 0.08);
  color: #e9dcc8;
  font-size: 12px;
  line-height: 1.55;
  animation: fadeUp 200ms var(--ease);
}
.coach-note.hidden { display: none; }
.coach-note.good {
  border-left-color: var(--accent);
  background: rgba(201, 164, 92, 0.08);
  color: #cdeee4;
}

.coach-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 16px 0;
}
.coach-choices.hidden { display: none; }
.coach-choices button {
  text-align: left;
  padding: 9px 12px;
  font-size: 12.5px;
  border-color: var(--line-strong);
}
.coach-choices button.wrong {
  opacity: 0.5;
  text-decoration: line-through;
  border-color: rgba(204, 96, 74, 0.4);
}
.coach-choices button.right {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

.coach footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 14px;
}
.coach footer .hidden { display: none; }
.coach footer #coach-showme { margin-right: auto; font-size: 12px; }
.coach footer .primary { min-width: 104px; }

.coach.minimised .coach-body,
.coach.minimised .coach-note,
.coach.minimised footer { display: none; }
.coach.minimised .coach-task { margin-bottom: 12px; }

/* What the coach is pointing at. Inset, so it survives the overflow:hidden
   on the segmented control groups that hold half the targets. */
.coach-target {
  box-shadow: inset 0 0 0 2px var(--gold) !important;
  color: var(--gold) !important;
  animation: coachPulse 1.5s var(--ease) infinite;
}
button.primary.coach-target { color: #1a1405 !important; }
@keyframes coachPulse {
  0%, 100% { background-color: rgba(224, 192, 122, 0.08); }
  50%      { background-color: rgba(224, 192, 122, 0.26); }
}

/* --- welcome --------------------------------------------------------- */

.welcome-card { max-width: 500px; text-align: left; }
.welcome-card h2 {
  font-family: inherit;
  font-size: 26px;
  margin: 6px 0 14px;
}
.welcome-card p { margin: 10px 0; font-size: 14px; }
.welcome-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.welcome-actions { display: flex; gap: 10px; margin: 22px 0 14px; }
.welcome-actions button { flex: 1; padding: 11px; }

/* --- result card: where next ----------------------------------------- */

.result-guide {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: rgba(224, 192, 122, 0.06);
  font-size: 12.5px;
  line-height: 1.55;
}
.result-guide.hidden { display: none; }
.result-guide.up {
  border-left-color: var(--accent);
  background: rgba(201, 164, 92, 0.07);
}
.result-guide p { margin: 0 0 10px; }
.result-guide b { color: var(--text); }
.result-guide button { width: 100%; padding: 9px; }
.result-guide button + button { margin-top: 8px; }

/* --- motion ---------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes overlayIn { from { opacity: 0; } }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- narrow ----------------------------------------------------------- */

@media (max-width: 1080px) {
  /* One column, and the rail comes straight after the sky rather than under
     a screenful of prose: the clock and the position box are what you reach
     for next. `display: contents` lets the two halves of .stage separate. */
  /* The clock strip sits under the sky here, and sky and strip share one
     screen: the strip's height comes out of the sky's. svh, where the
     browser has it, is the height with the phone's address bar showing, so
     the strip is not hidden under it on first load. */
  :root {
    --sky-h: clamp(340px, calc(100vh - var(--topbar-h) - 210px), 900px);
    --sky-h: clamp(340px, calc(100svh - var(--topbar-h) - 210px), 900px);
  }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .stage { display: contents; }
  .sky-pane { order: 1; }
  .rail { order: 2; }
  .stage-extra { order: 3; }

  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .chart-wrap.mini { height: 240px; }
  .chart-modal { padding: 14px 16px 12px; }
  .chart-modal footer { flex-wrap: wrap; }
  .chart-modal footer > span { flex: 1 0 100%; order: 3; }
  .chart-modal footer button { flex: 1; min-width: 0; }
}

@media (max-width: 720px) {
  :root {
    --sky-h: clamp(320px, calc(100vh - var(--topbar-h) - 220px), 620px);
    --sky-h: clamp(320px, calc(100svh - var(--topbar-h) - 220px), 620px);
  }
  .topbar { gap: 10px; padding: 0 12px; }
  .layer-info { display: none; }
  #layer-select {
    min-width: 0;
    max-width: 160px;
    padding: 7px 8px;
    font-size: 12px;
    text-overflow: ellipsis;
  }
  .sky-hintbar { display: none; }

  /* Two rows of floating controls will not fit across a phone, so the look
     and zoom group drops to the bottom of the sky -- which the hint bar has
     just vacated -- instead of sliding under the view switch. */
  .sky-controls.top-left  { top: 10px; left: 10px; }
  /* Clear of the "looking 180 alt 30" status the renderer writes along the
     bottom edge of the canvas. */
  .sky-controls.top-right { top: auto; bottom: 34px; right: 10px; left: 10px;
                            justify-content: flex-end; flex-wrap: wrap; }
  .seg button { padding: 7px 10px; }

  .brief-grid { grid-template-columns: 1fr; gap: 16px; }
  .result-card { padding: 26px 22px; }

  /* The readout cannot share a phone's width with the title, so it takes the
     second line rather than crushing the title into a column. */
  .chart-modal header { flex-wrap: wrap; row-gap: 6px; }
  .chart-modal header h2 { flex: 1; white-space: nowrap; }
  .chart-modal header .chart-readout {
    order: 3; flex-basis: 100%; margin-left: 0;
    font-size: 11px; padding: 6px 10px;
  }

  /* The lesson list becomes a strip of numbered chips above the lesson, with
     only the current one spelling its name out. */
  .tutorial-card { width: 100vw; height: 100dvh; border-radius: 0; }
  .tutorial-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .tutorial-nav {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    padding: 10px;
  }
  .tutorial-nav button { flex: none; }
  .tut-group { display: none; }
  .tutorial-nav button span:not(.n) { display: none; }
  .tutorial-nav button.active span:not(.n) { display: inline; }
  .tutorial-card > header { padding: 14px 16px 12px; }
  .tutorial-card > header > span { display: none; }
  .tutorial-body { padding: 18px 16px 24px; }
  .tutorial-card > footer { padding: 12px 16px; }
  .tutorial-card > footer > span { display: none; }
  .tutorial-card > footer button { flex: 1; min-width: 0; }
  .menu-panel { width: 250px; }

  /* On a phone the coach is a bottom sheet; minimised, it is one line. */
  .coach {
    left: 8px; right: 8px; bottom: 8px;
    width: auto;
    max-height: 48vh;
  }
  .coach.minimised .coach-task { margin-top: 8px; }
  /* Room at the foot of the page, so the last of the rail can be scrolled
     clear of the sheet. */
  body.training { padding-bottom: 120px; }
  .welcome-actions { flex-direction: column; }
}

/* --- the logbook ---------------------------------------------------------- */

/* Paper, like the chart and the result card: the same tokens re-pointed, so
   every rule inside reads as ink on parchment. */
.logbook-card {
  --text: var(--parchment-ink);
  --muted: var(--parchment-muted);
  --dim: var(--parchment-muted);
  --line: var(--parchment-line);
  --line-strong: rgba(90, 70, 40, 0.4);
  --raised: rgba(90, 70, 40, 0.06);
  --accent: var(--sea);
  --accent-dim: rgba(31, 107, 99, 0.12);
  width: min(760px, calc(100vw - 32px));
  height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--parchment);
  color: var(--parchment-ink);
  border: 1px solid var(--parchment-line);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: cardIn 260ms var(--ease);
}
.logbook-card > header {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 20px 24px 10px;
}
.logbook-card h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--oxblood); }
.logbook-stats { font-size: 12.5px; color: var(--parchment-muted); }
#logbook-close { margin-left: auto; padding: 4px 10px; color: var(--parchment-ink); border-color: var(--parchment-line); }

.logbook-tabs { display: flex; gap: 6px; padding: 0 24px 12px; border-bottom: 1px solid var(--parchment-line); }
.logbook-tabs button {
  background: transparent; color: var(--parchment-muted);
  border-color: transparent; padding: 5px 12px; font-size: 13px;
}
.logbook-tabs button.active { color: var(--parchment-ink); border-color: var(--parchment-line); background: rgba(90, 70, 40, 0.07); }
.logbook-tabs button:hover:not(:disabled) { background: rgba(90, 70, 40, 0.07); transform: none; }

.logbook-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; }
.log-lede { font-family: var(--serif); font-size: 16px; line-height: 1.55; margin: 14px 0; }

.log-entry { padding: 14px 0 12px; border-bottom: 1px solid var(--parchment-line); }
.log-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.log-date { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.log-era { font-size: 12.5px; color: var(--oxblood); font-style: italic; }
.log-score { margin-left: auto; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--oxblood); }
.log-place { margin: 4px 0 2px; font-size: 13.5px; }
.log-meta { margin: 0; font-size: 12px; color: var(--parchment-muted); }
.log-note {
  display: block; width: 100%; margin-top: 8px;
  resize: none; overflow: hidden;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--parchment-ink);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 6px;
  padding: 4px 6px;
}
.log-note::placeholder { color: rgba(90, 70, 40, 0.45); }
.log-note:hover { border-color: var(--parchment-line); }
.log-note:focus-visible { border-color: var(--sea); box-shadow: none; background: rgba(255, 255, 255, 0.35); }

.log-stars { display: flex; flex-wrap: wrap; gap: 6px; }
.log-star {
  font-size: 12.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px dashed var(--parchment-line); color: rgba(90, 70, 40, 0.5);
}
.log-star.seen { border-style: solid; border-color: rgba(31, 107, 99, 0.45); color: var(--parchment-ink); background: rgba(31, 107, 99, 0.08); }
.log-star i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--sea); }

/* On the result card: the round is in the logbook; this is the player's line. */
.log-note-field { display: block; margin-top: 16px; text-align: left; }
.log-note-field.hidden { display: none; }
.log-note-field span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.log-note-field textarea {
  width: 100%; resize: vertical;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--text); background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .logbook-card { width: 100vw; height: 100dvh; border-radius: 0; }
  .logbook-card > header, .logbook-tabs, .logbook-body { padding-left: 16px; padding-right: 16px; }
}

/* --- training: small things that keep it flowing ------------------------- */

/* The almanac row the coach is pointing at. */
#almanac-body tr.coach-row td {
  background: rgba(201, 164, 92, 0.2);
  color: var(--gold);
  font-weight: 600;
  animation: rowGlow 1.6s var(--ease) 2;
}
@keyframes rowGlow {
  0%, 100% { background: rgba(201, 164, 92, 0.2); }
  50%      { background: rgba(201, 164, 92, 0.42); }
}

/* On a phone the coach is a sheet along the bottom; in training the sky gives
   up a little height so the clock strip stays clear of it. */
@media (max-width: 720px) {
  body.training {
    --sky-h: clamp(260px, calc(100vh - var(--topbar-h) - 320px), 620px);
    --sky-h: clamp(260px, calc(100svh - var(--topbar-h) - 320px), 620px);
  }
}

/* --- the planetarium ------------------------------------------------------ */

/* While a set runs, the main game's position box is put away: the questions
   are the game. */
body.planetarium .position-box,
body.planetarium #cs-fix,
body.planetarium #bonus-chip { display: none !important; }
/* No layers in the planetarium: the menu has nothing to say while a set runs. */
body.planetarium #layer-select { visibility: hidden; }

.planet-card {
  position: fixed;
  left: 22px; bottom: 22px;
  z-index: 45;
  width: 360px;
  max-height: min(560px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid rgba(201, 164, 92, 0.38);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  animation: cardIn 240ms var(--ease);
  overflow: hidden;
}
.planet-card.hidden { display: none; }
.planet-card header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.planet-kicker {
  flex: 1; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
#planet-exit { padding: 2px 8px; font-size: 12px; }

.planet-progress { display: flex; gap: 6px; padding: 2px 14px 8px; }
.planet-progress i {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(201, 164, 92, 0.16);
}
.planet-progress i.now { background: var(--accent); }
.planet-progress i.good { background: #8fd0bf; }
.planet-progress i.part { background: var(--gold); opacity: 0.75; }
.planet-progress i.miss { background: var(--warn); opacity: 0.75; }

.planet-body { padding: 4px 16px 6px; overflow-y: auto; }
.planet-label { font-size: 11.5px; color: var(--muted); }
.planet-body h3 { margin: 4px 0 6px; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.planet-hint { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.planet-instr { margin: 0 0 8px; font-size: 13px; color: var(--accent); }
.planet-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.planet-row input { flex: 1; min-width: 0; font-family: var(--mono); }
.planet-row .muted { flex: 1; }
.planet-error { margin: 0 0 8px; font-size: 12px; color: var(--warn); }
.planet-unit { font-size: 12.5px; color: var(--muted); }
.planet-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.planet-choices button { padding: 7px 8px; font-size: 12.5px; text-align: left; }
.planet-year { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.planet-year input { flex: 1; accent-color: var(--accent); }
.planet-year output { min-width: 84px; text-align: right; font-family: var(--mono); color: var(--gold); }

.planet-feedback {
  margin: 4px 0 8px; padding: 9px 11px;
  border-left: 2px solid var(--line-strong); border-radius: 0;
  background: rgba(150, 130, 95, 0.08);
  font-size: 13px; line-height: 1.5;
  animation: fadeUp 260ms var(--ease);
}
.planet-feedback b { font-family: var(--mono); margin-right: 6px; }
.planet-feedback.good { border-left-color: #8fd0bf; }
.planet-feedback.good b { color: #8fd0bf; }
.planet-feedback.part { border-left-color: var(--gold); }
.planet-feedback.part b { color: var(--gold); }
.planet-feedback.miss { border-left-color: var(--warn); }
.planet-feedback.miss b { color: var(--warn); }

.planet-card footer { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 14px 14px; }
.planet-card footer button { min-width: 120px; }

.planet-total { font-size: 34px !important; color: var(--gold); margin: 6px 0 10px !important; }
.planet-total span { font-size: 18px; color: var(--muted); }
.planet-results { list-style: none; margin: 0 0 10px; padding: 0; }
.planet-results li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.planet-results b { font-family: var(--mono); color: var(--gold); }
.planet-results em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--muted); }

@media (max-width: 720px) {
  .planet-card { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 52vh; }
  /* The card is a sheet along the bottom, taller than the coach's one line;
     the sky gives up enough height that the clock strip stays clear of it. */
  body.planetarium {
    --sky-h: clamp(250px, calc(100vh - var(--topbar-h) - 430px), 620px);
    --sky-h: clamp(250px, calc(100svh - var(--topbar-h) - 430px), 620px);
  }
  .planet-body h3 { font-size: 19px; }
  .planet-hint { font-size: 12px; margin-bottom: 6px; }
}

/* --- the final card --------------------------------------------------------- */

/* Paper, like the logbook: the result of a game is something to keep. */
.final-card {
  --text: var(--parchment-ink);
  --muted: var(--parchment-muted);
  --line: var(--parchment-line);
  width: min(460px, calc(100vw - 32px));
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 28px 22px;
  background: var(--parchment);
  color: var(--parchment-ink);
  border: 1px solid var(--parchment-line);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: cardIn 300ms var(--ease);
}
.final-kicker { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--parchment-muted); font-weight: 600; }
.final-card h2 {
  margin: 8px 0 4px; font-family: var(--serif); font-weight: 600;
  font-size: 44px; color: var(--oxblood); letter-spacing: -0.01em;
}
.final-card h2 span { font-size: 20px; color: var(--parchment-muted); }
.final-moons { margin: 4px 0 14px; font-size: 28px; letter-spacing: 0.08em; }
.final-rounds { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; }
.final-rounds li {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 0 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--parchment-line); font-size: 13px;
}
.final-rounds .fr-n { font-family: var(--mono); color: var(--parchment-muted); }
.final-rounds .fr-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.final-rounds b { font-family: var(--mono); color: var(--oxblood); }
.final-rounds .fr-km { grid-column: 2 / 4; font-size: 11.5px; color: var(--parchment-muted); }
.final-share { margin: 6px 0 14px; }
.final-card button.primary {
  background: var(--parchment-ink); border-color: var(--parchment-ink); color: var(--parchment);
  padding: 11px 22px;
}
.final-card button.primary:hover:not(:disabled) { background: #3b3324; border-color: #3b3324; box-shadow: none; }
.final-card button.ghost { color: var(--parchment-ink); border-color: var(--parchment-line); }
.final-card button.ghost:hover:not(:disabled) { background: rgba(90, 70, 40, 0.08); }
.share-note { margin-top: 8px; font-size: 12.5px; color: var(--sea); min-height: 1em; }
.share-note textarea { width: 100%; font-family: var(--mono); font-size: 12px; color: var(--parchment-ink); background: rgba(255, 255, 255, 0.4); }
.final-actions { display: flex; gap: 10px; }
.final-actions button { flex: 1; }
.final-actions button.hidden { display: none; }

/* --- identity: type and paper ------------------------------------------ */
/*
   Serif for what the game says, sans for what it asks, mono for what it
   measures. Paper -- parchment and ink -- wherever the navigator writes: the
   chart (drawn in js/render/palette.js) and the result card.
*/

.topbar h1, #layer-name, .instrument h2, .chart-modal header h2,
.help-card h2, .welcome-card h2, .tutorial-card > header h2, .tutorial-body h2,
.coach h3, .result-card h2, .verdict {
  font-family: var(--serif);
}
.topbar h1 { font-size: 21px; font-weight: 600; color: var(--gold); letter-spacing: 0.005em; }
#layer-name { font-weight: 600; }
.instrument h2 {
  font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.chart-modal header h2 {
  font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text);
}
.result-card h2 { font-weight: 600; letter-spacing: -0.01em; }

.chart-wrap { border-color: rgba(201, 164, 92, 0.35); }

/* The result card is a sheet of paper laid beside the chart. Its tokens are
   re-pointed rather than its rules rewritten, so everything inside it -- bars,
   legend, diagnostics, buttons -- turns to ink on parchment together. */
.overlay.docked .result-card {
  --text: var(--parchment-ink);
  --muted: var(--parchment-muted);
  --dim: var(--parchment-muted);
  --line: var(--parchment-line);
  --line-strong: var(--parchment-line);
  --raised: transparent;
  --accent: var(--sea);
  --accent-dim: rgba(31, 107, 99, 0.12);
  --gold: var(--oxblood);
  --warn: var(--oxblood);
  background: var(--parchment);
  color: var(--parchment-ink);
  border-color: var(--parchment-line);
  backdrop-filter: none;
}
.overlay.docked .result-card h2 { color: var(--oxblood); }
.overlay.docked .result-card button.primary {
  background: var(--parchment-ink); border-color: var(--parchment-ink); color: var(--parchment);
}
.overlay.docked .result-card button.primary:hover:not(:disabled) {
  background: #3b3324; border-color: #3b3324; box-shadow: none;
}
.overlay.docked .result-card button.ghost { color: var(--parchment-ink); border-color: var(--parchment-line); }
.overlay.docked .result-card button.ghost:hover:not(:disabled) { background: rgba(90, 70, 40, 0.08); }
.overlay.docked .result-card .score-bar { background: var(--parchment-line); }
.overlay.docked .result-card .score-bar i { background: var(--sea); }
.overlay.docked .result-card .score-bar i.poor { background: var(--oxblood); }

/* On a phone the serif name is wide; give the layer menu its room back. The
   sound switch moves into the menu, where it is always too. */
@media (max-width: 720px) {
  .topbar h1 { font-size: 17px; }
  .round-badge { padding: 3px 7px; }
  #btn-sound, #btn-music, .topbar-lang { display: none; }
}