/* ============================================================
   NOAH'S SUPER WORLD — Comic-book superhero toybox theme
   ------------------------------------------------------------
   Design language:
   • Thick INK outlines (var --ink) on every play surface
   • Hard offset "sticker" shadows (no soft blur on chrome)
   • Ben-Day halftone dots + floating sticker shapes in the bg
   • Action-burst stars behind big moments
   • Chunky squishy buttons that press DOWN into their shadow
   • Display type = Luckiest Guy, body = Baloo 2 (rounded)
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}

/* Visible keyboard / switch-access focus ring (does not show on touch/mouse) */
:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 3px;
}

:root {
  /* Game colors */
  --green: #2ecc71;
  --gold: #ffd23f;
  --dark: #2c3e66;
  --red: #ff5e5b;
  --blue: #4d8bff;
  --cube: #6ab04c;
  --orange: #ff9f1c;
  --pink: #ff6fb5;
  --purple: #9b5de5;
  --yellow: #ffe156;
  --space: #7b2ff7;
  --world: #00a2ff;

  /* Comic system */
  --ink: #20143a;                 /* outline color — deep ink, warmer than black */
  --sky: #36c5ff;                 /* hero sky blue */
  --sky-2: #19a8e8;
  --sun: #ffcf33;                 /* sunny pop */
  --paper: #fff7e6;              /* warm paper for surfaces */

  --bw: 4px;                       /* default border weight */
  --bw-fat: 6px;                  /* fat outline for big elements */
  --shadow: 0 6px 0 var(--ink);   /* hard sticker shadow */
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Baloo 2', system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 120%, #ffe28a 0%, transparent 42%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%);
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

h2 {
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.8rem, 6.5vw, 2.8rem);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}

/* ===================== BACKGROUND FX ===================== */
/* Ben-Day halftone dots */
.bg-dots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.35) 22%, transparent 23%);
  background-size: 26px 26px;
  background-position: 0 0;
  opacity: .55;
}
/* Floating sticker doodles */
.bg-stickers { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.sticker {
  position: absolute;
  font-family: 'Luckiest Guy', cursive;
  color: #fff;
  opacity: .5;
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
  animation: floaty 9s ease-in-out infinite;
}
.sticker.s1 { top: 12%; left: 8%;  font-size: 3rem; color: var(--sun);  animation-delay: 0s; }
.sticker.s2 { top: 22%; right: 9%; font-size: 2.6rem; color: #fff;       animation-delay: 1.2s; }
.sticker.s3 { top: 58%; left: 6%;  font-size: 1.6rem; color: var(--red); animation-delay: .6s; }
.sticker.s4 { bottom: 12%; right: 12%; font-size: 2.4rem; color: var(--sun); animation-delay: 2s; }
.sticker.s5 { top: 70%; right: 7%; font-size: 2rem;   color: #fff;        animation-delay: 1.6s; }
.sticker.s6 { bottom: 22%; left: 11%; font-size: 1.4rem; color: var(--pink); animation-delay: .9s; }
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50%     { transform: translateY(-18px) rotate(8deg); }
}

/* ===================== SCREEN SYSTEM ===================== */
.screen { display: none; position: relative; z-index: 1; min-height: 100vh; }
.screen.active { display: block; }
/* Home flows naturally so the game tiles peek up under the hero */
.screen.home { min-height: 0; padding-bottom: 8px; }
.screen.game.active { animation: screenIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* A game screen is a full-bleed colored stage */
.screen.game {
  padding: 92px 18px 56px;
  color: #fff;
}
.screen.game > * {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================== GLOBAL ICON BUTTONS ===================== */
.icon-btn {
  position: fixed;
  top: 14px;
  z-index: 60;
  font-size: 1.7rem;
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  width: 58px;
  height: 58px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .1s, box-shadow .1s;
}
.icon-btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.sound-toggle { right: 16px; background: var(--sun); }
.home-btn { left: 16px; background: var(--red); }

/* Side navigation arrows — bottom corners (out of resting-thumb zone) */
.nav-arrow {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: none;
  z-index: 55;
  width: 58px;
  height: 58px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: box-shadow .1s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-arrow:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.nav-prev { left: 12px; }
.nav-next { right: 12px; }

/* ===================== MASCOT — SUPER NOAH (pure CSS) ===================== */
.mascot {
  position: relative;
  width: 180px;
  height: 200px;
  margin: 0 auto 6px;
  animation: mascotBob 2.6s ease-in-out infinite;
}
.mascot.cheer { animation: mascotCheer .7s ease; }
@keyframes mascotBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mascotCheer {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-26px) rotate(-6deg) scale(1.06); }
  55% { transform: translateY(-10px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* spinning star burst behind hero */
.mascot-burst {
  position: absolute;
  top: 30px; left: 50%;
  width: 200px; height: 200px;
  transform: translateX(-50%);
  background: var(--sun);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter: drop-shadow(0 0 0 var(--ink));
  opacity: .9;
  animation: spin 16s linear infinite;
  z-index: 0;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }

/* cape */
.mascot-cape {
  position: absolute;
  top: 78px; left: 50%;
  width: 96px; height: 96px;
  transform: translateX(-50%);
  background: var(--red);
  border: var(--bw) solid var(--ink);
  border-radius: 0 0 48px 48px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  z-index: 1;
  animation: capeFlap 2.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes capeFlap { 0%,100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(2deg); } }

/* body */
.mascot-body {
  position: absolute;
  top: 96px; left: 50%;
  width: 84px; height: 84px;
  transform: translateX(-50%);
  background: var(--blue);
  border: var(--bw) solid var(--ink);
  border-radius: 28px 28px 30px 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mascot-emblem {
  font-family: 'Luckiest Guy', cursive;
  color: var(--sun);
  font-size: 2.4rem;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  margin-top: 6px;
}
.mascot-arm {
  position: absolute;
  top: 104px;
  width: 26px; height: 54px;
  background: var(--blue);
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  z-index: 2;
}
.arm-l { left: 24px; transform: rotate(18deg); transform-origin: top center; }
.arm-r { right: 24px; transform: rotate(-40deg); transform-origin: top center; animation: wave 1.4s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(-40deg); } 50% { transform: rotate(-66deg); } }

/* head */
.mascot-head {
  position: absolute;
  top: 44px; left: 50%;
  width: 92px; height: 86px;
  transform: translateX(-50%);
  background: #ffcd9e;
  border: var(--bw) solid var(--ink);
  border-radius: 46px 46px 42px 42px;
  z-index: 4;
}
.mascot-hair {
  position: absolute;
  top: -8px; left: -4px; right: -4px;
  height: 34px;
  background: #6b3a17;
  border: var(--bw) solid var(--ink);
  border-radius: 46px 46px 20px 20px / 46px 46px 30px 30px;
  clip-path: polygon(0 0,100% 0,100% 62%,86% 48%,72% 66%,57% 46%,43% 66%,28% 46%,14% 64%,0 50%);
}
.mascot-mask {
  position: absolute;
  top: 24px; left: -4px; right: -4px;
  height: 30px;
  background: var(--red);
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  z-index: 5;
}
.mascot-eye {
  position: absolute;
  top: 30px;
  width: 16px; height: 16px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  z-index: 6;
}
.mascot-eye::after {
  content: ""; position: absolute; inset: 3px 3px 3px 5px;
  background: var(--ink); border-radius: 50%;
}
.eye-l { left: 24px; }
.eye-r { right: 24px; }
.mascot-smile {
  position: absolute;
  bottom: 14px; left: 50%;
  width: 38px; height: 20px;
  transform: translateX(-50%);
  border: 4px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  z-index: 6;
}
.mascot-cheek {
  position: absolute;
  bottom: 18px;
  width: 12px; height: 8px;
  background: #ff8fa3;
  border-radius: 50%;
  opacity: .85;
  z-index: 6;
}
.cheek-l { left: 14px; }
.cheek-r { right: 14px; }
.mascot-shadow {
  position: absolute;
  bottom: 0; left: 50%;
  width: 110px; height: 16px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.18);
  border-radius: 50%;
  z-index: 0;
  animation: shadowPulse 2.6s ease-in-out infinite;
}
@keyframes shadowPulse { 0%,100% { transform: translateX(-50%) scale(1); opacity:.18; } 50% { transform: translateX(-50%) scale(.84); opacity:.12; } }

/* ===================== HERO (home) ===================== */
.hero {
  text-align: center;
  padding: 22px 20px 8px;
}
.hero-badge {
  display: inline-block;
  background: var(--sun);
  color: var(--ink);
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 1px;
  padding: 9px 22px;
  border: var(--bw) solid var(--ink);
  border-radius: 50px;
  font-size: clamp(.85rem, 3.2vw, 1.1rem);
  white-space: nowrap;
  box-shadow: var(--shadow);
  animation: pop 2s ease-in-out infinite;
}
@keyframes pop { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.05); } }

.hero-title {
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(3.6rem, 18vw, 8rem);
  line-height: .95;
  margin: 14px 0 0;
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-title .word {
  display: inline-block;
  color: var(--sun);
  -webkit-text-stroke: clamp(3px, 1.2vw, 6px) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink);
  animation: bounceLetter 2.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}
@keyframes bounceLetter { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.hero-sub {
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.5rem, 7vw, 3rem);
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
  margin-top: 8px;
  letter-spacing: 2px;
}

.hero-bubble {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(1rem, 4.4vw, 1.35rem);
  padding: 12px 24px;
  border: var(--bw) solid var(--ink);
  border-radius: 50px;
  box-shadow: var(--shadow);
}
.hero-bubble-tail {
  position: absolute;
  top: -16px; left: 50%;
  width: 22px; height: 22px;
  transform: translateX(-50%) rotate(45deg);
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-bottom: 0; border-right: 0;
}

/* ===================== HOME TILE GRID ===================== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 560px;
  margin: 26px auto 0;
  padding: 0 16px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: var(--bw-fat) solid var(--ink);
  border-radius: 26px;
  padding: 22px 10px 18px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.home.active .tile {
  animation: tileIn .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--i, 0) * .045s);
}
@keyframes tileIn {
  from { opacity: 0; transform: translateY(22px) scale(.9) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}
.tile:nth-child(odd)  { transform: rotate(-1.5deg); }
.tile:nth-child(even) { transform: rotate(1.5deg); }
.tile:hover { transform: translateY(-4px) rotate(0deg); }
.tile:active { transform: translateY(6px) scaleY(.92) scaleX(1.04) rotate(0deg); box-shadow: 0 0 0 var(--ink); }

.t-best {
  position: absolute;
  top: -10px; right: -8px;
  background: #fff;
  color: var(--ink);
  font-family: 'Luckiest Guy', cursive;
  font-size: .8rem;
  padding: 3px 9px;
  border: 3px solid var(--ink);
  border-radius: 50px;
  transform: rotate(8deg);
  pointer-events: none;
  box-shadow: 0 3px 0 var(--ink);
}

.t-emoji {
  font-size: 2.9rem;
  line-height: 1;
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));
}
.t-name {
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.15rem;
  letter-spacing: .5px;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--ink);
}

.t-green  { background: var(--green); }
.t-gold   { background: var(--gold); }
.t-dark   { background: var(--dark); }
.t-red    { background: var(--red); }
.t-blue   { background: var(--blue); }
.t-cube   { background: var(--cube); }
.t-orange { background: var(--orange); }
.t-pink   { background: var(--pink); }
.t-purple { background: var(--purple); }
.t-yellow { background: var(--yellow); }
.t-space  { background: var(--space); }
.t-world  { background: var(--world); }

.home-foot {
  text-align: center;
  padding: 30px 20px 64px;
  color: var(--ink);
  font-weight: 700;
}
.home-foot p { margin-top: 18px; color: rgba(32,20,58,.7); }
.party-btn { background: var(--sun); }

/* ===================== SHARED GAME UI ===================== */
.card-text {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.2rem);
  margin-bottom: 16px;
  background: rgba(255,255,255,.18);
  border: 3px solid rgba(255,255,255,.5);
  border-radius: 18px;
  padding: 10px 16px;
}
/* Ink text on bright gold/yellow stages so instructions stay readable */
.card-gold .card-text,
.card-yellow .card-text,
.card-trophy .card-text {
  color: var(--ink);
  background: rgba(255,255,255,.55);
  border-color: var(--ink);
}

/* Each game gets a flat bold backdrop + an ink frame via ::before on stages */
.card-green  { background: var(--green); }
.card-gold   { background: var(--gold); color: var(--ink); }
.card-dark   { background: var(--dark); }
.card-red    { background: var(--red); }
.card-blue   { background: var(--blue); }
.card-cube   { background: var(--cube); }
.card-orange { background: var(--orange); }
.card-pink   { background: var(--pink); }
.card-trophy { background: linear-gradient(160deg, #ffd23f 0%, #ff9f1c 55%, #ff6fb5 100%); color: var(--ink); }
.card-purple { background: var(--purple); }
.card-yellow { background: var(--yellow); color: var(--ink); }
.card-space  { background: #3a1c71; }
.card-world  { background: linear-gradient(180deg, #00a2ff 0%, #2ecc71 78%); }

.score-board {
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  letter-spacing: .5px;
  margin-top: 18px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.big-btn {
  display: block;
  margin: 20px auto 0;
  background: var(--sun);
  color: var(--ink);
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  letter-spacing: 1px;
  border: var(--bw-fat) solid var(--ink);
  border-radius: 50px;
  padding: 14px 42px;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.big-btn:active { transform: translateY(8px); box-shadow: 0 0 0 var(--ink); }

/* Pick rows (cars / bikes) */
.pick-group { margin-top: 16px; }
.pick-label {
  display: block;
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: .5px;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  margin-bottom: 8px;
}
.pick-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pick-group .pick-row { margin-top: 0; }
.pick-btn {
  font-size: 1.9rem;
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.pick-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.pick-btn.active { background: var(--sun); transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }

.praise {
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.6rem;
  letter-spacing: .5px;
  min-height: 1.6em;
  margin-top: 10px;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}


/* ===================== SOCCER ===================== */
.soccer-field {
  position: relative;
  height: 250px;
  background: repeating-linear-gradient(90deg, #27ae60 0 40px, #2ecc71 40px 80px);
  border-radius: 22px;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.goal-frame {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 92px;
  display: flex;
  border: var(--bw) solid #fff;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px),
              repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px);
}
.goal-net { flex: 1; }
.keeper {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 33.33%;
  text-align: center;
  font-size: 2.6rem;
  line-height: 1;
  transform: translateX(-50%);
  transition: left .18s cubic-bezier(.34,1.56,.64,1);
}
.keeper.save { animation: keeperSave .4s ease; }
@keyframes keeperSave { 50% { transform: translateX(-50%) scale(1.3) rotate(-8deg); } }
.ball {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  transition: left .42s ease-out, bottom .42s ease-out, transform .42s ease-out;
  z-index: 4;
}
.ball.fly { transform: translateX(-50%) scale(.55) rotate(720deg); }
.soccer-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 2.8rem;
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  opacity: 0;
  pointer-events: none;
}
.soccer-flash.show { animation: flashMsg .9s ease; }
@keyframes flashMsg {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  70% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.2); }
}
.shoot-row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.shoot-btn {
  flex: 1;
  max-width: 120px;
  font-size: 1.9rem;
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  padding: 12px 0;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.shoot-btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.shoot-btn.open {
  box-shadow: 0 6px 0 var(--ink), 0 0 0 4px #2ecc71, 0 0 16px #2ecc71;
  animation: shootOpenPulse 1s ease-in-out infinite;
}
@keyframes shootOpenPulse { 50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 6px #2ecc71, 0 0 22px #2ecc71; } }

/* ===================== CAR RACE ===================== */
.race {
  background: #2c2f3a;
  border-radius: 20px;
  padding: 16px 12px;
  position: relative;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
}
.lane {
  position: relative;
  height: 60px;
  margin: 10px 0;
  background: repeating-linear-gradient(90deg, #4a4d5a 0 26px, #54576a 26px 52px);
  border-radius: 10px;
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
}
.lane::after {
  content: "";
  position: absolute;
  left: 0; right: 44px; top: 50%;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--sun) 0 16px, transparent 16px 32px);
  transform: translateY(-50%);
}
.racer {
  position: absolute;
  left: 6px;
  font-size: 2.5rem;
  z-index: 2;
  transition: left .12s linear;
}
.lane-tag {
  position: absolute;
  right: 8px;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  padding: 2px 8px;
  border-radius: 8px;
}
.finish-flag {
  position: absolute;
  right: 12px; top: 8px; bottom: 8px;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
}

/* ===================== BATMAN ===================== */
.bat-sky {
  position: relative;
  height: 300px;
  background: linear-gradient(180deg, #0b1026 0%, #1b2350 100%);
  border-radius: 22px;
  overflow: hidden;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
}
.bat-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #fff, transparent),
    radial-gradient(2px 2px at 85% 50%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 80%, #fff, transparent),
    radial-gradient(2px 2px at 30% 75%, #fff, transparent);
}
.moon {
  position: absolute;
  top: 16px; right: 22px;
  font-size: 3rem;
  cursor: pointer;
  transition: transform .2s;
  z-index: 3;
}
.moon:active { transform: scale(.85); }
.bat-logo {
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%) scale(0);
  font-size: 4.2rem;
  opacity: 0;
  filter: drop-shadow(0 0 20px var(--sun));
  transition: transform .5s ease, opacity .5s;
  pointer-events: none;
}
.bat-logo.show { transform: translateX(-50%) scale(1); opacity: 1; }
.batman {
  position: absolute;
  bottom: -120px; left: 50%;
  transform: translateX(-50%);
  font-size: 4.2rem;
  transition: bottom .8s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.batman.show { bottom: 8px; }
.bat {
  position: absolute;
  font-size: 2.6rem;
  cursor: pointer;
  z-index: 4;
  animation: batPop .25s ease;
  filter: drop-shadow(0 0 6px rgba(255,210,63,.5));
}
.bat.villain { filter: drop-shadow(0 0 8px var(--red)); }
@keyframes batPop { from { transform: scale(0); } to { transform: scale(1); } }
.bat.caught { animation: batCaught .3s ease forwards; pointer-events: none; }
@keyframes batCaught { to { transform: scale(1.8); opacity: 0; } }

/* ===================== KICKBOXING ===================== */
.punch-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timer-pill {
  background: #fff;
  color: var(--ink);
  padding: 6px 20px;
  border: var(--bw) solid var(--ink);
  border-radius: 50px;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.3rem;
  margin-bottom: 8px;
  box-shadow: 0 4px 0 var(--ink);
}
.punch-bag {
  font-size: 7rem;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: transform .08s;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.25));
}
.punch-bag.hit { animation: punchHit .28s ease; }
@keyframes punchHit {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scaleX(1.12) scaleY(.86) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}
.power-bar {
  height: 22px;
  background: rgba(0,0,0,.25);
  border: var(--bw) solid var(--ink);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 12px;
}
.power-fill {
  height: 100%;
  width: 0;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--sun), var(--red));
  transition: width .12s ease;
}

/* ===================== POLICE ===================== */
.chase-zone {
  position: relative;
  height: 240px;
  background: linear-gradient(180deg, #20305c, #4d8bff);
  border-radius: 22px;
  overflow: hidden;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
}
.siren {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 2.2rem;
}
.siren.active { animation: flash .4s steps(2) infinite; }
@keyframes flash { 50% { opacity: .2; filter: hue-rotate(180deg); } }
.robber {
  position: absolute;
  top: 80px; left: 40px;
  font-size: 3.8rem;
  min-width: 72px; min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  transition: top .25s, left .25s, font-size .2s;
}
.robber.big { font-size: 4.6rem; min-width: 88px; min-height: 88px; }
.robber.pop { animation: batPop .2s ease; }

/* ===================== MINECRAFT (stacker) ===================== */
.stack-area {
  position: relative;
  height: 320px;
  background: linear-gradient(180deg, #87ceeb, #cdeeff);
  border-radius: 22px;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
#stack { position: absolute; inset: 0; transition: transform .12s ease-out; }
.block {
  position: absolute;
  border-radius: 5px;
  box-shadow: inset 0 3px rgba(255,255,255,.35), inset 0 -3px rgba(0,0,0,.2);
  border: 2px solid var(--ink);
}
.block.placed { animation: settle .12s ease; }
@keyframes settle { from { transform: translateY(-6px); } to { transform: none; } }
.block.moving { z-index: 3; }
.block.falling {
  z-index: 2;
  transition: transform .6s ease-in, opacity .6s;
}

/* ===================== NOAH WORLD (Roblox-style playground) ===================== */
.world-stage {
  position: relative;
  height: min(52vh, 440px);
  min-height: 280px;
  border-radius: 22px;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #4dc3ff;
  touch-action: none;
}
#worldCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.world-stick {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  border: 4px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  z-index: 4;
  touch-action: none;
}
.world-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sun);
  border: 4px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.world-hint {
  position: absolute;
  left: 44px;
  bottom: 112px;
  font-size: 2.1rem;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 var(--ink));
  animation: worldHint 1s ease-in-out infinite;
}
.world-hint.hide { display: none; }
@keyframes worldHint {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(8px) scale(1.12); }
}

/* ===================== BIKES (runner) ===================== */
.run-area {
  position: relative;
  height: 200px;
  background: linear-gradient(180deg, #aee6ff 0%, #ffe1a8 70%);
  border-radius: 22px;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.run-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  background: linear-gradient(180deg, #c08b4a, #8a5a23);
  border-top: 3px dashed rgba(255,255,255,.6);
}
.bike {
  position: absolute;
  left: 36px;
  bottom: 26px;
  font-size: 2.8rem;
  line-height: 1;
  z-index: 3;
}
.rock {
  position: absolute;
  bottom: 26px;
  font-size: 2rem;
  line-height: 1;
  z-index: 2;
}
.coin {
  position: absolute;
  font-size: 1.7rem;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 0 8px var(--sun));
  animation: coinSpin 1s linear infinite;
}
.coin.got { animation: coinGot .25s ease forwards; }
@keyframes coinSpin { 50% { transform: scaleX(.25); } }
@keyframes coinGot { to { transform: scale(2.2); opacity: 0; } }
.bike-hearts {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 2px;
  pointer-events: none;
  z-index: 3;
}

/* ===================== FAMILY ===================== */
.family-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.person {
  position: relative;
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  padding: 18px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform .12s, box-shadow .12s;
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.person:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.person .face { font-size: 3.2rem; }
.person .name { font-family: 'Luckiest Guy', cursive; font-size: 1.2rem; letter-spacing: .5px; }
.person.fav {
  background: var(--sun);
  animation: favGlow 1.8s ease-in-out infinite;
}
@keyframes favGlow {
  0%,100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg) scale(1.03); }
}
.heart-badge {
  position: absolute;
  top: -12px; right: -8px;
  background: var(--red);
  color: #fff;
  font-family: 'Luckiest Guy', cursive;
  font-size: .85rem;
  padding: 4px 9px;
  border: 3px solid var(--ink);
  border-radius: 50px;
  transform: rotate(12deg);
  box-shadow: 0 3px 0 var(--ink);
}
.love-meter {
  height: 22px;
  background: rgba(0,0,0,.2);
  border: var(--bw) solid var(--ink);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 18px;
}
.love-fill {
  height: 100%;
  width: 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #fff, var(--sun));
  transition: width .25s ease;
}
.love-msg {
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.5rem;
  letter-spacing: .5px;
  min-height: 1.6em;
  margin-top: 14px;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}

/* ===================== FRIENDS ===================== */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.friend {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 2.2rem;
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  padding: 10px 6px 8px;
  min-height: 72px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s, background .2s, box-shadow .12s;
}
.friend-face { line-height: 1; }
.friend-name {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: .2px;
}
.friend:active { transform: translateY(5px) rotate(-6deg); box-shadow: 0 0 0 var(--ink); }
.friend.fived {
  background: var(--sun);
  animation: fiveJump .4s ease;
}
.friend.fived::after {
  content: "✓";
  position: absolute;
  top: -8px; right: -6px;
  background: var(--green);
  color: #fff;
  font-size: .9rem;
  width: 24px; height: 24px;
  line-height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-weight: 900;
}
@keyframes fiveJump { 50% { transform: translateY(-16px) scale(1.2); } }

/* ===================== TROPHY ROOM ===================== */
.trophy-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.trophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 110px;
  padding: 14px 8px;
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .2s;
  font-family: inherit;
  color: var(--ink);
}
.trophy:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.trophy-emoji { font-size: 2.6rem; line-height: 1; }
.trophy-label {
  font-family: 'Luckiest Guy', cursive;
  font-size: .85rem;
  letter-spacing: .5px;
  text-align: center;
  line-height: 1.15;
}
.trophy.earned {
  background: linear-gradient(180deg, #fff9df, #ffe28a);
}
.trophy.locked {
  filter: grayscale(1);
  opacity: .45;
}
.trophy.locked .trophy-emoji { opacity: .55; }

/* Comic KA-POW burst at impact points */
.comic-burst {
  position: fixed;
  z-index: 85;
  width: 0; height: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: comicBurst .7s ease-out forwards;
}
.comic-burst-star {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  background: var(--burst-color, var(--sun));
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  border: 0;
  filter: drop-shadow(0 3px 0 var(--ink));
}
.comic-burst-word {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.35rem;
  color: #fff;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
  letter-spacing: 1px;
}
@keyframes comicBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-12deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1.25) rotate(-4deg); }
}

/* ===================== NO STUDY ===================== */
.study-zone {
  position: relative;
  height: 240px;
  background: rgba(255,255,255,.18);
  border: var(--bw-fat) dashed rgba(255,255,255,.7);
  border-radius: 22px;
  overflow: hidden;
}
.book-btn {
  position: absolute;
  top: 90px; left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: top .25s cubic-bezier(.34,1.56,.64,1), left .25s cubic-bezier(.34,1.56,.64,1), transform .2s;
}
.study-msg {
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.5rem;
  letter-spacing: .5px;
  min-height: 1.8em;
  margin-top: 16px;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}

/* ===================== BLASTER ===================== */
.blast-zone {
  position: relative;
  height: 320px;
  background: radial-gradient(circle at 50% 118%, #3a2a8a 0%, #1a1350 45%, #0a0822 80%);
  border-radius: 22px;
  overflow: hidden;
  border: var(--bw-fat) solid var(--ink);
  box-shadow: var(--shadow);
}
.blast-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 25%, #fff, transparent),
    radial-gradient(2px 2px at 75% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 55%, #cdeeff, transparent),
    radial-gradient(2px 2px at 88% 45%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 80%, #fff, transparent),
    radial-gradient(2px 2px at 28% 70%, #cdeeff, transparent);
  opacity: .9;
}
.blaster {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.4rem;
  line-height: 1;
  z-index: 5;
  filter: drop-shadow(0 0 10px #2ec5ce);
  pointer-events: none;
}
.blaster.recoil { animation: recoil .18s ease; }
@keyframes recoil { 50% { transform: translateX(-50%) translateY(9px) scale(.88); } }

.blast-target {
  position: absolute;
  font-size: 2.9rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity .18s ease;
  filter: drop-shadow(0 0 8px rgba(94,231,223,.6));
  animation: bob 1.8s ease-in-out infinite;
}
.blast-target.show { opacity: 1; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.blast-target.mega {
  font-size: 3.9rem;
  filter: drop-shadow(0 0 16px var(--sun));
  animation: megaBob 1.2s ease-in-out infinite;
}
@keyframes megaBob {
  0%,100% { transform: translateY(0) rotate(-9deg); }
  50% { transform: translateY(-11px) rotate(9deg); }
}

.blast-target.splat { animation: splat .32s ease forwards; pointer-events: none; }
@keyframes splat { to { transform: scale(2.3) rotate(40deg); opacity: 0; } }
.blast-target.flee { animation: flee .32s ease forwards; pointer-events: none; }
@keyframes flee { to { transform: translateY(-26px) scale(.4) rotate(22deg); opacity: 0; } }

.laser-beam {
  position: absolute;
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #5ee7df 40%, transparent);
  transform-origin: bottom center;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 12px #2ec5ce;
  animation: beamShot .25s ease-out forwards;
}
@keyframes beamShot {
  0%   { opacity: 1; transform: translateX(-50%) rotate(var(--ang)) scaleY(.15); }
  45%  { opacity: 1; transform: translateX(-50%) rotate(var(--ang)) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) rotate(var(--ang)) scaleY(1); }
}

/* ===================== CONFETTI ===================== */
#confettiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

/* ===================== FLOATING +1 (comic pop) ===================== */
.float-pop {
  position: fixed;
  z-index: 80;
  font-family: 'Luckiest Guy', cursive;
  font-size: 2rem;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(.6) rotate(-8deg); opacity: 1; }
  100% { transform: translateY(-90px) scale(1.4) rotate(6deg); opacity: 0; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 420px) {
  .world-stick { width: 88px; height: 88px; }
  .world-knob { width: 38px; height: 38px; }
  .world-hint { left: 36px; bottom: 100px; }
  .friends-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .friend {
    font-size: 1.7rem;
    min-height: 60px;
    padding: 12px 4px 8px;
  }
  .friend-name { font-size: .65rem; }
  .trophy-wall { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trophy { min-height: 96px; }
  .tile { padding: 18px 8px 14px; border-radius: 22px; }
  .t-emoji { font-size: 2.4rem; width: 62px; height: 62px; }
  .mascot { width: 150px; height: 172px; transform: scale(.92); }
}
@media (min-width: 620px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); max-width: 660px; }
}
/* Tablet: roomier hero + tiles */
@media (min-width: 768px) {
  .hero { padding: 44px 20px 24px; }
  .mascot { width: 220px; height: 240px; }
  .tile-grid { max-width: 720px; gap: 20px; }
  .t-emoji { font-size: 3.4rem; width: 86px; height: 86px; }
  .t-name { font-size: 1.35rem; }
}

/* ===================== NEW JUICE (v2 upgrades) ===================== */
/* Impact shake applied to a game stage on big moments */
.shake { animation: shake .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* --- Soccer: flaming streak ball + diving keeper --- */
.ball.fire { filter: drop-shadow(0 0 10px var(--orange)) drop-shadow(0 0 18px var(--red)); }
.keeper.dive-l { animation: diveL .45s ease; }
.keeper.dive-r { animation: diveR .45s ease; }
@keyframes diveL { 50% { transform: translateX(-115%) rotate(-55deg); } }
@keyframes diveR { 50% { transform: translateX(15%) rotate(55deg); } }

/* --- Cars: dust puff + nitro glow --- */
.dust {
  position: absolute;
  bottom: 4px;
  font-size: 1.3rem;
  pointer-events: none;
  animation: dustPuff .45s ease-out forwards;
}
@keyframes dustPuff {
  0% { opacity: .9; transform: translateX(0) scale(.6); }
  100% { opacity: 0; transform: translateX(-26px) scale(1.3); }
}
.racer.nitro { filter: drop-shadow(-8px 0 6px var(--sun)) drop-shadow(-16px 0 10px var(--orange)); }

/* --- Batman: moon cooldown after a bat-signal blast --- */
.moon.cooldown { opacity: .4; filter: grayscale(.6); transform: scale(.9); }

/* --- Blaster: bomb pickup pulses to stand out (splat takes over on hit) --- */
.blast-target.bomb {
  filter: drop-shadow(0 0 12px var(--red));
  animation: bombPulse .6s ease-in-out infinite;
}
.blast-target.bomb.splat { animation: splat .32s ease forwards; }
@keyframes bombPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.18) rotate(-6deg); }
}

/* --- Bikes: clouds, shield star, shield glow, smashed rocks --- */
.cloud {
  position: absolute;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
}
.star-pow {
  position: absolute;
  font-size: 1.9rem;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 0 10px var(--sun));
  animation: starSpin 1.1s linear infinite;
}
.star-pow.got { animation: coinGot .25s ease forwards; }
@keyframes starSpin { 50% { transform: rotate(180deg) scale(1.15); } }
.bike.shield {
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--sun));
  animation: shieldPulse .5s ease-in-out infinite;
}
@keyframes shieldPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.rock.smashed { animation: rockSmash .25s ease forwards; pointer-events: none; }
@keyframes rockSmash { to { transform: scale(1.8) rotate(40deg); opacity: 0; } }

/* ===================== TILE ACCENTS ===================== */
.tile.t-trophy {
  background: linear-gradient(160deg, #ffd23f, #ff9f1c);
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticker,
  .hero-badge,
  .hero-title .word,
  .mascot, .mascot-burst, .mascot-cape, .arm-r, .mascot-shadow,
  .person.fav,
  .coin,
  .blast-target,
  .blast-target.bomb,
  .star-pow,
  .bike.shield,
  .shake,
  .float-pop,
  .soccer-flash.show,
  .keeper.save, .keeper.dive-l, .keeper.dive-r,
  .punch-bag.hit,
  .bat, .bat.caught,
  .blaster.recoil,
  .dust,
  .racer.nitro,
  .comic-burst,
  .flee,
  .blast-target.splat,
  .shoot-btn.open,
  .world-hint {
    animation: none !important;
  }
  .screen.game.active,
  .home.active .tile { animation: none; }
}