/* 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:   #061634;          /* page backdrop (themeable) */
  --disp: "Lilita One", system-ui, sans-serif;
}
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;
}
#stage { position: fixed; inset: 0; }
#game, #filmfx { position: absolute; inset: 0; width: 100vw; height: 100vh; display: block; }
#filmfx { z-index: 1; pointer-events: none; }

/* 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 20px;
}
.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: 15px; line-height: 1.8; color: var(--muted, #cfe6ff); margin: 20px 0; font-family: system-ui, sans-serif; font-weight: 600; }
.hint b { color: var(--gold); }
.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); }

/* 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; }
@keyframes vintbob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }