/* STONIC — themed UI. The display font + colour vars below are SONIC defaults;
   themes.js overrides --disp / palette / @font-face per active theme (see themes.js). */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --sky:    #2aa8ff;
  --sky-dk: #0a3a8a;
  --gold:   #ffd23f;
  --gold-dk:#b5791a;
  --ink:    #0a1c3a;          /* outline / shadow navy */
  --white:  #ffffff;
  --green:  #3ec73e;
  --red:    #ff3b3b;
  --page:   #dad6cc;          /* page backdrop (themeable) — DEFAULT = the vintage boot look:
                                 iOS Safari samples the FIRST-PAINT background to tint its own
                                 status/URL bars, before themes.js applies the palette */
  --disp: "Lilita One", system-ui, sans-serif;
  color-scheme: light;
}
html, body {
  height: 100%; width: 100%;
  background: var(--page, #061634);
  color: var(--white);
  font-family: var(--disp);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Full-bleed stage: 100dvh tracks the DYNAMIC mobile viewport (iOS URL bar / chrome),
   so the game truly covers the screen; vh is the legacy fallback. The canvas fills the
   stage box (JS reads the stage's real rendered size — not window.innerHeight, which
   excludes iOS browser chrome). UI keeps itself in the safe zones via env() paddings. */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); }
#game, #filmfx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#filmfx { z-index: 1; pointer-events: none; }
/* Safari's status/URL bars can't be painted (no Fullscreen API on iPhone) — instead the
   game DISSOLVES into them: top/bottom fades to var(--page), the same colour the bars are
   tinted with (theme-color meta tracks --page per zone), so phone + game read as one surface. */
/* On real devices the page extends UNDER the bars into the safe areas — a fixed-height fade
   ends up submerged beneath the bar with only its weak end visible. Stay SOLID through the
   safe-area strip, then fade across the visible 80px. env() = 0 where there are no insets.
   Fades target var(--chrome) — the BOOT style's page colour, fixed for the whole session,
   because Safari samples its bar tint ONCE at load and never re-tints on zone changes.
   Every zone dissolves into the same constant → content/rim/bars always match. */
#stage::before, #stage::after {
  content: ""; position: absolute; left: 0; right: 0;
  z-index: 2; pointer-events: none;
}
#stage::before {
  top: 0; height: calc(80px + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, var(--chrome, var(--page)) env(safe-area-inset-top, 0px), transparent);
}
#stage::after {
  bottom: 0; height: calc(80px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--chrome, var(--page)) env(safe-area-inset-bottom, 0px), transparent);
}

/* chunky Sonic text: white fill, navy outline behind, drop shadow */
.chunk {
  font-family: var(--disp);
  color: var(--white);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(4,12,30,.45);
  letter-spacing: .01em;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 20px max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px));
}
.hud-top, .hud-bottom { display: flex; justify-content: space-between; align-items: flex-start; }
.hud-label { font-size: 12px; letter-spacing: .16em; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 rgba(4,12,30,.5); }
.hud-num { font-size: 40px; line-height: .92; transform: skewX(-6deg); display: inline-block;
  color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(4,12,30,.45); }
.hud-num.small { font-size: 22px; -webkit-text-stroke: 2px var(--ink); }
.hud-num.gold { color: var(--gold); }
.hud-num .unit { font-size: .42em; margin-left: 1px; -webkit-text-stroke: 1.5px var(--ink); }

.hud-score, .hud-best { display: flex; flex-direction: column; gap: 1px; }
.hud-rings { display: flex; align-items: center; gap: 10px; }
.hud-rings.pop { animation: ringpop .28s cubic-bezier(.2,1.6,.4,1); }
.ring-icon {
  width: 30px; height: 30px; border-radius: 50%;
  border: 8px solid var(--gold);
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px #fff3b0, 0 3px 0 rgba(4,12,30,.4);
  background: transparent; flex: 0 0 auto;
  animation: spin 2.4s linear infinite;
}
.hud-boost { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.boost-meter { width: 110px; height: 12px; border-radius: 8px; background: rgba(4,12,30,.55); border: 3px solid var(--ink); overflow: hidden; }
.boost-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), #ff8a1e); box-shadow: 0 0 12px rgba(255,160,40,.7); transition: width .08s linear; }

.zone-label {
  font-size: 16px; letter-spacing: .16em; text-align: center; align-self: center; flex: 1;
  color: var(--white); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(4,12,30,.5);
  opacity: 0; transition: opacity .3s ease; transform: skewX(-6deg);
}
.zone-label.show { opacity: .95; }

.combo {
  align-self: center; font-size: 34px; transform: skewX(-8deg);
  color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(4,12,30,.45);
  opacity: 0; transition: opacity .12s ease;
}
.combo.show { opacity: 1; animation: pop .22s cubic-bezier(.2,1.7,.4,1); }

/* ---------- ring-collect "+1" popups ---------- */
.ringpop-fx {
  position: absolute; z-index: 6; pointer-events: none;
  font-family: var(--disp); font-size: 26px; color: var(--gold);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; transform: skewX(-6deg);
  animation: floatup .7s ease-out forwards;
}

/* ---------- banner ---------- */
.banner {
  position: absolute; top: 30%; left: 0; right: 0; text-align: center; z-index: 4;
  font-size: clamp(30px, 10vw, 60px); transform: skewX(-7deg);
  color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(4,12,30,.5);
  pointer-events: none; opacity: 0;
}
.banner.play { animation: bannerPop 2.1s ease forwards; }
.banner .sub-banner { display: block; font-size: .36em; letter-spacing: .12em; color: var(--gold); margin-top: 8px; -webkit-text-stroke: 2px var(--ink); }

/* ---------- boss bar ---------- */
.boss-ui { margin: 8px auto 0; width: min(86%, 360px); text-align: center; }
.boss-ui.hidden { display: none; }
.boss-name { font-size: 16px; letter-spacing: .14em; color: var(--red); margin-bottom: 6px; transform: skewX(-6deg);
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(4,12,30,.5); }
.boss-bar { height: 14px; border-radius: 9px; background: rgba(4,12,30,.55); border: 3px solid var(--ink); overflow: hidden; }
.boss-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .1s linear; }

/* ---------- overlays (title / results) ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: var(--overlay, radial-gradient(120% 90% at 50% 30%, rgba(8,40,90,.45), rgba(4,12,34,.82)));
  backdrop-filter: blur(2px); animation: fadein .25s ease;
}
.overlay.hidden { display: none; }
.overlay-card { text-align: center; padding: 24px 28px; max-width: 92vw; }

/* STONIC logo */
.overlay-card h1 {
  font-family: var(--disp); font-size: clamp(56px, 17vw, 120px); line-height: .9;
  transform: skewX(-8deg); letter-spacing: .01em;
  color: var(--gold);
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(4,12,30,.5), 0 0 30px var(--glow, rgba(42,168,255,.5));
  animation: logobounce 2.4s ease-in-out infinite;
}
.overlay-card h2 {
  font-family: var(--disp); font-size: clamp(40px, 12vw, 72px); transform: skewX(-7deg);
  color: var(--white); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(4,12,30,.5);
}
.win-title { color: var(--gold) !important; }
h2 { color: var(--red); }   /* CRASHED default */
.sub { font-size: 14px; letter-spacing: .26em; color: var(--sky); margin-top: 6px; text-transform: uppercase; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.hint {
  font-size: 14px; line-height: 2.1; letter-spacing: .04em;
  color: var(--muted, #cfe6ff); margin: 22px 0;
  font-family: system-ui, sans-serif; font-weight: 500;
}
.hint b { color: var(--gold); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hint.keys { display: none; margin: -14px 0 20px; font-size: 12.5px; opacity: .8; }
@media (hover: hover) and (pointer: fine) { .hint.keys { display: block; } }   /* keyboard hint: desktop only */
.tiny { font-size: 12px; color: var(--muted, #9fc4ee); margin-top: 16px; font-family: system-ui, sans-serif; font-weight: 600; }
.tiny b { color: var(--white); }

/* boot loading gate (matches the boss-bar / boost-meter chunky bar language) */
.load-bar {
  position: relative; width: min(280px, 64vw); height: 14px; margin: 26px auto 10px;
  border-radius: 9px; background: rgba(4,12,30,.55); border: 3px solid var(--ink); overflow: hidden;
}
.load-fill { height: 100%; width: 0%; background: var(--gold); transition: width .2s ease; }
.load-bar::after {   /* always-moving shine: the bar visibly "works" even between big files */
  content: ""; position: absolute; top: 0; left: -45%; width: 30%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: loadshine 1.6s ease-in-out infinite;
}
.load-pct {
  font-family: var(--disp); font-size: 22px; color: var(--white); transform: skewX(-6deg);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(4,12,30,.4);
}
[data-theme="vintage"] .load-pct { transform: none; }   /* vintage strips skew everywhere (flat 1930s title card) */
@keyframes loadshine { 0% { left: -45%; } 60%, 100% { left: 115%; } }

/* ---------- first-time tutorial freeze layer ---------- */
.tut { position: absolute; inset: 0; z-index: 8; pointer-events: none; }   /* pointer-events:none is LOAD-BEARING — canvas must keep receiving taps */
.tut.hidden { display: none; }
.tut-dim {   /* radial spotlight on the threat (dodge/orb) */
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 40%),
    transparent calc(var(--sr, 90px) * 0.8), rgba(4,12,30,.32) var(--sr, 90px), rgba(4,12,30,.62) calc(var(--sr, 90px) * 1.9));
  animation: fadein .2s ease;
}
.tut.lane .tut-dim {   /* full-height lane band (guardian tell) */
  background: linear-gradient(90deg,
    rgba(4,12,30,.62) calc(var(--lx0, 33%) - 6px), rgba(4,12,30,.18) var(--lx0, 33%),
    rgba(4,12,30,.18) var(--lx1, 66%), rgba(4,12,30,.62) calc(var(--lx1, 66%) + 6px));
}
.tut-card {
  position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
  text-align: center; width: max-content; max-width: 86vw;
  animation: pop .35s cubic-bezier(.2,1.7,.4,1);
}
.tut-card h3 {
  font-family: var(--disp); font-size: clamp(28px, 8vw, 44px); color: var(--gold);
  transform: skewX(-6deg); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(4,12,30,.5);
}
.tut-card p {
  margin-top: 8px; font-size: 15px; font-weight: 700; font-family: system-ui, sans-serif;
  color: var(--white); text-shadow: 0 2px 4px rgba(4,12,30,.8);
}
.tut-card p b { color: var(--gold); }
[data-theme="vintage"] .tut-card h3 { transform: none; }   /* vintage strips skew (flat 1930s title card) */
.tut-hand {
  position: absolute; bottom: 22%; width: 76px; height: 76px;
  display: grid; place-items: center;
  font-family: var(--disp); font-size: 17px; color: var(--white);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
}
.tut-hand.hidden { display: none; }
.tut-hand.l { left: 14%; } .tut-hand.r { right: 14%; }
.tut-ring {   /* pulsing tap ripple */
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid var(--gold); box-shadow: 0 0 18px var(--glow, rgba(255,210,63,.5));
  animation: tutring 1.1s ease-out infinite;
}
@keyframes tutring { 0% { transform: scale(.55); opacity: 1; } 70% { transform: scale(1.15); opacity: .25; } 100% { transform: scale(1.25); opacity: 0; } }

/* ---------- fading edge chevrons (early-runs tap affordance) ---------- */
.chev {
  position: absolute; top: 66%; transform: translateY(-50%); z-index: 5; pointer-events: none;
  font-family: var(--disp); font-size: 54px; line-height: 1; color: var(--white);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 0 14px var(--glow, rgba(255,210,63,.4));
  animation: chevpulse 1.4s ease-in-out infinite;
}
.chev.l { left: calc(10px + env(safe-area-inset-left, 0px)); }
.chev.r { right: calc(10px + env(safe-area-inset-right, 0px)); }
.chev.hidden { display: none; }
@keyframes chevpulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.22); } }

/* results stats */
.death-stats { display: flex; gap: 26px; justify-content: center; margin: 22px 0; }
.death-stats div { display: flex; flex-direction: column; gap: 3px; }
.death-stats span { font-size: 34px; transform: skewX(-6deg); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(4,12,30,.45); }
.death-stats small { font-size: 11px; letter-spacing: .12em; color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.new-best { font-size: 22px; color: var(--gold); margin-bottom: 12px; transform: skewX(-7deg); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; animation: pop .4s cubic-bezier(.2,1.7,.4,1); }

/* ---------- chunky Sonic buttons ---------- */
.play-btn {
  position: relative; font-family: var(--disp); font-size: 24px; letter-spacing: .04em;
  color: var(--white); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  background: var(--btn, linear-gradient(180deg, #ffd84a, #ff9b1e));
  border: 4px solid var(--ink); border-radius: 16px; padding: 14px 34px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 6px 0 var(--ink), 0 10px 18px rgba(4,12,30,.4);
  transform: skewX(-5deg);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  overflow: hidden;
  animation: btnpulse 1.6s ease-in-out infinite;
}
.play-btn::after {   /* moving shine */
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: shine 2.6s ease-in-out infinite;
}
.play-btn:hover { filter: brightness(1.06); }
.play-btn:active { transform: skewX(-5deg) translateY(4px); box-shadow: 0 2px 0 var(--ink), 0 4px 10px rgba(4,12,30,.4); }
.play-btn.ghost { background: var(--btn-ghost, linear-gradient(180deg, #4ab3ff, #1c6fd0)); animation: none; }
.win-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.win-buttons .play-btn { font-size: 19px; padding: 13px 22px; }

.hidden { display: none; }

/* ---------- keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ringpop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
@keyframes pop { 0%{transform:scale(.5) skewX(-8deg)} 60%{transform:scale(1.18) skewX(-8deg)} 100%{transform:scale(1) skewX(-8deg)} }
@keyframes floatup { 0%{opacity:0; transform:skewX(-6deg) translateY(8px) scale(.7)} 25%{opacity:1; transform:skewX(-6deg) translateY(-6px) scale(1.1)} 100%{opacity:0; transform:skewX(-6deg) translateY(-56px) scale(1)} }
@keyframes logobounce { 0%,100%{transform:skewX(-8deg) translateY(0) rotate(-1deg)} 50%{transform:skewX(-8deg) translateY(-12px) rotate(1deg)} }
@keyframes btnpulse { 0%,100%{transform:skewX(-5deg) scale(1)} 50%{transform:skewX(-5deg) scale(1.04)} }
@keyframes shine { 0%,55%{left:-60%} 100%{left:130%} }
@keyframes fadein { from{opacity:0} to{opacity:1} }
@keyframes bannerPop { 0%{opacity:0; transform:skewX(-7deg) scale(.8) translateY(10px)} 16%{opacity:1; transform:skewX(-7deg) scale(1) translateY(0)} 78%{opacity:1; transform:skewX(-7deg) scale(1) translateY(0)} 100%{opacity:0; transform:skewX(-7deg) scale(1.05) translateY(-10px)} }

/* ---------- STON.fi tasks (results "save your progress" loop) — themed marquee cards ---------- */
.tasks-block { margin: 14px auto 16px; width: min(94%, 380px); }
.tasks-head { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--gold); opacity: .92; margin-bottom: 8px; }
.tasks-list { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: rgba(12,18,34,.62); color: #f4f6ff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 9px 11px;
  cursor: pointer; font-family: system-ui, sans-serif; box-shadow: 0 3px 0 var(--ink); transition: transform .1s, filter .15s; }
.task-row:hover { filter: brightness(1.12); transform: translateY(-1px); }
.task-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.task-ic { font-size: 20px; width: 26px; text-align: center; color: var(--gold); flex: 0 0 auto; }
.task-body { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.task-body b { font-size: 14px; font-weight: 800; }
.task-body small { font-size: 11px; opacity: .7; }
.task-reward { font-size: 12px; font-weight: 800; color: var(--gold); flex: 0 0 auto; letter-spacing: .03em; white-space: nowrap; }
.task-row.inprog { opacity: .6; }
.task-row.inprog .task-reward { color: #f4f6ff; }

/* ---------- Vintage Toon: flatter title-card UI (no glossy shine / skew) ---------- */
[data-theme="vintage"] .play-btn::after { display: none; }
[data-theme="vintage"] .play-btn { animation: none; transform: none; }
[data-theme="vintage"] .play-btn:active { transform: translateY(3px); }
[data-theme="vintage"] .overlay-card h1 { transform: none; animation: vintbob 2.6s ease-in-out infinite; text-shadow: 0 6px 0 rgba(20,18,14,.45); }
[data-theme="vintage"] .sub, [data-theme="vintage"] .overlay-card h2, [data-theme="vintage"] .hud-num,
[data-theme="vintage"] .death-stats span, [data-theme="vintage"] .new-best, [data-theme="vintage"] .win-title { transform: none; }
/* vintage --gold is pale ivory — on the pale paper overlay it vanishes. Accent text goes INK
   (classic print), like bold in a 1930s title card. */
[data-theme="vintage"] .hint b, [data-theme="vintage"] .tiny b { color: var(--ink); }
[data-theme="vintage"] .win-title { color: var(--ink) !important; }
[data-theme="vintage"] .new-best { color: var(--ink); }
[data-theme="vintage"] .death-stats small { color: var(--muted); -webkit-text-stroke: 0; }
[data-theme="vintage"] .tasks-head { color: var(--muted); }
[data-theme="vintage"] .chev { color: var(--ink); -webkit-text-stroke: 3px var(--white); text-shadow: none; }
@keyframes vintbob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }