/* Observatory colors, as in the song app (copied from starboard design/tokens-observatory.css, dark). Gold is White, teal is Black, amber is act now. */
:root {
  color-scheme: dark;
  --bg-sky: #06080e;
  --bg-column: #0b0f1a;
  --bg-panel: #111622;
  --line: rgba(180, 164, 127, .32);
  --control-edge: #656f86;
  --text: #e6eaf2;
  --text-2: #a7afc1;
  --text-3: #7b8499;
  --you: #d7b36a;
  --them: #7fd0c8;
  --act: #ffb04a;
  --act-hi: #ffc873;
  --act-lo: #f29a2c;
  --act-ink: #1b1206;
  --brass-hi: #d1c4a0;
  --sq-light: #b8c0d2;
  --sq-dark: #5c6a86;
  --sq-coord: rgba(10, 14, 24, .55);
  --hl-miss: rgba(255, 176, 74, .75);
  --bad: #ff8f80;
  --board-glow: 0 26px 60px -2px rgba(143, 168, 236, .5), 0 0 110px 6px rgba(215, 179, 106, .2), 0 -12px 44px -8px rgba(143, 168, 236, .2);
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-display: Marcellus, "Iowan Old Style", Georgia, serif;
  --r-control: 12px;
  --r-inner: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 30% 20%, #0d1324 0%, var(--bg-sky) 60%) fixed;
  color: var(--text);
  font: 15px/1.4 var(--font-ui);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
  min-height: 100vh;
}
.top { display: flex; align-items: center; justify-content: space-between; }
.overline { margin: 0; font: 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi); }
h1 { margin: 0; font: 400 32px/1.2 var(--font-display); }
h2 { margin: 0 0 8px; font: 400 17px/1.3 var(--font-display); color: var(--brass-hi); }
.sub { margin: -4px 0 0; color: var(--text-2); }
.small { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.note { margin: 0; color: var(--text-2); }
.note:empty, .status:empty, .small:empty { display: none; }
.status { margin: 0; color: var(--text-2); font-size: 13px; }
.status.bad { color: var(--bad); }

.screen { display: flex; flex-direction: column; gap: 14px; }

button, select {
  font: inherit; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--control-edge); border-radius: var(--r-control);
  min-height: 44px; padding: 0 14px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button:hover, select:hover { border-color: var(--brass-hi); }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
button.primary { background: linear-gradient(var(--act-hi), var(--act-lo)); color: var(--act-ink); border: 0; font-weight: 600; }
button.big { min-height: 56px; font-size: 17px; }
button.quiet { background: transparent; }
kbd { font: 12px var(--font-mono); padding: 1px 6px; border: 1px solid var(--control-edge); border-radius: 6px; background: var(--bg-panel); }

.settings { display: flex; align-items: center; gap: 10px; }
.seg-label { color: var(--text-2); font-size: 13px; }

.facts { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 12px 14px; background: var(--bg-column); border: 1px solid var(--line); border-radius: var(--r-control); }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.facts:empty { display: none; }
.big-facts dd { font-size: 17px; }
.facts .sub-row dt { padding-left: 14px; font-size: 13px; }

.keys { border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 12px; background: var(--bg-column); }
.keys summary { cursor: pointer; color: var(--brass-hi); min-height: 24px; }
.keys ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 6px; }
.history ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.history li { display: flex; justify-content: space-between; gap: 12px; }

/* ---- run ---- */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-hud { gap: 12px; margin-top: -6px; }
.sub-hud .question { margin-right: auto; font: 17px var(--font-display); }
.chip img { background: var(--sq-light); border-radius: 50%; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-column); }
.clock { font: 500 20px var(--font-mono); font-variant-numeric: tabular-nums; }
.clock.low { color: var(--bad); }
.bar { height: 4px; background: var(--bg-panel); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--act); transform-origin: left center; transform: scaleX(1); }
.bar.low i { background: var(--bad); }

.board-wrap { position: relative; width: min(100%, calc(100svh - 380px)); min-width: 260px; aspect-ratio: 1; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.board-wrap.moving { overflow: hidden; }
.board-slide { position: absolute; inset: 0; }
.board {
  display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr);
  width: 100%; height: 100%;
  border-radius: 6px; overflow: hidden;
  box-shadow: var(--board-glow);
}
.sq { position: relative; }
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq img { position: absolute; inset: 4%; width: 92%; height: 92%; z-index: 2; pointer-events: none; -webkit-user-drag: none; }
.sq .coord { position: absolute; font-size: 10px; font-weight: 600; color: var(--sq-coord); z-index: 1; line-height: 1; }
.sq .coord.file { right: 3px; bottom: 2px; }
.sq .coord.rank { left: 3px; top: 2px; }
.sq.key::before { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 4px var(--hl-miss), inset 0 0 16px rgba(255, 176, 74, .45); animation: flash .5s ease-in-out 3; }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.arrows line { stroke-linecap: round; opacity: .9; }

.verdict { margin: 0; min-height: 1.6em; text-align: center; font-size: 17px; font-weight: 500; }
.verdict.black { color: var(--them); }
.verdict.white { color: var(--you); }
.verdict.equal { color: var(--text); }

.answers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.answer { position: relative; overflow: hidden; min-height: 68px; font-size: 20px; font-weight: 600; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.answer.black { border-color: var(--them); color: var(--them); background: rgba(127, 208, 200, .08); }
.answer.equal { background: rgba(255, 255, 255, .04); }
.answer.white { border-color: var(--you); color: var(--you); background: rgba(215, 179, 106, .08); }
.answer span { font-size: 14px; opacity: .8; }
/* a press that is turning into "guessing": the button fills over the hold */
.answer::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: currentColor; }
.answer.holding::after { width: 100%; transition: width .45s linear; }
.answer.guessed { box-shadow: inset 0 0 0 3px currentColor; }
.run-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.run-foot .small { margin: 0; }
.run-foot #end { margin-left: auto; }

.done-actions { display: grid; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .sq.key::before { animation: none; }
  .answer.holding::after { transition: none; width: 0; }
}

@media (min-width: 700px) {
  .app { padding-top: 32px; }
  .board-wrap { width: min(100%, calc(100svh - 396px)); }
}