/* High Road – a three.js sky runner on a full-bleed scene. Glass HUD over the canvas: top bar (game sign, menu), stat bar,
   question banner with the two lane answers, fact toast, track bar, a Jump button. The title screen is a cloud-blue card
   over the live scene; the pause and finish cards are dark. Exactly one screen tall: nothing scrolls, upright, sideways
   or on a desktop. */
.stage.road { padding: 0; overflow: hidden; background: #6cb8ff; }
.road, .road button { font-family: var(--skin-font, var(--font)); }
.scene { position: absolute; inset: 0; }
.scene canvas { width: 100% !important; height: 100% !important; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: #ff3d6a; }
.flash.good { background: #5cf08a; }
/* ---- HUD: Omri's concept. The logo centred over one row of four equal winged plates, each crested by its icon (the
   hearts plate by the hearts themselves), the level's face green; under them the question dialog (its nameplate, the
   portrait in a gold ring, glass capsules, clouds), and at the foot the Jump coin on its cloud bank and the arrow-capped
   track bar. Labels, values, the question, the nameplate, the bar and the Jump label set in the HUD face: Love Ya Like A
   Sister in Latin scripts, Rubik in Hebrew and Arabic. Every piece of chrome is Omri's art (assets/ui), scaled whole or
   sliced so its ornaments keep their shape. */
:root { --hud-font: 'Love Ya Like A Sister', var(--skin-font, var(--font)); --hud-weight: 400; --hud-cap: .05em;
  --hud-ink: 0 1.5px 0 #3b2208, 1.5px 0 0 #3b2208, -1.5px 0 0 #3b2208, 0 -1.5px 0 #3b2208, 1px 1px 0 #3b2208, -1px 1px 0 #3b2208, 1px -1px 0 #3b2208, -1px -1px 0 #3b2208, 0 3px 4px rgba(0,0,0,.4); }
:root:lang(he), :root:lang(ar) { --hud-font: var(--font); --hud-weight: 800; --hud-cap: 0em; }
.hud { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; z-index: 2; }
.hud > * { width: min(100%, 640px); }
.hud__spacer { flex: 1; min-height: 0; }
.topbar { --side: 48px; display: grid; grid-template-columns: var(--side) 1fr var(--side); align-items: center; gap: 8px; }
/* inside the app a back (home) button stands beside the sound button: both sides of the sign grow by its width, so the sign stays centred */
html.hosted .topbar { --side: 104px; }
.topbar__btns { justify-self: end; display: flex; gap: 8px; }
.topbar__btns .menu-btn[hidden] { display: none; }
.sign { display: flex; justify-content: center; align-items: center; min-width: 0; }
.sign__logo { height: 58px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(10,40,90,.45)); }
.sign__logo[hidden] { display: none; } .sign__logo:not([hidden]) + b { display: none; }
.sign b { font-size: clamp(1.5rem, 7vw, 2.3rem); font-weight: 900; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 1.5px rgba(20,60,140,.7); text-shadow: 0 3px 0 rgba(20,60,140,.6), 0 8px 20px rgba(0,30,80,.5); }
/* the round navy-and-gold buttons (sound, and the app's back): the game's own glyph on Omri's disc */
.menu-btn { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: url(../assets/ui/sound-btn.png) center / contain no-repeat; color: #fff; display: grid; place-items: center; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 4px 8px rgba(0,20,60,.35)); }
.menu-btn svg { width: 23px; height: 23px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.menu-btn:hover { filter: drop-shadow(0 4px 8px rgba(0,20,60,.35)) brightness(1.15); }
/* the plates: drawn whole at their own aspect, a little overlapped so the wings tuck behind each other */
.statbar { --crest: 12px; display: flex; width: min(100%, 470px); padding-top: var(--crest); }
.stat { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 242 / 162; background: url(../assets/ui/hud-plate.png) center / 100% 100% no-repeat; filter: drop-shadow(0 5px 8px rgba(0,20,60,.28)); }
.stat + .stat { margin-inline-start: -2.6%; }
.stat:first-child { background-image: url(../assets/ui/hud-plate-level.png); }
.stat > img, .stat > b.hearts { position: absolute; left: 50%; translate: -50% 0; z-index: 1; }
.stat > img { top: -18%; height: 46%; width: auto; max-width: 52%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(40,20,0,.5)); }
.stat > img[hidden] { display: none; }
.stat:nth-child(2) > img { top: -16%; height: 42%; }   /* a coin fills its whole square, so it wears a smaller one than the crown and star to look their size and clear its label */
/* the face: the label over the value, the pair centred both ways in the face's free part, from the crests' line (28%
   of the plate) to the frame's inner bottom edge (85.8% of the art, whose face runs 14.9-84.3% across). It is the same
   box on all four plates, so their rows line up. The type follows the plate (cqw, a hundredth of its width), not the
   screen, as large as the free face allows. Each line box is one em; --hud-cap drops the letters by the HUD face's own
   offset (Love Ya Like A Sister sets its capitals and figures 5% of an em high in the box, Rubik dead centre), so the
   ink itself is what is centred */
.stat { container-type: inline-size; }
.stat > div { position: absolute; top: 28%; bottom: 14.2%; left: 14.9%; right: 15.7%; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; }
.stat span, .stat > div > b { display: block; max-width: 100%; white-space: nowrap; padding-block: .15em; margin-block: -.15em; translate: 0 var(--hud-cap); text-shadow: var(--hud-ink); }   /* the padding holds the face's tall glyph area (1.25em) inside the box, the margin gives it back: the line still lays out one em tall */
.stat span { font: var(--hud-weight) 12px / 1 var(--hud-font); font-size: max(9px, 12.5cqw); letter-spacing: .05em; padding-inline-start: .05em; text-transform: uppercase; color: #fff3d2; }
:lang(he) .stat span, :lang(ar) .stat span { padding-inline-start: 0; }   /* the start padding balances the spacing after the last letter, which these two languages drop */
:lang(he) .stat > div > b, :lang(ar) .stat > div > b { font-size: 21cqw; }   /* Rubik ExtraBold figures run wider and heavier than the handwritten face's: a size smaller looks the same size */
.stat > div > b { max-width: 86%; font: var(--hud-weight) 23px / 1 var(--hud-font); font-size: 24cqw; color: #fff; transition: transform .12s; }   /* 86%: a long score keeps clear of the clouds on the frame's corners */
.stat:nth-child(2) > div > b { color: #ffd54a; }
.stat:nth-child(3) > div > b { color: #ffb3c3; }
/* the coins plate's charge: a gauge set in the frame's lower edge between the clouds, filling toward the next 50 coins;
   at 50 it lights in the theme's neon and drains through the power-up's 5 s */
.stat > .charge { position: absolute; inset-inline: 27%; bottom: 7%; height: 7%; border-radius: 99px; background: rgba(48,24,4,.72); box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,234,170,.7); overflow: hidden; z-index: 1; }
.stat > .charge > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--fill, 0%); border-radius: inherit; background: linear-gradient(#fff7c2, #ffcf33 55%, #f39a00); transition: width .25s ease-out; }
.stat > .charge.on { box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px #fff, 0 0 8px 1px var(--shield, #9be4ff); }
.stat > .charge.on > i { background: linear-gradient(90deg, var(--shield, #9be4ff), #ffffff 50%, var(--shield, #9be4ff)) 0 0 / 200% 100%; transition: none; animation: chargeRun .7s linear infinite; }
@keyframes chargeRun { to { background-position: -200% 0; } }
/* a collected coin on its way up to the coins plate (js flyCoin): the theme's coin picture, or a gold disc without one */
.coin-fly { position: absolute; left: 0; top: 0; z-index: 3; width: 30px; height: 30px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255,220,120,.9)); }
i.coin-fly { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c4, #ffcf3a 55%, #c98a12); }
.stat > b.hearts { top: -13%; height: 34%; display: flex; gap: 0; align-items: center; }
.hearts img { height: 100%; width: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60,0,10,.45)); transition: opacity .2s, filter .2s, transform .2s; }
.hearts img + img { margin-inline-start: -6%; }
.hearts img.off { opacity: .3; filter: grayscale(1); transform: scale(.82); }
.hearts img[hidden] { display: none; }
.hearts i { font-style: normal; color: #ff4d6d; font-size: 16px; } .hearts i.off { opacity: .3; }
/* the question: the card, and hanging under it the two answers. The card is nine-sliced at one scale (--k, its width
   over the art's 690px), so the capsules, the crest and the clouds keep their shape and only the parchment and the
   capsule glass grow with a longer question */
.quiz { --qw: min(calc(100vw - 20px), 540px); --k: calc(var(--qw) / 690); position: relative; display: flex; flex-direction: column; align-items: center; width: var(--qw); margin-top: calc(var(--k) * 26); }
@keyframes quizIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.quiz[hidden] { display: none; }
.quiz__card { position: relative; display: flex; gap: calc(var(--k) * 16); align-items: center; box-sizing: border-box; width: 100%; min-height: calc(var(--k) * 230); padding: calc(var(--k) * 60) calc(var(--k) * 94) calc(var(--k) * 46); border: 0; border-image: url(../assets/ui/dialog.png) 52 76 72 76 fill / calc(var(--k) * 52) calc(var(--k) * 76) calc(var(--k) * 72) calc(var(--k) * 76) stretch; filter: drop-shadow(0 9px 14px rgba(15,25,55,.33)); }
.quiz__icon { position: relative; flex: none; width: calc(var(--k) * 106); height: calc(var(--k) * 106); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); display: grid; place-items: center; }
.quiz__icon::after { content: ''; position: absolute; inset: -3%; background: url(../assets/ui/medallion-ring.png) center / 100% 100% no-repeat; pointer-events: none; }
.quiz__icon img { width: 84%; height: 84%; border-radius: 50%; object-fit: contain; }
.quiz__body { min-width: 0; flex: 1; text-align: center; }
/* the nameplate: the theme's name on Omri's scroll, as wide as the name needs (the scroll stretches between its two
   ends; the gem stays at its centre) */
.quiz__theme { --nk: calc(var(--k) * .58); position: absolute; left: 50%; top: calc(var(--k) * -24); translate: -50% 0; z-index: 1; box-sizing: border-box; height: calc(var(--nk) * 108); width: max-content; max-width: calc(var(--qw) * .94); padding: calc(var(--nk) * 14) calc(var(--nk) * 128) calc(var(--nk) * 30); border: 0; border-image: url(../assets/ui/nameplate.png) 0 135 fill / 0 calc(var(--nk) * 135) stretch; font: var(--hud-weight) calc(var(--nk) * 36) / calc(var(--nk) * 64) var(--hud-font); letter-spacing: .06em; text-transform: uppercase; color: #1e2c52; white-space: nowrap; overflow: hidden; }
.quiz__theme::after { content: ''; position: absolute; left: 50%; translate: -50% 0; top: calc(var(--nk) * 56); width: calc(var(--nk) * 110); height: calc(var(--nk) * 48); background: url(../assets/ui/nameplate-gem.png) center / 100% 100% no-repeat; pointer-events: none; }
.quiz__theme b { color: #1e2c52; font-weight: inherit; }
.quiz__q { margin-top: 0; font: var(--hud-weight) calc(var(--k) * 34) / 1.14 var(--hud-font); color: #22304f; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the answers: lane-coloured plates framed in gold with a gem at each side, as the arches once wore them, each over its
   lane. The one over the runner's lane lifts and glows; once the gate is crossed the right one turns green, a wrong
   pick red, and the other fades */
.quiz__answers { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--k) * 34); width: calc(100% - var(--k) * 70); margin-top: calc(var(--k) * -14); direction: ltr; }
.quiz__a { --c: var(--l, #ff5c8a); --tone: color-mix(in srgb, var(--c) 52%, #0c1030); position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--k) * 10); box-sizing: border-box; min-width: 0; min-height: calc(var(--k) * 92); padding: calc(var(--k) * 10) calc(var(--k) * 16); border-radius: calc(var(--k) * 22); border: calc(var(--k) * 6) solid #f1c467; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 80%, #fff), var(--tone) 55%, color-mix(in srgb, var(--tone) 80%, #000)); box-shadow: inset 0 0 0 calc(var(--k) * 3) rgba(255,255,255,.35), 0 7px 14px rgba(0,20,60,.35); color: #fff; transition: transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease-out, filter .35s ease-out; }
#quiz-a1 { --c: var(--r, #42d6b1); }
@supports not (color: color-mix(in srgb, red, blue)) { #quiz-a0 { background: #5e2e44; } #quiz-a1 { background: #23585a; } .quiz.done .quiz__a.ok { background: #1f9b53; } .quiz.done .quiz__a.bad { background: #c62f4e; } }
.quiz__a::before, .quiz__a::after { content: ''; position: absolute; top: 50%; width: calc(var(--k) * 18); height: calc(var(--k) * 18); background: linear-gradient(135deg, #fffbe8, #f1c467 55%, #b07c25); border: 1.5px solid #fffbe8; box-shadow: 0 1px 3px rgba(60,30,0,.4); transform: translateY(-50%) rotate(45deg); }
.quiz__a::before { left: calc(var(--k) * -14); } .quiz__a::after { right: calc(var(--k) * -14); }
.quiz__a > span { min-width: 0; text-align: center; font: var(--hud-weight) calc(var(--k) * 35) / 1.06 var(--hud-font); text-shadow: 0 1.5px 0 rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.35); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quiz__aicon { flex: none; box-sizing: border-box; width: calc(var(--k) * 48); height: calc(var(--k) * 48); padding: 2px; border-radius: 50%; border: 2px solid #f1c467; background: rgba(10,16,40,.5); object-fit: contain; }
.quiz__aicon[hidden] { display: none; }
.quiz__a.hot { transform: translateY(calc(var(--k) * -6)) scale(1.06); box-shadow: inset 0 0 0 calc(var(--k) * 3) rgba(255,255,255,.5), 0 0 0 3px #fff3c4, 0 0 22px rgba(255,226,140,.9), 0 9px 16px rgba(0,20,60,.35); }
.quiz.done .quiz__a { filter: saturate(.3) brightness(.72); transform: none; }
.quiz.done .quiz__a.ok { --tone: #1f9b53; filter: none; transform: scale(1.04); box-shadow: inset 0 0 0 calc(var(--k) * 3) rgba(255,255,255,.5), 0 0 0 3px #c8ffd9, 0 0 24px rgba(90,255,150,.85), 0 9px 16px rgba(0,20,60,.35); }
.quiz.done .quiz__a.bad { --tone: #c62f4e; filter: none; }
/* fact toast for collectibles: it shows in the question banner's place, under the stats, so it is never under the Jump
   button at the bottom. The two never share the screen: an item picked up while a banner is up waits for it to go */
.toast { display: flex; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 14px; background: rgba(14,40,90,.8); border: 2px solid var(--kit-accent, var(--accent)); font-size: 13px; line-height: 1.3; color: #eef6ff; box-shadow: 0 8px 24px rgba(0,20,60,.4); pointer-events: none; animation: quizIn .25s ease-out; }
.toast[hidden] { display: none; }
.toast .asset { width: 40px; height: 40px; flex: none; border-radius: 8px; }
.toast b { color: var(--kit-accent, var(--accent)); }
/* the track bar: Omri's frame nine-sliced at the bar's own height (its arrow caps keep their shape), clouds at both
   ends, his navy track with the gold fill, the star riding its tip and the chequered disc at the finish */
.trackbar { --h: 42px; position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: var(--h); width: min(100%, 560px); padding: 0 calc(var(--h) * .9); border: 0; border-image: url(../assets/ui/trackbar.png) 20 62 fill / calc(var(--h) * 20 / 82) calc(var(--h) * 62 / 82) stretch; color: #fff; font: var(--hud-weight) 15px / 1 var(--hud-font); text-shadow: var(--hud-ink); filter: drop-shadow(0 6px 10px rgba(0,20,60,.35)); }
.trackbar::before, .trackbar::after { content: ''; position: absolute; bottom: calc(var(--h) * -.42); width: calc(var(--h) * 1.7); aspect-ratio: 160 / 68; background: url(../assets/ui/cloud-m.png) center / contain no-repeat; pointer-events: none; }
.trackbar::before { left: calc(var(--h) * -.45); }
.trackbar::after { right: calc(var(--h) * -.45); transform: scaleX(-1); }
.trackbar > span { white-space: nowrap; }
.trackbar .progress { flex: 1; position: relative; margin: 0 6px 0 0; height: calc(var(--h) * .38); border: 0; border-radius: 0; background: none; box-shadow: none; border-image: url(../assets/ui/track.png) 0 18 fill / 0 calc(var(--h) * .19) stretch; }
.trackbar .progress::after { content: ''; position: absolute; inset-inline-end: calc(var(--h) * -.2); top: 50%; translate: 0 -50%; width: calc(var(--h) * .56); height: calc(var(--h) * .56); background: url(../assets/ui/track-flag.png) center / contain no-repeat; }
.trackbar .progress i { display: block; position: relative; height: 100%; border: 0; border-radius: 0; background: none; box-shadow: none; border-image: url(../assets/ui/track-fill.png) 0 18 fill / 0 calc(var(--h) * .19) stretch; }
.trackbar .progress i::after { content: ''; position: absolute; inset-inline-end: calc(var(--h) * -.26); top: 50%; translate: 0 -50%; width: calc(var(--h) * .58); height: calc(var(--h) * .58); background: url(../assets/ui/track-star.png) center / contain no-repeat; }
.trackbar .progress i.warn { filter: hue-rotate(-38deg) saturate(1.6); }
.trackbar b { font-weight: inherit; white-space: nowrap; }
/* the Jump coin: bottom centre, rising out of its cloud bank, above the track bar (bottom right when sideways). A
   control, so it never mirrors in Hebrew or Arabic (Bible §5.5.5): only text and reading order flip. Its label is live
   text where the art had its word, so every language reads its own */
.jump-btn { position: absolute; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: url(../assets/ui/jump.png) center / contain no-repeat; color: #fff; filter: drop-shadow(0 8px 12px rgba(0,20,60,.3)); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.jump-btn::after { content: ''; position: absolute; z-index: 0; left: 50%; bottom: -38%; translate: -50% 0; width: 205%; aspect-ratio: 348 / 103; background: url(../assets/ui/cloud-bank.png) center / contain no-repeat; pointer-events: none; }
.jump-btn i { display: none; }
.jump-btn span { position: absolute; z-index: 1; inset-inline: 0; top: 60%; font: var(--hud-weight) 15px / 1 var(--hud-font); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1.5px 0 #a3470a, 1.5px 0 0 #a3470a, -1.5px 0 0 #a3470a, 0 -1px 0 #a3470a, 0 3px 3px rgba(80,30,0,.4); }
.jump-btn:active, .jump-btn.down { background-image: url(../assets/ui/jump-down.png); transform: translateX(-50%) translateY(3px); filter: drop-shadow(0 4px 7px rgba(0,20,60,.3)); }
@media (hover: hover) and (pointer: fine) { .jump-btn { width: 64px; height: 64px; bottom: calc(76px + env(safe-area-inset-bottom)); } .jump-btn span { font-size: 13px; } }
/* the message line fades in where placeMsg puts it (under the question card): its top must never slide, or it crosses the card */
.stage .msg { transition: opacity .25s, transform .25s; top: 40%; background: rgba(14,40,90,.78); border: 2px solid rgba(255,255,255,.5); font-size: 15px; letter-spacing: .04em; text-transform: none; white-space: normal; text-align: center; max-width: min(92%, 560px); padding: 8px 18px; }
html.road-title .trackbar, html.road-title .toast, html.road-title .jump-btn, html.road-title .quiz { visibility: hidden; }
/* ---- the cloud-blue cards */
.overlay--title { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: flex-start; padding: var(--hud-top, 140px) 14px 14px; pointer-events: none; }
.overlay:not(.overlay--title) { background: rgba(30,70,140,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tpanel { pointer-events: auto; width: min(100%, 520px); border-radius: 26px; border: 4px solid rgba(255,255,255,.75); background: linear-gradient(180deg, rgba(36,92,190,.86), rgba(16,48,120,.92)); box-shadow: inset 0 0 0 2px rgba(120,190,255,.35), inset 0 -30px 60px rgba(0,20,80,.35), 0 20px 50px rgba(0,20,60,.45); padding: 14px 16px 16px; text-align: center; color: #eef6ff; }
.tpanel--dialog { background: rgba(14,16,22,.94); }
.tpanel__kit { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffe27a; }
.tpanel__kit::before, .tpanel__kit::after { content: ''; flex: 1; max-width: 48px; height: 1px; background: rgba(255,226,122,.55); }
.tpanel__logo { margin: 6px 0 4px; display: flex; justify-content: center; }
.tpanel__logo img { height: 96px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,20,60,.5)); }
.tpanel__logo img[hidden] { display: none; } .tpanel__logo img:not([hidden]) + h1 { display: none; }
.tpanel__logo h1 { margin: 0; font-size: 2.2rem; color: #fff; -webkit-text-stroke: 1.5px rgba(20,60,140,.7); text-shadow: 0 3px 0 rgba(20,60,140,.6); }
.tpanel__intro { margin: 2px 0 10px; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.hcards { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.hcard { --c: #7dff8f; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; border: 2px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, rgba(0,20,60,.45)), rgba(0,20,60,.4)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.hcard--green { --c: #8dffa0; } .hcard--orange { --c: #ffc24a; } .hcard--blue { --c: #7fe0ff; }
.hcard__icon { position: relative; width: 72px; height: 62px; border-radius: 12px; border: 2px solid var(--c); background: rgba(255,255,255,.12); display: grid; place-items: center; overflow: hidden; }
.hcard__icon img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,20,60,.5)); }
.hcard__icon img[hidden] { display: none; }
.hcard__icon--jump i { position: absolute; right: 4px; bottom: 2px; font-style: normal; font-weight: 900; font-size: 22px; color: var(--c); text-shadow: 0 2px 3px rgba(0,20,60,.8); }
.hcard b { display: block; font-size: 17px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--c); }
.hcard__how { display: block; font-size: 13px; line-height: 1.3; color: #e6f1ff; font-family: var(--font); }
.hcard em { font-style: normal; font-weight: 800; color: #8dffa0; }
.playbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 58px; margin-top: 12px; border-radius: 18px; border: 3px solid #c6ffa8; background: linear-gradient(180deg, #a2f06a 0%, #5cc93f 55%, #3aa42c 100%); color: #ffffff; font: inherit; font-size: 22px; font-weight: 900; cursor: pointer; text-shadow: 0 2px 0 rgba(0,60,0,.45); box-shadow: 0 6px 0 #227a19, 0 12px 24px rgba(0,20,60,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.playbtn i { font-style: normal; font-size: 18px; }
.playbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #227a19, 0 6px 12px rgba(0,20,60,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.playbtn--continue { background: linear-gradient(180deg, #ffd766, #f0a020 60%, #d98a12); border-color: #ffe9a8; box-shadow: 0 6px 0 #8a5a08, 0 12px 24px rgba(0,20,60,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.playbtn[hidden] { display: none; }
.tpanel__best { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 13px; color: #d9ecff; }
.tpanel__best img { width: 18px; height: 18px; object-fit: contain; } .tpanel__best img[hidden] { display: none; }
.tpanel .actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tpanel .actions .playbtn { margin-top: 4px; }
.tpanel h2 { margin: 6px 0 8px; color: #fff; }
.tpanel .stats { margin-bottom: 4px; } .tpanel .stats div { background: rgba(255,255,255,.1); } .tpanel .stats span { color: #cfe4ff; } .tpanel .stats b { color: #ffe27a; }
.tpanel .muted { color: #d9ecff; }
.tpanel .facts { margin: 8px 0; } .tpanel .fact { background: rgba(255,255,255,.1); color: #eef6ff; } .tpanel .fact b { color: #ffe27a; }
.tpanel .btn--ghost { background: rgba(255,255,255,.16); }
/* inside the app: the 0-100 score the play is worth, under the card's heading */
.tpanel .app-score { margin: -2px 0 6px; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: #8dffa0; }
.tpanel .app-score[hidden] { display: none; }

/* The victory card (level clear and all-done): a warm themed board with a dimensional gold title, parchment rows,
   icon stat tiles, a glossy go button, confetti speckles and the runner cheering at its side. Its colours follow the
   theme's skin vars (--skin-frame/panel/accent/glow from look); the fallbacks are the stock candy palette. */
.tpanel--win { position: relative;
  border-image: url(../assets/ui/card-frame.png) 66 / 18px round;
  border-color: color-mix(in srgb, var(--skin-frame, #d8ad63) 68%, #3a2a12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--skin-frame, #d8ad63) 40%, #241a10), color-mix(in srgb, var(--skin-panel, #2a4a7a) 52%, #110d08) 72%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 0 0 2px rgba(0,0,0,.28), inset 0 -40px 70px rgba(0,0,0,.35), 0 22px 55px rgba(0,10,30,.5); }
.tpanel--win::before { content: ''; position: absolute; inset: -10px; pointer-events: none; opacity: .95; background:
  radial-gradient(4px 4px at 8% 12%, var(--skin-glow, #9be4ff) 98%, transparent),
  radial-gradient(3px 3px at 93% 9%, #ffe27a 98%, transparent),
  radial-gradient(3px 3px at 13% 70%, #ffe27a 98%, transparent),
  radial-gradient(4px 4px at 90% 72%, var(--skin-accent, #ff7ba9) 98%, transparent),
  radial-gradient(3px 3px at 52% 1%, var(--skin-accent, #ff7ba9) 98%, transparent),
  radial-gradient(2.5px 2.5px at 73% 3%, var(--skin-glow, #9be4ff) 98%, transparent),
  radial-gradient(2.5px 2.5px at 28% 2%, #ffffff 98%, transparent); }
.tpanel--win h2 { font-size: clamp(26px, 6vw, 38px); font-weight: 900; margin: 2px 0 8px;
  background: linear-gradient(180deg, #fff6d8, #ffd24a 55%, #e8960a); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(46,28,8,.6); filter: drop-shadow(0 3px 0 rgba(40,22,6,.5)) drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.tpanel--win .tpanel__kit { color: #ffe9a8; }
.tpanel--win .fact { background: #f6eedb; color: #43382a; box-shadow: inset 0 0 0 1.5px rgba(122,96,58,.3), inset 0 2px 0 #fffdf4; }
.tpanel--win .fact b { color: color-mix(in srgb, var(--skin-accent, #b95142) 72%, #2a1710); }
.tpanel--win .chip { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; align-self: center; font-weight: 900; font-size: 13px; color: #fff; }
.tpanel--win .chip--ok { background: #2ea860; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.25); }
.tpanel--win .chip--bad { background: #d8405e; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.25); }
.tpanel--win .chip--miss { background: #8d94a4; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.tpanel--win .stats div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; text-align: start; padding: 8px 10px;
  background: color-mix(in srgb, var(--skin-panel, #2a4a7a) 70%, #060a16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 2px 0 rgba(255,255,255,.07); }
.tpanel--win .stats img { grid-row: 1 / 3; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.tpanel--win .stats img[hidden] { visibility: hidden; }
.tpanel--win .playbtn { color: #fff; background: linear-gradient(180deg, #8ae95a, #37b24d 48%, #2b9a40); border: 3px solid #1d7a31; text-shadow: 0 2px 0 rgba(0,60,20,.45);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,70,20,.35), 0 6px 0 #156327, 0 10px 18px rgba(0,30,10,.35), 0 0 0 3px rgba(255,226,122,.5); }
.tpanel--win .playbtn:active { transform: translateY(3px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,70,20,.35), 0 3px 0 #156327, 0 6px 12px rgba(0,30,10,.3), 0 0 0 3px rgba(255,226,122,.5); }
.win-hero { position: absolute; inset-inline-start: -36px; bottom: 12px; height: clamp(92px, 26vmin, 152px); width: auto; pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,10,30,.45)); }
.win-hero[hidden] { display: none; }
@media (max-width: 500px) { .win-hero { display: none; } }
/* ---- motion: staggered, eased entrances and feedback. All of it finite (the browser checks wait for animations to
   settle) and none of it under reduced motion. A box the layout check measures (the bar, the Jump coin, the buttons,
   the statbar, the question) only scales within itself; only their children travel, so nothing is ever off screen or
   overlapping mid-entrance. Elements that carry their own transform (the Jump coin's centring, the nameplate's)
   animate the separate scale property or a transform that composes with it */
@media (prefers-reduced-motion: no-preference) {
  /* a level begins: the logo drops, the plates land one after another, the sound button pops, the bar rises, the coin pops */
  .hud-enter .sign { animation: hudDrop .7s cubic-bezier(.34,1.56,.64,1) backwards; }
  .hud-enter .topbar__btns { animation: hudPop .5s .32s cubic-bezier(.34,1.56,.64,1) backwards; }
  .hud-enter .stat { animation: plateLand .6s cubic-bezier(.34,1.56,.64,1) backwards; }
  .hud-enter .stat:nth-child(1) { animation-delay: .1s; } .hud-enter .stat:nth-child(2) { animation-delay: .18s; }
  .hud-enter .stat:nth-child(3) { animation-delay: .26s; } .hud-enter .stat:nth-child(4) { animation-delay: .34s; }
  .hud-enter .trackbar { animation: barRise .6s .3s cubic-bezier(.22,1,.36,1) backwards; }   /* grows in place: the bar never leaves its box */
  .hud-enter .jump-btn { animation: coinPop .6s .5s cubic-bezier(.34,1.56,.64,1) backwards; }
  /* a question opens: the card drops in, then its nameplate, portrait, words and the two answers, one by one */
  .quiz__card { animation: cardIn .5s cubic-bezier(.34,1.4,.64,1) backwards; }
  .quiz__theme { animation: plateSlide .45s .12s cubic-bezier(.34,1.56,.64,1) backwards; }
  .quiz__icon { animation: hudPop .5s .18s cubic-bezier(.34,1.56,.64,1) backwards; }
  .quiz__q { animation: wordsUp .45s .24s cubic-bezier(.22,1,.36,1) backwards; }
  .quiz__answers > .quiz__a { animation: ansIn .5s .36s cubic-bezier(.34,1.56,.64,1) backwards; }
  .quiz__answers > .quiz__a:nth-child(2) { animation-delay: .46s; }
  /* the gate is crossed: the right answer bounces, a wrong pick shakes; then the card eases away */
  .quiz.done .quiz__answers > .quiz__a.ok { animation: ansOk .55s cubic-bezier(.34,1.56,.64,1); }
  .quiz.done .quiz__answers > .quiz__a.bad { animation: ansBad .5s ease-in-out; }
  .quiz.leaving .quiz__card, .quiz.leaving .quiz__answers { animation: quizOut .28s cubic-bezier(.55,0,.75,.2) forwards; }
  /* a value that changes pops; a heart that is lost flares, then fades */
  .stat > div > b.pop { animation: valPop .5s cubic-bezier(.34,1.56,.64,1); }
  .hearts img.off { animation: heartLose .55s cubic-bezier(.22,1,.36,1); }
  .menu-btn { transition: scale .2s cubic-bezier(.34,1.56,.64,1), filter .2s; } .menu-btn:active { scale: .9; }
  .jump-btn { transition: scale .2s cubic-bezier(.34,1.56,.64,1), filter .2s; } .jump-btn:active, .jump-btn.down { scale: .93; }
}
@media (prefers-reduced-motion: reduce) { .quiz__a { transition: none; } .quiz__a.hot { transform: none; } .stat > .charge > i, .stat > .charge.on > i { transition: none; animation: none; } }
@keyframes hudDrop { from { opacity: 0; transform: translateY(-28px) scale(.85); } }
@keyframes hudPop { from { opacity: 0; transform: scale(.3); } }
@keyframes plateLand { from { opacity: 0; transform: translateY(-22px) scale(.75) rotate(-5deg); } }
@keyframes barRise { from { opacity: 0; transform: scaleX(.55) scaleY(.6); } }
@keyframes coinPop { from { opacity: 0; scale: .2; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(-16px) scale(.92); } }
@keyframes plateSlide { from { opacity: 0; transform: translateY(-14px) scaleX(.6); } }
@keyframes wordsUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes ansIn { from { opacity: 0; transform: translateY(-12px) scale(.7); } }
@keyframes ansOk { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1.04); } }
@keyframes ansBad { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-8px) rotate(-2deg); } 36% { transform: translateX(7px) rotate(1.5deg); } 54% { transform: translateX(-5px); } 72% { transform: translateX(3px); } }
@keyframes quizOut { to { opacity: 0; transform: translateY(-12px) scale(.94); } }
@keyframes valPop { 0% { transform: scale(1); } 35% { transform: scale(1.4); color: #fff6b0; } 100% { transform: scale(1); } }
@keyframes heartLose { 0% { transform: scale(1); opacity: 1; filter: none; } 30% { transform: scale(1.5) rotate(-10deg); opacity: 1; filter: brightness(1.5); } 100% { transform: scale(.82); } }
/* ---- fitting phones */
@media (max-height: 700px) { .tpanel__logo img { height: 70px; } .hcard { padding: 6px; gap: 8px; grid-template-columns: 58px 1fr; } .hcard__icon { width: 58px; height: 50px; } .hcard__how { font-size: 12px; } .hcard b { font-size: 15px; } .playbtn { height: 50px; font-size: 19px; } .tpanel__intro { font-size: 13.5px; margin-bottom: 8px; } .tpanel { padding: 10px 12px 12px; } }
/* a short phone upright: a smaller logo, plates and dialog, so the arches below stay in view */
@media (max-height: 700px) and (min-height: 461px) { .hud { gap: 4px; } .sign__logo { height: 40px; } .menu-btn { width: 40px; height: 40px; } .statbar { width: min(100%, 330px); } .quiz { --qw: min(calc(100vw - 20px), 340px); } .quiz__card { min-height: calc(var(--k) * 200); } }
/* sideways on a phone: the plates sit top left beside the logo, values only, and the dialog sheds its nameplate */
@media (max-height: 460px) {
  .hud { gap: 4px; padding: 4px 8px; }
  .topbar { --side: 36px; } html.hosted .topbar { --side: 80px; } .sign__logo { height: 34px; } .menu-btn { width: 34px; height: 34px; } .menu-btn svg { width: 17px; height: 17px; }
  .statbar { --crest: 6px; position: absolute; top: 4px; inset-inline-start: 8px; width: 216px; }
  .stat > img { top: -12%; height: 40%; } .stat > b.hearts { top: -8%; height: 30%; }
  .stat span { display: none; }
  /* the dialog at its most compact: no nameplate or portrait, the question on the parchment between the moldings, so
     the arches' answers stay in view below it */
  .quiz { --qw: min(calc(100vw - 16px), 400px); margin-top: 8px; } .quiz__card { min-height: 0; padding: calc(var(--k) * 48) calc(var(--k) * 92) calc(var(--k) * 36); } .quiz__theme, .quiz__icon { display: none; } .quiz__q { font-size: 15px; -webkit-line-clamp: 2; }
  .quiz__answers { margin-top: calc(var(--k) * -14); } .quiz__a { min-height: calc(var(--k) * 64); padding: 2px calc(var(--k) * 18); } .quiz__a > span { font-size: 14px; -webkit-line-clamp: 2; } .quiz__aicon { width: 22px; height: 22px; }
  .trackbar { --h: 32px; font-size: 12px; width: min(100%, 520px); }
  .toast { padding: 4px 10px; font-size: 12px; width: min(100%, 560px); margin-top: 6px; } .toast .asset { width: 30px; height: 30px; }
  .jump-btn { width: 56px; height: 56px; bottom: calc(46px + env(safe-area-inset-bottom)); left: auto; right: 30px; transform: none; } .jump-btn span { font-size: 11px; } .jump-btn:active, .jump-btn.down { transform: translateY(3px); }
  .overlay--title { padding-top: 6px; align-items: center; }
  /* the plates sit top left here: the question dialog starts below them, and the title card (which covers the top of
     the screen) hides them rather than half-covering them */
  html.road-title .statbar { visibility: hidden; }
}
/* a desktop: one row of plates in the top corner, the logo centred, the dialog under it, the arches clear below */
@media (min-width: 1000px) and (min-height: 701px) {
  .sign__logo { height: 70px; } .menu-btn { width: 54px; height: 54px; } .menu-btn svg { width: 26px; height: 26px; }
  .statbar { --crest: 14px; position: absolute; top: 8px; inset-inline-start: 14px; width: 420px; }
  /* the question at desktop proportions: the card taller for its width (about 2.6:1, room above and below the words),
     the question and the answers a fifth smaller, the whole taking no more height than before */
  .quiz { --qw: 440px; }
  .quiz__card { min-height: calc(var(--k) * 265); padding: calc(var(--k) * 66) calc(var(--k) * 94) calc(var(--k) * 54); }
  .quiz__q { font-size: calc(var(--k) * 28); text-wrap: balance; } .quiz__a > span { text-wrap: balance; }
  .quiz__icon { width: calc(var(--k) * 92); height: calc(var(--k) * 92); }
  .quiz__a { min-height: calc(var(--k) * 75); }
  .quiz__a > span { font-size: calc(var(--k) * 29); }
  .quiz__aicon { width: calc(var(--k) * 40); height: calc(var(--k) * 40); }
}