/* © 2026 Arcwave Media. All rights reserved. */
/* 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-mascot { width: 120px; height: 120px; }   /* v1.41.3: Loopo himself on the loading screen */
body:not(.reduced-motion) .splash-mascot { animation: logoPop .7s cubic-bezier(.34, 1.8, .64, 1) both; }
.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%; } }
/* v1.41.2 finale (after the first win on level 100) */
.screen.finale { z-index: 30; background: radial-gradient(circle at 50% 20%, rgba(255, 225, 77, .35), rgba(20, 0, 50, .55) 60%); }
.finale-card { text-align: center; gap: 10px; }
.fin-trophy { font-size: 76px; line-height: 1; filter: drop-shadow(0 8px 24px rgba(255, 200, 0, .55)); }
body:not(.reduced-motion) .fin-trophy { animation: logoPop .8s cubic-bezier(.34, 1.8, .64, 1) both, finBob 2.4s 1s ease-in-out infinite; }
@keyframes finBob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.fin-title { font-size: 32px; margin: 0; background: linear-gradient(90deg, #FFE14D, #FF8AD8, #7DF9FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fin-sub, .fin-more { margin: 0; font-weight: 700; color: var(--dim); line-height: 1.35; }
.fin-more { color: #FFE14D; }
.fin-shots { width: 100%; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; touch-action: pan-x; }
.fin-shot { flex: 0 0 132px; height: 150px; border-radius: 20px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; scroll-snap-align: start; position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.fin-shot:nth-child(odd) { transform: rotate(-2deg); } .fin-shot:nth-child(even) { transform: rotate(2deg); }
.fin-shot b { font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.fin-shot small { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.fin-shot .num { position: absolute; top: 8px; left: 10px; font-size: 12px; font-weight: 900; color: rgba(255, 255, 255, .85); }
.fin-shot .orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.fin-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fin-stats div { padding: 10px 4px; border-radius: 16px; background: rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 2px; }
.fin-stats b { font-size: 18px; } .fin-stats span { font-size: 11px; font-weight: 800; color: var(--dim); }
body.boss-fury:not(.reduced-motion) #boss-panel { animation: furyPulse .45s ease-in-out infinite alternate; }   /* v1.41.4 final boss fury */
@keyframes furyPulse { from { box-shadow: 0 0 0 rgba(255, 40, 90, 0); } to { box-shadow: 0 0 26px rgba(255, 40, 90, .9); transform: rotate(-.6deg); } }
.streak-line { margin: 0; font-weight: 900; color: #FFB347; }   /* v1.41.2 hot streak on the win screen */
.fin-shot canvas { position: absolute; right: 4px; top: 22px; width: 60px; height: 60px; }
.fin-trophy-char { width: 100%; display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: 22px; background: linear-gradient(135deg, rgba(255, 225, 77, .22), rgba(255, 79, 163, .2)); border: 1px solid rgba(255, 225, 77, .5); }
.fin-trophy-char canvas { width: 110px; height: 110px; }
.fin-trophy-char b { display: block; font-size: 17px; } .fin-trophy-char small { display: block; color: var(--dim); font-weight: 700; margin: 2px 0 8px; line-height: 1.3; }
.fin-credits { width: 100%; height: 150px; overflow: hidden; position: relative; border-radius: 18px; background: rgba(0, 0, 0, .22);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.fin-credits .roll { padding: 150px 12px; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.5; }
.fin-credits .roll i { display: block; font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-top: 10px; }
body:not(.reduced-motion) .fin-credits .roll { animation: credRoll 26s linear infinite; }
body.reduced-motion .fin-credits { height: auto; } body.reduced-motion .fin-credits .roll { padding: 12px; }
@keyframes credRoll { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.fin-reward { font-weight: 900; font-size: 18px; color: #FFE14D; }
/* v1.41.2 slow devices: after the first fill the bar keeps sweeping and a friendly tip appears (works offline) */
.splash.wait .splash-bar i { width: 40%; animation: sweep 1s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(-10%); } to { transform: translateX(160%); } }
.splash-tip { min-height: 2.6em; max-width: 280px; margin: 10px 0 0; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; color: rgba(255, 255, 255, .85); opacity: 0; transition: opacity .4s; }
.splash.wait .splash-tip { opacity: 1; }
.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; }
.motion-settle * { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }   /* v1.41.5: no replay when Reduce motion goes off */

.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: 6px; }   /* v1.41.2: loops on the right, the gear sits left */
.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; }
.hgoal.done .gp { display: none; }   /* a finished goal shows only its ✓, no progress line */
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: .95; } 70% { scale: 1.04; } 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: auto 1fr auto auto; gap: 8px; align-items: center; }
.screen.map .topbar { position: static; width: min(420px, calc(100% - 24px)); grid-template-columns: auto 1fr; }   /* v1.41.2 (owner): gear top-left · chips right · world name centred on its own row */
.screen.map .topbar .map-chips { justify-self: end; }
.screen.map .topbar h2 { grid-column: 1 / -1; grid-row: 2; text-align: center; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 2px 0 0; transition: opacity .18s; }
.screen.map .topbar h2.swap { opacity: 0; }
.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)); left: 22px; 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(420px, calc(100% - 16px)); bottom: calc(12px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(5, 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: calc(var(--safe-top) + 128px); font-size: 14px; padding: 8px 16px; }   /* in play: just under the HUD, above the board */
/* 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; top: calc(var(--safe-top) + 26px); left: 14px; min-height: 36px; padding: 0 14px; border-radius: 18px; background: rgba(20, 0, 52, .45); pointer-events: auto; color: #fff; font-size: 14px; }   /* top-left, opposite the pause button */
.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: auto; cursor: pointer; border: 2px solid rgba(255, 216, 77, .85); }
.tut-next { display: inline-block; margin-top: 8px; padding: 7px 22px; border-radius: 16px; background: linear-gradient(180deg, #FFF3A0, #FFC400); color: #4A2C00; font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 #B07800; }
body:not(.reduced-motion) .tut-next { animation: breathe 1.2s ease-in-out infinite; }
.tut-bar.lv .tut-steps { display: none; }
.tut-bar.lv .link-btn { top: auto; left: 50%; translate: -50% 0; bottom: calc(var(--safe-bottom) + 8px); }   /* practice level: HUD is on top, Skip sits under the board */
.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); } }
/* Small phones (≤360 px wide): a slimmer rank chip so the top bar never cuts off */
@media (max-width: 360px) {
  .chip.rank .rk { display: none; }   /* just the level badge */
  .topbar { gap: 6px; }
  .bottom-nav button { font-size: 10px; }
}
/* "You're ready!" card: the real stars, big */
.ready-stars { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 4px 0 2px; }
.ready-stars .bstar { width: 52px; height: 52px; }
.ready-stars .bstar.big { width: 68px; height: 68px; }
/* "🔒 Level N" bubble above a locked button */
.lock-bubble { position: fixed; z-index: 30; translate: -50% -100%; padding: 6px 12px; border-radius: 14px; background: #fff; color: #3A1078; font: 900 13px var(--font); white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: opacity .35s; }
.lock-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
body:not(.reduced-motion) .lock-bubble { animation: tzPop .35s cubic-bezier(.34, 1.8, .64, 1); }
.lock-bubble.out { opacity: 0; }
/* Daily check-in (Quests) */
.checkin { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; }
.ci-title { font-size: 16px; }
.ci-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ci-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); min-width: 0; }
.ci-day small { font-size: 9px; font-weight: 800; opacity: .8; } .ci-day b { font-size: 11px; white-space: nowrap; }
.ci-day.got { background: rgba(124, 240, 107, .25); border-color: #7CF06B; }
.ci-day.today { background: linear-gradient(180deg, #FFF3A0, #FFC400); color: #4A2C00; border-color: #fff; box-shadow: 0 0 14px rgba(255, 210, 0, .6); }
body:not(.reduced-motion) .ci-day.today { animation: breathe 1.6s ease-in-out infinite; }
.ci-day.big b { font-size: 10px; }
/* Win screen XP lines slide in one by one (showXp) */
#win-xp-lines .xp-row { opacity: 0; translate: -14px 0; transition: opacity .25s, translate .3s cubic-bezier(.34, 1.6, .64, 1); }
#win-xp-lines .xp-row.in { opacity: 1; translate: 0 0; }
#win-lvlup.pop { animation: tzPop .5s cubic-bezier(.34, 2, .64, 1); color: #FFE14D; font-weight: 900; }
body.reduced-motion #win-xp-lines .xp-row { opacity: 1; translate: none; }
/* Seasonal themes (season.js): floating decorations behind the menus, never while playing */
.season-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.season-fx i { position: absolute; top: 0; font-style: normal; opacity: .5; animation-timing-function: linear; animation-iteration-count: infinite; }
.season-fx.fall i { animation-name: sFall; } .season-fx.rise i { animation-name: sRise; } .season-fx.drift i { animation-name: sDrift; }
@keyframes sFall { from { transform: translate(0, -10vh) rotate(0); } to { transform: translate(30px, 110vh) rotate(360deg); } }
@keyframes sRise { from { transform: translate(0, 110vh) scale(.8); opacity: 0; } 15% { opacity: .8; } to { transform: translate(-20px, -10vh) scale(1.1); opacity: 0; } }
@keyframes sDrift { 0% { transform: translate(-10vw, 20vh); } 50% { transform: translate(50vw, 60vh) rotate(15deg); } 100% { transform: translate(110vw, 30vh); } }
body.playing .season-fx { display: none; }
.season-greet { font-size: 15px; font-weight: 900; padding: 6px 14px; border-radius: 16px; background: rgba(255, 255, 255, .18); }
/* Weekly event */
.island-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(126, 214, 255, .7);
  background: linear-gradient(180deg, rgba(94, 211, 243, .35), rgba(42, 123, 214, .35)); color: #fff; font: 900 15px var(--font); }
.island-pill .ico { width: 20px; height: 20px; fill: #fff; }
/* v1.41.6 Loopo Island */
.screen.island { padding: 0; justify-content: flex-start; background: #2A7BD6; z-index: 9; }   /* above the game canvas; popups (.top, z 12) stay above it */
#island-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.island-top { position: relative; z-index: 2; margin-top: calc(10px + var(--safe-top)); width: min(420px, calc(100% - 24px)); grid-template-columns: auto 1fr auto; }
.island-joy { gap: 6px; } .island-joy small { font-size: 11px; color: var(--dim); font-weight: 800; }
.island-hint { position: relative; z-index: 2; margin: 8px 16px 0; padding: 6px 14px; border-radius: 16px; background: rgba(20, 0, 50, .35); font-weight: 800; font-size: 14px; text-align: center; }
.island-sheet { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 58%; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px calc(14px + var(--safe-bottom));
  border-radius: 24px 24px 0 0; background: rgba(28, 12, 64, .96); box-shadow: 0 -8px 24px rgba(0, 0, 0, .3); }
body.ad-on .island-sheet { padding-bottom: calc(14px + var(--ad)); }
.island-sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.island-sheet-sub { margin: -4px 0 0; color: var(--dim); font-size: 13px; font-weight: 700; line-height: 1.35; }
.island-zoom { position: absolute; z-index: 2; right: 12px; top: calc(150px + var(--safe-top)); display: flex; flex-direction: column; gap: 12px; }
/* v1.41.7: cozy, rounded island buttons (cream with a soft brown rim and a "press" shadow) */
.isl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 3px solid #A9784A;
  background: radial-gradient(circle at 35% 30%, #FFFBEF, #F6E7C6); color: #6B4423; box-shadow: 0 4px 0 #A9784A, 0 7px 10px rgba(40, 20, 0, .25); cursor: pointer; transition: transform .08s, box-shadow .08s; }
.isl-btn svg { width: 26px; height: 26px; fill: #8A5A35; display: block; }
.isl-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #A9784A, 0 3px 6px rgba(40, 20, 0, .25); }
.isl-event { position: absolute; z-index: 2; left: 12px; top: calc(118px + var(--safe-top)); width: auto; height: auto; padding: 6px 14px 6px 10px; border-radius: 22px; gap: 8px; background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--ev, #FFC93C)); border-color: rgba(0,0,0,.25); box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 7px 10px rgba(0,0,0,.2); color: #2A1650; }
.isl-event i { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; line-height: 1.1; } .isl-event b { font: 900 13px var(--font); } .isl-event span { font: 800 12px var(--font); opacity: .8; }
.isl-bag { position: absolute; z-index: 2; left: 12px; bottom: calc(18px + var(--safe-bottom)); width: auto; padding: 0 16px 0 12px; border-radius: 26px; font: 900 15px var(--font); }
body.ad-on .isl-bag { bottom: calc(18px + var(--ad)); }
/* v1.41.7: every island button has its own colour: Home cream, Build green, Storage orange, zoom cream */
.isl-bag { background: radial-gradient(circle at 35% 30%, #FFD9A8, #FF9A3D); border-color: #B85E1C; color: #5A2600; box-shadow: 0 4px 0 #B85E1C, 0 7px 10px rgba(60, 20, 0, .25); }
.isl-bag svg { fill: #7A3608; }
.isl-build { background: radial-gradient(circle at 35% 30%, #F2FFEA, #A8E58E); border-color: #4E8A3A; box-shadow: 0 4px 0 #4E8A3A, 0 7px 10px rgba(0, 40, 0, .25); color: #2F5A22; }
.isl-build svg { fill: #3D6E2C; }
.island-hint { transition: opacity .6s, transform .6s; } .island-hint.gone { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.island-hint.build { background: linear-gradient(180deg, #4FB548, #2E8A33); border: 2px solid #A8E58E; font-size: 15px; padding: 10px 16px; box-shadow: 0 6px 14px rgba(0, 40, 0, .3); }
/* v1.41.7: the Island button on the home bar feels special: its own sea-blue badge */
.isl-home { width: auto; height: 44px; padding: 0 14px 0 10px; border-radius: 24px; font: 900 15px var(--font); box-shadow: 0 3px 0 #A9784A, 0 5px 8px rgba(40, 20, 0, .25); }
.isl-home svg { width: 22px; height: 22px; }
.isl-build { position: absolute; z-index: 2; right: 12px; bottom: calc(18px + var(--safe-bottom)); width: auto; padding: 0 16px 0 12px; border-radius: 26px; font: 900 15px var(--font); }
body.ad-on .isl-build { bottom: calc(18px + var(--ad)); }
.isl-build.on { background: radial-gradient(circle at 35% 30%, #FFFBEF, #F6E7C6); border-color: #A9784A; box-shadow: 0 4px 0 #A9784A, 0 7px 10px rgba(40, 20, 0, .25); color: #6B4423; }   /* 'Done' looks calm */
.isl-build.on svg { fill: #8A5A35; }
.island-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #62D6F4, #2A7BD6); font-size: 20px; }
.island-loading small { color: rgba(255, 255, 255, .85); font-weight: 700; font-size: 14px; }
.island-cat { grid-column: 1 / -1; margin: 6px 2px 0; font: 900 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: #FFE08A; }
.island-item.song { align-items: flex-start; text-align: left; padding: 10px 12px; gap: 4px; }
.island-item.song b { font-size: 14px; } .island-item.song small { color: var(--dim); font-weight: 700; font-size: 11px; line-height: 1.3; }
.island-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; overflow-y: auto; padding-bottom: 4px; }
.island-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font: 800 12px var(--font); }
.island-item canvas { width: 64px; height: 64px; }
.island-item .p { color: var(--gold); } .island-item.own { border-color: #5CF07A; } .island-item.short { opacity: .55; }
.event-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(255, 225, 77, .7);
  background: linear-gradient(180deg, rgba(255, 225, 77, .28), rgba(255, 140, 60, .18)); color: #fff; font: 800 14px var(--font); }
body:not(.reduced-motion) .event-pill { animation: breathe 2.6s ease-in-out infinite; }
.event-pill .dot { top: -6px; right: -6px; }
.event-card { gap: 8px; }
.event-big { font-size: 56px; line-height: 1; }
.event-tag { color: #FFE14D; font-weight: 900; letter-spacing: 1.5px; font-size: 11px; }
.event-goal { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; }
.event-bar { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.event-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7CF06B, #FFE14D); transition: width .4s; }
.event-reward { margin: 0; font-weight: 800; }
.event-note { font-size: 13px; font-weight: 800; color: #FFE14D; text-align: center; }
/* Daily leaderboard: its own screen with a podium */
.screen.lb-screen { justify-content: flex-start; padding: calc(10px + var(--safe-top)) 0 0; gap: 8px; background: linear-gradient(170deg, #3A1078, #7A2CC8 55%, #C2338E); }
.lb-top { position: static; width: min(440px, calc(100% - 24px)); grid-template-columns: auto 1fr auto; }
.lb-top h2 { text-align: center; font-size: 21px; margin: 0; }
.lb-day { font-size: 12px; font-weight: 800; opacity: .8; }
.lb-body { flex: 1; width: 100%; max-width: 440px; overflow-y: auto; padding: 4px 16px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.lb-tabs { width: 100%; flex: none; }
.lb-tabs button.on { background: rgba(255, 255, 255, .28); }
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; padding: 6px 4px 0; flex: none; }
.lb-pod { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lb-pod canvas { width: 64px; height: 64px; }
.lb-pod.p1 canvas { width: 82px; height: 82px; }
.lb-pod .pn { font-size: 12px; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod .pnl { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; min-width: 0; }
.lb-pod .pnl .lb-flag { flex: none; width: 22px; height: 22px; font-size: 11px; }
.lb-pod .ps { font-size: 14px; font-weight: 900; color: #FFE14D; font-variant-numeric: tabular-nums; }
.lb-pod .plinth { width: 100%; border-radius: 14px 14px 6px 6px; display: grid; place-items: center; font-size: 26px; font-weight: 900; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.lb-pod.p1 .plinth { height: 86px; background: linear-gradient(180deg, #FFE680, #F5B800); }
.lb-pod.p2 .plinth { height: 64px; background: linear-gradient(180deg, #E8EEF8, #A9B4C8); }
.lb-pod.p3 .plinth { height: 48px; background: linear-gradient(180deg, #F2B98A, #C2763C); }
.lb-pod.me .pn { color: #FFE14D; }
.lb-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; flex: none; }
.lb-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.lb-row.me { background: rgba(255, 225, 77, .22); box-shadow: inset 0 0 0 2px #FFE14D; }
.lb-rank { text-align: center; font-size: 16px; } .lb-name { text-align: left; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-score { font-variant-numeric: tabular-nums; }
.lb-me { width: 100%; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #FFF3A0, #FFC400); color: #4A2C00; font-weight: 900; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); flex: none; }
.lb-msg { margin: 6px 0; text-align: center; color: var(--dim); font-weight: 700; }
.lb-hero { font-size: 84px; text-align: center; line-height: 1.1; filter: drop-shadow(0 8px 20px rgba(255, 200, 0, .45)); }
body:not(.reduced-motion) .lb-hero { animation: breathe 2.4s ease-in-out infinite; }
.lb-settings input[type=text], .field input[type=text] { width: 100%; min-height: 42px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; font: 800 16px var(--font); padding: 0 12px; }
.lb-settings input::placeholder { color: rgba(255, 255, 255, .55); }
.lb-settings { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; flex: none; }
.lb-settings .link-btn { align-self: center; font-size: 13px; }
.namer { display: flex; flex-direction: column; gap: 6px; }
.namer-t { font-weight: 800; font-size: 14px; }
.namer-preview { font-size: 20px; color: #FFE14D; }
.namer-row { display: grid; grid-template-columns: 1fr 1fr 64px 44px; gap: 6px; align-items: center; }
.namer-row select { min-height: 42px; font-size: 14px; padding: 0 6px; min-width: 0; }
.lb-flag { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; }
.lb-row.has-flag { grid-template-columns: 38px 1fr auto 28px; }
.lb-row.has-ghost.has-flag { grid-template-columns: 38px 1fr auto 32px 28px; }
.lb-link { align-self: flex-end; margin: -6px 0 -4px; color: #FFE14D; font-weight: 800; }
.lb-btn { background: linear-gradient(180deg, #FFF3A0, #FFC400); color: #4A2C00; }
/* 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; }
/* v1.35: with the permanent banner every screen (and the HUD world) ends above it; the banner keeps the safe area. */
body.ad-on .screen, body.ad-on .tut-bar { bottom: var(--ad); }
body.ad-on .screen { padding-bottom: 16px; }
/* v1.41.5 (owner screenshots): an overlay's dimmed background also covers the banner strip, so the game never peeks
   through under it when no banner is showing (the content itself still ends above the banner). The chest overlay
   simply runs to the bottom edge and keeps its content above the banner with padding. */
body.ad-on .screen.dim-bg::after, body.ad-on .screen.boss-intro::after, body.ad-on .screen.finale::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--ad); pointer-events: none;
  background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; }
body.ad-on .chest-ov { padding-bottom: calc(24px + var(--ad)); }
.ad-banner { z-index: 45; }
/* 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.spent { pointer-events: none; cursor: default; }
.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-score { position: absolute; top: calc(var(--safe-top) + 70px); right: 16px; padding: 6px 14px; border-radius: 18px; background: rgba(20, 0, 52, .65); border: 1px solid rgba(255, 225, 77, .7); font-size: 20px; font-weight: 900; }
.tz-score b { font-variant-numeric: tabular-nums; display: inline-block; }
body:not(.reduced-motion) .tz-score b.bump { scale: 1.15; transition: scale .12s; }
.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(320px, 90%); height: min(420px, 52vh); border-radius: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); }
.tz-track { position: absolute; left: 0; right: 0; bottom: 0; height: 640px; }
body:not(.reduced-motion) .tz-track { animation: tzScroll 3.4s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes tzScroll { from { transform: translateY(0); } to { transform: translateY(260px); } }
.tz-map .node { position: absolute; margin: -23px 0 0 -23px; width: 46px; height: 46px; font-size: 16px; }
.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; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tz-ban { position: absolute; top: 600px; left: 50%; transform: translateX(-50%); width: 80%; }
.tz-av { position: absolute; width: 58px; height: 58px; }
.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.locked { opacity: .45; cursor: default; }
.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.big { font-size: 38px; right: -24px; top: -26px; filter: drop-shadow(0 0 10px rgba(255, 215, 0, .9)) drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.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); }
.iap-lock { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px; text-align: center; }
.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; }

/* v1.32 ranking redesign: centred title, rank badges, a clear "your name" card */
.lb-top { grid-template-columns: 44px 1fr 44px; }
.lb-top h2 { font-size: 24px; letter-spacing: .3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.lb-row { grid-template-columns: 34px 1fr auto; padding: 9px 12px 9px 9px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 4px 12px rgba(30, 0, 60, .18); }
.lb-rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; background: rgba(255, 255, 255, .16); }
.lb-row.p1 .lb-rank, .lb-row.p2 .lb-rank, .lb-row.p3 .lb-rank { background: none; font-size: 20px; }
.lb-score { font-weight: 900; color: #FFE14D; font-size: 16px; }
.lb-friends-note { margin: 2px 4px; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--dim); text-align: center; }
.lb-settings { padding: 14px; border-radius: 22px; gap: 12px; background: rgba(20, 0, 50, .28); border: 1px solid rgba(255, 255, 255, .14); }
.namer { align-items: center; text-align: center; gap: 4px; }
.namer-t { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.namer-line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.namer-preview { font-size: 22px; }
.namer-note { font-size: 12px; font-weight: 700; color: var(--dim); }
#row-lbname { text-align: left; }
.unlock-card { text-align: center; gap: 10px; }
.unlock-tag { align-self: center; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #FFE680, #F5B800); color: #4A2C00; font-weight: 900; font-size: 13px; letter-spacing: .5px; }
.unlock-ico { font-size: 76px; line-height: 1.1; filter: drop-shadow(0 8px 18px rgba(255, 200, 0, .45)); }
body:not(.reduced-motion) .unlock-ico { animation: breathe 2.2s ease-in-out infinite; }
.unlock-card .actions { display: flex; flex-direction: column; gap: 8px; }
#shop-tabs { grid-template-columns: repeat(4, 1fr); }   /* v1.32: 7 tabs in two rows */
#shop-tabs button { height: 38px; min-height: 34px; font-size: 12.5px; }
.lb-row.has-ghost { grid-template-columns: 34px 1fr auto 34px; }
.lb-row.has-flag { grid-template-columns: 34px 1fr auto 28px; }
.lb-row.has-ghost.has-flag { grid-template-columns: 34px 1fr auto 34px 28px; }
.lb-ghost { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .14); font-size: 15px; display: grid; place-items: center; padding: 0; }

/* v1.33 boss fights */
.boss-lights { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.boss-lights::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 90px 20px rgba(255, 30, 80, .35); }
.boss-lights i { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; margin-left: -80vmax; border-radius: 50%; opacity: .22; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 40, 90, .9) 10%, transparent 13% 50%, rgba(140, 60, 255, .9) 60%, transparent 64%); }
.boss-lights i + i { background: conic-gradient(from 90deg, transparent 0 30%, rgba(255, 200, 40, .7) 33%, transparent 36% 80%, rgba(255, 40, 90, .8) 84%, transparent 88%); }
body:not(.reduced-motion) .boss-lights i { animation: bossSweep 5s linear infinite; }
body:not(.reduced-motion) .boss-lights i + i { animation-duration: 7s; animation-direction: reverse; }
@keyframes bossSweep { to { transform: rotate(360deg); } }
.boss-lights.flash::after { animation: bossFlash .5s ease-out; }
@keyframes bossFlash { 0% { box-shadow: inset 0 0 160px 80px rgba(255, 30, 60, .8); } 100% { box-shadow: inset 0 0 90px 20px rgba(255, 30, 80, .35); } }
.reduced-motion .boss-lights.flash::after { animation: none; }
.boss-panel { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 144px); z-index: 3; width: min(420px, calc(100% - 24px)); height: 58px;
  display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; padding: 0 12px 0 4px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(60, 0, 40, .78), rgba(30, 0, 50, .78)); border: 1px solid rgba(255, 90, 140, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.boss-panel canvas { width: 58px; height: 58px; margin-top: -10px; }
.boss-panel.hitme { animation: bossHitShake .3s; }
@keyframes bossHitShake { 25% { transform: translateX(calc(-50% - 5px)); } 75% { transform: translateX(calc(-50% + 5px)); } }
.bp-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bp-info b { font-size: 14px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-hp { position: relative; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.bp-hp i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 8px; background: linear-gradient(90deg, #FF2E63, #FF8A3D); transition: width .25s ease-out; }
.bp-hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.boss-panel.shield .bp-hp i { background: linear-gradient(90deg, #7DF9FF, #3B6BFF); }
.bp-info small { font-size: 11px; font-weight: 800; color: #FFD2E2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen.boss-intro { background: radial-gradient(circle at 50% 35%, #5A0E3A, #12001F 70%); z-index: 30; }
.screen.boss-intro .boss-lights { position: absolute; }
.boss-intro-box { position: relative; z-index: 2; width: min(380px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.boss-tag { padding: 6px 16px; border-radius: 999px; background: linear-gradient(180deg, #FF4F6D, #C2002F); font-weight: 900; letter-spacing: 3px; font-size: 15px; box-shadow: 0 0 24px rgba(255, 40, 90, .7); }
body:not(.reduced-motion) .boss-tag { animation: bossPulse 0.9s ease-in-out infinite; }
@keyframes bossPulse { 50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 40, 90, .95); } }
#boss-intro-face { width: 190px; height: 190px; }
body:not(.reduced-motion) #boss-intro-face { animation: bossEnter .7s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes bossEnter { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.boss-intro-box h2 { margin: 0; font-size: 32px; text-shadow: 0 3px 0 #7A0030, 0 0 22px rgba(255, 60, 120, .6); }
.boss-intro-title { margin: -4px 0 4px; color: #FFD2E2; font-weight: 800; }
.boss-tricks { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.boss-tricks li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: 14px; }
.boss-tricks li span { font-size: 22px; text-align: center; }
.boss-intro-goal { margin: 2px 0 6px; font-weight: 800; color: #FFE14D; }
.node.boss { width: 74px; height: 74px; font-size: 22px; background: radial-gradient(circle at 35% 30%, #FF8FA8, #C2002F); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 0 26px rgba(255, 40, 90, .8); }
.node.boss.locked { background: radial-gradient(circle at 35% 30%, #8A3550, #4A0E2E); }
.node .boss-lbl { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #C2002F; font-size: 11px; font-weight: 900; letter-spacing: 1px; white-space: nowrap; }
body.quake #stage { animation: quake .18s linear infinite; }
@keyframes quake { 25% { transform: translate(2px, -2px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 2px); } }
/* v1.34 consent: big Yes in the thumb zone, a clear No right above it */
.consent-ads { margin: 4px 0 2px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--dim); }
.consent-actions { display: flex; flex-direction: column; gap: 8px; }
.consent-actions .btn.ghost { min-height: 44px; }
/* v1.34.2: goal chips stay on one line; the numbers shrink to fit (main.js) */
.hud-goals { min-width: 0; }
.hgoal { white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.hgoal span { white-space: nowrap; overflow: hidden; }
/* v1.35 boosters tab: tidy rows */
.boost-ico { position: relative; flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; font-weight: 900; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); }
.boost-have { position: absolute; right: -6px; bottom: -6px; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: #FFE14D; color: #4A2C00; font-size: 12px; display: grid; place-items: center; }
.item.wide:has(.boost-ico) { grid-template-columns: 56px 1fr 96px; gap: 12px; }
.item.wide:has(.boost-ico) .prog { grid-column: 1 / -1; }
.item.wide:has(.boost-ico) > .boost-ico { grid-row: 1; grid-column: 1; }
.item.wide:has(.boost-ico) > .info { grid-row: 1; grid-column: 2; }
.item.wide:has(.boost-ico) > button { grid-row: 1; grid-column: 3; }
.item.wide:has(.boost-ico) > .prog { grid-row: 2; }
/* v1.35 world tint (map + levels; never the home screen) and full boss mode */
body.wtint { --glass: var(--wt-glass); --glass-edge: var(--wt-edge); }
body.wtint .hud-panel { background: var(--wt-glass); border-color: var(--wt-edge); }
body.wtint .bstar i, body.wtint .hgoal .gp { filter: none; }
body.boss-mode .hud-panel, body.boss-mode .boss-panel { box-shadow: 0 0 0 2px var(--wt-edge), 0 0 28px rgba(255, 40, 90, .45); }
body.boss-mode .icon-btn.hud { background: rgba(120, 0, 30, .85); border-color: var(--wt-edge); }
body.boss-mode .screen .card { box-shadow: 0 0 0 2px var(--wt-edge), 0 18px 50px rgba(120, 0, 30, .5); }
body.boss-mode .boss-panel { background: var(--wt-glass); border-color: var(--wt-edge); }
/* v1.35.1: with the banner the home screen keeps room for its bottom menu (it sits right above the banner)
   and gets a little more compact, so the menu never overlaps the Play button. */
body.ad-on .screen.home { padding-bottom: 96px; }
body.ad-on .bottom-nav { bottom: 10px; }
body.ad-on .screen.home .home-center { gap: 10px; }
body.ad-on .screen.home .mascot { width: 104px; height: 104px; }
@media (max-height: 760px) { body.ad-on .screen.home .subtitle { display: none; } body.ad-on .screen.home .mascot { width: 84px; height: 84px; } body.ad-on .screen.home .logo { font-size: 50px; } }
/* v1.35.3: in scrolling cards (Settings, Trophies…) the last button row (Done) sticks to the bottom,
   so it is always fully visible above the banner; the content scrolls behind it. */
/* v1.41.2: Settings and About are short now; their Done button sits under the content (the sticky bar covered buttons). */
#scr-settings .card.scroll > .actions:last-child, #scr-about .card.scroll > .actions:last-child, #scr-finale .card.scroll > .actions:last-child { position: static; width: 100%; margin: 6px 0 0; padding: 0; background: none; }
#scr-about .actions { width: 100%; }
.card.scroll > .actions:last-child { position: sticky; bottom: -22px; z-index: 3; width: calc(100% + 36px); margin: 0 -18px -22px; padding: 14px 18px 22px;
  background: linear-gradient(180deg, rgba(42, 10, 85, 0), #2A0A55 34%); border-radius: 0 0 32px 32px; }
body.wtint .card.scroll > .actions:last-child { background: linear-gradient(180deg, transparent, var(--wt-glass) 32%); }
/* v1.36 cloud save box in Settings */
.cloud-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.cloud-box small { color: var(--dim); font-weight: 700; font-size: 12px; line-height: 1.35; }
.cloud-code { font: 900 18px/1 var(--font); letter-spacing: 1.5px; color: #FFE14D; background: rgba(0, 0, 0, .25); border: 1px dashed rgba(255, 225, 77, .6); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.cloud-restore { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.cloud-restore input { min-height: 42px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; font: 800 14px var(--font); padding: 0 10px; text-transform: uppercase; letter-spacing: 1px; min-width: 0; }
/* v1.37 legal footer + parent check */
.legal-links { margin: 6px 0 0; text-align: center; font-size: 13px; line-height: 1.8; color: var(--dim); }
.legal-links a { color: var(--dim); text-decoration: underline; }
.legal-links .link-btn { font-size: 12px; opacity: .8; }
.parent-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.parent-answers .btn { min-height: 56px; font-size: 22px; }
/* v1.38 "Contact us" sits inline with the other legal links */
.legal-links .link-btn.inline { font-size: 13px; opacity: 1; color: var(--dim); text-decoration: underline; padding: 0; min-height: 0; }

/* v1.39 skipped level badge on the map */
.node .skip-badge { position: absolute; right: -6px; top: -6px; font-size: 14px; background: rgba(20, 10, 50, .85); border-radius: 50%; padding: 2px 3px; line-height: 1; }
#btn-level-skip, #btn-fail-skip { margin-top: 6px; opacity: .85; }
/* v1.39 no more disco lights in boss fights (each boss has its own arena on the board now); only a short red flash on attacks */
.boss-lights i { display: none; }
.boss-lights::after { box-shadow: inset 0 0 70px 10px rgba(255, 30, 80, .18); }
/* v1.39 boss gallery */
.boss-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 14px; }
.boss-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); text-align: center; }
.boss-tile b { font-size: 13px; line-height: 1.2; } .boss-tile small { font-size: 11px; opacity: .8; }
.boss-tile.won { background: linear-gradient(160deg, rgba(255,225,77,.18), rgba(255,79,163,.12)); border-color: rgba(255,225,77,.5); }
.boss-tile.next { border-color: rgba(255,90,120,.7); box-shadow: 0 0 16px rgba(255,60,100,.35); }
.boss-tile.next canvas, .boss-tile.locked canvas { filter: brightness(0) opacity(.55); }
.boss-tile.locked b { opacity: .6; }
.boss-chip { font-size: 18px; }
/* v1.39 hidden test menu (test builds) */
#scr-dev { z-index: 300; }
.dev-card { display: flex; flex-direction: column; gap: 8px; }
.dev-row { display: flex; gap: 8px; } .dev-input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); color: #fff; }

/* v1.41.5 easter egg: a faint boss drifting past in the back of the home screen */
.boss-flyby { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; filter: blur(1.2px) saturate(.8); opacity: 0; }
#event-goal { font-size: 20px; }   /* v1.41.5: one clear goal on the event screen */

/* v1.41.7: the island as its own round island icon in the home top bar (between rank and stars) */
.screen.home .topbar { grid-template-columns: auto 1fr auto auto auto; }
.island-chip { position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 24px; color: #fff; white-space: nowrap;
  font: 900 13px/1 var(--font); background: linear-gradient(180deg, #5ED3F3, #2A7BD6); border: 2px solid #fff; box-shadow: 0 3px 0 rgba(0, 40, 120, .35), 0 5px 12px rgba(0, 60, 160, .4); }
.island-chip svg { width: 34px; height: 34px; flex: none; border-radius: 50%; }
.island-chip .isl-palm { transform-origin: 31px 22px; animation: isl-sway 2.6s ease-in-out infinite; }
.island-chip .isl-wave { animation: isl-wave 2s ease-in-out infinite; }
.island-chip:active { transform: scale(.94); }
.island-chip.locked { background: rgba(255, 255, 255, .14); box-shadow: none; } .island-chip.locked svg { filter: grayscale(.85) brightness(.85); }
.island-chip .navlock { position: absolute; top: -6px; right: -4px; font-size: 13px; }
@keyframes isl-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes isl-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .island-chip .isl-palm, .island-chip .isl-wave { animation: none; } }
/* v1.41.7: on phones the rank chip shows just the level badge and its XP bar, so the island icon fits next to it (the name is on the Trophies screen) */
@media (max-width: 459px) { .screen.home #btn-garden .rk b, .screen.home #btn-garden .rk small { display: none; } .screen.home #btn-garden .rk { min-width: 18px; flex: 1; } .screen.home #btn-garden .mini-bar { width: 100%; height: 6px; border-radius: 3px; }
  .screen.home .topbar { gap: 5px; left: 8px; right: 8px; } .island-chip { font-size: 12px; padding-right: 10px; gap: 5px; } }
/* small phones (iPhone SE / mini): everything in the top bar a bit tighter so rank, island, stars and sparks all fit */
@media (max-width: 400px) {
  .screen.home .topbar { gap: 4px; left: 6px; right: 6px; }
  .screen.home .topbar .chip { padding-left: 8px; padding-right: 8px; }
  .screen.home .topbar .chip b { font-size: 13px; }
  .screen.home #btn-settings { width: 38px; padding: 0; }
  .screen.home #btn-garden { padding-left: 3px; min-width: 48px; }
  .island-chip { font-size: 11px; gap: 4px; padding: 2px 8px 2px 2px !important; } .island-chip svg { width: 30px; height: 30px; }
}

.island-hint.build { margin-right: 74px; }   /* v1.41.7 (bug audit): keep the build guide clear of the zoom buttons */
.licenses-card { max-height: calc(100% - 60px - var(--safe-top) - var(--safe-bottom)); display: flex; flex-direction: column; }
.lic-text { flex: 1; overflow: auto; white-space: pre-wrap; text-align: left; font: 600 11px/1.45 ui-monospace, monospace; background: rgba(0, 0, 0, .18); border-radius: 12px; padding: 12px; margin: 8px 0 12px; -webkit-user-select: text; user-select: text; }
/* v1.41.7: island welcome tour */
.isl-tour { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(84px + var(--safe-bottom)); display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
body.ad-on .isl-tour { bottom: calc(84px + var(--ad)); }
.isl-tour-card { pointer-events: auto; width: min(420px, 100%); padding: 14px 16px 10px; border-radius: 22px; color: #2A1650; background: linear-gradient(180deg, #FFFDF5, #FFF0CF);
  border: 3px solid #fff; box-shadow: 0 8px 0 rgba(120, 70, 0, .18), 0 14px 30px rgba(40, 20, 80, .35); animation: tour-in .35s ease-out; }
.isl-tour-card b { display: block; font: 900 18px var(--font); margin-bottom: 4px; } .isl-tour-card p { margin: 0 0 10px; font: 700 14px/1.35 var(--font); color: #4A3470; }
.isl-tour-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .isl-tour-row .link-btn { color: #7A6699; } #tour-dots { font-size: 10px; letter-spacing: 2px; color: #B89BE0; }
.tour-glow { animation: tour-glow 1.1s ease-in-out infinite; z-index: 7 !important; }
@keyframes tour-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 225, 77, .9), 0 0 18px 6px rgba(255, 225, 77, .55); } 50% { box-shadow: 0 0 0 6px rgba(255, 225, 77, .6), 0 0 28px 12px rgba(255, 225, 77, .35); } }
@keyframes tour-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tour-glow, .isl-tour-card { animation: none; } .tour-glow { box-shadow: 0 0 0 4px rgba(255, 225, 77, .9); } }
.isl-tour-row .btn { width: auto; flex: none; min-width: 112px; padding: 10px 22px; } #tour-dots { white-space: nowrap; flex: 1; text-align: center; }
/* v1.41.7: the two privacy choices (both off by default) */
.consent-switch { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: 14px; line-height: 1.35; cursor: pointer; }
.consent-switch input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #7BE07B; }
.iap-note { grid-column: 1 / -1; margin: 2px 4px 6px; font-size: 13px; line-height: 1.35; text-align: center; }