/* Fredoka (SIL Open Font License 1.1, assets/fonts/OFL.txt): bundled, so it works offline and
   no request goes to a font service. Weights 400–700; heavier weights render as 700. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/fredoka-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; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/fredoka-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; }
/* Loopo — "Glass" UI (v1.5): minimal, translucent layers over a vivid sky, inspired by
 * the iOS 26 Liquid Glass material. Colour comes from the background and one accent;
 * surfaces are frosted glass so the playful sky always shines through.
 * Legibility guard: every glass surface keeps a dark tint behind white text (≥4.5:1 on
 * the brightest theme, see docs/14-v15-design.md) and High contrast swaps glass for solid.
 * Layout rule: buttons inside a screen live in .actions / .actions.two, so they share widths. */
:root {
  --bg1: #8E2DE2; --bg2: #F107A3;              /* theme sky (set per app theme) */
  --accent: #2FE07A; --accent2: #12B85A; --accent-ink: #053D1C;
  --text: #FFFFFF;
  --dim: rgba(255, 255, 255, 0.78);
  --ink: #2A0A55;
  --glass: rgba(30, 6, 70, 0.45);   /* 0.45: white text ≥ 5:1 on every theme/world (docs/14) */
  --glass-2: rgba(255, 255, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.28);
  --blur: blur(26px) saturate(180%);
  --gold: #FFD84D; --gold-ink: #4A2C00;
  --danger: #D91E46;                 /* white on it 4.97:1 */
  --font: "Fredoka", ui-rounded, "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --col: min(340px, 100%);
}
body[data-theme="ocean"]    { --bg1: #0061FF; --bg2: #00C6FF; --accent: #FFD000; --accent2: #F0A800; --accent-ink: #3D2A00; }
body[data-theme="sunset"]   { --bg1: #FF512F; --bg2: #F09819; --accent: #7B3CFF; --accent2: #5A1FE0; --accent-ink: #FFFFFF; }
body[data-theme="mint"]     { --bg1: #11998E; --bg2: #38EF7D; --accent: #FF4FA3; --accent2: #E0247F; --accent-ink: #3A0020; }
body[data-theme="midnight"] { --bg1: #141E30; --bg2: #3A2A7A; --accent: #22D3EE; --accent2: #0EA5C4; --accent-ink: #032B33; }
body[data-theme="bubblegum"]{ --bg1: #FF6FD8; --bg2: #3813C2; --accent: #FFE14D; --accent2: #F5B800; --accent-ink: #4A2C00; }
body[data-theme="aurora"]   { --bg1: #00B48A; --bg2: #8A00FF; --accent: #FFFFFF; --accent2: #DDE7FF; --accent-ink: #2A0A55; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background-color: #3A1078; }   /* never a white strip, whatever the browser does */
/* Nothing may stick out of the screen: on iOS a single overflowing element (rays, confetti,
   sparkles) makes Safari zoom the whole page out a little, which blurs everything and leaves
   an empty strip at the bottom. The body is pinned to the screen and clips its contents. */
body { position: fixed; inset: 0; width: 100%; overflow: hidden; contain: paint; }
.teaser, .chest-ov, .tz-final-bg { overflow: hidden; }
html, body {
  margin: 0; height: 100%; overflow: hidden; color: var(--text);
  background: linear-gradient(160deg, var(--bg1), var(--bg2)); font-family: var(--font);
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
@supports (height: 100dvh) { html, body { height: 100dvh; } }
canvas#stage { position: fixed; inset: 0; display: block; touch-action: none; }
.hidden { display: none !important; }
h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.3px; }
h3 { margin: 6px 0 0; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 800; }
p { margin: 0; line-height: 1.4; }
.dim { color: var(--dim); } .small { font-size: 13px; }
.ico { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ico.big { width: 56px; height: 56px; }
.star { color: var(--gold); font-style: normal; } .spark { color: #8CF6FF; font-style: normal; } .xp { color: #B6FF7A; font-style: normal; font-weight: 900; }

/* Glass material: tint + blur + a bright top edge (the "specular" rim). */
.glass, .card, .chip, .journey, .bottom-nav, .toast, .coach, .icon-btn.hud, .chest-bar, .world-banner, .gate, .xp-pill {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 12px 36px rgba(20, 0, 60, .22);
}

/* ---------- Screens & cards ---------- */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  z-index: 4;
}
/* Slide transitions between screens (main.js show()): in from the right, out to the left;
   card contents arrive one after another. */
.screen.enter { animation: slideIn .32s cubic-bezier(.2, .9, .25, 1.05) both; }
.screen.leave { animation: slideOut .2s ease-in both; pointer-events: none; }
.screen.dim-bg.enter { animation: fadeIn .22s ease-out both; }
.screen.dim-bg.enter .card { animation: sheetUp .38s cubic-bezier(.2, .9, .25, 1.1) both; }
.screen.enter .card > *, .screen.enter .home-center > * { animation: riseIn .4s cubic-bezier(.2, .9, .25, 1.1) both; }
.screen.enter .card > *:nth-child(2), .screen.enter .home-center > *:nth-child(2) { animation-delay: .04s; }
.screen.enter .card > *:nth-child(3), .screen.enter .home-center > *:nth-child(3) { animation-delay: .08s; }
.screen.enter .card > *:nth-child(4), .screen.enter .home-center > *:nth-child(4) { animation-delay: .12s; }
.screen.enter .card > *:nth-child(5), .screen.enter .home-center > *:nth-child(5) { animation-delay: .16s; }
.screen.enter .card > *:nth-child(n+6), .screen.enter .home-center > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes slideOut { to { opacity: 0; transform: translateX(-36px); } }
@keyframes sheetUp { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Splash + welcome */
.splash { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(160deg, var(--bg1), var(--bg2)); transition: opacity .45s ease, transform .45s ease; }
.splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash .logo b { animation: logoPop .7s cubic-bezier(.34, 1.8, .64, 1) both; }
.splash .subtitle { animation: riseIn .5s .35s both; }
@keyframes logoPop { from { transform: scale(.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.splash-bar { width: 140px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; margin-top: 18px; }
.splash-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; animation: load 1.2s .2s ease-in-out forwards; }
@keyframes load { to { width: 100%; } }
.card.welcome { gap: 14px; padding-top: 26px; }
.card.welcome h2 { font-size: 30px; }
.card.welcome p { font-size: 16px; }
body:not(.reduced-motion) .card.welcome .mascot { animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* Wipe into a level */
.wipe { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; clip-path: circle(0 at 50% 50%); }
.wipe.in { animation: wipeIn .45s cubic-bezier(.6, 0, .3, 1) forwards; }
.wipe.out { clip-path: circle(150% at 50% 50%); animation: wipeOut .45s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes wipeIn { to { clip-path: circle(150% at 50% 50%); } }
@keyframes wipeOut { to { clip-path: circle(0 at 50% 50%); } }
.wipe b { font-size: 38px; font-weight: 900; text-shadow: 0 6px 24px rgba(40, 0, 90, .35); }
.wipe small { color: var(--dim); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.reduced-motion .wipe.in { animation: none; clip-path: none; }
.screen.top { z-index: 12; }
.screen.dim-bg { background: rgba(20, 0, 50, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes fadeIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.reduced-motion .screen { animation: none; }
.reduced-motion * { transition: none !important; animation: none !important; }

.card {
  width: min(380px, 100%); max-height: 100%; border-radius: 32px;
  padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.card.scroll, .card.fit { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.card > * { flex-shrink: 0; }   /* scrolling cards: children keep their size instead of collapsing */
.stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.well { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; }

/* ---------- Buttons: capsules ---------- */
.actions { display: flex; flex-direction: column; gap: 10px; width: var(--col); }
.actions.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.card > .actions { width: 100%; }
.btn {
  position: relative; width: 100%; min-height: 52px; border-radius: 26px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 18px rgba(20, 0, 60, .18);
  color: #fff; font: 800 17px var(--font); letter-spacing: .1px;
  padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), filter .12s;
}
.btn:active { transform: scale(.96); filter: brightness(1.08); }
.btn.primary, .btn.reward, .btn.danger {
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%), var(--c1);
  border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 22px var(--glow);
  color: var(--ink2, #fff);
}
.btn.primary { --c1: var(--accent); --glow: rgba(0, 0, 0, .18); --ink2: var(--accent-ink); }
.btn.reward  { --c1: var(--gold); --glow: rgba(255, 190, 0, .35); --ink2: var(--gold-ink); }
.btn.blue, .btn.pink { --c1: rgba(255, 255, 255, .14); --glow: rgba(20, 0, 60, .18); }   /* = secondary (glass) */
.btn.danger  { --c1: var(--danger); --glow: rgba(255, 40, 80, .3); }
.btn.ghost { background: rgba(255, 255, 255, .12); }
.btn.small { min-height: 42px; font-size: 15px; }
.btn.huge { min-height: 64px; font-size: 22px; border-radius: 32px; }
.btn.huge .ico { width: 26px; height: 26px; }
.btn.tall { min-height: 68px; flex-direction: column; gap: 0; }
.btn.tall small { font-size: 13px; opacity: .85; font-weight: 700; }
.btn:disabled, .btn.reward:disabled, .btn.primary:disabled { opacity: .6; background: rgba(255, 255, 255, .08); border-style: dashed; border-color: rgba(255, 255, 255, .3); color: var(--dim); box-shadow: none; }
.adtag { font-size: 10px; background: rgba(0, 0, 0, .18); border-radius: 6px; padding: 2px 6px; letter-spacing: .5px; }
.link-btn { background: none; border: none; color: var(--dim); font: 700 15px var(--font); min-height: 44px; min-width: 44px; padding: 0 6px; cursor: pointer; }
.link { color: var(--dim); font-size: 14px; font-weight: 700; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button { touch-action: manipulation; }

/* Secondary / destructive buttons (one system on every screen):
   primary = filled accent (one per screen) · secondary = glass · quit/reset = red outline. */
.btn.quit { background: transparent; border: 1.5px solid rgba(255, 110, 130, .85); color: #FFD3DA; box-shadow: none; min-height: 46px; font-size: 15px; }
.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.tile { min-height: 74px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; font: 700 13px var(--font);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: transform .12s; }
.tile:active { transform: scale(.95); }
.tile .ico { width: 24px; height: 24px; }
.pause-card { gap: 14px; }
.pause-card .btn.huge { width: 100%; }

/* ---------- Level HUD (DOM) ---------- */
.lhud { position: fixed; left: 8px; right: 8px; top: calc(6px + var(--safe-top)); z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* One panel: loops · goal on top, the star progress (stars + score) underneath, so the stars
   read as part of your progress. The board starts below it with its own margin. */
.hud-panel { width: 100%; border-radius: 26px; overflow: hidden;
  background: rgba(20, 0, 52, .62); border: 1px solid rgba(255, 255, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 24px rgba(20, 0, 52, .25); }
.hud-bar { width: 100%; height: 74px; display: grid; grid-template-columns: 74px 1fr 74px; align-items: center; }
.hud-loops { position: relative; width: 56px; height: 66px; margin-left: 12px; }
.hud-loops svg { position: absolute; left: 3px; top: 0; width: 50px; height: 50px; transform: rotate(-90deg); }
.hud-loops circle { fill: none; stroke-width: 5; }
.hud-loops .bg { stroke: rgba(255, 255, 255, .16); }
.hud-loops .fg { stroke: #7CF06B; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dashoffset .35s ease, stroke .3s; }
.hud-loops b { position: absolute; left: 3px; top: 0; width: 50px; height: 50px; display: grid; place-items: center; font-size: 20px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-loops small { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .8px; color: var(--dim); }
.hud-loops.low .fg { stroke: #FF9A4C; } .hud-loops.low b { color: #FFB27A; }
body:not(.reduced-motion) .hud-loops.bump { animation: bump .35s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes bump { 40% { transform: scale(1.18); } }
.hud-loops .minus { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-weight: 900; font-size: 15px; color: #FFB27A; animation: minusUp .8s ease-out forwards; }
@keyframes minusUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 14px); } }
.hud-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.hud-goal-txt { font-size: 13px; font-weight: 800; color: var(--dim); text-align: center; line-height: 1.15; max-width: 100%; }
.hud-stars { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; justify-items: center; gap: 8px; height: 44px; padding: 0 14px; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.bstar { position: relative; width: 30px; height: 30px; display: block; background: rgba(255, 255, 255, .22);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bstar.big { width: 38px; height: 38px; margin-top: -4px; }
.bstar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #FFF6B0, #FFE14D 45%, #FF9500); transition: height .3s ease; }
.bstar.on i { height: 100% !important; }
body:not(.reduced-motion) .bstar.on { animation: starPop .6s cubic-bezier(.34, 2.2, .5, 1); }
.hud-stars .bstar:first-child { grid-column: 2; }
.hud-stars .hud-score { justify-self: start; margin-left: 4px; font-size: 16px; color: #fff; min-width: 0; }   /* stars stay centred; the score sits right next to them */
.hud-row { display: flex; align-items: center; gap: 10px; }
.hud-row .hud-track { flex: 1; }
.hud-score { font-size: 14px; font-weight: 900; line-height: 1; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
.hud-track { position: relative; width: 100%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.hud-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #FF7AC8, #FFB84D 60%, #FFE14D); transition: width .3s ease; }
/* Star markers: outline = not reached, gold outline = score reached (needs the goals too), filled = earned */
.hstar { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(20, 0, 52, .9);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.hstar::after { content: ""; position: absolute; inset: 4px; background: rgba(255, 255, 255, .4);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.hstar.reached::after { background: rgba(255, 225, 77, .55); }
.hstar.on::after { background: linear-gradient(160deg, #FFF6B0, #FFE14D 50%, #FF9500); }
body:not(.reduced-motion) .hstar.on { animation: starPop .6s cubic-bezier(.34, 2.2, .5, 1); }
.hud-goals { display: flex; gap: 6px; justify-content: center; }
.hgoal { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 5px; border-radius: 17px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); font-weight: 900; font-size: 20px; position: relative; overflow: hidden; font-variant-numeric: tabular-nums; }
.hgoal .gi { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: rgba(40, 0, 80, .7); box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .18), inset 2px 2px 0 rgba(255, 255, 255, .45); }
.hgoal .gp { position: absolute; left: 0; bottom: 0; height: 3px; background: #7CF06B; transition: width .3s ease; }
.hgoal.done { background: rgba(60, 200, 90, .45); border-color: #7CF06B; }
body:not(.reduced-motion) .hgoal.pulse { animation: bump .35s cubic-bezier(.34, 1.8, .64, 1); }
body.hc .hud-panel, body.hc .hgoal { background: #000; border: 2px solid #fff; }

/* Sparks currency: always the same gold coin with a white sparkle (never a bare ✦). */
.spk { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF3A0'/%3E%3Cstop offset='1' stop-color='%23FFA800'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='url(%23g)' stroke='%23B86E00' stroke-width='1.5'/%3E%3Cpath d='M12 4.5l1.9 5.6 5.6 1.9-5.6 1.9L12 19.5l-1.9-5.6L4.5 12l5.6-1.9z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; font-style: normal; }
.spk.big { width: 24px; height: 24px; vertical-align: middle; }
.coin-chip { gap: 7px; }
.coin-lbl { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.coin-lbl small { font-size: 10px; color: var(--dim); font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }

/* Joy: sparkle burst at every tap, soft pop on the button */
.sparkle { position: fixed; width: 0; height: 0; z-index: 60; pointer-events: none; }
.sparkle i { position: absolute; width: 8px; height: 8px; margin: -4px; background: #FFF6B0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sparkOut .6s ease-out forwards; }
.sparkle i:nth-child(3n) { background: #fff; } .sparkle i:nth-child(3n+1) { background: #FFB8E6; }
.sparkle i.spk { width: 18px; height: 18px; margin: -9px; clip-path: none; animation: coinOut .95s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes sparkOut { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(90deg); opacity: 0; } }
@keyframes coinOut { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(200deg); opacity: 0; } }
/* Button press: squish in, spring back past full size, settle. Uses the separate `scale` /
   `translate` properties so it never fights a button's own transform. */
body:not(.reduced-motion) button.tapped { animation: tapPop .38s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes tapPop { 0% { scale: 1; } 30% { scale: .9; } 70% { scale: 1.06; } 100% { scale: 1; } }
body:not(.reduced-motion) button.nope { animation: tapNope .34s ease-in-out; }
@keyframes tapNope { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
button:active:not(:disabled) { filter: brightness(1.1); }
/* Main call-to-action buttons breathe gently and shine, so they invite a tap */
body:not(.reduced-motion) #btn-play, body:not(.reduced-motion) #btn-level-play, body:not(.reduced-motion) #btn-win-next { animation: breathe 2.4s ease-in-out infinite; overflow: hidden; }
#btn-play::after, #btn-level-play::after, #btn-win-next::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
body:not(.reduced-motion) #btn-play::after, body:not(.reduced-motion) #btn-level-play::after, body:not(.reduced-motion) #btn-win-next::after { animation: shine 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.03); } }
@keyframes shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.quest button:not(:disabled), .chest-bar.ready { position: relative; overflow: hidden; }
body:not(.reduced-motion) .quest button:not(:disabled) { animation: breathe 1.6s ease-in-out infinite; box-shadow: 0 0 16px rgba(255, 216, 77, .6); }

/* ---------- Chips & top bars ---------- */
.topbar { position: absolute; top: calc(10px + var(--safe-top)); left: 12px; right: 12px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.screen.map .topbar { position: static; width: min(420px, calc(100% - 24px)); grid-template-columns: auto 1fr auto; }
.screen.map .topbar h2 { text-align: center; font-size: 22px; }
.chip { min-height: 44px; padding: 0 12px; border-radius: 20px; color: #fff; font: 800 15px var(--font); display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
button.chip { cursor: pointer; }
.chip.icon { width: 44px; padding: 0; } .chip.icon b { font-size: 26px; line-height: 1; margin-top: -3px; }
.chip.rank { justify-content: flex-start; overflow: hidden; min-width: 0; padding-left: 4px; }
.chip.rank .rk { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.05; }
.chip.rank .rk b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chip.rank .rk small { font-size: 10px; color: var(--dim); font-weight: 800; white-space: nowrap; }
.mini-bar { display: block; width: 64px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; margin-top: 2px; }
.mini-bar i { display: block; height: 100%; background: #B6FF7A; border-radius: 2px; }
.rank-badge { min-width: 32px; height: 32px; border-radius: 16px; background: linear-gradient(180deg, #FFF0A0, var(--gold)); color: var(--gold-ink); font-size: 14px; display: grid; place-items: center; font-weight: 900; flex: none; box-shadow: inset 0 1px 0 #fff; }
.icon-btn.hud { position: fixed; top: calc(22px + var(--safe-top)); right: 20px; width: 46px; height: 46px; border-radius: 50%; z-index: 3; display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- Home ---------- */
.screen.home { justify-content: space-between; padding-top: calc(62px + var(--safe-top)); padding-bottom: calc(96px + var(--safe-bottom)); }
.home-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: var(--col); }
.logo { font-weight: 900; font-size: clamp(60px, 19vw, 88px); line-height: .95; letter-spacing: -2px; text-align: center; }
.logo b { display: block; color: #fff; text-shadow: 0 3px 0 rgba(40, 0, 90, .45), 0 0 2px rgba(40, 0, 90, .6), 0 10px 30px rgba(40, 0, 90, .35); }
body:not(.reduced-motion) .logo b { animation: floatLogo 3.2s ease-in-out infinite; }
@keyframes floatLogo { 50% { transform: translateY(-5px); } }
.subtitle { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: 2px; text-transform: uppercase; margin-top: -4px; padding: 5px 14px; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.logo.small { font-size: 46px; }
.mascot { width: 140px; height: 140px; }
.mascot.small { width: 96px; height: 96px; }
.mascot.tiny { width: 72px; height: 72px; margin: -4px 0 -6px; }
.journey { width: 100%; border-radius: 22px; padding: 12px 16px; text-align: left; }
.j-top { display: flex; justify-content: space-between; font-weight: 800; gap: 8px; font-size: 15px; }
.j-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; margin: 8px 0 6px; }
.j-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFE14D, #FF7AC8, #6FD3FF); border-radius: 4px; transition: width .6s ease; }
.journey small { color: var(--dim); font-weight: 700; font-size: 12px; }
/* Floating tab bar (one glass capsule) */
.bottom-nav { position: absolute; left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); bottom: calc(12px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px; border-radius: 30px; }
.bottom-nav button {
  position: relative; min-height: 58px; border: none; border-radius: 24px; color: #fff; font: 700 11px var(--font); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; min-width: 0;
  transition: background .15s, transform .12s;
}
.bottom-nav button:active { background: rgba(255, 255, 255, .18); transform: scale(.95); }
.bottom-nav .ico { width: 24px; height: 24px; }
.dot { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 20px; height: 20px; border-radius: 10px; background: #FF3B5C; color: #fff; font: 900 12px var(--font); display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }

/* ---------- Text blocks ---------- */
.big-score { font-size: clamp(50px, 16vw, 76px); font-weight: 900; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.best-line { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 20px; }
.badge { background: linear-gradient(180deg, #FFF0A0, var(--gold)); color: var(--gold-ink); font-weight: 900; padding: 6px 14px; border-radius: 14px; letter-spacing: 1px; font-size: 14px; }
.badge.hard { background: linear-gradient(180deg, #FF8AD0, #FF2E93); color: #fff; }
body:not(.reduced-motion) .badge { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; width: 100%; }
.stat-row div { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 8px 4px; }
.stat-row b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat-row span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; font-weight: 800; }
.ach-toast { color: var(--gold); font-weight: 800; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.unlock-pill { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px 18px; border-radius: 18px; background: rgba(255, 216, 77, .18); border: 1px solid rgba(255, 216, 77, .6); color: #fff; font-weight: 800; font-size: 15px; }
.unlock-pill small { color: var(--dim); font-weight: 700; font-size: 12px; }
.win-title { font-size: clamp(30px, 9vw, 42px); color: #fff; text-align: center; text-shadow: 0 4px 24px rgba(255, 216, 77, .55); }
.win-stars { display: flex; gap: 6px; justify-content: center; }
.win-stars { gap: 10px; }
.win-stars i { position: relative; width: 46px; height: 46px; display: block; }
.win-stars i::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .18);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.win-stars i:nth-child(2) { width: 60px; height: 60px; margin-top: -10px; }
.win-stars i.on::before { background: linear-gradient(160deg, #FFF6B0, #FFE14D 45%, #FF9500); filter: drop-shadow(0 0 10px rgba(255, 210, 60, .9)); }
body:not(.reduced-motion) .win-stars i.on { animation: starPop .6s cubic-bezier(.34, 2.2, .5, 1) both; }
@keyframes starPop { 0% { transform: scale(0) rotate(-60deg); } 60% { transform: scale(1.45) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #FFE14D; box-shadow: 0 0 8px #FFE14D;
  transform: rotate(var(--a)) translateY(0); animation: burstOut .7s ease-out forwards; }
.burst i:nth-child(even) { background: #fff; width: 5px; height: 5px; }
@keyframes burstOut { to { transform: rotate(var(--a)) translateY(-56px) scale(.2); opacity: 0; } }
.win-score { font-size: clamp(40px, 12vw, 54px); font-weight: 900; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.win-score { position: relative; z-index: 1; }
.win-score.rolling, .win-score.final { background: linear-gradient(90deg, #FFE14D, #FF5FA2, #4FC3FF, #7CF06B, #FFE14D); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .25)); }
body:not(.reduced-motion) .win-score.rolling { animation: rainbowRun .6s linear infinite; }
.win-score.final { background-image: linear-gradient(180deg, #FFF6B0, #FFE14D 45%, #FF9A4C); background-size: 100% 100%; }
@keyframes rainbowRun { to { background-position: 300% 0; } }
.cburst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.cburst i { position: absolute; width: 9px; height: 13px; margin: -6px -4px; border-radius: 2px; opacity: 0; animation: cOut 1.3s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes cOut { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)); } }
body:not(.reduced-motion) .win-score.pop { animation: scorePop .45s cubic-bezier(.34, 2, .5, 1); }
@keyframes scorePop { 50% { transform: scale(1.25); color: var(--gold); } }
.gains { display: flex; gap: 10px; justify-content: center; }
.gains span { padding: 6px 14px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-weight: 800; font-size: 15px; }
.gains b { font-variant-numeric: tabular-nums; }
.win-card { gap: 10px; padding-top: 18px; padding-bottom: 16px; }
.win-card .win-title { font-size: clamp(26px, 8vw, 34px); }
.win-card .xp-panel { padding: 8px 12px; }
.win-card .xp-lines { font-size: 12px; }
.win-card .btn.huge { min-height: 56px; font-size: 20px; }
@media (max-height: 700px) { .win-card .xp-lines { display: none; } .mascot.tiny { width: 56px; height: 56px; } }
.loops-line { font-weight: 800; font-size: 17px; } .loops-line span:first-child { font-size: 28px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* XP panel (win screen, rank card) */
.xp-panel { width: 100%; padding: 10px 14px; text-align: left; }
.xp-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 14px; }
.xp-head b { font-size: 20px; color: #B6FF7A; font-variant-numeric: tabular-nums; }
.xp-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .16); overflow: hidden; margin: 6px 0 4px; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7CF06B, #B6FF7A); border-radius: 5px; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.xp-panel small { color: var(--dim); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.xp-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--dim); }
.xp-lines div { display: flex; justify-content: space-between; } .xp-lines b { color: #fff; font-variant-numeric: tabular-nums; }
.lvlup { color: var(--gold); font-weight: 900; text-align: center; margin-top: 4px; }
body:not(.reduced-motion) .lvlup { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; font-weight: 700; width: 100%; }
select, input[type=range] { width: 100%; }
select { min-height: 46px; border-radius: 16px; background: rgba(255, 255, 255, .92); color: var(--ink); border: none; font: 700 17px var(--font); padding: 0 12px; }
input[type=range] { accent-color: var(--accent); height: 32px; }
.toggle { display: flex; align-items: center; justify-content: space-between; font-weight: 700; min-height: 46px; position: relative; cursor: pointer; width: 100%; text-align: left; gap: 10px; }
.toggle small { display: block; color: var(--dim); font-size: 11px; font-weight: 600; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { width: 52px; height: 32px; border-radius: 16px; background: rgba(255, 255, 255, .18); position: relative; transition: background .15s; flex: none; border: 1px solid rgba(255, 255, 255, .25); }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.toggle input:checked + i { background: #34C759; }
.toggle input:checked + i::after { transform: translateX(20px); }
.seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(255, 255, 255, .12); width: 100%; }
.seg button { min-height: 38px; border: none; border-radius: 14px; background: transparent; color: #fff; font: 700 14px var(--font); }
.seg button.on { background: rgba(255, 255, 255, .9); color: var(--ink); }

/* ---------- Toast / coach / rotate ---------- */
.toast { position: fixed; left: 50%; top: calc(64px + var(--safe-top)); transform: translate(-50%, -14px) scale(.96); opacity: 0; color: #fff; padding: 12px 20px; border-radius: 22px; font-weight: 800; font-size: 16px; z-index: 20; width: max-content; max-width: calc(100% - 32px); text-align: center;
  background: rgba(30, 6, 70, .82); border-color: rgba(255, 216, 77, .7); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .25, 1.2); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.low { top: auto; bottom: calc(26px + var(--safe-bottom)); font-size: 14px; padding: 9px 16px; }
/* Coach sits at the BOTTOM, small and see-through, so it never hides the board. */
.coach {
  background: rgba(30, 6, 70, .85);
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 9px); transform: translateX(-50%);
  width: max-content; max-width: min(360px, calc(100% - 24px)); padding: 8px 14px; border-radius: 18px;
  color: #fff; font-weight: 800; font-size: 14px; text-align: center; pointer-events: none; z-index: 3;
}
body:not(.reduced-motion) .coach { animation: coachIn .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes coachIn { from { opacity: 0; transform: translate(-50%, 10px) scale(.92); } }
.coach.up { bottom: auto; top: calc(var(--safe-top) + 158px); }
.coach.up::before { content: ""; position: absolute; top: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: rgba(255, 255, 255, .35); }
.tut-bar { position: fixed; inset: 0; z-index: 3; pointer-events: none; color: #fff; }
.tut-steps { position: absolute; top: calc(var(--safe-top) + 36px); left: 50%; translate: -50% 0; display: flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 14px; background: rgba(20, 0, 52, .45); }
.tut-steps i { width: 9px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .35); transition: width .3s, background .3s; }
.tut-steps i.done { background: #FFE14D; }
.tut-steps i.on { width: 26px; background: #FFE14D; box-shadow: 0 0 10px rgba(255, 225, 77, .7); }
.tut-bar .link-btn { position: absolute; bottom: calc(var(--safe-bottom) + 2px); left: 50%; transform: translateX(-50%); pointer-events: auto; color: #fff; opacity: .85; text-decoration: underline; }
.coach.tut { bottom: auto; top: calc(var(--safe-top) + 84px); font-size: 18px; line-height: 1.3; padding: 12px 18px; border-radius: 22px; max-width: min(380px, calc(100vw - 32px)); }
/* Practice level: the bubble sits under the HUD; HUD parts glow while they are explained. */
.coach.tut { white-space: pre-line; }
.coach.tut.lv { top: calc(var(--safe-top) + 152px); }
.coach.tut.tap { pointer-events: none; border: 2px solid rgba(255, 216, 77, .85); }
.tut-bar.lv .tut-steps { display: none; }
.tut-spot { border-radius: 18px; box-shadow: 0 0 0 3px #FFE14D, 0 0 24px 6px rgba(255, 216, 77, .7) !important; position: relative; z-index: 1; }
body:not(.reduced-motion) .tut-spot { animation: spotPulse 1.1s ease-in-out infinite; }
@keyframes spotPulse { 50% { box-shadow: 0 0 0 5px #FFE14D, 0 0 34px 12px rgba(255, 216, 77, .55); } }
/* Banner ad slot (map only) */
.ad-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: calc(54px + var(--safe-bottom)); padding: 0 12px var(--safe-bottom);
  display: flex; align-items: center; gap: 8px; background: rgba(250, 250, 255, .96); color: #333; font: 700 13px var(--font); box-shadow: 0 -4px 16px rgba(0, 0, 0, .15); }
.ab-tag { font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 4px; background: #FFC400; color: #3D2A00; }
.ab-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-remove { border: none; border-radius: 14px; padding: 7px 12px; background: linear-gradient(180deg, #A06BFF, #6A2CE0); color: #fff; font: 800 12px var(--font); white-space: nowrap; }
.screen.map.with-banner .map-scroll { padding-bottom: calc(54px + var(--safe-bottom)); }
/* Chest opening overlay */
.chest-ov { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); background: radial-gradient(circle at 50% 45%, rgba(120, 40, 200, .85), rgba(20, 0, 52, .96) 70%); color: #fff; text-align: center; }
.chest-title { margin: 0; font-size: 28px; font-weight: 900; }
.chest-hint { margin: 0; font-size: 18px; font-weight: 800; color: #FFE14D; min-height: 24px; }
.chest-stage { position: relative; width: 300px; height: 300px; display: grid; place-items: center; margin-top: 80px; }
.chest-rays { position: absolute; inset: -40px; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: repeating-conic-gradient(rgba(255, 230, 120, .55) 0 10deg, transparent 10deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%); }
.chest-ov.open .chest-rays { opacity: 1; }
body:not(.reduced-motion) .chest-ov.open .chest-rays { animation: raySpin 8s linear infinite; }
@keyframes raySpin { to { transform: rotate(360deg); } }
.chest { position: relative; width: 170px; height: 150px; border: none; background: none; padding: 0; cursor: pointer; z-index: 1; }
.chest .base { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; border-radius: 10px 10px 22px 22px;
  background: linear-gradient(90deg, transparent 18%, #FFD34D 18% 26%, transparent 26% 74%, #FFD34D 74% 82%, transparent 82%), linear-gradient(180deg, #C8762E, #8A4515);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .2), 0 14px 30px rgba(0, 0, 0, .4); border: 4px solid #FFC93C; }
.chest .lid { position: absolute; left: -4px; right: -4px; top: 0; height: 66px; border-radius: 60px 60px 10px 10px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, transparent 18%, #FFD34D 18% 26%, transparent 26% 74%, #FFD34D 74% 82%, transparent 82%), linear-gradient(180deg, #E08A3C, #A0521C);
  border: 4px solid #FFC93C; transition: transform .45s cubic-bezier(.34, 1.8, .64, 1); }
.chest .lock { position: absolute; left: 50%; top: 48px; width: 34px; height: 38px; margin-left: -17px; border-radius: 8px; background: linear-gradient(180deg, #FFF0A0, #F5B800); box-shadow: 0 3px 0 #B07800; }
body:not(.reduced-motion) .chest-ov:not(.open) .chest { animation: chestIdle 1.4s ease-in-out infinite; }
@keyframes chestIdle { 0%, 100% { rotate: 0deg; scale: 1; } 25% { rotate: -4deg; scale: 1.04; } 75% { rotate: 4deg; scale: 1.04; } }
body:not(.reduced-motion) .chest.shake { animation: chestShake .35s ease-in-out !important; }
@keyframes chestShake { 20% { translate: -10px 0; rotate: -8deg; } 40% { translate: 10px 0; rotate: 8deg; } 60% { translate: -8px 0; rotate: -5deg; } 80% { translate: 6px 0; rotate: 3deg; } }
.chest-ov.open .chest .lid { transform: translate(-8px, -78px) rotate(-18deg); opacity: .9; }
.chest-ov.open .chest .lock { opacity: 0; transition: opacity .2s; }
.chest-loot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; z-index: 2; }
.loot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px; min-width: 110px; border-radius: 24px; background: rgba(255, 255, 255, .95); color: #3A1078; font-weight: 900; font-size: 22px;
  box-shadow: 0 0 0 4px #FFE14D, 0 12px 30px rgba(0, 0, 0, .35); opacity: 0; translate: 0 60px; scale: .3; }
.loot .li { font-size: 44px; line-height: 1; } .loot .li .spk { width: 44px; height: 44px; }
.loot small { font-size: 13px; color: #7A4FB0; }
.loot.in { opacity: 1; translate: 0 -100px; scale: 1; transition: translate .6s cubic-bezier(.34, 1.6, .64, 1), scale .6s cubic-bezier(.34, 1.6, .64, 1), opacity .2s; }
.chest-done { width: min(320px, 100%); }
.next-goal.tap { color: #FFE14D; font-size: 16px; font-weight: 900; text-decoration: underline; cursor: pointer; padding: 8px; border-radius: 14px; background: rgba(255, 225, 77, .14); }
body:not(.reduced-motion) .next-goal.tap { animation: breathe 1.4s ease-in-out infinite; }
/* Teaser: the hype video on first launch */
.teaser { position: fixed; inset: 0; z-index: 5; pointer-events: none; color: #fff; }
.tz-head { position: absolute; top: calc(var(--safe-top) + 34px); left: 16px; right: 16px; text-align: center; }
.tz-cap { font-size: 32px; font-weight: 900; line-height: 1.08; text-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.tz-sub { margin-top: 6px; font-size: 16px; font-weight: 700; opacity: .9; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
body:not(.reduced-motion) .tz-cap.pop { animation: tzPop .5s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes tzPop { from { scale: .5; opacity: 0; } }
.tz-tag { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 70px); translate: -50% 0; padding: 8px 18px; border-radius: 20px; background: rgba(20, 0, 52, .7); border: 2px solid #FFE14D; font-size: 20px; font-weight: 900; }
body:not(.reduced-motion) .tz-tag.pop { animation: tzPop .45s cubic-bezier(.34, 1.8, .64, 1); }
.tz-card { position: absolute; left: 16px; right: 16px; top: calc(var(--safe-top) + 130px); bottom: calc(var(--safe-bottom) + 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.tz-card:empty { display: none; }
.tz-card > *, .tz-row > *, .tz-col > * { animation: tzIn .55s cubic-bezier(.34, 1.6, .64, 1) both; }
@keyframes tzIn { from { opacity: 0; translate: 0 40px; scale: .6; } }
body.reduced-motion .tz-card *, body.reduced-motion .tz-card { animation: none !important; }
.tz-card.title { top: 0; bottom: 0; gap: 6px; }
.tz-mascot { width: 150px; height: 150px; }
.tz-logo { font-size: 84px; font-weight: 900; line-height: 1; letter-spacing: -2px; text-shadow: 0 6px 0 rgba(60, 0, 120, .45), 0 12px 30px rgba(0, 0, 0, .35); }
.tz-hello { font-size: 28px; font-weight: 900; color: #FFE14D; margin-top: 8px; }
.tz-tagline { font-size: 17px; font-weight: 700; opacity: .9; text-align: center; }
.tz-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tz-tile { width: 96px; padding: 10px 6px; border-radius: 22px; background: rgba(20, 0, 52, .55); border: 2px solid rgba(255, 255, 255, .3); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.tz-tile b { font-size: 15px; } .tz-tile small { font-size: 10px; font-weight: 800; letter-spacing: .8px; opacity: .8; }
.tz-tile.rare { border-color: #4FC3FF; } .tz-tile.epic { border-color: #B57BFF; } .tz-tile.legendary { border-color: #FFC400; box-shadow: 0 0 22px rgba(255, 196, 0, .5); }
.tz-hero { width: 72px; height: 72px; }
.tz-swatch { width: 56px; height: 56px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .7); }
.tz-ico { font-size: 40px; line-height: 56px; height: 56px; }
.tz-col { display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); }
.tz-line { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 22px; background: rgba(20, 0, 52, .55); border: 2px solid rgba(255, 255, 255, .28); }
.tz-line b { display: block; font-size: 18px; } .tz-line small { font-size: 13px; opacity: .85; font-weight: 700; }
.tz-bi { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #3A1078; background: linear-gradient(180deg, #FFF3A0, #FFC400); }
.tz-note { margin: 0; text-align: center; font-size: 15px; font-weight: 700; opacity: .9; max-width: 340px; }
.tz-xp { width: min(320px, 100%); padding: 14px; border-radius: 22px; background: rgba(20, 0, 52, .55); border: 2px solid rgba(255, 255, 255, .28); }
.tz-xp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .tz-xp-top b { font-size: 20px; } .tz-xp-top small { color: #7CF06B; font-weight: 900; }
.tz-bar { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.tz-bar i { display: block; height: 100%; width: 12%; border-radius: 7px; background: linear-gradient(90deg, #7CF06B, #FFE14D); transition: width .85s ease-in; }
.tz-levelup { font-size: 40px; font-weight: 900; color: #FFE14D; opacity: 0; text-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.tz-levelup.in { opacity: 1; animation: tzPop .5s cubic-bezier(.34, 2, .64, 1); }
.tz-chest { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 22px; background: rgba(255, 255, 255, .95); color: #3A1078; opacity: 0; }
.tz-chest.in { opacity: 1; animation: tzPop .5s cubic-bezier(.34, 2, .64, 1); }
.tz-chest-ico { font-size: 36px; } .tz-chest b { font-size: 17px; }
.tz-map { position: relative; width: min(300px, 86%); height: min(400px, 48vh); border-radius: 30px; background: rgba(20, 0, 52, .35); border: 1px solid rgba(255, 255, 255, .3); }
.tz-map .node { position: absolute; margin: -23px 0 0 -23px; width: 46px; height: 46px; font-size: 16px; animation: tzIn .5s cubic-bezier(.34, 1.6, .64, 1) both; }
.tz-map .node.current { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 22px; }
.tz-map .tz-ns { position: absolute; top: 100%; left: 50%; translate: -50% 2px; font-size: 11px; color: var(--gold); white-space: nowrap; }
.tz-av { position: absolute; width: 64px; height: 64px; }
.tz-world { font-size: 38px; font-weight: 900; text-align: center; text-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
body:not(.reduced-motion) .tz-world.pop { animation: tzPop .3s ease-out; }
.tz-fact { font-size: 19px; font-weight: 900; text-align: center; padding: 10px 14px; border-radius: 20px; background: rgba(20, 0, 52, .5); }
/* End card: a warm, bright "your turn" moment, clearly different from the video */
.tz-final-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at 50% 42%, #FFE680 0, #FFB23E 28%, #FF5FA2 62%, #8E2DE2 100%); }
.tz-final-bg::after { content: ""; position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 9deg, transparent 9deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 60%); mask-image: radial-gradient(circle, #000 10%, transparent 60%); }
body:not(.reduced-motion) .tz-final-bg::after { animation: raySpin 14s linear infinite; }
.teaser.end .tz-final-bg { opacity: 1; }
.teaser.end .tz-head { top: calc(var(--safe-top) + 14%); }
.teaser.end .tz-cap { font-size: 52px; color: #fff; text-shadow: 0 5px 0 rgba(140, 20, 90, .5), 0 10px 30px rgba(120, 0, 80, .4); }
.teaser.end .tz-sub { font-size: 19px; margin-top: 12px; color: #fff; }
.tz-final-mascot { position: absolute; left: 50%; top: 44%; width: 170px; height: 170px; margin-left: -85px; display: none; }
.teaser.end .tz-final-mascot { display: block; }
.tz-go { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 64px); transform: translateX(-50%); width: min(320px, calc(100% - 32px)); display: none; pointer-events: auto; font-size: 22px; }
.teaser.end .tz-go { display: block; }
.tz-skip { position: absolute; top: calc(var(--safe-top) + 8px); right: 10px; pointer-events: auto; display: none; min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(20, 0, 52, .4); color: #fff; font: 800 13px var(--font); opacity: .8; }
.teaser.skippable .tz-skip { display: block; }
.teaser.end .tz-skip { display: none; }
.coach.tut.ok { background: rgba(10, 120, 80, .9); }
.coach.tut.warn { background: rgba(150, 60, 0, .88); }
.coach.warn { border-color: rgba(255, 216, 77, .8); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(255, 216, 77, .3), 0 10px 30px rgba(255, 190, 0, .25); }
.rotate { display: none; position: fixed; inset: 0; z-index: 30; background: linear-gradient(160deg, var(--bg1), var(--bg2)); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-weight: 800; text-align: center; padding: 16px; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .rotate { display: flex; } }   /* phones only: portal iframes on desktop are landscape too */
/* Fills the layout viewport: its size is the reliable screen size (iOS home-screen apps can
   report a too-small window.innerHeight right after launch). */
#vp-probe { position: fixed; inset: 0; visibility: hidden; pointer-events: none; }
#safe-probe { position: fixed; top: 0; left: 0; width: 0; height: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; pointer-events: none; }

/* ---------- How to play / guide ---------- */
.card.howto { gap: 10px; }
.howto-top { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; }
.howto-top #howto-step { color: var(--gold); font-weight: 800; }
.howto-stage { width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); line-height: 0; }
.howto-stage canvas { width: 100%; display: block; }
.card.howto p { font-size: 16px; min-height: 66px; }
.dots { display: flex; gap: 8px; justify-content: center; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .35); transition: width .2s; }
.dots i.on { width: 22px; background: #fff; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.guide-card { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .10); color: #fff; padding: 10px 4px; font: 800 12px var(--font); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 92px; justify-content: center; min-width: 0; }
.guide-card .gi2 { font-size: 28px; line-height: 1; color: var(--gold); }

/* ---------- Map / roadmap ---------- */
.screen.map { justify-content: flex-start; padding-left: 0; padding-right: 0; padding-bottom: 0; gap: 10px; }
.chest-bar { display: grid; grid-template-columns: auto 1fr 80px; align-items: center; gap: 10px; width: min(380px, calc(100% - 32px)); padding: 8px 14px; border-radius: 22px; color: #fff; font: 800 13px var(--font); cursor: pointer; text-align: left; }
.chest-bar.ready { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), var(--gold); color: var(--gold-ink); }
body:not(.reduced-motion) .chest-bar.ready .chest-ico { animation: wiggle .9s ease-in-out infinite; }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.chest-ico { font-size: 22px; display: inline-block; }
.chest-prog { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.chest-prog i { display: block; height: 100%; background: linear-gradient(90deg, #FF7AC8, #FFE14D); }
.map-scroll { flex: 1; width: 100%; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  /* Soft edges instead of a hard cut: the trail fades out under the top bar and at the bottom. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%); }
.map-path { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.zone { position: absolute; left: 8px; right: 8px; border-radius: 34px; border: 1px solid rgba(255, 255, 255, .3); }
.node {
  position: absolute; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9);
  font: 900 21px var(--font); color: #fff; cursor: pointer; display: grid; place-items: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  background: radial-gradient(circle at 35% 28%, #FFF6C8, #FFC43D 55%, #F08A00); box-shadow: 0 8px 20px rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.node.done { background: radial-gradient(circle at 35% 28%, #D8FFDC, #3FD866 55%, #179A3A); }
.node.hard { background: radial-gradient(circle at 35% 28%, #FFE0F2, #FF3D9A 55%, #C0156A); }
.node .gift-chest { position: absolute; right: -16px; top: -16px; font-size: 26px; line-height: 1; text-shadow: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
body:not(.reduced-motion) .node .gift-chest { animation: wiggle 1.8s ease-in-out infinite; }
.node .gift-badge { position: absolute; left: -30px; top: -12px; display: inline-flex; align-items: center; gap: 2px; line-height: 1.3; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 900; color: #5A3B00; background: linear-gradient(180deg, #FFF3A0, #FFC400); box-shadow: 0 2px 0 #B07800; text-shadow: none; white-space: nowrap; }
.node.locked { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .35); box-shadow: none; font-size: 17px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.node.current { width: 80px; height: 80px; margin-left: -40px; font-size: 28px; border: 4px solid #fff; z-index: 2;
  box-shadow: 0 0 0 5px #FFE14D, 0 0 0 9px rgba(255, 95, 162, .55), 0 0 34px 10px rgba(255, 225, 77, .55); }
/* "You are here": an expanding ring keeps calling you to the current level */
.node.current::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid #FFE14D; pointer-events: none; opacity: 0; }
body:not(.reduced-motion) .node.current::before { animation: nodeRing 1.6s ease-out infinite; }
@keyframes nodeRing { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.6); } }
body:not(.reduced-motion) .node.current { animation: nodePulse 1.4s ease-in-out infinite; }
@keyframes nodePulse { 50% { transform: scale(1.08); } }
.node-stars { position: absolute; margin-left: -32px; width: 64px; text-align: center; font-size: 14px; color: var(--gold); letter-spacing: 1px; pointer-events: none; text-shadow: 0 0 3px rgba(20, 0, 50, .9), 0 1px 2px rgba(20, 0, 50, .9); font-weight: 900; }
.map-dot { position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.map-avatar { position: absolute; width: 72px; height: 72px; margin-left: -36px; pointer-events: none; }
.map-avatar.walk { transition: left .9s cubic-bezier(.45, 0, .2, 1), top .9s cubic-bezier(.45, 0, .2, 1); }
body:not(.reduced-motion) .map-avatar.walk { animation: hopJump .45s ease-in-out .45s 2; }
@keyframes hopJump { 50% { transform: translateY(-26px); } }
.world-banner { position: absolute; left: 50%; transform: translateX(-50%); width: min(330px, 88%); text-align: center; padding: 10px 12px; border-radius: 22px; }
.world-banner b { display: block; font-size: 18px; }
.world-banner small { color: var(--dim); font-weight: 700; }
.world-banner .ban-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; }
.gate { position: absolute; left: 50%; transform: translateX(-50%); width: min(300px, 82%); padding: 10px 12px; border-radius: 22px; text-align: center; font-weight: 800; border-style: dashed; border-color: rgba(255, 255, 255, .6); }
.gate.open { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%), #2FD25A; border-style: solid; }
.constellation { display: flex; justify-content: center; gap: 6px; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .3); }
.constellation .lit { color: var(--gold); text-shadow: 0 0 8px rgba(255, 225, 77, .9); }
.story { position: absolute; left: 50%; transform: translateX(-50%); width: min(320px, 86%); text-align: center; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 18px; background: var(--glass); }

/* ---------- Level intro / goals / boosters ---------- */
.level-card { gap: 10px; }
.level-card h2 { font-size: 32px; }
.level-stars { display: flex; gap: 8px; justify-content: center; }
.level-stars i { font-style: normal; font-size: 22px; color: rgba(255, 255, 255, .22); } .level-stars i.on { color: var(--gold); }
.goal-row { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.goal { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); font-weight: 800; font-size: 18px; position: relative; }
.goal .gi { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: rgba(40, 0, 80, .6); box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .18), inset 3px 3px 0 rgba(255, 255, 255, .45), 0 0 0 2px #fff; flex: none; }
.goal small { font-size: 11px; color: var(--dim); font-weight: 700; }
.goal-txt { font-size: 17px; line-height: 1.25; }
.goal .gxp { font-size: 11px; color: #B6FF7A; font-weight: 900; margin-left: 2px; }
.goal.done { background: rgba(92, 240, 122, .25); border-color: rgba(92, 240, 122, .5); }
.reward-line { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-weight: 800; font-size: 13px; color: var(--dim); }
.reward-line b { color: #fff; }
.new-tip { display: flex; gap: 10px; align-items: center; text-align: left; background: rgba(255, 216, 77, .14); border: 1px solid rgba(255, 216, 77, .7); border-radius: 18px; padding: 10px 12px; font-weight: 700; width: 100%; font-size: 14px; }
.new-tip b { background: var(--gold); color: var(--gold-ink); border-radius: 8px; padding: 2px 8px; font-size: 11px; flex: none; }
.challenge-line { text-align: center; font-weight: 800; padding: 8px 12px; border-radius: 16px; background: rgba(255, 216, 77, .14); border: 1px solid rgba(255, 216, 77, .5); }
.fail-sub { font-weight: 800; font-size: 17px; }
.fail-tip { color: var(--dim); font-size: 14px; font-weight: 600; line-height: 1.35; }
.fail-tip b { color: var(--gold); }
.small-bar { width: 70%; height: 6px; margin: -2px auto 0; }
.help-box { padding: 10px 14px; border-radius: 18px; background: rgba(124, 240, 107, .14); border: 1px solid rgba(124, 240, 107, .5); }
.help-box small { display: block; color: var(--dim); font-size: 12px; font-weight: 600; }
.pick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: #fff; font: 800 15px var(--font); cursor: pointer; min-height: 44px; }
.pick .sw { width: 56px; height: 14px; border-radius: 7px; border: 2px solid #fff; }
.live-count { font-weight: 900; }
.navlock { position: absolute; top: 4px; right: calc(50% - 24px); font-size: 12px; }
.bottom-nav button.locked { opacity: .55; }
.share-card { position: relative; gap: 10px; }
.share-card img { width: 100%; max-height: 38vh; object-fit: contain; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .15); }
.share-seg { grid-template-columns: 1fr 1fr; }
.name-field input { min-height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .92); color: var(--ink); font: 700 17px var(--font); padding: 0 12px; }
.peak-line { color: var(--gold); font-weight: 900; text-align: center; }
body:not(.reduced-motion) .btn.peak { animation: breathe 1.4s ease-in-out infinite; box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255, 216, 77, .6); }
.perfect-pill { position: fixed; left: 50%; top: calc(150px + var(--safe-top)); transform: translateX(-50%); z-index: 21; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), var(--gold); color: var(--gold-ink); font: 900 15px var(--font); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.next-goal { color: var(--dim); font-size: 13px; font-weight: 700; text-align: center; }
.tomorrow { width: 100%; padding: 10px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.tomorrow b { font-size: 14px; } .tomorrow small { color: var(--dim); font-size: 12px; font-weight: 700; }
.master-line { font-size: 13px; font-weight: 800; color: var(--gold); padding: 6px 12px; border-radius: 14px; background: rgba(255, 216, 77, .12); }
.node .crown { position: absolute; left: -12px; top: -14px; font-size: 20px; text-shadow: none; }
.eur { display: block; font-size: 10px; font-weight: 700; opacity: .75; }
.daily-line { text-align: center; font-weight: 800; font-size: 14px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .10); }
.btn.ad-btn { white-space: normal; line-height: 1.2; }
.map-chips { display: flex; gap: 6px; }
#btn-quest-bonus { white-space: normal; line-height: 1.2; min-height: 52px; height: auto; padding: 8px 14px; }
.ad-big { font-size: 56px; } .ad-body h2 { color: #fff; }
.ad { background: linear-gradient(160deg, #1D1240, #3A1060); }
.flycoin { position: fixed; width: 22px; height: 22px; margin: -11px; z-index: 70; pointer-events: none; }
.count-pop { animation: countPop .4s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes countPop { 50% { transform: scale(1.3); color: var(--gold); } }
.star-req { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--dim); }
.star-req span { padding: 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, .10); white-space: nowrap; }
.star-req b { color: var(--gold); letter-spacing: -1px; }
.modes-card { position: relative; gap: 12px; }
.mode { width: 100%; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; text-align: left; padding: 14px; border-radius: 22px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--font); transition: transform .12s; }
.mode:active { transform: scale(.97); }
.mode-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; font-weight: 900; background: rgba(255, 255, 255, .16); }
.mode-txt b { display: block; font-size: 18px; } .mode-txt small { display: block; color: var(--dim); font-size: 13px; font-weight: 600; line-height: 1.35; margin-top: 2px; }
.mode-txt em { display: block; font-style: normal; color: var(--gold); font-size: 12px; font-weight: 800; margin-top: 4px; }
.menu-set { width: 100%; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.close-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 22px; border: none; background: rgba(255, 255, 255, .12); color: var(--dim); font: 700 15px var(--font); cursor: pointer; }
.level-card { position: relative; }
.boost-sec { width: 100%; padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.boost-head { width: 100%; text-align: center; }
.boost-head b { font-size: 15px; } .boost-head small { display: block; color: var(--dim); font-size: 12px; font-weight: 600; }
.booster-row { display: flex; justify-content: center; gap: 10px; width: 100%; }
.booster-row .boost { width: 92px; }
.boost { position: relative; padding: 10px 4px 8px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .10); color: #fff; font: 800 11px var(--font); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; min-width: 0; transition: transform .12s; }
.boost:active { transform: scale(.95); }
.boost .bi { font-size: 22px; line-height: 1.1; }
.boost .bs { font-size: 10px; color: var(--dim); font-weight: 700; }
.boost.on { border-color: #5CF07A; background: rgba(92, 240, 122, .28); box-shadow: 0 0 0 2px rgba(92, 240, 122, .5); }
.boost.on .bs { color: #B6FF7A; }
.boost.short { opacity: .55; }
.boost .n { position: absolute; top: -9px; right: -5px; min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: var(--ink); font: 900 12px var(--font); display: grid; place-items: center; padding: 0 5px; }

/* ---------- Quests ---------- */
.quest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.quest { display: grid; grid-template-columns: 1fr 104px; gap: 6px 10px; align-items: center; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); }
.quest > div { min-width: 0; } .quest b { display: block; font-size: 15px; line-height: 1.25; } .quest small { display: block; margin-top: 3px; color: var(--dim); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.quest .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.quest .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6FD3FF, #5CF07A); }
.quest button { width: 104px; min-height: 44px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .6); background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%), var(--gold); color: var(--gold-ink); font: 800 13px var(--font); }
.quest button:disabled { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: var(--dim); }

/* ---------- Shop ---------- */
/* Fixed height (never taller than the screen): the tabs never jump when content changes,
   the grid scrolls inside and "Done" stays visible as a sticky footer. */
.shop-card { gap: 12px; height: min(760px, calc(100vh - 40px)); height: min(760px, calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom))); max-height: none; overflow: hidden !important; }
@media (max-height: 520px) {
  .shop-card { gap: 6px; padding: 10px 14px; }
  .shop-card h2 { font-size: 20px; }
  .shop-card .tabs { grid-template-columns: repeat(6, 1fr); }
  .shop-card .btn { min-height: 40px; }
  .shop-card .actions { flex-direction: row; } .shop-card .actions .btn { min-height: 38px; font-size: 14px; }
}
.shop-card .shop-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 10px 2px 4px; flex-shrink: 1; scrollbar-gutter: stable; }
.shop-card > .actions { flex-shrink: 0; }
.tabs button { height: 44px; }
.shop-head { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; padding: 4px; border-radius: 20px; background: rgba(255, 255, 255, .10); }
.tabs button { min-height: 36px; border-radius: 16px; border: none; background: transparent; color: #fff; font: 700 13px var(--font); padding: 0 4px; white-space: nowrap; min-width: 0; }
.tabs button.on { background: rgba(255, 255, 255, .92); color: var(--ink); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; width: 100%; padding-top: 6px; }
.item { position: relative; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .10); padding: 16px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.item.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 110px; text-align: left; padding: 16px 12px 12px; align-items: center; }
.item b { font-size: 15px; } .item small { color: var(--dim); font-size: 12px; font-weight: 600; }
.item .info { min-width: 0; }
.item .sw { width: 70px; height: 14px; border-radius: 7px; border: 2px solid #fff; }
.item .theme-sw { width: 64px; height: 64px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .6); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.item .theme-sw i { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 14px; border-radius: 7px; }
.item canvas { width: 64px; height: 64px; }
.item .gi2 { font-size: 30px; }
.item .tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: #fff; font: 900 9px var(--font); padding: 3px 8px; border-radius: 8px; letter-spacing: .6px; white-space: nowrap; }
.item.wide .tag { left: auto; right: 10px; transform: none; }
.tag.common { background: #7A7A9A; } .tag.rare { background: #1D7DFF; } .tag.epic { background: #A020F0; } .tag.legendary { background: linear-gradient(90deg, #FF9500, #FF2E93); }
.tag.popular, .tag.best, .tag.value { background: #FF2E93; }
.item.rarity-rare { border-color: rgba(79, 195, 255, .8); } .item.rarity-epic { border-color: rgba(199, 125, 255, .9); } .item.rarity-legendary { border-color: rgba(255, 179, 0, .95); box-shadow: 0 0 18px rgba(255, 179, 0, .25); }
.item button { width: 100%; min-height: 44px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, .6); font: 800 13px var(--font); padding: 0 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%), var(--gold); color: var(--gold-ink); }
.item.inuse { border-color: #7CF06B; box-shadow: 0 0 0 2px rgba(124, 240, 107, .45), 0 0 22px rgba(124, 240, 107, .25); background: rgba(124, 240, 107, .12); }
.item .using { width: 100%; min-height: 38px; border-radius: 19px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; font-size: 13px; color: #0B3D12; background: linear-gradient(180deg, #B6FF9E, #5CE06A); }
.item .lock-why { font-size: 11px; color: var(--dim); font-weight: 700; line-height: 1.3; }
.item button.eq { background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%), var(--accent); color: var(--accent-ink); }
.item button.lock { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .2); color: var(--dim); font-size: 12px; }
.item button:disabled { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: var(--dim); }
.item .prog { width: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.item .prog i { display: block; height: 100%; background: var(--gold); }
.testlabel { color: var(--gold); font-weight: 800; font-size: 12px; letter-spacing: .5px; }

/* ---------- Trophies ---------- */
.rank-card { width: 100%; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; align-items: center; text-align: left; }
.rank-card .rank-badge { width: 56px; height: 56px; border-radius: 28px; font-size: 22px; }
.rank-card b { font-size: 18px; } .rank-card small { color: var(--dim); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.rank-card .bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); overflow: hidden; margin-top: 6px; }
.rank-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFE14D, #FF7AC8); }
.rank-card .bar.xpb i { background: linear-gradient(90deg, #7CF06B, #B6FF7A); }
.rank-card .wide { grid-column: 1 / -1; }
.ach-list { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ach-list li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); font-weight: 700; }
.ach-list li span { flex: 1; } .ach-list li em { font-style: normal; font-size: 12px; color: #B6FF7A; font-weight: 900; }
.ach-list li.done { color: var(--gold); }
.ach-list li::before { content: "○"; } .ach-list li.done::before { content: "★"; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; font-size: 12px; width: 100%; font-weight: 700; }
.stats div { background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 8px 10px; color: var(--dim); }
.stats b { display: block; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Ads (test) & dev ---------- */
.ad { background: #111; z-index: 15; }
.ad-label { position: absolute; top: calc(14px + var(--safe-top)); left: 14px; font-weight: 800; color: #999; letter-spacing: 1px; }
.ad-body { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #ccc; text-align: center; }
.ad-spinner { width: 54px; height: 54px; border: 5px solid #333; border-top-color: #aaa; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#btn-ad-close { position: absolute; top: calc(10px + var(--safe-top)); right: 12px; width: auto; min-width: 60px; }
.dev { text-align: left; border-top: 1px dashed rgba(255, 255, 255, .35); padding-top: 10px; width: 100%; }
.dev pre { font-size: 11px; white-space: pre-wrap; color: var(--dim); margin: 0; }

/* ---------- High contrast: solid surfaces, no blur, strong borders ---------- */
body.hc { --bg1: #000; --bg2: #000; --dim: #E6E6E6; --accent: #4DFF9A; --accent2: #4DFF9A; --accent-ink: #000; }
body.hc .glass, body.hc .card, body.hc .chip, body.hc .journey, body.hc .bottom-nav, body.hc .toast, body.hc .coach, body.hc .icon-btn.hud,
body.hc .chest-bar, body.hc .world-banner, body.hc .gate, body.hc .btn, body.hc .goal, body.hc .boost, body.hc .item, body.hc .quest, body.hc .stat-row div, body.hc .rank-card {
  background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; border: 2px solid #fff; box-shadow: none;
}
body.hc .btn.primary { background: var(--accent); color: #000; }
body.hc .btn.reward, body.hc .item button, body.hc .quest button { background: #FFF200; color: #000; }
body.hc .btn.danger { background: #FF3B3B; color: #000; }
body.hc .screen.dim-bg { background: rgba(0, 0, 0, .85); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.hc .logo b, body.hc .win-title { text-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .card, .chip, .journey, .bottom-nav, .toast, .coach, .btn { background-color: rgba(40, 8, 90, .82); }
}

@media (prefers-reduced-motion: reduce) { .screen, .badge, .logo b, .node.current, .coach { animation: none !important; } }
/* Short phones (≤ 720 px high): keep the home calm and the Play button clear of the tab bar. */
@media (max-height: 720px) {
  .screen.home .subtitle { display: none; }
  .screen.home .mascot { width: 84px; height: 84px; }
  .screen.home .logo { font-size: 52px; }
  .screen.home .home-center { gap: 8px; }
  .journey { padding: 8px 12px; } .j-bar { margin: 5px 0 3px; }
  .tomorrow { padding: 7px 12px; } .tomorrow small { display: none; }
  .btn.huge { min-height: 56px; font-size: 20px; }
}
.j-top span { white-space: nowrap; flex: none; font-size: 13px; }
@media (max-height: 640px) { .mascot { width: 100px; height: 100px; } .logo { font-size: 50px; } .screen.home { padding-bottom: calc(88px + var(--safe-bottom)); } .home-center { gap: 10px; } }
#confirm-text { white-space: pre-line; line-height: 1.45; }