/* Lantern Trail: iPad web app styles */
:root {
  color-scheme: dark; /* one deliberate night look in every theme */
  --night: #141b3d;
  --night-2: #1f2858;
  --night-3: #2d3775;
  --paper: #fbf5e8;
  --paper-edge: #ead9b8;
  --ink: #2b2433;
  --ink-soft: #5d5368;
  --gold: #f4b740;
  --gold-hi: #ffd986;
  --gold-deep: #9c6418;
  --cranberry: #a3313c;
  --collar: #5fb8e6;
  --serif: "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --display: "Baskerville", "Iowan Old Style", "Palatino", "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --vh: 1vh;
}
@supports (height: 100dvh) { :root { --vh: 1dvh; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 900px at 50% -15%, #313a82 0%, var(--night) 55%, #0b1027 100%) fixed;
  background-color: var(--night);
  color: #fff;
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55; z-index: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 71% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 31%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 22% 72%, #fff 50%, transparent 51%);
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#app { position: relative; z-index: 1; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.screen { min-height: calc(100 * var(--vh)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 64px; min-width: 64px; padding: 0 22px;
  border-radius: 999px; border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.09); color: #fff;
  font: 600 clamp(17px, 2.1vw, 21px)/1.1 var(--sans); letter-spacing: .01em;
  text-align: center; user-select: none; -webkit-user-select: none;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.96); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #3b2506; border-color: #c98a26;
  box-shadow: 0 0 22px rgba(255,190,80,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-big { min-height: 82px; padding: 0 42px; font-size: clamp(22px, 3vw, 29px); }
.btn-ghost { background: rgba(10,14,40,.35); }
.btn-ghost-dark { background: transparent; color: var(--ink); border-color: rgba(43,36,51,.35); }
.btn.is-locked { opacity: .55; }

/* ---------- header bar ---------- */
.bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 16px) 10px calc(var(--safe-l) + 16px);
}
.bar-title { flex: 1; text-align: center; min-width: 0; }
.bar-title h2 {
  margin: 0; font: 600 clamp(24px, 3.4vw, 36px)/1.1 var(--display); letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.bar-title p { margin: 4px 0 0; color: var(--gold-hi); font: 600 clamp(14px, 1.7vw, 17px)/1.2 var(--sans); letter-spacing: .04em; }

/* ---------- gear (press and hold) ---------- */
.gear {
  position: relative; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22); background: rgba(10,14,40,.35);
  display: grid; place-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
.gear svg { width: 30px; height: 30px; fill: rgba(255,255,255,.75); }
.gear-ring {
  position: absolute; inset: -4px; border-radius: 50%; border: 4px solid transparent; pointer-events: none;
}
.gear.holding .gear-ring { border-color: var(--gold); animation: hold 1.1s linear forwards; }
@keyframes hold { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.screen-cover .gear { position: absolute; top: calc(var(--safe-t) + 14px); right: calc(var(--safe-r) + 16px); z-index: 4; }
.gear-hint {
  position: absolute; z-index: 4; right: calc(var(--safe-r) + 18px); top: calc(var(--safe-t) + 84px); margin: 0;
  font: 500 13px/1.2 var(--sans); color: rgba(255,255,255,.6);
}

/* ---------- setup ---------- */
.screen-setup { display: grid; place-items: center; padding: calc(var(--safe-t) + 24px) 20px calc(var(--safe-b) + 24px); }
.setup-card {
  width: min(640px, 100%); background: var(--paper); color: var(--ink);
  border-radius: 28px; padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 4px rgba(244,183,64,.35);
}
.eyebrow { margin: 0; color: var(--gold-deep); font: 700 14px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.setup-title { margin: 8px 0 8px; font: 600 clamp(30px, 4.5vw, 44px)/1.1 var(--display); }
.setup-note { margin: 0 0 22px; color: var(--ink-soft); font: 400 18px/1.45 var(--sans); }
.field { display: block; margin: 0 0 16px; }
.field > span { display: block; margin: 0 0 6px; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.field em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.field input {
  width: 100%; min-height: 60px; padding: 0 18px; border-radius: 16px;
  border: 2px solid var(--paper-edge); background: #fff; color: var(--ink);
  font: 500 22px/1 var(--serif);
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244,183,64,.25); }
.form-error { margin: 0 0 14px; color: var(--cranberry); font: 600 17px/1.35 var(--sans); }
.setup-card .btn-big { width: 100%; margin-top: 8px; }

/* ---------- cover ---------- */
.screen-cover { position: relative; overflow: hidden; display: grid; place-items: center; height: calc(100 * var(--vh)); }
.cover-art {
  position: absolute; inset: 0; background: url("art/night-21.jpg") center 40% / cover no-repeat;
  transform: scale(1.04);
}
.cover-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,16,42,.82) 0%, rgba(12,16,42,.45) 38%, rgba(12,16,42,.55) 62%, rgba(12,16,42,.9) 100%);
}
.cover-content {
  position: relative; z-index: 2; text-align: center; padding: calc(var(--safe-t) + 30px) 28px calc(var(--safe-b) + 30px);
  width: min(900px, 100%);
}
.cover-title {
  margin: 0; font: 600 clamp(40px, 7vw, 86px)/1.04 var(--display); letter-spacing: .005em;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}
.cover-sub {
  margin: 14px 0 22px; color: var(--gold-hi); font: 700 clamp(15px, 2vw, 21px)/1.2 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.mini-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 22px; max-width: 620px; }
.mini-row i {
  width: 16px; height: 22px; border-radius: 4px 4px 5px 5px; background: rgba(60,70,120,.85);
  box-shadow: inset 0 0 0 1.5px rgba(255,230,170,.45);
}
.mini-row i.lit { background: linear-gradient(#fff0b8, var(--gold)); box-shadow: 0 0 10px rgba(255,190,80,.9); }
.cover-tag { margin: 0 0 8px; font: italic 500 clamp(20px, 2.8vw, 28px)/1.3 var(--serif); }
.cover-how { margin: 0 0 18px; font: 500 clamp(15px, 1.9vw, 19px)/1.4 var(--sans); color: rgba(255,255,255,.85); }
.cover-status {
  display: inline-block; margin: 0 0 26px; padding: 10px 20px; border-radius: 999px;
  background: rgba(244,183,64,.16); border: 1px solid rgba(244,183,64,.5);
  color: var(--gold-hi); font: 600 clamp(16px, 2vw, 20px)/1.3 var(--sans);
}
.cover-content .btn-big { display: flex; margin: 0 auto; }

/* falling snow */
.snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.snow i {
  position: absolute; top: -12px; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%;
  background: rgba(255,255,255,.85); filter: blur(.3px);
  animation: fall var(--d, 12s) linear var(--delay, 0s) infinite;
}
@keyframes fall {
  0% { transform: translate3d(0, -20px, 0); }
  50% { transform: translate3d(var(--sway, 20px), 50vh, 0); }
  100% { transform: translate3d(0, 105vh, 0); }
}

/* ---------- map ---------- */
.screen-map { display: flex; flex-direction: column; height: calc(100 * var(--vh)); }
.map-wrap { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px); border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 18px 60px rgba(0,0,0,.45); }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.map-banner {
  margin: 10px 16px calc(var(--safe-b) + 12px); text-align: center;
  font: 600 clamp(16px, 2vw, 20px)/1.35 var(--sans); color: var(--gold-hi);
}
.map-svg .star { fill: #fff; opacity: .8; }
.map-svg .star.tw { animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.trail-edge { fill: none; stroke: #c2cbe6; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
.trail { fill: none; stroke: #f8faff; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.trail-steps { fill: none; stroke: #8f9cc7; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 19; opacity: .5; }
.trail-gold-glow { fill: none; stroke: #ffb84a; stroke-width: 34; stroke-linecap: round; opacity: .55; filter: url(#fSoft); }
.trail-gold { fill: none; stroke: #ffd36e; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }

.ml { cursor: pointer; }
.ml .hit { fill: transparent; }
.ml .halo { fill: url(#gGlow); opacity: 0; }
.ml.lit .halo { opacity: 1; }
.ml.tonight .pulse { fill: none; stroke: #ffe39a; stroke-width: 4; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .15; stroke-width: 2; } 50% { opacity: 1; stroke-width: 6; } }
.ml.locked .lantern { opacity: .55; }
.ml .num rect { fill: rgba(255,255,255,.92); stroke: rgba(40,50,90,.35); stroke-width: 1; }
.ml.lit .num rect { fill: #ffe7a6; stroke: #c98a26; }
.ml.locked .num rect { fill: rgba(225,232,248,.85); }
.ml .num text { font: 700 15px var(--sans); fill: #24305e; text-anchor: middle; dominant-baseline: central; }
.ml .paw { fill: var(--collar); stroke: #fff; stroke-width: 1.2; }
.ml.shake > .wob { animation: shake .45s ease-in-out; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.house .win-glow { opacity: 0; transition: opacity .6s ease; }
.house.lit .win-glow { opacity: 1; }
.bigstar .star-core { opacity: .25; transition: opacity .8s ease; }
.bigstar.on .star-core { opacity: 1; }
.bigstar.on .star-rays { animation: spin 18s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- lantern glyph (shared) ---------- */
.lantern .lt-flame, .lantern .lt-glow { display: none; }
.lantern.is-lit .lt-flame, .lantern.is-lit .lt-glow { display: inline; }
.lantern.is-lit .lt-flame { animation: flicker 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes flicker {
  0%,100% { transform: scale(1, 1); opacity: 1; }
  30% { transform: scale(.92, 1.08); opacity: .92; }
  60% { transform: scale(1.06, .94); opacity: 1; }
}

/* ---------- Ember (moth) ---------- */
.em-wing { transform-box: fill-box; animation: flap .32s ease-in-out infinite; }
.em-l { transform-origin: 100% 50%; }
.em-r { transform-origin: 0% 50%; }
@keyframes flap { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.42); } }
.em-float { animation: hover 2.4s ease-in-out infinite; }
@keyframes hover { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(3px, -7px); } }

/* ---------- night ---------- */
.screen-night { display: flex; flex-direction: column; height: calc(100 * var(--vh)); }
.night-main {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 4px calc(var(--safe-r) + 18px) 14px calc(var(--safe-l) + 18px);
  --art-h: calc(50 * var(--vh));
}
.art { margin: 0; width: 100%; display: flex; justify-content: center; }
.art-box {
  position: relative; width: min(100%, calc(var(--art-h) * 4 / 3)); aspect-ratio: 4 / 3;
  border-radius: 20px; overflow: hidden; background: #0d1230;
  box-shadow: 0 12px 44px rgba(0,0,0,.5), 0 0 0 3px rgba(255,214,140,.38);
  touch-action: manipulation; cursor: pointer;
}
@supports not (aspect-ratio: 4 / 3) {
  .art-box { height: 0; padding-top: 75%; }
}
.art-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.art-expand {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 56px; height: 56px; border-radius: 16px;
  border: 0; background: rgba(10,14,40,.55); color: #fff; display: grid; place-items: center;
}
.art-expand svg { width: 28px; height: 28px; }
.art.is-full {
  position: fixed; inset: 0; z-index: 40; background: rgba(5,8,22,.97);
  display: flex; align-items: center; justify-content: center;
}
.art.is-full .art-box { width: min(100vw, calc(100 * var(--vh) * 4 / 3)); border-radius: 0; box-shadow: none; }
.art.is-full .art-expand { top: calc(var(--safe-t) + 12px); right: calc(var(--safe-r) + 12px); }

.ring {
  position: absolute; z-index: 2; pointer-events: none; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 5px solid var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(20,20,40,.45), 0 0 26px 8px rgba(255,200,80,.85), inset 0 0 20px rgba(255,210,110,.55);
  transform: translate(-50%, -50%);
  animation: ringIn .55s cubic-bezier(.2,1.4,.4,1) both, ringPulse 1.8s ease-in-out .6s infinite;
}
@keyframes ringIn { from { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(20,20,40,.45), 0 0 18px 4px rgba(255,200,80,.6), inset 0 0 14px rgba(255,210,110,.4); } 50% { box-shadow: 0 0 0 3px rgba(20,20,40,.45), 0 0 34px 12px rgba(255,200,80,.95), inset 0 0 24px rgba(255,210,110,.7); } }
.answer {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; margin: 0;
  padding: 10px 16px; border-radius: 14px; background: rgba(12,16,42,.78); color: #fff;
  font: 600 clamp(16px, 2vw, 21px)/1.3 var(--sans); text-align: center; pointer-events: none;
}
.answer.top { top: 12px; bottom: auto; right: 78px; }
.answer b { color: var(--gold-hi); }
.fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.puff {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9);
  transform: translate(-50%, -50%) scale(.3); animation: puff .55s ease-out forwards;
}
@keyframes puff { to { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.spark {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; color: var(--gold-hi);
  animation: spark .9s ease-out forwards;
}
.spark::before { content: "✦"; font-size: 20px; line-height: 14px; text-shadow: 0 0 8px rgba(255,200,80,.9); }
@keyframes spark { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }

.card {
  width: min(100%, 880px); background: var(--paper); color: var(--ink);
  border-radius: 24px; padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3vw, 34px);
  box-shadow: 0 12px 44px rgba(0,0,0,.4), inset 0 0 0 2px rgba(234,217,184,.8);
}
.story p { margin: 0 0 .5em; font: 400 clamp(20px, 2.55vw, 27px)/1.45 var(--serif); }
.refrain-row { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; }
.refrain {
  flex: 1; margin: 0; padding: 6px 0 6px 16px; border-left: 6px solid var(--gold);
  font: italic 600 clamp(20px, 2.5vw, 26px)/1.4 var(--serif); color: #3a2b55;
}
.refrain.whisper { color: #5b5285; font-weight: 500; }
.light-btn {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; padding: 4px;
  border: 3px solid #d9b56f; background: radial-gradient(circle at 50% 40%, #2e3868, #161c3f);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.light-btn:active { transform: scale(.94); }
.light-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.light-btn.is-lit { background: radial-gradient(circle at 50% 45%, #6b4a1c, #2a2040); border-color: var(--gold); box-shadow: 0 0 26px rgba(255,190,80,.75); }
.light-btn.ready { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { box-shadow: 0 0 0 0 rgba(244,183,64,.0), 0 6px 18px rgba(0,0,0,.25); } 50% { box-shadow: 0 0 0 10px rgba(244,183,64,.35), 0 6px 18px rgba(0,0,0,.25); } }
.light-hint { margin: 4px 0 12px 98px; font: 600 15px/1.3 var(--sans); color: var(--gold-deep); }
.extras { display: grid; gap: 10px; margin-top: 6px; }
.extra { display: grid; grid-template-columns: 170px 1fr auto; align-items: baseline; gap: 12px; }
.extra-label { font: 800 13px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.extra-text { font: 500 clamp(17px, 2vw, 20px)/1.4 var(--sans); color: var(--ink); }
.found-badge {
  align-self: center; padding: 6px 12px; border-radius: 999px; background: var(--collar); color: #0d2b3a;
  font: 800 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}

.lantern-row {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(12, 12px); gap: 5px 4px;
  min-height: 64px; padding: 9px 12px; border-radius: 16px; align-content: center;
  border: 1px solid rgba(255,255,255,.2); background: rgba(10,14,40,.35);
}
.lantern-row i { width: 12px; height: 16px; border-radius: 3px 3px 4px 4px; background: #3a4475; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.lantern-row i.lit { background: linear-gradient(#fff0b8, var(--gold)); box-shadow: 0 0 8px rgba(255,190,80,.9); }
.lantern-row i.cur { outline: 2px solid #fff; outline-offset: 1px; }
@media (min-width: 1100px) { .lantern-row { grid-template-columns: repeat(24, 12px); } }

.night-nav {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 10px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 16px);
  background: linear-gradient(180deg, rgba(20,27,61,0), rgba(20,27,61,.9) 30%);
}
.nav-btn { min-height: 72px; padding: 0 10px; font-size: clamp(16px, 2vw, 20px); }
.nav-btn.attention { animation: nudge 1s ease-in-out 3; }

/* landscape iPad: picture left, words right */
@media (orientation: landscape) and (min-width: 900px) {
  .night-main { flex-direction: row; align-items: stretch; gap: 18px; overflow: hidden;
    --art-h: calc(100 * var(--vh) - 190px - var(--safe-t) - var(--safe-b)); }
  .art { flex: 1 1 60%; align-items: center; }
  .card { flex: 1 1 40%; width: auto; max-width: 560px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .story p, .refrain { font-size: clamp(19px, 1.9vw, 23px); }
  .extra { grid-template-columns: 1fr auto; }
  .extra-label { grid-column: 1 / -1; }
  .light-hint { margin-left: 98px; }
}
@media (max-width: 640px) {
  .extra { grid-template-columns: 1fr auto; }
  .extra-label { grid-column: 1 / -1; }
  .lantern-row { display: none; }
  .nav-btn { font-size: 15px; }
}

/* ---------- finale ---------- */
.screen-finale { position: relative; height: calc(100 * var(--vh)); overflow: hidden; background: linear-gradient(180deg, #070b22 0%, #141b4a 60%, #2a2d6a 100%); }
.finale-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.finale-svg .star.tw { animation: twinkle 3.2s ease-in-out infinite; }
.finale-svg .road { fill: none; stroke: rgba(255,214,120,.0); stroke-width: 22; stroke-linecap: round; transition: stroke 2.4s ease; }
.finale-svg.go .road { stroke: rgba(255,214,120,.28); }
.finale-svg .fl { opacity: 0; transition: opacity .5s ease; }
.finale-svg.go .fl { opacity: 1; }
.finale-svg .fstar { opacity: 0; transition: opacity 1.2s ease; }
.finale-svg .fstar.on { opacity: 1; }
.finale-svg .fstar.on .star-rays { animation: spin 22s linear infinite; transform-box: fill-box; transform-origin: center; }
.finale-good {
  position: absolute; left: 0; right: 0; top: 40%; margin: 0; text-align: center; z-index: 2;
  font: italic 600 clamp(36px, 6vw, 72px)/1.1 var(--display); color: #fff;
  text-shadow: 0 0 30px rgba(255,200,100,.6), 0 4px 18px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s ease;
}
.finale-good.on { opacity: 1; transform: none; }
.finale-actions {
  position: absolute; left: calc(var(--safe-l) + 20px); right: calc(var(--safe-r) + 20px); bottom: calc(var(--safe-b) + 22px); z-index: 2;
  display: flex; justify-content: space-between; gap: 14px; opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
.finale-actions.on { opacity: 1; pointer-events: auto; }

/* ---------- grown-ups sheet ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(5,8,22,.7);
  display: grid; place-items: center; padding: 20px;
}
.sheet {
  position: relative; width: min(600px, 100%); max-height: calc(100 * var(--vh) - 40px); overflow-y: auto;
  background: var(--paper); color: var(--ink); border-radius: 26px; padding: 28px clamp(20px, 4vw, 36px);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.sheet h2 { margin: 0 0 18px; font: 600 34px/1.1 var(--display); }
.sheet-close {
  position: absolute; top: 12px; right: 12px; width: 60px; height: 60px; border-radius: 50%;
  border: 0; background: rgba(43,36,51,.08); color: var(--ink); font: 400 34px/1 var(--sans);
}
.switch { display: flex; align-items: center; gap: 14px; min-height: 60px; font: 600 18px/1.3 var(--sans); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; flex: 0 0 64px; width: 64px; height: 38px; border-radius: 999px; background: #cfc4b0; transition: background .2s ease; }
.switch-ui::after { content: ""; position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s ease; }
.switch input:checked + .switch-ui { background: var(--gold); }
.switch input:checked + .switch-ui::after { transform: translateX(26px); }
.switch input:focus-visible + .switch-ui { box-shadow: 0 0 0 4px rgba(244,183,64,.35); }
.gu-note { margin: 6px 0 16px; color: var(--ink-soft); font: 500 16px/1.45 var(--sans); }
.gu-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gu-version { margin: 18px 0 0; color: var(--ink-soft); font: 500 13px/1.3 var(--sans); text-align: center; }

/* ---------- toast & flying Ember ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 110px); z-index: 80;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 640px); padding: 14px 24px; border-radius: 18px;
  background: rgba(255,247,226,.97); color: var(--ink); text-align: center;
  font: 700 clamp(17px, 2.1vw, 21px)/1.35 var(--sans);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 3px rgba(244,183,64,.6);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.ember-fly { position: fixed; z-index: 70; width: 70px; height: 56px; margin: -28px 0 0 -35px; pointer-events: none; animation: emberFly 1.9s ease-out forwards; }
@keyframes emberFly {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: translate(26px, -70px) scale(1); }
  70% { transform: translate(-18px, -140px) scale(1); opacity: 1; }
  100% { transform: translate(10px, -220px) scale(.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .snow { display: none; }
}