html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0d1a;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#game {
  display: block;
  width: 100vw;
  height: 100dvh;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  image-rendering: pixelated;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/PressStart2P-Regular.woff2) format('woff2');
}

[hidden] { display: none !important; }

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #f2ead8;
}

#hud {
  position: absolute;
  inset: 0;
  z-index: 2; /* above the overlays: mute and music work on game over */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           8px max(8px, env(safe-area-inset-left));
  font-size: 16px;
  text-shadow: 0 2px #0b0d1a;
}
.hud-right { text-align: right; }
.hud-left > div:first-child, .hud-right > div:first-child { font-size: 8px; opacity: 0.8; }
#tier { font-size: 8px; opacity: 0.8; }
/* BONUS (spec §6.7): the level's pot, under LEVEL. Hidden it keeps its line, so the hearts never move. */
#bonus { font-size: 8px; margin-top: 4px; color: #e3c56a; }
#bonus[hidden] { display: block; visibility: hidden; }
/* Hearts (spec §9.3): 7×6 canvases at a whole scale, so they stay crisp. */
#hearts { display: flex; gap: 8px; margin-top: 8px; }
.heart { width: 28px; height: 24px; image-rendering: pixelated; filter: drop-shadow(0 2px #0b0d1a); }
.heart.blink { animation: heart-blink 0.6s steps(1) 1; }
@keyframes heart-blink { 0%, 33%, 66% { opacity: 1; } 16%, 50%, 83% { opacity: 0.2; } }
.hud-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
/* The win screen (spec §6.11) shows the run's numbers in its panel: only the buttons stay, in the corner. */
#hud.quiet .hud-left, #hud.quiet #best-label, #hud.quiet #best { display: none; }
#hud.quiet { justify-content: flex-end; }
#hud.quiet .hud-buttons { margin-top: 0; }

/* The "tap a planet" hint (spec §9.3): bottom-centred over the starting planet, blinking. */
#hint {
  position: absolute;
  left: 0; right: 0;
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
  margin: 0;
  text-align: center;
  font-size: 16px;
  text-shadow: 0 2px #0b0d1a, 2px 0 #0b0d1a, -2px 0 #0b0d1a, 0 -2px #0b0d1a;
  animation: hint-blink 1s steps(1) infinite;
}
@keyframes hint-blink { 70% { opacity: 1; } 71%, 100% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { #hint { animation: none; } }
/* NEW BEST toast (spec §9.3): centred, pink, fades out. */
#toast {
  position: absolute;
  left: 0; right: 0;
  top: 18%;
  margin: 0;
  text-align: center;
  font-size: 24px;
  color: #d36ba6;
  text-shadow: 0 2px #0b0d1a, 2px 0 #0b0d1a, -2px 0 #0b0d1a, 0 -2px #0b0d1a;
  opacity: 0;
}
#toast.show { animation: toast 1.8s steps(6) forwards; }
@keyframes toast { 0% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { #toast.show { animation: toast-still 1.8s steps(1) forwards; } }
@keyframes toast-still { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } }
#hud.best #best { color: #d36ba6; }
#hud.pulse #score { animation: hud-pulse 0.4s steps(2); }
@keyframes hud-pulse { 50% { color: #d36ba6; transform: scale(1.12); transform-origin: left center; } }
@media (prefers-reduced-motion: reduce) { #hud.pulse #score { animation: none; } .heart.blink { animation: none; } }

#ui button {
  pointer-events: auto;
  font: inherit;
  font-size: 16px;
  color: #f2ead8;
  background: #0b0d1acc;
  border: 2px solid #f2ead8;
  border-radius: 0;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 16px;
  cursor: pointer;
  touch-action: manipulation;
}
#ui button:hover { background: #f2ead8; color: #0b0d1a; }
#ui button:focus-visible { outline: 2px solid #5ec4b6; outline-offset: 2px; }
.hud-buttons button { padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
#btn-mute svg { display: block; }
#btn-mute .slash { display: none; }
#btn-mute[aria-pressed="true"] { opacity: 0.6; }
#btn-mute[aria-pressed="true"] .wave { display: none; }
#btn-mute[aria-pressed="true"] .slash { display: block; }
#btn-music svg { display: block; }
#btn-music .slash { display: none; }
#btn-music[aria-pressed="true"] { opacity: 0.6; }
#btn-music[aria-pressed="true"] .slash { display: block; }

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  background: #0b0d1acc;
}
.screen h1, .screen h2, .screen p { margin: 0; font-weight: 400; }
/* Balanced wraps: on a phone the title's subtitle splits into two even lines, not a lone last word. */
.screen p { text-wrap: balance; }
#title p { line-height: 1.5; }
.screen h1 { font-size: 32px; }
.screen h2 { font-size: 24px; }
.screen .princess { font-size: 8px; color: #d36ba6; }
.screen button { margin-top: 8px; }
#ui button.secondary { font-size: 8px; min-height: 32px; padding: 8px 12px; margin-top: 0; opacity: 0.85; }
#go-new, #go-gap { color: #d36ba6; }
.screen .cause { font-size: 16px; }
.screen .cause #go-what { color: #c8413a; }
/* The title's mode switch and Practice picker (spec §9.3): real buttons, the chosen one inverted, names only. */
#title-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#ui button.mode[aria-pressed="true"], #ui .modal [aria-pressed="true"] { background: #f2ead8; color: #0b0d1a; opacity: 1; }
/* The countdown (spec §4) sits under the button row, not under a heading: no pull-up, so it never touches the buttons' outlines. */
#title-new { margin-top: 0; }
#title-pick { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 8px; }
#title-pick button { min-width: 32px; padding: 8px; }
#pick-line { min-width: 20ch; }
#ui button:disabled { opacity: 0.4; cursor: default; }
#ui button:disabled:hover { background: #0b0d1acc; color: #f2ead8; }
.screen .small { font-size: 8px; opacity: 0.8; margin-top: -8px; }
/* The win screen, YOU SAVED HER! (spec §6.11): no dimming, the canvas draws the cast behind it in #win-cast's box. Stacked
   (the headline, the cast, the panel with PLAY AGAIN low), or on a wide view (aspect > 1.2) the cast left and the panel right.
   The top keeps clear of the HUD's buttons, the only part of the HUD left on this screen. */
#rescued.win { background: none; justify-content: flex-start; gap: 8px;
  padding: max(56px, calc(env(safe-area-inset-top) + 48px)) 16px max(16px, env(safe-area-inset-bottom)); }
.win-head { flex: none; }
#win-title { font-size: 24px; color: #e3c56a; text-shadow: 0 4px #d36ba6, 0 6px #0b0d1a; }
#win-title .word { display: inline-block; white-space: nowrap; }
#win-title .ch { display: inline-block; }
.win-sub { font-size: 8px; color: #d36ba6; margin-top: 8px; text-shadow: 0 2px #0b0d1a; }
#win-cast { flex: 1 1 0; align-self: stretch; min-height: 0; }
#win-panel { flex: none; box-sizing: border-box; width: 100%; max-width: 400px; padding: 12px 16px 16px; text-align: left;
  background: #0b0d1acc; border: 4px solid #f2ead8; box-shadow: 4px 4px 0 #1a1f3a; }
#win-panel p { text-wrap: nowrap; white-space: nowrap; }
/* The lines: label (with a green mark once counted), detail and value in fixed columns, dim until their turn. */
.win-line { display: grid; grid-template-columns: 1fr 9ch 8ch; column-gap: 8px; font-size: 8px; line-height: 2.25; }
.win-line .d, .win-line .v { text-align: right; }
.win-line .k::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: -1px; }
.win-line.done .k::before { background: #6a9c5e; }
.win-line.live .v { color: #e3c56a; }
.win-line.dim { opacity: 0.35; }
.win-rule { border-top: 4px dotted #4a4e5c; margin: 8px 0; }
.win-big { font-size: 16px; line-height: 1.75; }
#rs-score .v { color: #e3c56a; }
.win-small { font-size: 8px; line-height: 2.25; }
#rs-hearts .rs-heart-row { display: inline-flex; gap: 4px; vertical-align: middle; margin: 0 4px; }
#rs-hearts .heart { width: 14px; height: 12px; filter: none; }
#win-panel .rank { white-space: normal; text-wrap: balance; }
/* The stamps: NEW BEST! pressed on at its moment (pink after SCORE, yellow after TIME), or the saved best time, dimmer.
   Hidden ones keep their room, so nothing moves when they land. */
.stamp { visibility: hidden; display: inline-block; margin-left: 8px; font-size: 8px; line-height: 1; vertical-align: 3px; }
.stamp.on { visibility: visible; }
.stamp.new { color: #0b0d1a; background: #d36ba6; padding: 4px 6px; box-shadow: 2px 2px 0 #f2ead8; transform: rotate(-4deg); }
#rs-time .stamp.new { background: #e3c56a; }
.stamp.was { opacity: 0.7; }
.stamp.new.on { animation: stamp 0.2s steps(2) 1; }
@keyframes stamp { 0% { transform: rotate(-4deg) scale(2); } 100% { transform: rotate(-4deg) scale(1); } }
.win-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
#ui .win-buttons button { margin-top: 0; }
/* PLAY AGAIN is the main button: bigger, with a teal frame, focused when the screen opens. */
#ui #btn-again { border-width: 4px; padding: 12px 20px; box-shadow: 0 0 0 2px #0b0d1a, 0 0 0 6px #5ec4b6; margin: 6px; }
#ui #btn-again:focus-visible { outline: 2px solid #f2ead8; outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .stamp.new.on { animation: none; } }
@media (min-width: 400px) { #win-title { font-size: 32px; } }
/* Wide: the headline over the cast on the left, the panel on the right, centred under the HUD's buttons' row. */
@media (min-aspect-ratio: 1201/1000) {
  #rescued.win { display: grid; grid-template-columns: 1fr min(400px, 52%); grid-template-rows: auto 1fr;
    grid-template-areas: "head panel" "cast panel"; column-gap: 24px;
    padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  .win-head { grid-area: head; }
  #win-cast { grid-area: cast; }
  #win-panel { grid-area: panel; align-self: center; margin-top: 48px; }
}
@media (min-aspect-ratio: 1201/1000) and (max-width: 767px) { #win-title { font-size: 24px; } }
/* Short or narrow: a one-line headline and a tighter panel, so PLAY AGAIN stays on screen. */
@media (min-aspect-ratio: 1201/1000) and (max-width: 639px), (max-height: 420px), (max-width: 359px) {
  #win-title { font-size: 16px; text-shadow: 0 2px #d36ba6, 0 4px #0b0d1a; }
  .win-sub { margin-top: 4px; }
}
@media (max-height: 420px), (max-height: 640px) and (max-aspect-ratio: 1200/1000) {
  #rescued.win { gap: 4px; }
  #win-panel { padding: 8px 12px 12px; }
  .win-line, .win-small { line-height: 2; }
  .win-rule { margin: 4px 0; }
  .win-big { line-height: 1.5; }
  .win-buttons { gap: 8px; margin-top: 8px; }
  #ui #btn-again { padding: 8px 12px; margin: 4px; box-shadow: 0 0 0 2px #0b0d1a, 0 0 0 4px #5ec4b6; }
  #ui #btn-again:focus-visible { outline-offset: 6px; }
}
@media (max-width: 359px) {
  #rescued.win { padding-left: 8px; padding-right: 8px; }
  #win-panel { padding-left: 8px; padding-right: 8px; }
  .modal { padding: 8px; }
  .win-big .k { font-size: 8px; }
}
@media (max-width: 399px) { .screen .cause { font-size: 8px; } }

@media (max-width: 399px) {
  #ui #btn-continue { font-size: 8px; } /* on one line */
  .screen h1 { font-size: 24px; }
  .screen h2 { font-size: 16px; }
  #toast { font-size: 16px; }
}

/* The leaderboard (spec §6.12, §9.3). */
.row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.rank { color: #e3c56a; }
.privacy { font-size: 8px; color: #f2ead8; opacity: 0.7; }
#title .privacy { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
.modal { z-index: 3; }
#optin { z-index: 4; }
.panel { display: flex; flex-direction: column; align-items: center; gap: 12px; box-sizing: border-box; width: 100%;
  max-width: 480px; max-height: 100%; padding: 16px 8px; background: #0b0d1a; border: 4px solid #f2ead8; box-shadow: 4px 4px 0 #1a1f3a; outline: none; }
.modal h2 { font-size: 16px; }
#oi-name { font: inherit; width: 13ch; padding: 8px; color: #f2ead8; background: #0b0d1a; border: 2px solid #f2ead8; border-radius: 0;
  text-align: center; text-transform: uppercase; -webkit-user-select: text; user-select: text; }
#oi-name:focus { outline: 2px solid #5ec4b6; }
#bd-rows { list-style: none; margin: 0; padding: 0; width: 100%; min-height: 0; overflow: hidden auto; touch-action: pan-y;
  font-size: 8px; line-height: 2.5; text-align: left; }
#bd-rows li { display: grid; grid-template-columns: 4ch minmax(0, 1fr) 7ch 10ch 12px; gap: 4px; align-items: center; }
#bd-rows span:nth-child(2) { overflow: hidden; white-space: nowrap; }
#bd-rows span:nth-child(n+3) { text-align: right; }
#bd-rows .you { color: #5ec4b6; }
#bd-rows .ph { display: block; text-align: center; opacity: 0.7; }
.dev { width: 4px; height: 8px; border: 2px solid; justify-self: center; }
.dev.desktop { width: 10px; height: 6px; }

/* HOW TO PLAY (spec §4, §9.3): a dialog over the title. Stacked on a tall view; under 420 px of height two columns (the
   controls with the day line and the teal box left, the modes right). The text area scrolls inside the panel if it ever
   overflows, CLOSE outside it and always visible. */
#help .panel { gap: 0; text-align: left; padding: 16px 12px; }
#help .body { width: 100%; min-height: 0; overflow: hidden auto; touch-action: pan-y; }
#help h2 { font-size: 16px; text-align: center; margin: 0 0 8px; }
#help .col + .col h2 { margin-top: 16px; }
#help ul { list-style: none; margin: 0; padding: 0; }
#help li, #help dd, #help #hp-day, #help .same { font-size: 8px; line-height: 2; }
#help #hp-day { margin-top: 8px; text-align: left; }
#help dt { font-size: 8px; color: #e3c56a; margin-top: 8px; }
#help dt:first-child { margin-top: 0; }
#help dd { margin: 0; }
#help .same { color: #5ec4b6; border: 2px solid #5ec4b6; padding: 6px 8px; margin-top: 12px; text-wrap: pretty; }
#help #hp-close { margin-top: 12px; align-self: center; }
@media (max-height: 700px) and (min-height: 421px) {
  #help .panel { padding: 12px; }
  #help h2 { margin-bottom: 4px; }
  #help .col + .col h2 { margin-top: 8px; }
  #help .same { margin-top: 8px; }
  #help #hp-close { margin-top: 8px; }
}
@media (max-height: 420px) {
  #help .panel { padding: 6px 10px; max-width: 560px; }
  #help h2 { font-size: 8px; margin-bottom: 2px; }
  #help .body { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "how modes" "same modes"; grid-template-rows: auto 1fr;
    column-gap: 14px; align-items: start; }
  #help .col:first-child { grid-area: how; }
  #help .col + .col { grid-area: modes; }
  #help .col + .col h2 { margin-top: 0; }
  #help .same { grid-area: same; line-height: 1.6; padding: 3px 6px; margin-top: 6px; }
  #help li, #help dd, #help #hp-day { line-height: 1.5; }
  #help #hp-day { margin-top: 3px; }
  #help dt { margin-top: 3px; }
  #help #hp-close { margin-top: 4px; font-size: 8px; padding: 6px 12px; min-height: 32px; }
}

/* A short landscape phone (568×320): tighter overlays, so the title with its mode switch and bests still fits. */
@media (max-height: 420px) {
  .screen { gap: 8px; padding: 8px; }
  .screen h1 { font-size: 24px; }
  .screen button { margin-top: 0; }
  #rescued.win { grid-template-columns: 1fr min(400px, 58%); }
  .win-big .k { font-size: 8px; }
  .panel { gap: 8px; padding: 8px; }
  /* The win panel tighter still, so a two-line rank line and LEADERBOARD keep it under the HUD's buttons. */
  #win-panel { padding: 6px 8px 8px; }
  .win-line { line-height: 1.75; }
  .win-big { line-height: 1.25; }
  .win-rule { margin: 2px 0; }
  #win-panel .rank { line-height: 1.5; }
  .win-buttons { gap: 6px; margin-top: 4px; }
  #ui #btn-again { padding: 6px 12px; margin: 0; }
  #ui .win-buttons .secondary { min-height: 28px; padding: 6px 12px; }
}

/* Shown only when JavaScript is off. */
.noscript { font-family: 'Press Start 2P', monospace; color: #f2ead8; font-size: 12px; line-height: 1.6; background: none; }
.noscript h1 { font-size: 24px; }