/* Nunito (SIL OFL 1.1, see vendor/nunito/OFL.txt) — served from this site, one variable file per subset */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(vendor/nunito/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(vendor/nunito/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --cream: rgba(255, 249, 236, 0.9);
  --cream-solid: #fff8ea;
  --wood: #c99b6b;
  --wood-dark: #9b6d43;
  --ink: #5b3a1e;
  --ink-soft: #8a6646;
  --accent: #6aa84f;
  --accent-soft: #e4f3d6;
  --glow: #ffd84a;
  --shadow: 0 3px 0 rgba(120, 80, 40, 0.22), 0 10px 24px rgba(60, 40, 20, 0.16);
  --radius: 16px;
}
body.theme-spring { --accent: #d0628f; --accent-soft: #fbe1ec; }
body.theme-night { --accent: #5b6fd0; --accent-soft: #e2e6fa; }
body.theme-valley { --accent: #5d9a3a; --accent-soft: #e2f1d6; }
body.theme-twin { --accent: #2f9bc8; --accent-soft: #d9eff8; }
body.theme-hub { --accent: #4f78b8; --accent-soft: #dfe8f6; }
body.theme-winter {
  --accent: #3f8fcf;
  --accent-soft: #dcecf8;
}
body.theme-autumn {
  --accent: #d9822b;
  --accent-soft: #fbe6cc;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #cfe9f7;
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, 'PingFang TC', sans-serif;
  -webkit-font-smoothing: antialiased;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; }
button:focus { outline: none; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.card {
  background: var(--cream);
  border: 2px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  margin-right: 3px;
  border-radius: 6px;
  border: 1.5px solid var(--wood);
  background: #fffdf6;
  box-shadow: 0 2px 0 var(--wood);
  font: 800 12px/1 'Nunito', sans-serif;
  color: var(--ink);
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud > .hint, #hud > .toast, #hud > .keys-pill { pointer-events: none; }

.level-card {
  position: absolute; top: 16px; left: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
}
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; min-width: 44px; padding: 0 10px;
  justify-content: center;
  border: 2px solid var(--wood); border-radius: 12px;
  background: #fffdf6; cursor: pointer;
  box-shadow: 0 2px 0 var(--wood);
  transition: transform 0.12s ease, background 0.12s ease;
}
.icon-btn svg { width: 20px; height: 20px; fill: var(--ink); }
.icon-btn:hover { background: #fff3d6; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--wood); }
.cam-label { font-weight: 800; font-size: 13px; min-width: 52px; text-align: left; }
.level-text { padding-left: 4px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.level-name { font-size: 20px; font-weight: 900; line-height: 1.1; }
.timer {
  margin-left: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); font-weight: 800; font-variant-numeric: tabular-nums;
}

.wind-card {
  position: absolute; top: 16px; right: 16px; width: 120px;
  padding: 8px 8px 10px; text-align: center;
}
.compass { width: 84px; height: 84px; display: block; margin: 0 auto; }
.compass-face { fill: #fffdf6; stroke: var(--wood); stroke-width: 3; }
.compass-ticks line { stroke: var(--wood-dark); stroke-width: 3; stroke-linecap: round; }
.compass-arrow { fill: var(--ink); }
#wind-arrow { transform-origin: 50px 50px; transition: transform 0.4s ease; }
.wind-label { font-weight: 900; font-size: 16px; margin-top: 2px; }
.gust {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  background: var(--glow); border: 2px solid var(--wood); border-radius: 999px;
  padding: 1px 10px; font-weight: 900; font-size: 12px; white-space: nowrap;
}

.plane-list {
  position: absolute; right: 16px; top: 168px; width: 188px;
  --lp: 10px; --pop: 20px; --boing: cubic-bezier(0.3, 2.1, 0.5, 0.85);
  padding: var(--lp); max-height: calc(100vh - 200px); display: flex; flex-direction: column;
}
.list-head { padding: 0 0 8px; }
.list-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 2px 4px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font-weight: 900; font-size: 14px; text-align: left;
}
.list-toggle:hover { background: rgba(201, 155, 107, 0.16); }
.lt-label { flex: 1; }
#parked-count { color: var(--accent); font-variant-numeric: tabular-nums; }
.lt-chev { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform 0.2s ease; }
/* ---------- plane cards ----------
   Four things to read at a glance, each on its own channel so they never fight:
   1. air / ground   → icon tile: sky-blue circle, plane floating / asphalt square with a centre line / plain at the gate
   2. can I fly it?  → raised solid button = yes; flat, dashed, faded with a ⏳ (busy) or ✓ (done) badge = not now
   3. the one I fly  → gold card + gold ring, its number in a gold disc
   4. danger         → red ⚠ replaces the number, card blinks red twice a second */
/* ㄉㄨㄞ ㄉㄨㄞ: a damped spring (overshoot, dip back, small second bounce); older browsers keep the single-overshoot bezier */
@supports (transition-timing-function: linear(0, 1)) {
  .plane-list { --boing: linear(0, 0.62 8%, 1.16 17%, 1.27 23%, 1.14 31%, 0.93 43%, 0.89 49%, 0.96 59%, 1.04 71%, 1.01 84%, 1); }
}
.plane-cards {
  display: flex; flex-direction: column; gap: 8px;
  /* the scroll box reaches past the panel's left edge so the selected card can stick out without being clipped */
  min-height: 0; overflow: hidden auto; overscroll-behavior: contain; /* x hidden: the spring briefly pushes a shrinking card past the right edge */
  margin: -8px calc(-1 * var(--lp)) calc(-1 * var(--lp)) calc(-1 * var(--lp) - var(--pop) - 4px);
  padding: 8px var(--lp) var(--lp) calc(var(--lp) + var(--pop) + 4px);
}
.plane-card {
  position: relative; display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 6px;
  width: 100%; min-height: 48px; padding: 6px 8px;
  border: 2px solid var(--wood); border-radius: 12px;
  background: #fffdf6; cursor: pointer; text-align: left;
  box-shadow: 0 3px 0 var(--wood);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease,
    margin 0.6s var(--boing), min-height 0.6s var(--boing), padding 0.6s var(--boing);
}
/* no grade yet: drop the empty 4th column so its gap doesn't squeeze the status text */
.plane-card:has(> .grade[hidden]) { grid-template-columns: 22px 34px 1fr; }
.plane-card:not(:disabled):not([aria-pressed='true']):hover { background: #fff3d6; }
.plane-card:not(:disabled):active { transform: translateY(2px); }
.plane-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plane-num { font-weight: 900; font-size: 13px; color: var(--ink-soft); text-align: center; }
.plane-num b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; }
.plane-icon { width: 30px; height: 30px; }

/* 1. air / ground */
.pi {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; border: 1.5px solid transparent;
}
.pi .plane-icon { position: relative; width: 26px; height: 26px; }
.plane-card[data-phase='air'] .pi { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eef8ff, #b9def7); border-color: #6fa9d6; }
.plane-card[data-phase='air'] .pi .plane-icon { transform: translateY(-2px); filter: drop-shadow(0 4px 0 rgba(40, 90, 140, 0.28)); }
.plane-card[data-phase='ground'] .pi { background: #8d877c; border-color: #5f594f; }
.plane-card[data-phase='ground'] .pi::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(#f4e9c8 0 4px, transparent 4px 8px);
}
.plane-card[data-phase='gate'] .pi { background: #efe5d3; border-color: #d8c9ae; }

/* 2. not flyable right now */
.plane-card:disabled {
  cursor: not-allowed; background: rgba(255, 253, 246, 0.5);
  border-style: dashed; border-color: #cdb894; box-shadow: none;
}
.plane-card:disabled .pi .plane-icon { opacity: 0.5; filter: grayscale(0.7); }
.plane-card:disabled .plane-name, .plane-card:disabled .plane-num { opacity: 0.6; }
.pi-lock {
  display: none; position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid #fffdf6; font: normal 900 10px/14px system-ui, sans-serif; text-align: center; color: #fff;
}
.plane-card[data-lock] .pi-lock { display: block; }
.plane-card[data-lock='busy'] .pi-lock { background: #b39a72; }
.plane-card[data-lock='busy'] .pi-lock::before { content: '⏳'; font-size: 9px; }
.plane-card[data-lock='done'] .pi-lock { background: #4f9a3a; }
.plane-card[data-lock='done'] .pi-lock::before { content: '✓'; }

/* 3. the plane you are flying (.plane-cards prefix outranks .special / .low-fuel further down) */
.plane-cards .plane-card[aria-pressed='true'] { background: #ffef9e; border-color: #d99a12; box-shadow: 0 0 0 3px #ffd84a, 0 3px 0 #d99a12; }
.plane-cards .plane-card[aria-pressed='true'] { z-index: 2; width: auto; margin: -12px 0 -12px calc(-1 * var(--pop)); min-height: 66px; padding-left: 10px; }
/* first / last card: nothing to overlap on that side, and a negative margin there would run into the header or get clipped */
.plane-cards .plane-card[aria-pressed='true']:first-child { margin-top: 0; }
.plane-cards .plane-card[aria-pressed='true']:last-child { margin-bottom: 0; }
.plane-list:not(.collapsed) .plane-card[aria-pressed='true'] .plane-name { font-size: 16px; }
.plane-list:not(.collapsed) .plane-card[aria-pressed='true'] .pi { transform: scale(1.15); }
.plane-name { transition: font-size 0.6s var(--boing); }
.pi { transition: transform 0.6s var(--boing); }
@media (prefers-reduced-motion: reduce) { .plane-card, .plane-name, .pi { transition: none; } }
.plane-card[aria-pressed='true'] .plane-num { color: #fff; }
.plane-card[aria-pressed='true'] .plane-num b { background: #d99a12; }

/* 4. danger: traffic or an obstacle ahead (same ⚠ the plane shows over its head) */
.plane-cards .plane-card.warn { border-color: #e0503a; animation: warn-flash 0.5s steps(1, end) infinite; }
.plane-cards .plane-card.warn:not([aria-pressed='true']) { box-shadow: 0 0 0 3px rgba(224, 80, 58, 0.45), 0 3px 0 #e0503a; }
@keyframes warn-flash { 0% { background: #fff4f1; } 50% { background: #ff8f7a; } }
.plane-card.warn .plane-status { color: #a3260f; }
.pi-warn { display: none; }
.plane-num .pi-warn { width: 22px; height: 20px; margin: 0 auto; }
.pi .pi-warn { position: absolute; right: -9px; top: -10px; width: 20px; height: 18px; }
.plane-card.warn .plane-num b { display: none; }
.plane-card.warn .plane-num .pi-warn { display: block; animation: pi-warn 0.25s ease-in-out infinite alternate; }
@keyframes pi-warn { from { transform: scale(1); } to { transform: scale(1.18); } }
/* reduce-motion stops the triangle's pulse; the colour blink stays (it moves nothing and is the warning itself) */
@media (prefers-reduced-motion: reduce) { .plane-card.warn .pi-warn { animation: none !important; } }

/* collapsed: icon-only column */
.plane-list.collapsed { width: 64px; --lp: 6px; --pop: 10px; }
.plane-list.collapsed .lt-label { display: none; }
.plane-list.collapsed .list-toggle { flex-direction: column; gap: 0; padding: 2px 0; justify-content: center; font-size: 12px; }
.plane-list.collapsed .lt-chev { transform: none; }
.plane-list.collapsed .plane-cards { gap: 8px; }
.plane-list.collapsed .plane-cards .plane-card { grid-template-columns: 1fr; justify-items: center; padding: 4px; min-height: 46px; }
.plane-list.collapsed .plane-meta, .plane-list.collapsed .grade { display: none; }
.plane-list.collapsed .plane-num { position: absolute; left: 1px; top: 1px; z-index: 1; font-size: 11px; }
.plane-list.collapsed .plane-num b { min-width: 16px; height: 16px; }
.plane-list.collapsed .plane-num .pi-warn { width: 17px; height: 15px; }
.plane-list.collapsed .plane-card[data-tone]:not(:disabled)::after {
  content: ''; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid #fffdf6;
}
.plane-list.collapsed .plane-card[data-tone='ok']::after { background: #4f9a3a; }
.plane-list.collapsed .plane-card[data-tone='warn']::after { background: #d0632a; }
.plane-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.plane-name { font-weight: 900; font-size: 14px; white-space: nowrap; }
.plane-status { font-weight: 700; font-size: 12px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plane-status.ok { color: #4f9a3a; }
.plane-status.warn { color: #d0632a; }

.gauge-card {
  position: absolute; left: 16px; bottom: 16px; width: 150px;
  padding: 10px 12px 10px; text-align: center;
}
.gauge { width: 112px; display: block; margin: 0 auto -4px; }
.gauge-track { fill: none; stroke: #eadcc6; stroke-width: 9; stroke-linecap: round; }
.gauge-fill { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.15s linear; }
.gauge-num { font-size: 28px; font-weight: 900; line-height: 1; margin-top: -26px; font-variant-numeric: tabular-nums; }
.gauge-cap { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.gauge-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-top: 2px; }
.gauge-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.thr-bar { width: 72px; height: 8px; border-radius: 99px; background: #eadcc6; overflow: hidden; display: inline-block; }
.thr-bar i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 99px; }
.gauge-card.idle { opacity: 0.6; }
/* Lab speed / height limit (jump run): a red tick on the dial, the cap names the limit, number goes green / red */
.gauge-limit { stroke: #c2392b; stroke-width: 5; stroke-linecap: round; }
.gauge-card.lim .gauge-cap { display: inline-block; margin-top: 3px; padding: 2px 9px; border-radius: 99px; background: #c2392b; color: #fff; font-size: 13px; white-space: nowrap; }
.gauge-card.lim-ok .gauge-cap { background: #2f8a4c; }
.gauge-card.lim-ok .gauge-num { color: #2f8a4c; }
.gauge-card.lim-over .gauge-num { color: #c2392b; }
.gauge-card.lim-over .gauge-fill { stroke: #e0623f; }
.gauge-row.low b { color: #c2392b; }

.keys-pill {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 16px; padding: 8px 16px; border-radius: 999px;
  font-weight: 800; font-size: 13px; white-space: nowrap;
}
.hint {
  position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(60, 40, 20, 0.62); color: #fffaf0;
  font-weight: 800; font-size: 14px; white-space: nowrap;
  transition: opacity 0.3s ease;
}
.hint:empty { opacity: 0; }
.toast {
  position: absolute; left: 50%; top: 92px; transform: translate(-50%, -10px);
  padding: 10px 18px; border-radius: 999px;
  background: var(--cream-solid); border: 2px solid var(--wood); box-shadow: var(--shadow);
  font-weight: 900; font-size: 16px; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
/* narrower windows: wrap rather than run under the wind card */
@media (max-width: 1100px) { .toast { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 300px); } }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { border-color: #79b85a; }
.toast.bad { border-color: #e08a4a; }

#hud > .airport-pin { pointer-events: none; }
.airport-pin {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--cream-solid); border: 2px solid var(--wood); box-shadow: var(--shadow);
  white-space: nowrap; opacity: 0; transition: opacity 0.25s ease;
}
.airport-pin.show { opacity: 1; animation: pin-bob 1.6s ease-in-out infinite; }
.pin-arrow {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent);
}
.pin-arrow svg { width: 18px; height: 18px; fill: none; stroke: #fffdf6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pin-text { display: flex; flex-direction: column; line-height: 1.05; }
.pin-text b { font-size: 13px; font-weight: 900; }
.pin-text span { font-size: 12px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@keyframes pin-bob { 50% { box-shadow: var(--shadow), 0 0 0 5px rgba(255, 216, 74, 0.45); } }
@media (prefers-reduced-motion: reduce) { .airport-pin.show { animation: none; } }

/* ---------- touch controls ---------- */
.menu-touch, .for-touch { display: none; }
body.touch .for-mouse { display: none; }
body.touch .for-touch { display: inline; }
#hud > .touch-pad { pointer-events: none; }
.touch-pad { display: none; }
body.touch .touch-pad { display: block; }
.tp-group { position: absolute; display: flex; gap: 10px; pointer-events: auto; }
.tp-steer { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
.tp-thr { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); flex-direction: column; }
.tp-btn {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0;
  border: 2px solid var(--wood); border-radius: 18px; background: var(--cream);
  box-shadow: 0 3px 0 var(--wood); cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.tp-thr .tp-btn { width: 60px; height: 56px; }
.tp-btn svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-btn span { position: absolute; bottom: 3px; font-size: 9px; font-weight: 900; color: var(--ink-soft); letter-spacing: 0.06em; }
.tp-btn.on { background: var(--accent-soft); transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.touch-pad.idle .tp-btn { opacity: 0.45; }

body.touch #game { touch-action: none; }
body.touch .keys-pill { display: none; }
body.touch .menu-keys { display: none; }
body.touch .menu-touch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
body.touch .menu-touch b { color: var(--ink); }
/* compact gauge, bottom centre between the thumb pads */
body.touch .gauge-card { left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 132px; padding: 6px 10px; }
body.touch .gauge { display: none; }
body.touch .gauge-num { margin-top: 0; font-size: 22px; }
body.touch .gauge-cap { margin-bottom: 2px; }
body.touch .hint { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
/* phone held upright: gauge goes under the level card, the bottom is all thumbs */
@media (max-width: 640px) {
  body.touch .gauge-card { left: 8px; top: 76px; bottom: auto; transform: none; width: 116px; }
  body.touch .sink { display: none; }
  body.touch .hint { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 136px); }
  body.touch .tp-btn { width: 60px; height: 60px; }
  /* the top is full (level card, gauge, wind, plane list): toasts sit just above the hint instead */
  body.touch .toast { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 228px); transform: translate(-50%, 10px); }
  body.touch .toast.show { transform: translate(-50%, 0); }
}
/* phone held sideways: plane list as a full-height column, wind card beside it */
@media (max-height: 500px) {
  body.touch .level-card { left: max(8px, env(safe-area-inset-left)); top: 8px; gap: 6px; padding: 4px 8px 4px 4px; }
  body.touch .level-name { font-size: 15px; }
  body.touch .eyebrow { font-size: 10px; }
  body.touch .icon-btn { height: 40px; min-width: 40px; }
  body.touch .plane-list { right: max(8px, env(safe-area-inset-right)); top: 8px; max-height: calc(100vh - 16px); }
  body.touch .plane-list:not(.collapsed) { width: 170px; }
  body.touch .wind-card { top: 8px; right: calc(max(8px, env(safe-area-inset-right)) + 72px); width: 76px; padding: 4px 4px 6px; }
  body.touch #hud.list-open .wind-card { right: calc(max(8px, env(safe-area-inset-right)) + 178px); }
  body.touch .compass { width: 44px; height: 44px; }
  body.touch .wind-label { font-size: 12px; }
  body.touch .tp-thr { right: calc(max(8px, env(safe-area-inset-right)) + 72px); }
  body.touch #hud.list-open .tp-thr { right: calc(max(8px, env(safe-area-inset-right)) + 178px); }
  body.touch .sink { display: none; }
  body.touch .hint { bottom: 112px; }
  /* below the wind card, narrow enough to clear it and the plane list */
  body.touch .toast { top: 92px; font-size: 14px; white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 380px); }
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center; place-items: safe center; padding: 16px;
  background: rgba(50, 35, 20, 0.28); backdrop-filter: blur(2px);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-overlay { background: linear-gradient(180deg, rgba(255, 248, 230, 0.05), rgba(60, 40, 20, 0.25)); backdrop-filter: none; }
.dialog { width: min(360px, 100%); padding: 22px 22px 20px; text-align: center; outline: none; }
.dialog h2 { margin: 0 0 14px; font-size: 26px; font-weight: 900; }
.dialog-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.btn {
  min-height: 46px; padding: 0 18px; border-radius: 12px;
  border: 2px solid var(--wood); background: #fffdf6; cursor: pointer;
  font-weight: 800; font-size: 16px; box-shadow: 0 3px 0 var(--wood);
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { background: #fff3d6; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.btn.primary { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, #000); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }

.stars { display: flex; justify-content: center; gap: 8px; margin: 4px 0 12px; }
.stars svg { width: 46px; height: 46px; }
.stars .on { fill: var(--glow); stroke: #c99a1c; }
.stars .off { fill: #eadcc6; stroke: var(--wood); }
.stats { display: flex; justify-content: center; gap: 28px; }
.stats div { display: flex; flex-direction: column; }
.stats span { font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.stats b { font-size: 22px; font-weight: 900; }

.menu-panel { width: min(1080px, 100%); padding: 26px 26px 22px; text-align: center; }
.menu-title { font-size: 44px; font-weight: 900; letter-spacing: -0.01em; line-height: 1; }
.menu-sub { margin: 10px auto 20px; max-width: 460px; color: var(--ink-soft); font-weight: 700; }
.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* the script reorders and filters the cards: keep them out of sight until it has, so the menu does not jump */
#menu .season-grid:not(.lab-grid):not(.ready) { visibility: hidden; }
#menu .season-grid.ready { animation: grid-in 0.18s ease-out; }
@keyframes grid-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #menu .season-grid.ready { animation: none; } }
.season-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0 0 14px; overflow: hidden; text-align: left; cursor: pointer;
  border: 2px solid var(--wood); border-radius: 16px; background: #fffdf6;
  box-shadow: 0 4px 0 var(--wood);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.season-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--wood); }
.season-card:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--wood); }
.season-card > span:not(.season-art) { padding: 0 14px; }
.season-art { width: 100%; height: 76px; margin-bottom: 8px; position: relative; }
.season-card.summer .season-art {
  background:
    radial-gradient(circle at 22% 70%, #5fae3a 0 16px, transparent 17px),
    radial-gradient(circle at 30% 62%, #7cc443 0 18px, transparent 19px),
    radial-gradient(circle at 78% 66%, #68b23a 0 20px, transparent 21px),
    linear-gradient(180deg, #8fd0f5 0 48%, #8fd057 48% 100%);
}
.season-card.autumn .season-art {
  background:
    radial-gradient(circle at 20% 68%, #e4842f 0 17px, transparent 18px),
    radial-gradient(circle at 29% 60%, #f0b43a 0 18px, transparent 19px),
    radial-gradient(circle at 80% 64%, #d65a2c 0 20px, transparent 21px),
    linear-gradient(180deg, #93c3ec 0 30%, #a08fc6 30% 48%, #d9ae49 48% 100%);
}
.season-card.winter .season-art {
  background:
    radial-gradient(circle at 24% 50%, #f7fbfe 0 9px, transparent 10px),
    radial-gradient(circle at 24% 62%, #2f6b52 0 16px, transparent 17px),
    radial-gradient(circle at 34% 58%, #f7fbfe 0 7px, transparent 8px),
    radial-gradient(circle at 34% 68%, #3b7a5c 0 13px, transparent 14px),
    radial-gradient(circle at 78% 66%, #dfe9f2 0 20px, transparent 21px),
    linear-gradient(180deg, #a7c7e8 0 30%, #8ea6c2 30% 48%, #eef4f9 48% 100%);
}
.season-card.spring .season-art {
  background:
    linear-gradient(100deg, transparent 0 44%, #c9bba3 44% 47%, transparent 47%) 0 0 / 100% 70% no-repeat,
    linear-gradient(80deg, transparent 0 46%, #ddd2bd 46% 52%, transparent 52%) 0 0 / 100% 70% no-repeat,
    radial-gradient(ellipse at 49% 12%, #8e98a6 0 26px, transparent 27px),
    radial-gradient(circle at 18% 70%, #f6b6cf 0 15px, transparent 16px),
    radial-gradient(circle at 82% 68%, #f29bbd 0 14px, transparent 15px),
    linear-gradient(180deg, #8ea7bf 0 50%, #9ad76a 50% 100%);
}
.season-card.night .season-art {
  background:
    radial-gradient(circle at 78% 28%, #f4f1d8 0 9px, transparent 10px),
    radial-gradient(circle at 20% 22%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 42% 14%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 60% 34%, #fff 0 1px, transparent 2px),
    repeating-linear-gradient(90deg, #ffe2a0 0 4px, transparent 4px 18px) 0 76% / 100% 3px no-repeat,
    linear-gradient(180deg, #0b1430 0 55%, #2b3466 55% 62%, #355d48 62% 100%);
}
.season-card.valley .season-art {
  background:
    linear-gradient(135deg, transparent 0 40%, #9a988e 40% 41%, #6aa64a 41% 100%) 100% 100% / 45% 80% no-repeat,
    linear-gradient(225deg, transparent 0 40%, #9a988e 40% 41%, #6aa64a 41% 100%) 0 100% / 45% 80% no-repeat,
    linear-gradient(180deg, #86b9e3 0 45%, #98cf6b 45% 100%);
}
.season-card.twin .season-art {
  background:
    linear-gradient(0deg, transparent 0 22%, #a8946f 22% 34%, transparent 34%) 0 0 / 100% 100% no-repeat,
    linear-gradient(115deg, transparent 0 55%, #a8946f 55% 61%, transparent 61%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #7fc6f0 0 32%, #4fb3e0 32% 42%, #b9cf7a 42% 100%);
}
.season-card.hub .season-art {
  background:
    linear-gradient(0deg, transparent 0 58%, #8f8f8a 58% 72%, transparent 72%) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, transparent 0 22%, #8f8f8a 22% 32%, transparent 32%) 30% 0 / 55% 100% no-repeat,
    radial-gradient(ellipse 16% 9% at 70% 40%, #2f6fb8 98%, transparent 100%),
    linear-gradient(180deg, #8ccaf0 0 30%, #a9c47a 30% 100%);
}
.season-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.summer .season-eyebrow { color: #4f8f36; }
.autumn .season-eyebrow { color: #c06a1c; }
.winter .season-eyebrow { color: #2f78b5; }
.spring .season-eyebrow { color: #c0507e; }
.night .season-eyebrow { color: #4c5fb3; }
.valley .season-eyebrow { color: #5d8a3a; }
.twin .season-eyebrow { color: #2a85ad; }
.hub .season-eyebrow { color: #3f68a8; }
.season-name { font-size: 20px; font-weight: 900; }
.season-desc { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.menu-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; font-weight: 700; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .keys-pill { display: none; }
  .hint { bottom: 16px; left: auto; right: 16px; transform: none; white-space: normal; max-width: calc(100vw - 210px); }
}
@media (max-width: 640px) {
  .level-card { left: 8px; top: 8px; gap: 6px; padding: 6px 8px 6px 6px; }
  .level-name { font-size: 16px; }
  .cam-label, .timer { display: none; }
  .wind-card { top: 8px; right: 8px; width: 88px; }
  .compass { width: 60px; height: 60px; }
  .wind-label { font-size: 13px; white-space: nowrap; }
  .plane-list { right: 8px; top: 124px; width: 150px; max-height: calc(100vh - 124px - 160px); }
  .plane-card { grid-template-columns: 34px 1fr auto; }
  .plane-card:has(> .grade[hidden]) { grid-template-columns: 34px 1fr; }
  .plane-num { display: none; }
  .plane-list:not(.collapsed) .plane-card.warn .pi .pi-warn { display: block; animation: pi-warn 0.25s ease-in-out infinite alternate; }
  .gauge-card { left: 8px; bottom: 8px; width: 120px; }
  .menu-title { font-size: 32px; }
  .season-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .season-art { height: 48px; }
  .season-desc { display: none; }
  .toast { font-size: 14px; white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
}

/* ---------- landing score ---------- */
:root {
  --g-butter: #5fae45;
  --g-normal: #a8d06a;
  --g-firm: #f0b43a;
  --g-hard: #e0603e;
}
.sink { margin-top: 4px; }
.sink-bar { position: relative; display: flex; height: 9px; border-radius: 99px; overflow: visible; margin-top: 3px; }
.sink-bar .z { display: block; height: 100%; }
.sink-bar .z-butter { width: 31.25%; background: var(--g-butter); border-radius: 99px 0 0 99px; }
.sink-bar .z-normal { width: 31.25%; background: var(--g-normal); }
.sink-bar .z-firm { width: 18.75%; background: var(--g-firm); }
.sink-bar .z-hard { width: 18.75%; background: var(--g-hard); border-radius: 0 99px 99px 0; }
.sink-ptr {
  position: absolute; top: -4px; width: 4px; height: 17px; margin-left: -2px;
  background: var(--ink); border: 1.5px solid #fffdf6; border-radius: 3px;
  transition: left 0.1s linear;
}
#sink-label.butter { color: #3f8a2c; }
#sink-label.normal { color: #6b8f2f; }
#sink-label.firm { color: #c27b12; }
#sink-label.hard { color: #c4441f; }

.grade {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: 8px; font-weight: 900; font-size: 14px; color: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
}
.grade-S { background: #9b6fd6; }
.grade-A { background: #5fae45; }
.grade-B { background: #e8a93a; }
.grade-C { background: #b9a48a; }

.land-card {
  position: absolute; left: 0; top: 0; width: 196px; padding: 10px 12px 9px;
  pointer-events: none; will-change: transform;
  animation: land-pop 0.35s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: opacity 0.4s ease;
}
.land-card.out { opacity: 0; }
@keyframes land-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
.lc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lc-label { font-weight: 900; font-size: 17px; flex: 1; white-space: nowrap; }
.lc-score { font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }
.lc-row { display: grid; grid-template-columns: 46px 1fr 22px; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); line-height: 1.5; }
.lc-row i { display: block; height: 6px; border-radius: 99px; background: #eadcc6; overflow: hidden; }
.lc-row i b { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.lc-row em { font-style: normal; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

.criteria { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
.criteria li { display: grid; grid-template-columns: 22px 1fr; align-items: center; }
.criteria li::before { content: '✓'; font-weight: 900; color: #4f9a3a; }
.criteria li.miss { color: var(--ink-soft); }
.criteria li.miss::before { content: '–'; color: #b9a48a; }
.stats small { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.landings { margin-top: 14px; display: grid; gap: 6px; max-height: 190px; overflow-y: auto; overscroll-behavior: contain; }
.landing-row {
  display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center;
  padding: 5px 10px; border-radius: 10px; background: #fffdf6; border: 1.5px solid #eadcc6;
  font-weight: 800; font-size: 14px; text-align: left;
}
.landing-row .dot { width: 12px; height: 12px; border-radius: 50%; }
.landing-row .pts { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.plane-sub { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ptype { flex: none; display: inline-block; padding: 0 4px; border-radius: 6px; font-size: 10px; font-weight: 900; vertical-align: 1px; }
.ptype-jumbo { background: #dfe8f6; color: #2f5f9e; }
.ptype-cargo { background: #fbe6cc; color: #b0601a; }
.mission { display: inline-block; margin-left: 2px; padding: 0 5px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 900; }

/* ---------- endless mode: fuel, chances ---------- */
.lives { display: flex; gap: 1px; margin-left: 4px; font-size: 18px; line-height: 1; color: #e2483c; }
.lives[hidden] { display: none; }
.heart.lost { color: #d8cbb6; }
.fuel { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: #ece0c8; overflow: hidden; }
.fuel[hidden] { display: none; }
.fuel i { display: block; height: 100%; width: 100%; border-radius: 3px; background: #6cbf4a; transition: width 0.4s linear; }
.plane-card.low-fuel .fuel i { background: #e2483c; }
.plane-card.low-fuel { animation: fuel-flash 0.9s ease-in-out infinite; border-color: #e2483c; }
@keyframes fuel-flash { 50% { background: #ffd9d2; box-shadow: 0 0 0 3px rgba(226, 72, 60, 0.45), 0 2px 0 #e2483c; } }
@media (prefers-reduced-motion: reduce) { .plane-card.low-fuel { animation: none; background: #ffe3dd; } }
/* collapsed list: the bar is hidden with the name, a pump marks low fuel */
.plane-list.collapsed .plane-card.low-fuel::before {
  content: '⛽'; position: absolute; right: 2px; top: 1px; font-size: 11px;
}
body.theme-rush { --accent: #d0702a; --accent-soft: #fde3c8; }
.season-card.rush .season-art {
  background:
    radial-gradient(circle at 78% 30%, #fff1b8 0 9%, transparent 10%),
    linear-gradient(115deg, transparent 0 46%, #bb8e5b 46% 56%, transparent 56%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #f2a65e 0 38%, #ffd9a6 38% 46%, #9fc65a 46% 100%);
}
.rush .season-eyebrow { color: #c0602a; }
.season-best { font-size: 12px; font-weight: 900; color: #c0602a; }
.season-best[hidden] { display: none; }
.season-card:not(.rush) .season-best { color: var(--ink); margin-top: 4px; }
.card-stars { position: absolute; top: 6px; right: 8px; display: flex; gap: 1px; padding: 1px 7px 2px; border-radius: 999px; background: rgba(255, 253, 246, 0.92); border: 1.5px solid var(--wood); font-size: 14px; line-height: 1.2; }
.card-stars i { font-style: normal; color: #dccdb2; }
.card-stars i.on { color: #f0b000; }
.plane-list.collapsed .pc-l { display: none; }

/* ---------- sound toggles ---------- */
.sound-row { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.snd-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 2px solid var(--wood); border-radius: 999px; background: #fffdf6; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 14px; color: var(--ink);
  box-shadow: 0 2px 0 var(--wood); transition: background 0.12s ease, transform 0.12s ease;
}
.snd-toggle:hover { background: #fff3d6; }
.snd-toggle:active { transform: translateY(2px); box-shadow: 0 0 0 var(--wood); }
.snd-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.snd-toggle svg { width: 18px; height: 18px; fill: var(--ink); stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd-state { min-width: 2.2em; text-align: left; color: #4f9a3a; }
.snd-toggle[aria-pressed='false'] { background: #f1e9da; color: var(--ink-soft); }
.snd-toggle[aria-pressed='false'] .snd-state { color: #b0533a; }
.snd-toggle[aria-pressed='false'] svg { opacity: 0.45; }

/* ---------- endless: explain lost chances ---------- */
.toast.strike { border-color: #e2483c; background: #fff0ec; color: #8a2a1e; }
.lives.hit { animation: lives-hit 0.9s ease; }
@keyframes lives-hit {
  0%, 100% { transform: none; }
  15% { transform: scale(1.35) rotate(-6deg); }
  30% { transform: scale(1.2) rotate(6deg); }
  45% { transform: scale(1.25) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .lives.hit { animation: none; } }
.why-title { margin: 4px 0 6px; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #b0433a; text-align: left; }
.why-row { text-align: left; }
.why-heart { color: #d8cbb6; font-size: 16px; }
.why-tip { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: left; }

/* ---------- danger: off-screen fuel markers, red edge, last life ---------- */
#hud > .danger-marks, #hud > .vignette, #hud > .greyout, #hud > .finale { pointer-events: none; }
.danger-marks { position: absolute; inset: 0; }
.danger-mark {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 4px 12px 4px 6px; border-radius: 999px; cursor: pointer;
  background: #fff0ec; border: 2px solid #e2483c; box-shadow: var(--shadow), 0 0 0 0 rgba(226, 72, 60, 0.5);
  font: inherit; font-weight: 900; font-size: 13px; color: #8a2a1e; white-space: nowrap;
  animation: dm-pulse 1.1s ease-in-out infinite;
}
.danger-mark:hover { background: #ffe1da; }
.danger-mark:focus-visible { outline: 3px solid #e2483c; outline-offset: 2px; }
.danger-mark.critical { background: #e2483c; color: #fff; animation-duration: 0.55s; }
.dm-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e2483c; flex: none; }
.danger-mark.critical .dm-arrow { background: #fff; }
.dm-arrow svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.danger-mark.critical .dm-arrow svg { stroke: #e2483c; }
@keyframes dm-pulse { 50% { box-shadow: var(--shadow), 0 0 0 6px rgba(226, 72, 60, 0.35); } }
.vignette {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(226, 60, 40, 0.38) 100%);
}
.vignette.on { opacity: 1; animation: vig-pulse 1s ease-in-out infinite; }
@keyframes vig-pulse { 50% { opacity: 0.45; } }
.lives.last .heart:not(.lost) { animation: heart-beat 0.9s ease-in-out infinite; display: inline-block; }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .danger-mark, .vignette.on, .lives.last .heart { animation: none; }
}
.ptype-giant { background: #ece4fb; color: #5b3fa6; }

.eyebrow.lv-up { animation: lv-up 1.2s ease; transform-origin: left center; }
@keyframes lv-up { 0%, 100% { transform: none; color: var(--accent); } 20% { transform: scale(1.25); color: #e0a21b; } 50% { transform: scale(1.1); color: #e0a21b; } }
@media (prefers-reduced-motion: reduce) { .eyebrow.lv-up { animation: none; } }

/* hearts: a second row once there are more than five */
.lives.rows { display: grid; grid-template-columns: repeat(5, auto); gap: 0 1px; font-size: 13px; }
.lives.gain { animation: lives-gain 0.9s ease; }
@keyframes lives-gain { 0%, 100% { transform: none; } 25% { transform: scale(1.35); filter: drop-shadow(0 0 6px #ffb3a8); } 55% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .lives.gain { animation: none; } }
/* special flights: gold card + gold off-screen marker */
.plane-card.special { box-shadow: 0 0 0 2px #e0b440, var(--shadow); }
.danger-mark.bonus { background: #fff6d8; border-color: #d9a21b; color: #7a5307; animation: none; }
.danger-mark.bonus:hover { background: #ffedb3; }
.danger-mark.bonus .dm-arrow { background: #d9a21b; }
.danger-mark.bonus:focus-visible { outline-color: #d9a21b; }

/* the last heart: grey world, big caption, the heart cracks in two */
/* grey wash over the world only (it sits under the other HUD cards) */
.greyout { position: absolute; inset: 0; pointer-events: none; background: #8a8a8a; mix-blend-mode: saturation; opacity: 0; transition: opacity 1.2s ease; }
.greyout.on { opacity: 0.85; }
.finale { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 6; width: min(92vw, 640px); }
.finale[hidden] { display: none; }
.finale-title { font-size: clamp(40px, 8vw, 72px); font-weight: 900; color: #fff8ea; letter-spacing: 0.02em; text-shadow: 0 4px 0 #5b3a1e, 0 10px 30px rgba(40, 20, 10, 0.45); }
.finale-why { margin-top: 10px; display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(255, 248, 234, 0.95); color: #8a2a1e; font-weight: 900; font-size: clamp(14px, 2.4vw, 18px); box-shadow: var(--shadow); }
.finale-skip { margin-top: 14px; color: #fff8ea; font-weight: 800; font-size: 13px; opacity: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.finale.show .finale-title { animation: finale-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s both; }
.finale.show .finale-why { animation: finale-up 0.5s ease 0.8s both; }
.finale.show .finale-skip { animation: finale-fade 0.6s ease 1.6s forwards; }
@keyframes finale-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes finale-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes finale-fade { to { opacity: 0.9; } }
.lives.shatter .heart:first-child { position: relative; color: transparent; display: inline-block; }
.lives.shatter .heart:first-child::before, .lives.shatter .heart:first-child::after { content: '♥'; position: absolute; left: 0; top: 0; color: #e2483c; }
.lives.shatter .heart:first-child::before { clip-path: polygon(0 0, 55% 0, 42% 38%, 58% 62%, 45% 100%, 0 100%); animation: shard-l 1.4s ease-in forwards; }
.lives.shatter .heart:first-child::after { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%, 58% 62%, 42% 38%); animation: shard-r 1.4s ease-in forwards; }
@keyframes shard-l { 0%, 25% { transform: none; } 35% { transform: translateX(-1px) rotate(-4deg); } 100% { transform: translate(-7px, 16px) rotate(-35deg); opacity: 0; } }
@keyframes shard-r { 0%, 25% { transform: none; } 35% { transform: translateX(1px) rotate(4deg); } 100% { transform: translate(7px, 18px) rotate(35deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .greyout { transition: none; }
  .finale.show .finale-title, .finale.show .finale-why, .finale.show .finale-skip { animation: none; opacity: 1; }
  .lives.shatter .heart:first-child::before, .lives.shatter .heart:first-child::after { animation: none; opacity: 0.4; }
}

/* ---------- Lab (levels in development) ---------- */
.lab-open {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 14px 0 0; padding: 10px 14px;
  border: 2px dashed var(--wood); border-radius: 14px; background: #fff7e6; color: var(--ink);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.lab-open:hover { background: #ffefd2; }
.lab-open:focus-visible, .lab-back:focus-visible, .lab-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lab-flask { font-size: 22px; }
.lab-open > span:nth-child(2) { flex: 1; }
.lab-count { color: var(--ink-soft); font-weight: 800; }
.lab-arrow { font-size: 24px; font-weight: 900; color: var(--ink-soft); }
.lab-view { text-align: left; }
.lab-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.lab-back { flex: none; white-space: nowrap; }
.lab-title { font-size: 22px; font-weight: 900; }
.lab-sub { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.lab-card .season-art { background: linear-gradient(160deg, var(--a1), var(--a2)); }
.lab-card .season-art::after { content: attr(data-icon); position: absolute; right: 12px; bottom: 6px; font-size: 34px; line-height: 1; }
.lab-card .season-eyebrow { color: #9b5a2a; }
.season-art > svg { display: block; width: 100%; height: 100%; }
.trial-card .season-eyebrow { color: #9b5a2a; }
.trial-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lab-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lab-chip { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 2px solid #e6d3b4; background: #fffaf1; color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.lab-chip:hover { background: #ffefd2; }
.lab-chip[aria-pressed="true"] { background: #3f68a8; border-color: #3f68a8; color: #fff; }
.lab-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lab-chip-n { opacity: 0.7; font-weight: 700; }
.lab-empty { font-weight: 700; color: var(--ink-soft); }
.lab-card[hidden] { display: none; }
@media (pointer: coarse) { .lab-chip { min-height: 44px; } }
.lab-test { font-size: 12px; font-weight: 800; color: #3f68a8; margin-top: 4px; }
.lab-new { position: absolute; left: 10px; top: 8px; padding: 1px 8px; border-radius: 999px; background: #e2483c; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.06em; }
.menu-panel.lab-mode .season-grid:not(.lab-grid), .menu-panel.lab-mode .lab-open, .menu-panel.lab-mode .menu-sub { display: none; }
@media (max-width: 760px), (max-height: 560px) {
  .lab-card .season-art::after { font-size: 24px; }
}
.ptype-seaplane { background: #d6f1f6; color: #1f7f96; }
.ptype-glider { background: #eef3d6; color: #6a7f1f; }
.ptype-bush { background: #f3e6d2; color: #8a5a22; }
.ptype-jumpship { background: #ffe2dc; color: #c2392b; }
/* live Lab tag on the icon-only list (e.g. 🪂4 skydivers aboard), bottom-left of the card */
.ptag-mini { display: none; }
.plane-list.collapsed .ptag-mini:not([hidden]) {
  display: block; position: absolute; left: 1px; bottom: 1px; padding: 0 3px; border-radius: 6px;
  background: #ffe2dc; color: #c2392b; font-size: 10px; font-weight: 900; line-height: 14px; white-space: nowrap;
}

.lab-flash, #hud > .lab-flash { position: fixed; inset: 0; background: #f4f8ff; opacity: 0; pointer-events: none; transition: opacity 0.6s ease-out; }
.lab-flash.on { opacity: 0.55; transition: none; }
@media (prefers-reduced-motion: reduce) { .lab-flash.on { opacity: 0.2; } }

/* release build: hidden level cards / Lab button */
.season-card[hidden], .lab-open[hidden] { display: none; }

/* menu footer: copyright · version · credits */
.menu-foot { margin-top: 12px; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.link-btn { padding: 4px 6px; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; border-radius: 6px; }
.link-btn:hover { color: var(--ink); }
.link-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.credits-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.credits-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.credits-list span { color: var(--ink-soft); font-weight: 800; }
.credits-ver { margin: 6px 0 0; font-size: 12px; font-weight: 800; color: var(--ink-soft); }

/* level complete: total score (what the leaderboard ranks) */
.score-total { display: flex; flex-direction: column; align-items: center; margin: 2px 0 10px; }
.score-total span { font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.score-total b { font-size: 40px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.score-total small { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.score-total[hidden] { display: none; }

/* tutorial: step card (top left, under the level card) + glowing keys */
.tut-card { position: absolute; left: 16px; top: 96px; width: 280px; padding: 12px 14px; pointer-events: auto; }
.tut-card[hidden] { display: none; }
.tut-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tut-n { font-size: 12px; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.tut-skip { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.tut-text { margin-top: 4px; font-size: 17px; font-weight: 900; line-height: 1.3; }
.tut-dots { display: flex; gap: 6px; margin-top: 10px; }
.tut-dots i { width: 22px; height: 6px; border-radius: 99px; background: #eadcc6; }
.tut-dots i.on { background: var(--accent); }
.tut-dots i.now { background: #ffc53a; }
.tut-card.done .tut-text { color: var(--accent); }
kbd.tut-glow, .tp-btn.tut-glow, .plane-card.tut-glow { animation: tut-glow 0.9s ease-in-out infinite; }
kbd.tut-glow { background: #ffd23a; border-color: #c99512; color: #3b2a1a; }
@keyframes tut-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 40, 0.9); } 50% { box-shadow: 0 0 0 7px rgba(255, 200, 40, 0); } }
@media (prefers-reduced-motion: reduce) { kbd.tut-glow, .tp-btn.tut-glow, .plane-card.tut-glow { animation: none; box-shadow: 0 0 0 4px rgba(255, 200, 40, 0.8); } }
.tut-open { margin: 0 0 12px; border-style: solid; background: #eaf6df; }
/* phone held upright: the gauge sits under the level card, so the step card goes under the gauge, clear of the plane list */
@media (orientation: portrait) {
  body.touch .tut-card { left: 8px; top: 176px; width: min(280px, calc(100vw - 92px)); padding: 10px 12px; }
  body.touch .tut-text { font-size: 15px; }
}

/* tutorial step dialog: picture of the move + what to press */
.tut-overlay { background: rgba(50, 35, 20, 0.18); backdrop-filter: none; }
.tut-dialog { width: min(400px, 100%); }
.tut-dialog h2 { margin: 2px 0 10px; font-size: 24px; }
.ti-done { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: var(--accent); }
.ti-n { font-size: 12px; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.ti-art svg { display: block; width: 100%; height: auto; max-height: 34vh; border-radius: 14px; }
.ti-body { margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1.45; text-align: left; }
.ti-body p { margin: 0 0 6px; }
.ti-body kbd { background: #ffd23a; border-color: #c99512; color: #3b2a1a; vertical-align: 1px; }
.ti-skip { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
@media (pointer: coarse) { .ti-skip { min-height: 44px; padding: 0 12px; } }
/* short screens (phone held sideways): picture on the left, words on the right */
@media (max-height: 480px) {
  .tut-dialog { width: min(640px, 100%); display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 18px; align-items: center; text-align: left; padding: 16px 18px; }
  .tut-dialog > * { grid-column: 2; }
  .tut-dialog .ti-art { grid-column: 1; grid-row: 1 / span 6; }
  .ti-art svg { max-height: none; }
  .tut-dialog h2 { font-size: 21px; margin-bottom: 4px; }
  .ti-body { margin-top: 4px; font-size: 14px; }
  .tut-dialog .dialog-actions { margin-top: 8px; }
  .ti-skip { justify-self: start; margin-top: 4px; }
}

/* tutorial finished */
.td-dialog { width: min(380px, 100%); position: relative; }
.td-badge svg { display: block; width: 190px; height: auto; margin: -4px auto 4px; }
.td-dialog h2 { margin: 0 0 4px; font-size: 28px; color: var(--accent); }
.td-sub { margin: 0 0 10px; font-weight: 800; color: var(--ink-soft); }
.td-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 6px; width: fit-content; text-align: left; }
.td-list li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.td-list li::before { content: '✓'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 900; flex: none; }
.td-next { margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-weight: 800; font-size: 14px; }
#tut-done:not([hidden]) .td-badge svg { animation: td-pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
#tut-done:not([hidden]) .td-list li { animation: td-in 0.35s ease both; animation-delay: calc(0.35s + var(--i) * 0.14s); }
@keyframes td-pop { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes td-in { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: td-fall linear forwards; }
@keyframes td-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 1; transform: translate(var(--dx), 110vh) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  #tut-done:not([hidden]) .td-badge svg, #tut-done:not([hidden]) .td-list li { animation: none; }
  .confetti { display: none; }
}
@media (max-height: 480px) {
  .td-dialog { width: min(600px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: center; padding: 16px 18px; }
  .td-dialog > * { grid-column: 2; }
  .td-dialog .td-badge { grid-column: 1; grid-row: 1 / span 3; }
  .td-dialog .td-list { grid-column: 1; grid-row: 4 / span 3; }
  .td-badge svg { width: 150px; }
  .td-dialog h2 { font-size: 22px; }
  .td-next { margin-top: 0; }
}

.td-rule { margin: 12px 0 0; font-size: 14px; font-weight: 700; line-height: 1.4; }
/* level briefing */
.brief-dialog { width: min(460px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.brief-dialog h2 { margin: 2px 0 12px; }
.brief-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* long lists scroll; Start stays in view */
.brief-list li { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--accent-soft); }
.brief-art svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.brief-text { font-size: 14px; font-weight: 700; line-height: 1.4; }
.brief-text b { display: block; font-size: 16px; font-weight: 900; margin-bottom: 2px; }
.brief-tip { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 420px) { .brief-list li { grid-template-columns: 96px 1fr; gap: 8px; } }
@media (max-height: 480px) {
  .brief-dialog { width: min(680px, 100%); padding: 14px 16px; }
  .brief-dialog h2 { font-size: 21px; margin-bottom: 8px; }
  .brief-list { grid-template-columns: 1fr 1fr; }
  .brief-list li { grid-template-columns: 1fr; padding: 6px 8px; gap: 4px; }
  .brief-art svg { max-height: 50px; width: auto; margin: 0 auto; }
  .brief-text { font-size: 13px; line-height: 1.3; }
  .brief-text b { font-size: 15px; }
  .brief-tip { margin-top: 6px; font-size: 12px; }
  .brief-dialog .dialog-actions { margin-top: 8px; }
  .brief-dialog .btn { min-height: 40px; }
}

/* ---------- leaderboard ---------- */
/* name entry in the level-complete dialog */
.board-entry { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.be-msg { margin: 0; font-weight: 900; font-size: 15px; }
.be-msg small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.be-form { margin-top: 8px; text-align: left; }
.be-label { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 4px; }
.be-row { display: flex; gap: 8px; }
.be-row input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 2px solid var(--wood); border-radius: 12px;
  background: #fffdf6; color: var(--ink); font: inherit; font-size: 17px; font-weight: 800;
}
.be-row input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.be-row input[aria-invalid="true"] { border-color: #d9583c; }
.be-send { flex: none; min-height: 44px; }
.be-send:disabled { opacity: 0.6; cursor: default; }
.be-err { display: block; min-height: 16px; margin-top: 4px; font-size: 12px; font-weight: 800; color: #c4452a; }
.be-err:empty { display: none; }
.be-view { margin-top: 6px; font-size: 13px; font-weight: 800; }

/* the leaderboard dialog */
/* a definite width: with 100% the overlay's grid track would grow to fit the scrolling tab row */
.board-dialog { width: min(440px, calc(100vw - 32px)); }
.board-dialog h2 { margin-bottom: 10px; }
/* nine levels: three tidy rows of three; on a small screen one row that scrolls sideways */
.board-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
@media (max-width: 640px), (max-height: 560px) {
  .board-tabs {
    display: flex; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none;
    margin: 0 -18px 10px; padding: 4px 18px; /* the ends rest clear of the faded edges */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .board-tabs::-webkit-scrollbar { display: none; }
  .board-tab { flex: none; }
}
.board-tab {
  min-height: 36px; padding: 0 12px; border: 2px solid var(--wood); border-radius: 99px; background: #fffdf6;
  font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.board-tab:hover { background: #fff3d6; }
.board-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff8ea; }
.board-tab:focus-visible, .board-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.board-status { margin: 0 0 8px; min-height: 18px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
/* the panel has one fixed height on every tab: a long board, a short one and an empty one all take the
   same room, so switching tabs never resizes the dialog */
.board-panel { display: flex; flex-direction: column; height: min(52vh, 460px); transition: opacity 0.15s; }
.board-panel.loading { opacity: 0.45; }
.board-head.blank { visibility: hidden; }
.board-head, .board-list li, .board-me {
  display: grid; grid-template-columns: 3.2em 1fr 4.6em 4.2em; gap: 8px; align-items: center; text-align: left;
}
.board-head { padding: 0 10px 4px; font-size: 11px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.board-head span:nth-child(n + 3), .board-list li span:nth-child(n + 3), .board-me span:nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; }
.board-list {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-top: 2px solid #eadcc6; border-bottom: 2px solid #eadcc6;
}
.board-list li { padding: 7px 10px; font-size: 14px; font-weight: 700; }
.board-list li:nth-child(even) { background: rgba(201, 155, 107, 0.08); }
.board-list li.me { background: var(--accent-soft); font-weight: 900; }
.board-list .rk { font-weight: 900; color: var(--ink-soft); }
.board-list li:nth-child(-n + 3) .rk { color: #c08a12; }
.board-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-me { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; font-weight: 900; }
.board-actions { flex-direction: row; justify-content: center; }
.board-actions .btn { flex: 1; }
@media (max-width: 420px) {
  .board-head, .board-list li, .board-me { grid-template-columns: 2.6em 1fr 3.8em 4.8em; gap: 6px; }
  .board-head { grid-template-columns: 3.07em 1fr 4.49em 5.67em; letter-spacing: 0.02em; padding: 0 6px 4px; } /* same widths as the 13px rows, in 11px ems */
  .board-sub { line-height: 1.4; min-height: 2.8em; } /* some levels need two lines: always keep room for both */
  .board-list li { font-size: 13px; padding: 7px 6px; }
}
.board-sub { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
@media (pointer: coarse) { .board-tab { min-height: 44px; padding: 0 14px; } .be-view { min-height: 44px; } }

/* public build: always 4 per row (levels 1–4 above 5–8); phones keep 2 per row */
@media (min-width: 641px) { .season-grid.release { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* public build: Rush Hour spans the row under the four seasons, art on the left */
.season-grid.release .season-card.rush {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(140px, 30%) 1fr; align-content: center;
  row-gap: 2px; padding: 12px 0; min-height: 96px;
}
.season-grid.release .season-card.rush .season-art { grid-column: 1; grid-row: 1 / span 4; height: auto; align-self: stretch; margin: -12px 0; }
.season-grid.release .season-card.rush > span:not(.season-art) { grid-column: 2; }
.board-open { border-style: solid; background: #fff3d6; }
.board-open:hover { background: #ffe9bf; }
.credits-note { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: left; }

/* ---------- results ("All done!" / "Shift over!") ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.result-dialog { width: min(380px, 100%); }
.result-dialog h2 { margin-bottom: 8px; }
.result-dialog.revealing h2 { animation: res-drop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes res-drop { from { opacity: 0; transform: translateY(-14px) scale(0.9); } to { opacity: 1; transform: none; } }

/* three stars, the middle one bigger; each says what it was for */
.result-dialog .stars { align-items: flex-end; gap: 4px; margin: 0 0 8px; }
.star-slot { --sz: 50px; position: relative; flex: 1 1 0; min-width: 0; max-width: 98px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.star-slot:nth-child(2) { --sz: 64px; }
.result-dialog .star-slot svg { width: var(--sz); height: var(--sz); position: relative; z-index: 1; }
.s-on svg { fill: var(--glow); stroke: #c99a1c; filter: drop-shadow(0 2px 0 rgba(150, 100, 20, 0.35)); }
.s-off svg { fill: #eadcc6; stroke: var(--wood); }
.star-cap { display: block; text-align: center; line-height: 1.2; }
.star-cap b { display: block; font-size: 12px; font-weight: 900; }
.star-cap span { font-size: 11px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.s-off .star-cap b { color: var(--ink-soft); }
.star-burst { position: absolute; top: 0; left: 50%; width: var(--sz); height: var(--sz); border-radius: 50%; border: 3px solid #ffd84a; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.star-burst::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffd84a;
  box-shadow: 0 -30px #ffd84a, 21px -21px #fff1a8, 30px 0 #ffd84a, 21px 21px #fff1a8, 0 30px #ffd84a, -21px 21px #fff1a8, -30px 0 #ffd84a, -21px -21px #fff1a8; }
/* before its turn a star is not there yet */
.revealing .star-slot:not(.lit) svg, .revealing .star-slot:not(.lit) .star-cap { opacity: 0; transform: scale(0.2); }
.star-slot.lit.s-on svg { animation: star-pop 0.5s cubic-bezier(0.2, 1.7, 0.4, 1) both, star-wobble 0.6s ease 0.5s; }
.star-slot.lit.s-on .star-burst { animation: star-burst 0.65s ease-out both; }
.star-slot.lit.s-off svg { animation: star-miss 0.5s ease both; }
.star-slot.lit .star-cap { animation: res-up 0.35s ease 0.15s both; }
@keyframes star-pop { from { opacity: 0; transform: scale(0.2) rotate(-35deg); } to { opacity: 1; transform: none; } }
@keyframes star-wobble { 0%, 100% { transform: none; } 25% { transform: rotate(-13deg) scale(1.1); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-4deg); } }
@keyframes star-burst { 0% { opacity: 1; transform: translateX(-50%) scale(0.4); } 100% { opacity: 0; transform: translateX(-50%) scale(2); } }
@keyframes star-miss { 0% { opacity: 0; transform: translateY(-10px) scale(0.8); } 55% { opacity: 1; transform: none; } 70% { transform: translateX(-4px); } 85% { transform: translateX(3px); } 100% { transform: none; } }
@keyframes res-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* score: counts up, the time bonus pops in, then it lands */
.result-dialog .score-total { position: relative; margin: 0 0 8px; }
.result-dialog .score-total b { font-size: 46px; }
.score-total b.land { animation: score-land 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes score-land { 0% { transform: scale(1.28); color: var(--accent); } 100% { transform: none; } }
.bonus-chip { display: inline-block; margin: 2px 0; padding: 2px 10px; border-radius: 99px; background: #fff0b8; color: #8a5a00; font-size: 12px; font-weight: 900; }
.revealing .bonus-chip { animation: chip-in 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px) scale(0.6); } to { opacity: 1; transform: none; } }
.score-total small:empty { display: none; }
.best-stamp { position: absolute; top: 14px; right: 6px; padding: 2px 8px; border: 3px solid #d9583c; border-radius: 8px; background: rgba(255, 253, 246, 0.9); color: #d9583c; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; transform: rotate(12deg); }
.best-stamp[hidden] { display: none; }
.revealing .best-stamp { animation: stamp 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-10deg) scale(2.4); } to { opacity: 1; transform: rotate(12deg); } }

/* the rest waits for the count, then slides in */
.revealing .board-entry, .revealing .result-more, .revealing .result-actions { visibility: hidden; }
.revealed .board-entry, .revealed .result-more, .revealed .result-actions { animation: res-up 0.35s ease both; }
.revealed .result-more { animation-delay: 0.06s; }
.revealed .result-actions { animation-delay: 0.12s; }
.instant *, .instant { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .result-dialog, .result-dialog * { animation: none !important; } }

/* leaderboard line: one row of words, the name box only when it counts */
.result-dialog .board-entry { margin: 0 0 8px; padding: 8px 10px; }
.be-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.result-dialog .be-msg { font-size: 14px; line-height: 1.3; }
.result-dialog .be-view { flex: none; margin: 0; font-size: 13px; font-weight: 800; }
.result-dialog .be-form { margin-top: 6px; }
.result-dialog .be-row input { min-width: 0; flex: 1 1 auto; }
.result-dialog { min-width: 0; }

/* details folded away */
.result-more { text-align: left; }
.result-more summary { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; color: var(--ink-soft); border-radius: 8px; }
.result-more summary::-webkit-details-marker { display: none; }
.result-more summary::after { content: '▾'; font-size: 11px; transition: transform 0.15s ease; }
.result-more[open] summary::after { transform: rotate(180deg); }
.result-more summary:hover { color: var(--ink); }
.result-more summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* open by default: no inner scrollbar (5 planes at most), compact rows */
.result-more .landings { margin-top: 2px; max-height: none; overflow: visible; gap: 4px; }
.result-more .landing-row { padding: 2px 10px; font-size: 13px; }
.result-more .landing-row .grade { transform: scale(0.85); }
.score-sum { margin: 6px 2px 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.score-sum b { color: var(--ink); }
@media (pointer: coarse) { .result-more summary { min-height: 44px; } }

.result-actions { display: grid; gap: 8px; margin-top: 10px; }
.result-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* phone held sideways: result on the left, what to do next on the right */
@media (max-height: 480px) {
  .result-dialog { width: min(700px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; padding: 14px 16px; }
  .result-dialog > h2 { grid-column: 1; grid-row: 1; font-size: 22px; margin-bottom: 4px; }
  .result-dialog > .stars { grid-column: 1; grid-row: 2; }
  .result-dialog > .score-total { grid-column: 1; grid-row: 3; }
  .result-dialog > .board-entry { grid-column: 2; grid-row: 1; }
  .result-dialog > .result-more { grid-column: 2; grid-row: 2; }
  .result-dialog > .result-actions { grid-column: 2; grid-row: 3; align-self: end; }
  .result-dialog .score-total b { font-size: 38px; }
  .star-slot { --sz: 40px; max-width: 88px; }
  .star-slot:nth-child(2) { --sz: 50px; }
  .result-actions .btn { min-height: 40px; }
}

/* the last plane is home: a big word over the field before the results */
.clear-banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); pointer-events: none; z-index: 6; white-space: nowrap; }
.clear-banner b { display: block; font-size: clamp(44px, 9vw, 84px); font-weight: 900; color: #fff8ea; text-shadow: 0 4px 0 #5b3a1e, 0 10px 30px rgba(40, 20, 10, 0.45); }
.clear-banner.show b { animation: finale-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both, clear-out 0.35s ease 1.15s forwards; }
@keyframes clear-out { to { opacity: 0; transform: translateY(-12px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .clear-banner.show b { animation: none; } }
/* long level names (Checkerboard) must fit a two-column phone card */
.season-name { overflow-wrap: anywhere; }
@media (max-width: 480px) { .season-name { font-size: 15.5px; } }

/* ---------- badges ---------- */
.badge-ico { width: 40px; height: 40px; flex: none; display: block; }
.badge-ico.off { --b: #cfc4b2 !important; opacity: 0.75; }
/* earned mid-flight: a small pill under the message line; never takes clicks */
.badge-pop {
  position: absolute; left: 50%; top: 146px; transform: translate(-50%, -8px); pointer-events: none;
  display: flex; align-items: center; gap: 9px; padding: 5px 16px 5px 6px; border-radius: 999px;
  background: var(--cream-solid); border: 2px solid #d6a93c; box-shadow: var(--shadow);
  text-align: left; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.badge-pop.show { opacity: 1; transform: translate(-50%, 0); }
.badge-pop .badge-ico { width: 34px; height: 34px; }
.badge-pop small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); line-height: 1.1; }
.badge-pop b { display: block; font-size: 15px; font-weight: 900; line-height: 1.2; }
@media (max-width: 640px) { body.touch .badge-pop { top: 64px; } }
@media (prefers-reduced-motion: reduce) { .badge-pop { transition: none; } }

.badges-open { margin-top: 10px; }
.badges-dialog { width: min(560px, 100%); }
.badges-dialog h2 { margin-bottom: 4px; }
.badges-sub { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.badges-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.badge-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: rgba(120, 90, 50, 0.07); }
.badge-item.on { background: #fff3d6; }
.badge-item > span { flex: 1; min-width: 0; }
.badge-item b { display: block; font-size: 14px; font-weight: 900; line-height: 1.2; }
.badge-item small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); line-height: 1.25; }
.badge-item:not(.on) b { color: var(--ink-soft); }
.badge-item i { font-style: normal; font-weight: 900; color: #5c9a45; }
@media (max-width: 520px) { .badges-list { grid-template-columns: 1fr; } }

.badge-row { margin: 8px 0 2px; }
.badge-row[hidden] { display: none; }
.badge-row > small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 4px; }
.badge-new { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 999px; background: #fff3d6; border: 2px solid #d6a93c; font-size: 13px; font-weight: 900; }
.badge-chip .badge-ico { width: 26px; height: 26px; }
.revealing .badge-row { visibility: hidden; }
.revealed .badge-row { animation: res-up 0.35s ease both; }
@media (max-height: 480px) { .result-dialog > .badge-row { grid-column: 1; grid-row: 4; } }

/* ---------- forecast strip (endless): the next new thing and how long until it starts ---------- */
.forecast {
  position: absolute; left: 24px; top: 80px;
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; overflow: hidden;
  border-radius: 999px; background: var(--cream-solid); border: 2px solid var(--wood);
  font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap;
  pointer-events: none;
}
.fc-k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.fc-in { font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.fc-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--wood); transform-origin: left; transform: scaleX(0); }
.forecast.soon { border-color: var(--wood-dark); animation: fc-soon 0.6s ease-in-out infinite alternate; }
@keyframes fc-soon { to { background: #ffe9b8; } }
@media (prefers-reduced-motion: reduce) { .forecast.soon { animation: none; background: #ffe9b8; } }
/* the toast drops a little so it never lands on the strip */
#hud.has-forecast .toast { top: 110px; }
@media (max-height: 500px) {
  body.touch .forecast { left: calc(max(8px, env(safe-area-inset-left)) + 6px); top: 64px; height: 22px; font-size: 11px; }
  body.touch #hud.has-forecast .toast { top: 92px; }
}
@media (max-width: 640px) {
  .forecast { left: 14px; top: 66px; height: 22px; font-size: 11px; }
  body:not(.touch) .forecast { top: 98px; }
  body:not(.touch) #hud.has-forecast .toast { top: 128px; }
  /* phone held upright: the gauge sits under the level card, so the strip goes beside it */
  body.touch .forecast { left: 132px; top: 76px; max-width: calc(100vw - 132px - 104px); padding: 0 8px; gap: 4px; }
  body.touch .fc-k { display: none; }
  body.touch .fc-in { min-width: 0; }
  body.touch .fc-what { overflow: hidden; text-overflow: ellipsis; }
  body.touch #hud.has-forecast .toast { top: auto; }
}

/* a heart that was just won flies from where it was earned up to the row of hearts */
#hud > .heart-fly { position: fixed; display: inline-block; left: 0; top: 0; font-size: 18px; line-height: 1; color: #e2483c; pointer-events: none; z-index: 5; text-shadow: 0 0 8px #fff, 0 2px 0 rgba(0, 0, 0, 0.15); will-change: transform; }