/* ============================================================
   SHIFTPANIC - Stylesheet v2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Space+Grotesk:wght@700;800&display=swap');
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Ensure [hidden] always wins over any display property set in author CSS */
[hidden] { display: none !important; }

/* ---- Design tokens ---- */
:root {
  --bg:          #0d0d1a;
  --surface:     #131325;
  --card:        #1a1a2e;
  --card-border: #2a2a48;
  --accent:      #7c3aed;
  --accent-light:#a855f7;
  --accent-pale: #c084fc;
  --accent2:     #ec4899;
  --gold:        #fbbf24;
  --text:        #f1f5f9;
  --text-muted:  #94a3b8;
  --danger:      #ef4444;
  --success:     #22c55e;
  --warning:     #f59e0b;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --hud-h:       68px;
  --shadow:      0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.65);
}

/* ---- High-contrast overrides ---- */
body.mode-high-contrast {
  --bg:          #000;
  --surface:     #0a0a0a;
  --card:        #111;
  --card-border: #fff;
  --text:        #fff;
  --text-muted:  #ccc;
  --accent:      #fff;
}
body.mode-high-contrast .btn-primary   { background: #fff; color: #000; box-shadow: none; }
body.mode-high-contrast .btn-secondary { background: #000; color: #fff; border: 2px solid #fff; }
body.mode-high-contrast .card          { border-color: #fff; }
body.mode-high-contrast .timer-bar-fill { background: #fff; }

/* ---- Reduced-motion override (CSS level) ---- */
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration:       0.01ms !important;
  animation-iteration-count: 1     !important;
  transition-duration:      0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Base ---- */
html {
  height: 100%;
  background: #06061a; /* solid fallback - always visible beneath body */
}
body {
  height: 100%;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  /* background-color animation is universally supported and always visible */
  background-color: #06061a;
  animation: bgPulse 9s ease-in-out infinite;
}
@keyframes bgPulse {
  0%, 100% { background-color: #06061a; }   /* near-black */
  50%       { background-color: #1e0848; }   /* clearly visible deep purple */
}

/* Radial glow - breathes slowly, centered behind all content */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%,
      rgba(124,58,237,.38) 0%,
      rgba(236,72,153,.16) 55%,
      transparent 100%);
  animation: bgGlow 20s ease-in-out infinite;
}
@keyframes bgGlow {
  0%, 100% { opacity: .4;  transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* ---- Screen reader only ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; }

#home-screen:not([hidden]) {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  z-index: 3; /* above canvas (2) and blobs (1) - home-screen is transparent so both show through */
}

#game-screen:not([hidden]) {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  z-index: 100;
}

/* ============================================================
   HOME SCREEN
   ============================================================ */

/* Background falling-blocks canvas */
#home-bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2; /* above blobs (1), below home-screen UI (3) */
}

/* Gameplay preview canvas - ghost player + blocks, blurred behind UI */
#home-preview-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;       /* below .home-inner (z-index:2) inside #home-screen stacking context */
  opacity: 0.40;
  /* filter: blur(5px) removed — full GPU filter pass every frame is expensive */
}

/* Decorative animated blobs */
.home-blobs {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 1; /* above body::before (0), below canvas blocks (2) */
}

/* Faint star-particles layer - two pseudo-elements, different speeds & densities */
.home-blobs::before,
.home-blobs::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 62%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 9%,  rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 44%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 77%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5%  90%, rgba(255,255,255,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 22%, rgba(255,255,255,.42) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 78%, rgba(255,255,255,.30) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: starDrift 60s linear infinite;
  opacity: 0.9;
}
.home-blobs::after {
  background-image:
    radial-gradient(1px 1px at 22% 35%, rgba(200,180,255,.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 15%, rgba(200,180,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 58%, rgba(200,180,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 88%, rgba(200,180,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 55%, rgba(200,180,255,.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 40%, rgba(200,180,255,.48) 0%, transparent 100%);
  animation-duration: 90s;
  animation-direction: reverse;
  opacity: 0.7;
}
@keyframes starDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-48px); }
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(32px); opacity: 0.14;
  animation: blobDrift 20s ease-in-out infinite alternate;
}
.blob-1 { width: 380px; height: 380px; background: var(--accent);       top: -60px;  left: -100px; animation-duration: 22s; }
.blob-2 { width: 300px; height: 300px; background: var(--accent2);      bottom: 0;   right: -80px; animation-duration: 18s; animation-delay: -6s; }
.blob-3 { width: 240px; height: 240px; background: var(--accent-pale);  top: 40%;    left: 45%;   animation-duration: 26s; animation-delay: -12s; }

@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(36px, 28px) scale(1.1); }
}

/* -- Home screen entrance animations ---------------------------- */
@keyframes homeEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

#home-screen.home-animate .title-mark {
  animation: homeEnter .38s cubic-bezier(.22,1,.36,1) .05s both;
}
#home-screen.home-animate .game-title {
  animation: homeEnter .42s cubic-bezier(.22,1,.36,1) .10s both,
             titleShimmer 8s ease-in-out .70s infinite;
}
#home-screen.home-animate .game-subtitle {
  animation: homeEnter .38s cubic-bezier(.22,1,.36,1) .18s both;
}
#home-screen.home-animate .home-highscore {
  animation: homeEnter .36s cubic-bezier(.22,1,.36,1) .24s both;
}
#home-screen.home-animate #btn-start {
  animation: homeEnter .38s cubic-bezier(.22,1,.36,1) .30s both,
             startPulse 3s ease-in-out .70s infinite;
}
#home-screen.home-animate #btn-progress {
  animation: homeEnter .36s cubic-bezier(.22,1,.36,1) .38s both;
}
#home-screen.home-animate #btn-settings {
  animation: homeEnter .36s cubic-bezier(.22,1,.36,1) .44s both;
}

.home-inner {
  position: relative; z-index: 2; /* top of home-screen stacking context, above everything */
  max-width: 520px; width: 100%;
  margin: 0 auto;
  padding: 36px 18px 52px;
  display: flex; flex-direction: column;
  gap: 16px;
}

/* Header */
.home-header   { text-align: center; }
.title-mark    { font-size: 2.4rem; margin-bottom: 4px; line-height: 1; }

.game-title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent2) 55%, #f472b6 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  line-height: 1.05;
  animation: titleShimmer 8s ease-in-out 1s infinite;
}

@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.game-subtitle {
  color: rgba(148, 163, 184, 0.72);
  font-size: .9rem;
  font-weight: 500;
  max-width: 380px;
  margin: 0 auto 18px;
  line-height: 1.6;
  letter-spacing: .1px;
}

.home-highscore {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.06));
  border: 1px solid rgba(251,191,36,.4);
  border-radius: var(--radius);
  padding: 10px 24px;
  box-shadow: 0 0 20px rgba(251,191,36,.14), 0 2px 10px rgba(0,0,0,.35);
  transition: box-shadow .4s ease, border-color .4s ease;
}

@keyframes hsFlash {
  0%   { box-shadow: 0 0 20px rgba(251,191,36,.14), 0 2px 10px rgba(0,0,0,.35); border-color: rgba(251,191,36,.4); }
  35%  { box-shadow: 0 0 44px rgba(251,191,36,.75), 0 2px 12px rgba(0,0,0,.3);  border-color: rgba(251,191,36,.95); }
  100% { box-shadow: 0 0 20px rgba(251,191,36,.14), 0 2px 10px rgba(0,0,0,.35); border-color: rgba(251,191,36,.4); }
}
.home-highscore.hs-flash { animation: hsFlash 1s ease both; }
.hs-label { color: var(--text-muted); font-size: .8rem; }
@keyframes hsValueGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(251,191,36,.12); }
  50%       { text-shadow: 0 0 20px rgba(251,191,36,.60), 0 0 36px rgba(251,191,36,.22); }
}
.hs-value { font-size: 1.55rem; font-weight: 900; color: var(--gold); letter-spacing: -1px; animation: hsValueGlow 3.5s ease-in-out 1.5s infinite; }

@keyframes coinGlow {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(251,191,36,.38), 0 2px 4px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.65), inset 0 -1px 2px rgba(120,53,15,.40); }
  50%       { box-shadow: 0 0 16px 4px rgba(251,191,36,.65), 0 2px 4px rgba(0,0,0,.30), inset 0 1px 1px rgba(255,255,255,.70), inset 0 -1px 2px rgba(120,53,15,.35); }
}
@keyframes coinEarn {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

.home-coins {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(251,191,36,.05));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 999px;
  padding: 7px 18px 7px 10px;
  margin-top: 8px;
}

.home-lifetime-card {
  margin: 14px auto 0;
  width: min(420px, 100%);
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(56,189,248,.06) 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  text-align: left;
}

.home-lifetime-head,
.lifetime-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.home-lifetime-label,
.lifetime-progress-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-lifetime-value,
.lifetime-progress-value {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #f8fafc;
}

.lifetime-track {
  width: 100%;
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.lifetime-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee 0%, #a855f7 100%);
  transition: width .35s ease;
}

.home-lifetime-next,
.home-lifetime-detail,
.lifetime-next-target,
.lifetime-progress-detail {
  margin-top: 8px;
  font-size: .8rem;
  line-height: 1.5;
}

.home-lifetime-next,
.lifetime-next-target {
  color: var(--text);
  font-weight: 700;
}

.home-lifetime-detail,
.lifetime-progress-detail {
  color: var(--text-muted);
}

/* CSS circular gold coin */
.coin-icon {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fef9c3 0%, #fde047 22%, #eab308 55%, #a16207 88%, #78350f 100%);
  box-shadow: 0 0 8px 2px rgba(251,191,36,.40), 0 2px 4px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.65), inset 0 -1px 2px rgba(120,53,15,.40);
  flex-shrink: 0;
  animation: coinGlow 2.8s ease-in-out infinite;
  position: relative;
}
/* inner ring highlight */
.coin-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}

/* Small coin variant - inline with text */
.coin-sm {
  width: 14px; height: 14px;
  animation: none;
  box-shadow: 0 0 4px 1px rgba(251,191,36,.35), 0 1px 3px rgba(0,0,0,.30),
              inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 1px rgba(120,53,15,.30);
  vertical-align: middle;
  position: relative; top: -1px;
}

.coins-value {
  font-size: 1rem; font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.home-coins.coin-earn .coin-icon { animation: coinEarn .35s ease, coinGlow 2.8s ease-in-out infinite .35s; }

/* -- Daily Challenge card ----------------------------------- */
.daily-challenge-card {
  background: linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(236,72,153,.10) 100%);
  border: 1px solid rgba(168,85,247,.38);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 0 18px rgba(124,58,237,.14), 0 2px 10px rgba(0,0,0,.32);
  position: relative; overflow: hidden;
}
/* Subtle shimmer strip on left edge */
.daily-challenge-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent-light), var(--accent2));
  border-radius: 3px 0 0 3px;
}
.dc-header {
  display: flex; align-items: center; gap: 7px;
}
.dc-badge { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.dc-title {
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--accent-light);
  flex: 1;
}
.dc-timer {
  font-size: .72rem; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.dc-timer.dc-timer-urgent { color: #fb923c; animation: dcTimerUrgent 1s ease-in-out infinite; }
@keyframes dcTimerUrgent {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
.dc-desc {
  font-size: .92rem; font-weight: 600; color: var(--text);
  line-height: 1.4;
  padding-left: 2px;
}
.dc-footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px;
}
.dc-reward {
  display: flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 700; color: var(--gold);
}
.dc-claim {
  padding: 7px 18px;
  font-size: .85rem;
  min-height: 36px;
  touch-action: manipulation;
  animation: dcClaimPulse 2.4s ease-in-out infinite;
}
@keyframes dcClaimPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,.50); }
  50%       { box-shadow: 0 0 0 7px rgba(168,85,247,0); }
}
.dc-done-label {
  font-size: .82rem; font-weight: 700;
  color: var(--success); letter-spacing: .3px;
}
.dc-progress-label {
  font-size: .78rem; color: var(--text-muted);
  margin-left: auto;
}
/* Completed state dulls the card */
.daily-challenge-card.dc-completed {
  opacity: .72;
  border-color: rgba(34,197,94,.30);
  background: linear-gradient(135deg, rgba(34,197,94,.08) 0%, rgba(34,197,94,.04) 100%);
}
.daily-challenge-card.dc-completed::before {
  background: var(--success);
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.card-title {
  font-size: .62rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.6px;
  margin-bottom: 14px;
}

/* Home actions - radial glow behind buttons */
.home-actions {
  display: flex; flex-direction: column; gap: 9px;
  position: relative;
}
.home-actions::before {
  content: '';
  position: absolute;
  inset: -32px -24px;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(124,58,237,.18) 0%,
    rgba(236,72,153,.10) 50%,
    transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .8; transform: scale(1);    }
  50%       { opacity: 1;  transform: scale(1.06); }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 22px;
  border: none; border-radius: var(--radius);
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1),
              box-shadow .14s ease,
              filter .14s ease,
              background .14s ease;
  min-height: 50px; letter-spacing: .2px;
  text-align: center; position: relative; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  /* Ripple layer */
  isolation: isolate;
}
/* Ripple pseudo-element - scales out on :active */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0%, transparent 70%);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.btn:active::after {
  opacity: 1;
  transform: scale(1.4);
  transition: opacity .06s ease, transform .06s ease;
}
.btn:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
/* Press: scale down, remove hover lift so they don't fight */
.btn:active { transform: scale(.97) !important; box-shadow: none !important; }

.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 40%, #ec4899 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,.40);
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 32px rgba(124,58,237,.60), 0 0 0 1px rgba(168,85,247,.30);
  transform: scale(1.035) translateY(-2px);
}

.btn-secondary {
  background: rgba(255,255,255,.055);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.10);
  color: var(--text);
  box-shadow: 0 4px 18px rgba(124,58,237,.25);
  border-color: rgba(168,85,247,.40);
  transform: scale(1.025) translateY(-1px);
}

.btn-large { font-size: 1.12rem; padding: 15px 28px; min-height: 56px; }
.btn-sm    { font-size: .88rem;  padding: 10px 14px; min-height: 44px; }

/* -- Start Game button - hero CTA ------------------------------ */
#btn-start {
  font-size: 1.22rem;
  padding: 18px 36px;
  min-height: 64px;
  letter-spacing: .4px;
  border: 1px solid rgba(168,85,247,.35);
  box-shadow: 0 6px 28px rgba(124,58,237,.55), 0 0 48px rgba(168,85,247,.20);
  animation: startPulse 3s ease-in-out infinite;
}
#btn-start:hover {
  animation-play-state: paused; /* freeze pulse on hover so hover glow takes over */
  box-shadow: 0 10px 40px rgba(124,58,237,.80), 0 0 60px rgba(168,85,247,.35),
              0 0 0 1px rgba(168,85,247,.45);
  transform: scale(1.05) translateY(-3px);
}
@keyframes startPulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(124,58,237,.55), 0 0 48px rgba(168,85,247,.18); }
  50%       { box-shadow: 0 8px 36px rgba(124,58,237,.75), 0 0 72px rgba(168,85,247,.36); }
}

/* Secondary buttons in home-actions - clean and restrained */
.home-actions .btn-secondary {
  font-size: .94rem;
  min-height: 46px;
  letter-spacing: .3px;
  transition: opacity .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1),
              box-shadow .14s ease, background .14s ease;
}
.home-actions .btn-secondary:hover { opacity: 1; }

kbd {
  display: inline-block;
  background: rgba(255,255,255,.13);
  border-radius: 4px; padding: 1px 6px;
  font-size: .72em; font-family: monospace; font-weight: normal;
}

/* Toggle switches */
.settings-grid { display: flex; flex-direction: column; gap: 0; }

.toggle-label {
  display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
  cursor: pointer; padding: 11px 0;
  border-bottom: 1px solid var(--card-border);
  font-size: .92rem;
}
.toggle-label:last-child { border-bottom: none; }

.toggle-text { display: flex; align-items: center; gap: 8px; }
.toggle-icon { font-size: 1rem; }
.toggle-wrap { flex-shrink: 0; }

.toggle-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-track {
  width: 44px; height: 24px;
  background: #252545; border-radius: 100px;
  position: relative; display: block;
  transition: background .2s;
}
.toggle-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.toggle-label input:checked ~ .toggle-track          { background: var(--accent); }
.toggle-label input:checked ~ .toggle-track::after   { transform: translateX(20px); }
.toggle-label input:focus-visible ~ .toggle-track    { outline: 3px solid var(--accent-light); outline-offset: 2px; }

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
  backdrop-filter: blur(6px);
}
.modal[hidden] { display: none !important; }

.modal-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 28px 26px;
  max-width: 480px; width: 100%;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 14px;
  max-height: 90dvh; overflow-y: auto;
}
.modal-box h2 { font-size: 1.45rem; font-weight: 800; }

.howto-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.howto-list li {
  padding: 9px 13px;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-sm);
  border-left: 2px solid rgba(168,85,247,.28);
  font-size: .91rem; line-height: 1.55;
}
.howto-icon { display: none; }

.controls-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.controls-table th, .controls-table td {
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--card-border);
}
.controls-table th { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   SETTINGS PANEL (unified modal)
   ============================================================ */
.settings-panel {
  max-width: 520px;
  gap: 0;
  padding: 0;
  max-height: 92dvh;
  overflow-y: auto;
}

.spanel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0;
  background: var(--card);
  z-index: 1;
}
.spanel-header h2 { font-size: 1.35rem; font-weight: 800; }

.btn-close {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
}
.btn-close:hover { background: rgba(255,255,255,.16); }
.btn-close:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

.settings-panel section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--card-border);
}
.settings-panel section:last-of-type { border-bottom: none; }

.spanel-section-title {
  font-size: .65rem; font-weight: 800;
  color: rgba(148, 163, 184, 0.52);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 14px;
  padding-left: 9px;
  border-left: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: space-between;
}
.coin-balance-badge {
  font-size: .75rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--text); opacity: .85;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 2px 10px;
}

.settings-panel .settings-grid { gap: 0; }
.settings-panel .howto-list    { margin: 0; }
.settings-panel .controls-table { margin: 0; }

.settings-panel > .btn {
  margin: 16px 24px 24px;
  width: calc(100% - 48px);
  display: flex;
}

/* ============================================================
   SHOP COIN HEADER
   ============================================================ */
.shop-coin-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--card-border);
}
.shop-coin-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(251,191,36,.06));
  border: 1px solid rgba(251,191,36,.40);
  border-radius: 999px;
  padding: 6px 15px 6px 9px;
  flex-shrink: 0;
}
.shop-coin-pill .coin-icon { width: 20px; height: 20px; }
.shop-coin-pill .coins-value { font-size: .95rem; }
.shop-coin-hint {
  font-size: .74rem; color: var(--text-muted);
  line-height: 1.5; text-align: right; flex: 1;
}

/* ============================================================
   POWERUP UPGRADES — PREMIUM REDESIGN v2
   ============================================================ */

/* Panel tinted background */
#shop-panel-upgrades.shop-panel {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(109,40,217,.14) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20,10,48,.0) 0%, rgba(8,4,20,.0) 100%);
}

/* Tab header */
.pup-tab-header {
  text-align: center;
  padding: 4px 0 18px;
}
.pup-tab-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -.5px;
  text-shadow: 0 0 24px rgba(167,139,250,.4);
}
.pup-tab-subtitle {
  font-size: .9rem;
  color: #b4c4d8;
  margin: 0;
  font-weight: 600;
}

/* Summary strip */
.pup-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(109,40,217,.18) 0%, rgba(76,29,149,.12) 100%);
  border: 1px solid rgba(139,92,246,.42);
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  box-shadow: 0 2px 16px rgba(109,40,217,.1), inset 0 1px 0 rgba(255,255,255,.06);
}
.pup-sum-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pup-sum-val {
  font-size: 1.2rem;
  font-weight: 900;
  color: #e9d5ff;
  text-shadow: 0 0 12px rgba(167,139,250,.4);
}
.pup-sum-lbl {
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: #94a3b8;
}
.pup-sum-divider {
  width: 1px;
  height: 28px;
  background: rgba(139,92,246,.4);
  flex-shrink: 0;
}
.pup-sum-note {
  font-size: .75rem;
  color: #c4b5fd;
  font-weight: 800;
  letter-spacing: .02em;
}

/* List */
.powerup-upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
}

/* Card */
.pup-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 0 20px;
  padding: 20px 22px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(30,14,66,.96) 0%, rgba(18,8,44,.96) 100%);
  border: 1.5px solid rgba(var(--pup-acc-rgb), .38);
  box-shadow:
    0 4px 28px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 50px rgba(var(--pup-acc-rgb), .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.pup-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--pup-acc) 0%, rgba(var(--pup-acc-rgb), .15) 100%);
  border-radius: 20px 0 0 20px;
}
.pup-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--pup-acc-rgb), .35), transparent);
  border-radius: 20px 20px 0 0;
}
.pup-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--pup-acc-rgb), .65);
  box-shadow:
    0 12px 44px rgba(0,0,0,.6),
    0 0 32px rgba(var(--pup-acc-rgb), .16),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 60px rgba(var(--pup-acc-rgb), .07);
}
.pup-card[data-maxed="true"] {
  border-color: rgba(251,191,36,.45);
  background: linear-gradient(140deg, rgba(34,18,4,.97) 0%, rgba(18,10,2,.97) 100%);
}
.pup-card[data-maxed="true"]::before {
  background: linear-gradient(180deg, #fbbf24 0%, rgba(251,191,36,.15) 100%);
}
.pup-card[data-maxed="true"]::after {
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.3), transparent);
}

/* Zone A: Icon */
.pup-zone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pup-icon-ring {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: linear-gradient(135deg, rgba(var(--pup-acc-rgb), .28), rgba(var(--pup-acc-rgb), .1));
  border: 2px solid rgba(var(--pup-acc-rgb), .5);
  box-shadow:
    0 0 22px rgba(var(--pup-acc-rgb), .25),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .2s, box-shadow .2s;
}
.pup-card:hover .pup-icon-ring {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 0 34px rgba(var(--pup-acc-rgb), .45), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Zone B: Info */
.pup-zone-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pup-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.pup-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.pup-level-tag {
  font-size: .68rem;
  font-weight: 800;
  color: var(--pup-acc);
  background: rgba(var(--pup-acc-rgb), .18);
  border: 1px solid rgba(var(--pup-acc-rgb), .5);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.6;
  text-shadow: 0 0 8px rgba(var(--pup-acc-rgb), .4);
}
.pup-card[data-maxed="true"] .pup-level-tag {
  color: #fde68a;
  background: rgba(251,191,36,.2);
  border-color: rgba(251,191,36,.55);
  text-shadow: 0 0 8px rgba(251,191,36,.4);
}
.pup-desc {
  font-size: .8rem;
  color: #a8bdd0;
  margin: 0;
  line-height: 1.55;
}
.pup-stats-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}
.pup-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.pup-stat-l {
  font-size: .62rem;
  font-weight: 800;
  color: #7888a0;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.pup-stat-v {
  font-size: .95rem;
  font-weight: 800;
  color: #e8eef8;
  letter-spacing: -.15px;
}
.pup-stat-next .pup-stat-v {
  color: var(--pup-acc);
  text-shadow: 0 0 12px rgba(var(--pup-acc-rgb), .6);
}
.pup-stat-sep {
  color: #4b5a70;
  font-size: .85rem;
  font-weight: 700;
  margin-top: 12px;
  flex-shrink: 0;
}
.pup-card[data-maxed="true"] .pup-stat-next,
.pup-card[data-maxed="true"] .pup-stat-sep { display: none; }

/* Zone C+D: Progress + Action */
.pup-zone-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 90px;
}

/* Segments */
.pup-segs {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pup-seg {
  width: 22px;
  height: 9px;
  border-radius: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .35s, box-shadow .35s;
}
.pup-seg-on {
  background: var(--pup-acc);
  border-color: var(--pup-acc);
  box-shadow: 0 0 10px rgba(var(--pup-acc-rgb), .7);
  animation: segPop .4s cubic-bezier(.16,1,.3,1);
}
@keyframes segPop {
  from { transform: scaleX(.4); opacity: .4; }
  to   { transform: scaleX(1); opacity: 1; }
}
.pup-card[data-maxed="true"] .pup-seg-on {
  background: #fbbf24;
  border-color: #fbbf24;
  box-shadow: 0 0 10px rgba(251,191,36,.75);
}

/* ── Upgrade button (always clickable) ── */
.pup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 900;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
  position: relative;
}
/* Can afford — purple upgrade button */
.pup-btn.pup-btn-afford {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #9d5cf5 100%);
  color: #fff;
  box-shadow:
    0 4px 18px rgba(109,40,217,.55),
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.pup-btn.pup-btn-afford:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 7px 28px rgba(109,40,217,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.pup-btn.pup-btn-afford:active { transform: translateY(0) scale(.98); }
/* Can't afford — gold "watch video" button (still clickable!) */
.pup-btn.pup-btn-cant {
  background: linear-gradient(135deg, rgba(180,100,5,.35) 0%, rgba(120,65,3,.28) 100%);
  color: #fcd34d;
  border: 1.5px solid rgba(251,191,36,.5);
  box-shadow:
    0 3px 14px rgba(180,100,5,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow: 0 0 10px rgba(251,191,36,.5);
  cursor: pointer;
}
.pup-btn.pup-btn-cant:hover {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(135deg, rgba(180,100,5,.5) 0%, rgba(120,65,3,.42) 100%);
  border-color: rgba(251,191,36,.75);
  box-shadow: 0 6px 22px rgba(180,100,5,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.pup-btn.pup-btn-cant:active { transform: translateY(0) scale(.98); }
.pup-btn .coin-icon { width: 14px; height: 14px; animation: none; flex-shrink: 0; }

/* MAX badge */
.pup-max-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(245,158,11,.12));
  border: 1.5px solid rgba(251,191,36,.6);
  color: #fde68a;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(251,191,36,.25);
  text-shadow: 0 0 10px rgba(251,191,36,.5);
  animation: maxGlow 2.2s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes maxGlow {
  0%,100% { box-shadow: 0 0 14px rgba(251,191,36,.22); }
  50%     { box-shadow: 0 0 28px rgba(251,191,36,.55), 0 0 60px rgba(251,191,36,.1); }
}

/* Responsive */
@media (max-width: 520px) {
  .pup-card {
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 14px;
    padding: 16px 14px 14px 14px;
  }
  .pup-zone-action {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .pup-icon-ring { width: 46px; height: 46px; font-size: 1.4rem; border-radius: 13px; }
  .pup-summary { gap: 14px; padding: 10px 14px; }
  .pup-tab-title { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════════
   LIFETIME PASS — REWARD ROAD
   ══════════════════════════════════════════════════════════════ */

/* Panel: flex column, no default padding */
#shop-panel-lifetime.shop-panel        { padding: 0; }
#shop-panel-lifetime.shop-panel-active { display: flex; flex-direction: column; }

/* ── Header ────────────────────────────────────────────────── */
.lp-header {
  flex-shrink: 0;
  padding: 22px 32px 16px;
  background: linear-gradient(160deg, rgba(44,8,110,.38) 0%, rgba(14,4,40,.97) 100%);
  border-bottom: 1.5px solid rgba(139,92,246,.28);
  box-shadow: 0 6px 28px rgba(0,0,0,.5);
}
.lp-header-row {
  display: flex; align-items: center; gap: 28px; margin-bottom: 10px;
}
.lp-score-block { flex-shrink: 0; }
.lp-score-lbl {
  font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2.5px;
  color: #a78bfa; margin-bottom: 2px;
}
.lp-score-val {
  font-size: 2.5rem; font-weight: 900;
  color: #f0e8ff; letter-spacing: -2px; line-height: 1;
  text-shadow: 0 0 32px rgba(168,85,247,.65), 0 0 60px rgba(168,85,247,.2);
  font-variant-numeric: tabular-nums;
}
.lp-bar-block { flex: 1; min-width: 0; }
.lp-bar-title {
  font-size: .85rem; font-weight: 700; color: #ddd6fe; margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.lp-bar-track {
  flex: 1; height: 10px; background: rgba(255,255,255,.1);
  border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}
.lp-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9, #a855f7, #c084fc);
  box-shadow: 0 0 12px rgba(168,85,247,.6);
  transition: width .7s cubic-bezier(.16,1,.3,1);
}
.lp-bar-pct {
  flex-shrink: 0; font-size: .74rem; font-weight: 800;
  color: #c4b5fd; min-width: 34px; text-align: right;
}
.lp-bar-sub { font-size: .75rem; color: #7c6fa8; }
.lp-tagline { margin: 0; font-size: .77rem; color: #6b6898; line-height: 1.5; }

/* ── Road scroll wrapper ────────────────────────────────────── */
.lp-road-wrap {
  flex: 1; overflow-x: auto; overflow-y: visible;
  padding: 36px 32px 32px;
  scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.4) transparent;
}
.lp-road-wrap::-webkit-scrollbar { height: 6px; }
.lp-road-wrap::-webkit-scrollbar-track { background: transparent; }
.lp-road-wrap::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 3px; }
.lp-road {
  display: flex; align-items: stretch;
  min-width: max-content; gap: 0; padding-bottom: 8px;
}

/* ── Node ───────────────────────────────────────────────────── */
.lp-node {
  display: flex; flex-direction: column; align-items: center;
  width: 152px; flex-shrink: 0; cursor: pointer; position: relative;
}
.lp-node:focus { outline: none; }
.lp-node:focus-visible .lp-tile { outline: 2px solid var(--glow, rgba(168,85,247,.8)); outline-offset: 2px; }

/* Connector row: line — dot — line */
.lp-conn { display: flex; align-items: center; width: 100%; height: 52px; margin-bottom: 12px; }
.lp-line { flex: 1; height: 3px; background: rgba(255,255,255,.1); transition: background .4s; }
.lp-line.lp-line-edge   { background: transparent; }
.lp-line.lp-line-filled { background: linear-gradient(90deg, rgba(109,40,217,.65), rgba(168,85,247,.5)); }

/* Dot */
.lp-dot {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 50%; background: rgba(14,8,38,.95);
  border: 2.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.lp-dot-icon { font-size: 1.3rem; line-height: 1; }
.lp-claimed .lp-dot {
  background: rgba(10,36,20,.95); border-color: rgba(74,222,128,.6);
  box-shadow: 0 0 14px rgba(74,222,128,.4), 0 0 28px rgba(74,222,128,.18);
}
.lp-claimable .lp-dot,
.lp-current   .lp-dot {
  border-color: var(--glow, #a855f7);
  box-shadow: 0 0 20px var(--glow, rgba(168,85,247,.7)), 0 0 40px var(--glow, rgba(168,85,247,.28));
  animation: lpDotPulse 2s ease-in-out infinite;
}
.lp-claimable .lp-dot { animation-duration: 1.7s; }
@keyframes lpDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.lp-locked .lp-dot { opacity: .5; }
.lp-node:hover:not(.lp-claimed) .lp-dot { transform: scale(1.1); }

/* Green check badge */
.lp-dot-check {
  position: absolute; bottom: -3px; right: -3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #22c55e; color: #fff;
  font-size: .54rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(6,3,16,.9); box-shadow: 0 0 6px rgba(74,222,128,.55);
}

/* ── Reward tile ────────────────────────────────────────────── */
.lp-tile {
  width: 132px; padding: 12px 10px 14px;
  border-radius: 14px; border: 1.5px solid rgba(255,255,255,.1);
  background: linear-gradient(160deg, rgba(22,10,55,.97) 0%, rgba(10,5,26,.97) 100%);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s;
  position: relative; overflow: hidden;
  flex: 1; display: flex; flex-direction: column;
}
.lp-tile::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, var(--glow, rgba(168,85,247,.12)), transparent 72%);
  pointer-events: none; opacity: .65;
}
.lp-node:hover .lp-tile { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.5); }

.lp-r-common    .lp-tile { border-color: rgba(148,163,184,.24); }
.lp-r-rare      .lp-tile { border-color: rgba(56,189,248,.32); }
.lp-r-epic      .lp-tile { border-color: rgba(168,85,247,.4); }
.lp-r-legendary .lp-tile { border-color: rgba(251,191,36,.44); }
.lp-claimed .lp-tile {
  border-color: rgba(74,222,128,.28);
  background: linear-gradient(160deg, rgba(8,28,16,.97) 0%, rgba(5,16,10,.97) 100%);
}
.lp-claimable .lp-tile,
.lp-current   .lp-tile {
  border-color: var(--glow, rgba(168,85,247,.5));
  box-shadow: 0 0 20px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
}
.lp-locked .lp-tile { opacity: .68; }

/* Tile content */
.lp-tile-rarity {
  font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 5px;
}
.lp-r-common    .lp-tile-rarity { color: #94a3b8; }
.lp-r-rare      .lp-tile-rarity { color: #38bdf8; }
.lp-r-epic      .lp-tile-rarity { color: #c084fc; }
.lp-r-legendary .lp-tile-rarity { color: #fbbf24; }

.lp-tile-name {
  font-size: .9rem; font-weight: 800; color: #eee8ff; line-height: 1.2; margin-bottom: 4px;
}
.lp-claimed .lp-tile-name     { color: #bbf7d0; }
.lp-r-legendary .lp-tile-name { color: #fef3c7; }

.lp-tile-score { font-size: .68rem; font-weight: 700; color: #6a638c; margin-bottom: 5px; }
.lp-tile-desc  { font-size: .68rem; color: #7a7498; line-height: 1.4; margin-bottom: 9px; flex: 1; }
.lp-tile-action { min-height: 22px; display: flex; align-items: center; justify-content: center; }

/* State labels */
.lp-s-claimed { font-size: .68rem; font-weight: 800; color: #4ade80; }
.lp-s-locked  { font-size: .65rem; font-weight: 700; color: #4a4668; }

/* Claim button */
.lp-claim-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: none; border-radius: 999px; color: #fff;
  font-size: .7rem; font-weight: 800; padding: 6px 14px; cursor: pointer;
  box-shadow: 0 0 14px rgba(168,85,247,.55);
  transition: transform .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 4px;
}
.lp-claim-btn:hover  { transform: scale(1.08); box-shadow: 0 0 22px rgba(168,85,247,.75); }
.lp-claim-btn:active { transform: scale(.95); }

/* Tiny inline coin icon inside claim button */
.lp-coin-xs {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fef9c3 0%, #fde047 22%, #eab308 55%, #a16207 88%, #78350f 100%);
  box-shadow: 0 0 4px rgba(251,191,36,.5); flex-shrink: 0; vertical-align: middle;
}

/* Legendary gold claim button */
.lp-r-legendary .lp-claim-btn {
  background: linear-gradient(135deg, #92400e 0%, #fbbf24 50%, #b45309 100%);
  box-shadow: 0 0 14px rgba(251,191,36,.55); color: #1c1007;
}
.lp-r-legendary .lp-claim-btn:hover { box-shadow: 0 0 22px rgba(251,191,36,.75); }

/* Perf-low: strip road dot animation */
body.reduced-motion .lp-dot,
body.perf-low       .lp-dot { animation: none !important; }

/* ============================================================
   SKINS PICKER
   ============================================================ */
.skins-hint {
  font-size: .78rem; color: var(--text-muted);
  margin-bottom: 12px; line-height: 1.5;
}

/* -- Split preview + grid layout ------------------------- */
.shop-skin-split {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: flex-start;
}

/* Left panel: canvas + name + action buttons */
.shop-preview-panel {
  flex-shrink: 0;
  width: 166px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, rgba(139,92,246,.12) 0%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(168,85,247,.28);
  border-radius: var(--radius-lg);
  padding: 16px 10px 16px;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}

#skin-preview-canvas {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  display: block;
}

.preview-skin-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.preview-skin-name {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.2px;
}
.preview-skin-rarity {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: .75;
}
.preview-skin-rarity[data-rarity="rare"]      { color: #38bdf8; }
.preview-skin-rarity[data-rarity="epic"]      { color: #fbbf24; }
.preview-skin-rarity[data-rarity="legendary"] { color: #a78bfa; }

.preview-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.preview-actions .btn {
  width: 100%;
  justify-content: center;
  font-size: .78rem;
  padding: 7px 10px;
}
.preview-btn-disabled { opacity: .55; }

.btn-try {
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.35);
  color: var(--accent-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 7px 10px;
  transition: background .15s, border-color .15s, transform .12s cubic-bezier(.34,1.56,.64,1);
}
.btn-try:hover {
  background: rgba(168,85,247,.28);
  border-color: rgba(168,85,247,.65);
  transform: scale(1.04);
}
.btn-try:active { transform: scale(.92); }

/* Right panel: scrollable skin grid */
.shop-skin-grid-panel {
  flex: 1;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.shop-skin-grid-panel::-webkit-scrollbar { width: 4px; }
.shop-skin-grid-panel::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 2px; }
.shop-skin-grid-panel::-webkit-scrollbar-thumb { background: rgba(168,85,247,.35); border-radius: 2px; }

.shop-skin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

/* Dot indicators (hidden - grid replaces carousel dots) */
.skin-dots { display: none; }

/* -- Try Mode in-game banner ------------------------------- */
#try-mode-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(168,85,247,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(192,132,252,.55);
  border-radius: 20px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  pointer-events: none;
  z-index: 80;
  box-shadow: 0 2px 14px rgba(168,85,247,.55);
}
.try-mode-label { opacity: .85; }
.try-mode-cd    { font-size: .88rem; font-weight: 900; color: #fde047; }


.skin-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 8px 10px;
  background: linear-gradient(160deg, rgba(38,24,72,.96) 0%, rgba(24,14,52,.96) 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  color: var(--text); font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color .18s, background .18s, box-shadow .18s,
              transform .15s cubic-bezier(.34,1.56,.64,1);
}
.skin-btn:hover:not(:disabled) {
  background: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(168,85,247,.07) 100%);
  border-color: rgba(168,85,247,.40);
  box-shadow: 0 4px 16px rgba(124,58,237,.22);
  transform: translateY(-2px);
}
.skin-btn:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }
.skin-btn.skin-selected {
  border-color: var(--accent-light);
  background: linear-gradient(160deg, rgba(168,85,247,.22) 0%, rgba(124,58,237,.12) 100%);
  box-shadow: 0 0 0 2px var(--accent-light), 0 0 20px rgba(168,85,247,.38);
}
.skin-btn:disabled { cursor: not-allowed; }
/* Coin card: subtle gold tint */
.skin-btn.skin-coin-card {
  border-color: rgba(251,191,36,.28);
  background: linear-gradient(160deg, rgba(251,191,36,.07) 0%, rgba(234,179,8,.03) 100%);
}
.skin-btn.skin-coin-card:hover {
  border-color: rgba(251,191,36,.55);
  box-shadow: 0 4px 18px rgba(234,179,8,.22);
}
/* Rarity-based card borders & glow backgrounds — all skins, locked or not */
.skin-btn[data-rarity="rare"] {
  border-color: rgba(56,189,248,.48);
  background: radial-gradient(ellipse at 50% 28%, rgba(56,189,248,.22) 0%, transparent 55%),
              linear-gradient(160deg, rgba(10,48,72,.97) 0%, rgba(18,12,46,.97) 100%);
  box-shadow: 0 2px 14px rgba(56,189,248,.18);
}
.skin-btn[data-rarity="rare"]:hover {
  border-color: rgba(56,189,248,.8);
  box-shadow: 0 6px 26px rgba(56,189,248,.38);
}
.skin-btn[data-rarity="epic"] {
  border-color: rgba(251,191,36,.48);
  background: radial-gradient(ellipse at 50% 28%, rgba(251,191,36,.22) 0%, transparent 55%),
              linear-gradient(160deg, rgba(58,36,6,.97) 0%, rgba(24,14,52,.97) 100%);
  box-shadow: 0 2px 14px rgba(251,191,36,.18);
}
.skin-btn[data-rarity="epic"]:hover {
  border-color: rgba(251,191,36,.8);
  box-shadow: 0 6px 26px rgba(251,191,36,.38);
}
.skin-btn[data-rarity="legendary"] {
  border-color: rgba(192,132,252,.58);
  background: radial-gradient(ellipse at 50% 28%, rgba(192,132,252,.3) 0%, transparent 55%),
              linear-gradient(160deg, rgba(56,18,96,.97) 0%, rgba(34,10,72,.97) 100%);
  box-shadow: 0 2px 18px rgba(168,85,247,.3), inset 0 1px 0 rgba(255,255,255,.08);
  animation: legendaryCardPulse 2.8s ease-in-out infinite;
}
.skin-btn[data-rarity="legendary"]:hover {
  border-color: rgba(216,180,254,.9);
  box-shadow: 0 8px 32px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
@keyframes legendaryCardPulse {
  0%,100% { box-shadow: 0 2px 18px rgba(168,85,247,.3); }
  50%     { box-shadow: 0 4px 32px rgba(168,85,247,.6), 0 0 60px rgba(168,85,247,.12); }
}

.skin-preview {
  width: 40px; height: 40px; border-radius: 50%; display: block; flex-shrink: 0;
  background: radial-gradient(circle at 33% 33%, var(--skin-c1, #c084fc), var(--skin-c2, #a855f7));
  box-shadow: 0 0 16px var(--skin-c2, #a855f7), 0 0 32px rgba(168,85,247,.2), 0 0 4px rgba(255,255,255,.12);
  position: relative;
}
.skin-btn.skin-locked { cursor: pointer; }
.skin-btn.skin-locked .skin-preview { opacity: 0.72; filter: saturate(0.7); }

/* -- Rarity / effect preview animations --------------------- */
@keyframes skinPulse {
  0%, 100% { box-shadow: 0 0 8px 1px var(--skin-c2, #06b6d4); }
  50%       { box-shadow: 0 0 20px 5px var(--skin-c2, #06b6d4); }
}
@keyframes skinFlicker {
  0%,100% { box-shadow: 0 0 10px 2px var(--skin-c2, #ef4444); opacity: 1; }
  30%     { box-shadow: 0 0 22px 7px #f97316; opacity: .88; }
  55%     { box-shadow: 0 0 8px 1px var(--skin-c2, #ef4444); opacity: .95; }
  75%     { box-shadow: 0 0 26px 8px #fbbf24; opacity: .85; }
}
@keyframes skinShimmer {
  0%,100% { box-shadow: 0 0 10px 2px var(--skin-c2, #38bdf8); }
  50%     { box-shadow: 0 0 18px 5px var(--skin-c2, #38bdf8), 0 0 28px 2px #fff; }
}
@keyframes skinAura {
  0%,100% { box-shadow: 0 0 12px 3px var(--skin-c2, #a855f7); transform: scale(1); }
  50%     { box-shadow: 0 0 26px 8px var(--skin-c2, #a855f7), 0 0 8px 2px var(--skin-c1,#ede9fe) inset; transform: scale(1.07); }
}
@keyframes skinElectric {
  0%,100% { box-shadow: 0 0 10px 2px #38bdf8; opacity: 1; }
  20%     { box-shadow: 0 0 28px 8px #7dd3fc, 0 0 6px 2px #fff; opacity: .92; }
  40%     { box-shadow: 0 0 8px 1px #0284c7; opacity: 1; }
  65%     { box-shadow: 0 0 32px 10px #38bdf8, 0 0 8px 3px #e0f2fe; opacity: .88; }
  80%     { box-shadow: 0 0 10px 2px #38bdf8; opacity: .97; }
}
@keyframes skinInferno {
  0%,100% { box-shadow: 0 0 12px 3px #f97316; }
  25%     { box-shadow: 0 0 24px 8px #fbbf24, 0 0 10px 2px #ef4444; }
  50%     { box-shadow: 0 0 18px 5px #dc2626; }
  75%     { box-shadow: 0 0 30px 9px #f97316, 0 0 12px 3px #fbbf24; }
}
@keyframes skinPrism {
  0%   { box-shadow: 0 0 14px 4px #f43f5e; filter: hue-rotate(0deg); }
  17%  { box-shadow: 0 0 18px 5px #f97316; }
  33%  { box-shadow: 0 0 18px 5px #eab308; }
  50%  { box-shadow: 0 0 18px 5px #22c55e; filter: hue-rotate(180deg); }
  67%  { box-shadow: 0 0 18px 5px #06b6d4; }
  83%  { box-shadow: 0 0 18px 5px #8b5cf6; }
  100% { box-shadow: 0 0 14px 4px #f43f5e; filter: hue-rotate(360deg); }
}
@keyframes skinGalaxy {
  0%,100% { box-shadow: 0 0 14px 4px #818cf8; transform: scale(1); }
  30%     { box-shadow: 0 0 26px 8px #a5b4fc, 0 0 40px 6px #312e81; transform: scale(1.04); }
  60%     { box-shadow: 0 0 20px 6px #818cf8; transform: scale(1.02); }
}
@keyframes skinVoid {
  0%,100% { box-shadow: 0 0 16px 5px #c084fc, 0 0 4px 2px #000 inset; transform: scale(1); }
  50%     { box-shadow: 0 0 36px 12px #c084fc, 0 0 6px 3px #000 inset; transform: scale(1.09); }
}

/* classic skin: default glow only, no animation */
.skin-btn[data-skin="classic"] .skin-preview { animation: none; }

/* Animations on all skins, locked or not */
.skin-btn[data-skin="neon"]     .skin-preview { animation: skinPulse    1.8s ease-in-out infinite; }
.skin-btn[data-skin="ice"]      .skin-preview { animation: skinShimmer  2.4s ease-in-out infinite; }
.skin-btn[data-skin="lava"]     .skin-preview { animation: skinFlicker  1.1s ease-in-out infinite; }
.skin-btn[data-skin="gold"]     .skin-preview { animation: skinShimmer  2.2s ease-in-out infinite; }
.skin-btn[data-skin="void"]     .skin-preview { animation: skinVoid     2.0s ease-in-out infinite; }
.skin-btn[data-skin="crimson"]  .skin-preview { animation: skinFlicker  1.0s ease-in-out infinite; }
.skin-btn[data-skin="galaxy"]   .skin-preview { animation: skinGalaxy   2.2s ease-in-out infinite; }
.skin-btn[data-skin="electric"] .skin-preview { animation: skinElectric 0.9s ease-in-out infinite; }
.skin-btn[data-skin="inferno"]  .skin-preview { animation: skinInferno  1.0s ease-in-out infinite; }
.skin-btn[data-skin="prism"]    .skin-preview { animation: skinPrism    2.4s linear     infinite; }

/* Pause skin preview animations for cards not hovered or selected —
   avoids 11+ simultaneous box-shadow/filter animations burning GPU */
.skin-btn:not(.skin-selected):not(:hover) .skin-preview {
  animation-play-state: paused;
}

/* -- Inner-effect previews on skin cards -------------------------
   .skin-preview gets overflow:hidden so ::before stays within the circle */
.skin-btn .skin-preview { overflow: hidden; }

/* Shimmer streak - Ice, Gold */
@keyframes previewShimmer {
  0%   { transform: translateX(-140%) skewX(-12deg); }
  100% { transform: translateX(260%)  skewX(-12deg); }
}
.skin-btn[data-skin="ice"]  .skin-preview::before,
.skin-btn[data-skin="gold"] .skin-preview::before {
  content: ''; position: absolute;
  top: -50%; left: 0; width: 38%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: previewShimmer 2.4s ease-in-out infinite;
}

/* Expanding pulse ring - Neon */
@keyframes previewPulseRing {
  0%   { transform: scale(.08); opacity: .50; }
  100% { transform: scale(.95); opacity: 0;   }
}
.skin-btn[data-skin="neon"] .skin-preview::before {
  content: ''; position: absolute;
  inset: 0; border-radius: 50%;
  border: 2px solid rgba(6,182,212,.75);
  background: transparent;
  animation: previewPulseRing 1.1s ease-out infinite;
}

/* Drifting magma blob - Lava, Crimson */
@keyframes previewLavaBlob {
  0%   { transform: translate(-18%,-14%); }
  33%  { transform: translate( 16%, 10%); }
  66%  { transform: translate( -8%, 18%); }
  100% { transform: translate(-18%,-14%); }
}
.skin-btn[data-skin="lava"]    .skin-preview::before,
.skin-btn[data-skin="crimson"] .skin-preview::before {
  content: ''; position: absolute;
  width: 72%; height: 72%; top: 14%; left: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,224,71,.52) 0%, rgba(249,115,22,.28) 40%, transparent 80%);
  animation: previewLavaBlob 2.5s ease-in-out infinite;
}

/* Electric center flash - Electric */
@keyframes previewElectricFlash {
  0%,60%,100% { opacity: 0;    transform: scale(.35); }
  65%         { opacity: .55;  transform: scale(1.0); }
  75%         { opacity: .10;  transform: scale(.65); }
}
.skin-btn[data-skin="electric"] .skin-preview::before {
  content: ''; position: absolute;
  inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,242,254,.72) 0%, rgba(56,189,248,.24) 45%, transparent 80%);
  animation: previewElectricFlash 0.9s ease-in-out infinite;
}

/* Orbiting hot-spot - Inferno */
@keyframes previewInferno {
  0%   { transform: translate(-22%,-18%); }
  25%  { transform: translate( 18%,-12%); }
  50%  { transform: translate( 14%, 18%); }
  75%  { transform: translate(-16%, 14%); }
  100% { transform: translate(-22%,-18%); }
}
.skin-btn[data-skin="inferno"] .skin-preview::before {
  content: ''; position: absolute;
  width: 74%; height: 74%; top: 13%; left: 13%; border-radius: 50%;
  background: radial-gradient(circle, rgba(254,240,138,.56) 0%, rgba(249,115,22,.30) 40%, transparent 80%);
  animation: previewInferno 2.2s ease-in-out infinite;
}

/* Rotating rainbow split - Prism */
@keyframes previewPrismRotate {
  0%   { transform: rotate(0deg);   filter: hue-rotate(0deg); }
  100% { transform: rotate(360deg); filter: hue-rotate(360deg); }
}
.skin-btn[data-skin="prism"] .skin-preview::before {
  content: ''; position: absolute;
  inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgba(244,63,94,.32) 0%, rgba(251,191,36,.08) 50%, rgba(139,92,246,.32) 100%);
  animation: previewPrismRotate 2.4s linear infinite;
}

/* Dark vortex - Void */
@keyframes previewVoid {
  0%   { transform: translate(-22%,-18%) scale(.60); opacity: .80; }
  50%  { transform: translate( 18%, 16%) scale(.68); opacity: .60; }
  100% { transform: translate(-22%,-18%) scale(.60); opacity: .80; }
}
.skin-btn[data-skin="void"] .skin-preview::before {
  content: ''; position: absolute;
  width: 72%; height: 72%; top: 14%; left: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.80) 0%, rgba(59,7,100,.45) 50%, transparent 100%);
  animation: previewVoid 2.4s ease-in-out infinite;
}

/* Nebula drift - Galaxy */
@keyframes previewGalaxy {
  0%,100% { transform: translate(-14%,-11%) scale(.78); opacity: .72; }
  50%     { transform: translate( 14%, 10%) scale(.82); opacity: .88; }
}
.skin-btn[data-skin="galaxy"] .skin-preview::before {
  content: ''; position: absolute;
  width: 82%; height: 82%; top: 9%; left: 9%; border-radius: 50%;
  background: radial-gradient(circle, rgba(129,140,248,.42) 0%, rgba(99,102,241,.10) 60%, transparent 100%);
  animation: previewGalaxy 2.8s ease-in-out infinite;
}

.skin-rarity {
  font-size: .68rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  line-height: 1.5;
}
.skin-rarity[data-rarity="common"]    { background: rgba(255,255,255,.14); color: #d1d5db; border: 1px solid rgba(255,255,255,.22); }
.skin-rarity[data-rarity="rare"]      { background: rgba(56,189,248,.22);  color: #7dd3fc; border: 1px solid rgba(56,189,248,.38); }
.skin-rarity[data-rarity="epic"]      { background: rgba(251,191,36,.22);  color: #fde68a; border: 1px solid rgba(251,191,36,.40); }
.skin-rarity[data-rarity="legendary"] { background: rgba(192,132,252,.26); color: #e9d5ff; border: 1px solid rgba(192,132,252,.48); text-shadow: 0 0 10px rgba(168,85,247,.9); }

.skin-name     { font-size: .80rem; font-weight: 700; text-align: center; color: #ffffff; }
.skin-progress { font-size: .68rem; color: #c8d8e8; text-align: center; }
.skin-btn.skin-selected .skin-progress { color: var(--accent-light); font-weight: 700; }
.skin-btn.skin-coin-card:not(.skin-locked) .skin-progress { color: #fde68a; font-weight: 700; }

/* Progress bar inside locked skin cards */
.skin-bar-track {
  width: 100%; height: 3px;
  background: rgba(255,255,255,.10);
  border-radius: 2px; overflow: hidden;
  margin-top: 1px;
}
.skin-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  transition: width .4s ease;
}

/* Skin purchase confirmation dialog */
.skin-buy-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index: 10000;
}
.skin-buy-dialog {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: linear-gradient(160deg, #1f1c3a 0%, var(--card) 100%);
  border: 1px solid rgba(168,85,247,.52);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  width: min(340px, 90vw);
  box-shadow: 0 16px 60px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.07);
  text-align: center;
  transition: border-color .2s;
}
.skin-buy-dialog[data-state="broke"] {
  border-color: rgba(248,113,113,.45);
}
.sbd-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  margin: 0 0 14px;
}
.sbd-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--card-border);
  margin-bottom: 6px;
}
.sbd-balance-label {
  font-size: .76rem; color: var(--text-muted);
}
.sbd-balance-amount {
  display: flex; align-items: center; gap: 7px;
}
.sbd-balance-amount .coin-icon {
  width: 18px; height: 18px;
  animation: none;
  box-shadow: 0 0 5px rgba(251,191,36,.35), 0 1px 3px rgba(0,0,0,.30),
              inset 0 1px 1px rgba(255,255,255,.60);
}
.sbd-balance {
  font-size: .92rem; font-weight: 800; color: var(--gold);
}
.sbd-nocoins {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.22);
}
.sbd-shortage {
  font-size: .82rem; color: #f87171; font-weight: 700;
  margin: 0 0 5px;
}
.sbd-encourage {
  font-size: .75rem; color: var(--text-muted);
  margin: 0; line-height: 1.45;
}
.sbd-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 20px;
}
.sbd-actions .btn { flex: 1; justify-content: center; }
#sbd-confirm:disabled { opacity: .35; cursor: not-allowed; }

/* Skin unlock toast */
@keyframes sutSlideUp {
  from { opacity: 0; transform: translateY(18px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.skin-unlock-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 12px;
  background: rgba(10,6,24,.92);
  border: 1.5px solid rgba(234,179,8,.55);
  box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 16px rgba(234,179,8,.2);
  backdrop-filter: blur(12px);
  color: var(--text); font-size: .84rem;
  z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.skin-unlock-toast.sut-show {
  animation: sutSlideUp .35s ease forwards;
}
.sut-icon { font-size: 1.2rem; }
.sut-text strong { color: #fff; }
.sut-rarity {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 2px 6px; border-radius: 4px;
}
.sut-rarity[data-rarity="common"] { background: rgba(255,255,255,.12); color: #9ca3af; }
.sut-rarity[data-rarity="rare"]   { background: rgba(56,189,248,.18);  color: #38bdf8; }
.sut-rarity[data-rarity="epic"]   { background: rgba(234,179,8,.20);   color: #fbbf24; }

/* Coin-purchasable skin cards */
.skin-btn.skin-coin-card {
  cursor: pointer;
  border-style: dashed;
  border-color: rgba(234,179,8,.3);
}
.skin-btn.skin-coin-card:not(.skin-selected):not(.skin-unaffordable):hover {
  border-color: rgba(234,179,8,.7);
  background: rgba(234,179,8,.08);
}
.skin-btn.skin-coin-card.skin-unaffordable { opacity: .45; cursor: not-allowed; }
.skin-btn.skin-coin-card.skin-selected {
  border-style: solid;
  border-color: var(--accent-light);
}

.skin-coin-tag {
  font-size: .7rem; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(234,179,8,.18);
  color: #fbbf24; letter-spacing: .02em;
}
.skin-coin-tag.coin-tag-affordable { color: #fde68a; background: rgba(234,179,8,.28); }

/* ============================================================
   GAME SCREEN - HUD
   ============================================================ */
#hud {
  display: flex; align-items: stretch;
  background: rgba(6,6,18,.94);
  border-bottom: 1px solid rgba(255,255,255,.07);
  height: var(--hud-h);
  flex-shrink: 0; z-index: 10;
  backdrop-filter: blur(8px);
  position: relative;
}

.hud-block {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px; padding: 0 12px;
}
.hud-score, .hud-right { min-width: 78px; }

.hud-label {
  font-size: .54rem; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--text-muted);
}
.hud-tiny-label {
  font-size: .52rem; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--text-muted);
  transition: color .3s;
}
.hud-value {
  font-size: 1.5rem; font-weight: 900;
  color: var(--text); letter-spacing: -1px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hud-combo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 132px;
  margin-top: 3px;
  padding: 6px 8px 7px;
  border-radius: 12px;
  color: var(--warning);
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.18);
  transition: transform .15s ease, color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}

.combo-main-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.combo-kicker {
  font-size: .54rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.72);
}

.combo-main-value {
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

.combo-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .54rem;
  font-weight: 700;
  color: rgba(255,255,255,.74);
}

.combo-meter-track {
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

.combo-meter-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 55%, #fef08a 100%);
  box-shadow: 0 0 10px rgba(251,191,36,.45);
  transition: width .12s linear;
}

@keyframes combo-pop {
  0%   { transform: scale(1.55); opacity: .75; }
  100% { transform: scale(1);    opacity: 1;   }
}
.hud-combo.combo-pop { animation: combo-pop .22s ease-out forwards; }

.combo-idle {
  color: #f59e0b;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.16);
}

.combo-t2 {
  color: #fb923c;
  background: rgba(251,146,60,.20);
  border-color: rgba(251,146,60,.24);
}

.combo-t3 {
  color: #f97316;
  background: rgba(249,115,22,.24);
  border-color: rgba(249,115,22,.30);
  box-shadow: 0 0 18px rgba(249,115,22,.16);
}

.combo-t4 {
  color: var(--gold);
  background: rgba(251,191,36,.24);
  border-color: rgba(251,191,36,.30);
  box-shadow: 0 0 22px rgba(251,191,36,.18);
  text-shadow: 0 0 10px rgba(251,191,36,.65);
}

/* Centre forbidden block */
.hud-center {
  flex: 1; min-width: 0;
  border-left:  1px solid rgba(255,255,255,.07);
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 6px 14px 5px;
  gap: 3px; overflow: hidden;
  transition: background .3s;
}

.forbidden-display { display: flex; align-items: center; gap: 8px; }

.forbidden-swatches { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.forbidden-swatch {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.3);
  display: inline-block; flex-shrink: 0;
  transition: background .25s;
}
.swatch-next {
  width: 18px; height: 18px;
  border-radius: 4px; opacity: 0.9;
  border-width: 1.5px;
}
.forbidden-arrow {
  color: var(--text-muted); font-size: .8rem; flex-shrink: 0;
}
.forbidden-arrow[hidden], .swatch-next[hidden] { display: none; }
.dd-plus { color: #fff; font-weight: 700; font-size: 13px; line-height: 1; opacity: .85; flex-shrink: 0; }
#dd-swatch[hidden], .dd-plus[hidden] { display: none; }

.forbidden-name {
  font-size: 1rem; font-weight: 800; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Countdown timer bar */
.timer-bar-track {
  width: 100%; height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden;
  margin-top: 4px;
}
.timer-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
  transition: width .15s linear, background .3s ease;
}
/* Urgent pulse on timer bar when < 1 s remaining */
.hud-center.warn-1 .timer-bar-fill  { animation: timerPulse .18s ease-in-out infinite alternate; }

/* Warning state classes applied to #hud-center */
.hud-center.warn-2 .timer-bar-fill  { background: #f59e0b; }
.hud-center.warn-1 .timer-bar-fill  { background: #ef4444; }
.hud-center.warn-2                  { background: rgba(245,158,11,.07); }
.hud-center.warn-1                  { background: rgba(239,68,68,.1); animation: hudFlash .18s ease-in-out infinite alternate; }
.hud-center.warn-2 .hud-tiny-label  { color: #f59e0b; }
.hud-center.warn-1 .hud-tiny-label  { color: #ef4444; }

@keyframes hudFlash {
  from { background: rgba(239,68,68,.07); }
  to   { background: rgba(239,68,68,.18); }
}

@keyframes timerPulse {
  from { opacity: 1; }
  to   { opacity: 0.35; }
}

/* Right HUD */
.hud-right { align-items: flex-end; }

/* ---- Power-up status pill ---- */
#powerup-status {
  position: absolute;
  top: calc(var(--hud-h) + 8px); right: 10px;
  background: rgba(6,6,18,.92);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: .82rem; font-weight: 700;
  z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  pointer-events: none; min-width: 110px;
}
#powerup-status[hidden] { display: none; }
.pu-top { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

#powerup-duration-bar-wrap {
  width: 100%; height: 3px;
  background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden;
}
#powerup-duration-bar {
  height: 100%; background: var(--gold); border-radius: 2px;
  transition: width .2s linear;
}
#powerup-duration-bar-wrap[hidden] { display: none; }

/* ============================================================
   CANVAS
   ============================================================ */
#game-canvas {
  flex: 1; display: block; width: 100%;
  min-height: 0; touch-action: none; cursor: none; outline: none;
}

/* -- Forbidden color change: border flash overlay ------------ */
#color-flash-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 18; /* below pause/gameover overlays */
  border: 0px solid var(--flash-color, transparent);
  border-radius: 0;
  opacity: 0;
  box-shadow: inset 0 0 0 0 var(--flash-color, transparent);
}
#color-flash-overlay.flash-active {
  animation: colorFlash 0.4s ease-out forwards;
}
@keyframes colorFlash {
  0%   { opacity: 1; border-width: 8px;  box-shadow: inset 0 0 60px var(--flash-color), 0 0 40px var(--flash-color); }
  60%  { opacity: 0.7; border-width: 5px; }
  100% { opacity: 0; border-width: 0;   box-shadow: inset 0 0 0 transparent; }
}

/* Combo tier 4 extra pulse ring on HUD text */
.combo-t4 { animation: combo-t4-pulse 0.8s ease-in-out infinite alternate; }
@keyframes combo-t4-pulse {
  from { text-shadow: 0 0 6px rgba(251,191,36,.50); }
  to   { text-shadow: 0 0 18px rgba(251,191,36,.95), 0 0 32px rgba(251,120,0,.45); }
}

/* ============================================================
   TOUCH CONTROLS - floating pause button (mobile only)
   ============================================================ */
#touch-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  -webkit-user-select: none; user-select: none;
}

#touch-pause {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .50);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--text); font-size: 1.1rem;
  cursor: pointer; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .1s, transform .1s;
  -webkit-touch-callout: none;
}
#touch-pause:active {
  background: rgba(168,85,247,.55);
  transform: scale(.92);
}
#touch-pause:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

/* Hide on desktop pointer devices */
@media (min-width: 768px) and (hover: hover) {
  #touch-controls { display: none !important; }
}

/* ============================================================
   GAME OVERLAYS (pause, game over)
   ============================================================ */
/* -- Mini Run Goal Bar ------------------------------------ */
#run-goal-bar {
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 5px 12px 5px 10px;
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.82);
  pointer-events: none; z-index: 20;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: opacity .25s;
}
#run-goal-bar[hidden] { display: none; }
#run-goal-bar.run-goal-done { border-color: rgba(52,211,153,.55); color: #86efac; }
.run-goal-icon { font-size: .85rem; }
.run-goal-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.run-goal-track {
  width: 72px; height: 5px;
  background: rgba(255,255,255,.12);
  border-radius: 4px; overflow: hidden; flex-shrink: 0;
}
.run-goal-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #a855f7, #06b6d4);
  border-radius: 4px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
#run-goal-bar.run-goal-done .run-goal-fill { background: #34d399; width: 100% !important; }
.run-goal-pct { font-size: .68rem; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }

/* -- Game Over: Coin Breakdown ------------------------------- */
.go-coins-breakdown {
  display: grid; grid-template-columns: 1fr auto;
  gap: 3px 10px;
  font-size: .78rem;
  padding: 8px 12px;
  background: rgba(253,224,71,.06);
  border: 1px solid rgba(253,224,71,.14);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-align: left;
}
.go-coins-breakdown:empty { display: none; }
.go-coins-breakdown span:nth-child(even) { text-align: right; font-weight: 700; color: var(--gold); }

/* -- Game Over: Lifetime Progress ---------------------------- */
.go-lifetime-section {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px;
  background: rgba(168,85,247,.06);
  border: 1px solid rgba(168,85,247,.18);
  border-radius: var(--radius-sm);
}
.go-lifetime-header {
  display: flex; justify-content: space-between; align-items: center;
}
.go-lifetime-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--text-muted);
}
.go-lifetime-score {
  font-size: .85rem; font-weight: 800; color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}
.go-lifetime-track {
  height: 7px; background: rgba(255,255,255,.09);
  border-radius: 4px; overflow: hidden;
}
.go-lifetime-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 4px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.go-lifetime-next {
  font-size: .72rem; color: var(--text-muted);
  margin: 0; text-align: center;
}

/* -- Game Overlay (below) ----------------------------------- */
.game-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.86);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.game-overlay[hidden] { display: none; }

.overlay-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center; max-width: 360px; width: 92%;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 12px;
}
.overlay-icon { display: none; }
#gameover-title { animation: gameoverPop .4s .05s cubic-bezier(.34,1.56,.64,1) both; }
.overlay-box h2 { font-size: 1.9rem; font-weight: 900; }
.overlay-hint { color: var(--text-muted); font-size: .86rem; margin-top: -4px; }
.overlay-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* Game over specific */
.gameover-box  { max-width: 380px; }
.gameover-icon { animation: gameoverPop .4s cubic-bezier(.34,1.56,.64,1) both; }

/* Contextual death message */
.death-message {
  font-size: .95rem; font-weight: 700;
  color: var(--text-muted);
  min-height: 1.3em;
  opacity: 0;
}
.death-message.death-msg-in {
  animation: deathMsgFade .45s .08s ease both;
  opacity: 1;
}
@keyframes deathMsgFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .death-message.death-msg-in { animation: none; opacity: 1; }
}

@keyframes gameoverPop {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.score-summary {
  background: rgba(255,255,255,.04);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
  text-align: left;
}
.score-row {
  display: flex; align-items: center;
  justify-content: space-between; font-size: .94rem;
}
.score-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.score-final-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.score-big {
  font-size: 2.8rem; font-weight: 900;
  color: var(--accent-light); letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(168,85,247,.45);
}
.score-divider { height: 1px; background: var(--card-border); margin: 1px 0; }

.gameover-coins-val {
  color: var(--gold);
  font-weight: 800;
}

.new-best-badge {
  background: linear-gradient(135deg, rgba(168,85,247,.20), rgba(124,58,237,.08));
  border: 1px solid rgba(168,85,247,.45);
  border-radius: var(--radius-sm);
  color: var(--accent-light); font-weight: 800; font-size: .8rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 9px 20px;
  animation: badgePop .5s .15s cubic-bezier(.34,1.56,.64,1) both;
}
.new-best-badge[hidden] { display: none; }

/* Share row */
.share-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 10px;
}
.btn-share {
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(99,102,241,.45);
  color: #c7d2fe;
  font-size: .88rem; font-weight: 700;
  padding: 8px 18px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .18s, transform .12s;
}
.btn-share:hover  { background: rgba(99,102,241,.32); }
.btn-share:active { transform: scale(.96); }
.share-copied {
  font-size: .82rem; font-weight: 700;
  color: #86efac; /* green-300 */
  animation: shareCopiedIn .25s ease both;
}
.share-copied[hidden] { display: none; }
@keyframes shareCopiedIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes badgePop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ============================================================
   RESPONSIVE - shorter screens (reduce HUD height)
   ============================================================ */
@media (max-height: 620px) {
  :root { --hud-h: 52px; }
  .hud-value       { font-size: 1.2rem; }
  .forbidden-name  { font-size: .88rem; }
  .forbidden-swatch { width: 18px; height: 18px; }
}

/* ---- Bottom-sheet modals on mobile ---- */
@media (max-width: 600px) {
  .modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92dvh;
    width: 100%;
    max-width: 100%;
    padding: 22px 18px 32px;
  }
  .settings-panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92dvh;
    max-width: 100%;
  }
  .spanel-header { padding: 18px 18px 14px; }
  .settings-panel section { padding: 16px 18px; }
  .settings-panel > .btn { margin: 12px 18px 20px; width: calc(100% - 36px); }
  /* Buy confirm: bottom sheet on mobile */
  .skin-buy-dialog {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 24px 36px;
  }
  /* Shop coin header: stack on narrow screens */
  .shop-coin-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .shop-coin-hint { text-align: left; }
}

/* ---- Narrow screens ---- */
@media (max-width: 480px) {
  .home-inner  { padding: 24px 14px 40px; gap: 12px; }
  .card        { padding: 14px; }
  .modal-box   { padding: 20px 14px 28px; }
  .btn-large   { font-size: 1.05rem; padding: 13px 20px; min-height: 52px; }
  .overlay-box { padding: 22px 16px; gap: 10px; }
  .hud-score, .hud-right { min-width: 60px; padding: 0 8px; }
  .hud-value   { font-size: 1.25rem; }
  .score-big   { font-size: 2.2rem; }
  /* HUD center: less padding so forbidden name has more room */
  .hud-center  { padding: 4px 8px 4px; }
  .forbidden-name { font-size: .88rem; }
  .forbidden-swatch { width: 20px; height: 20px; border-radius: 4px; }
  /* Overlay boxes: full width */
  .overlay-box { width: 96%; }
  /* Power-up pill smaller */
  #powerup-status { font-size: .72rem; min-width: 90px; padding: 5px 8px; right: 6px; }
  /* Mission items slightly more compact */
  .mission-item { padding: 9px 10px; }
  .mission-label { font-size: .82rem; }
  /* Game title on home: ensure it isn't cut */
  .game-title { letter-spacing: 2px; }
  .game-subtitle { font-size: .88rem; margin-bottom: 10px; }
  .home-highscore { padding: 8px 16px; }
  .home-lifetime-card { padding: 12px 14px; }
}

@media (max-width: 360px) {
  .game-title { font-size: 2.4rem; }
  .hud-score, .hud-right { min-width: 52px; padding: 0 6px; }
  .hud-value { font-size: 1.1rem; }
  .forbidden-name { font-size: .78rem; }
}

/* ---- Landscape mobile (short viewport) ---- */
@media (max-height: 500px) and (max-width: 900px) {
  :root { --hud-h: 48px; }
  .hud-value       { font-size: 1.05rem; }
  .forbidden-name  { font-size: .78rem; }
  .forbidden-swatch { width: 16px; height: 16px; }
  #touch-controls  { top: 8px; right: 8px; }
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(12,5,30,.97) 0%, rgba(6,3,18,.97) 100%);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s, transform .15s;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.stat-item:hover {
  border-color: rgba(168,85,247,.32);
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.stat-icon  { display: none; }
.stat-label {
  flex: 1;
  font-size: .83rem;
  color: #b0c8e0;
  font-weight: 600;
}
.stat-value {
  font-weight: 900;
  font-size: 1.05rem;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
  text-shadow: 0 0 12px rgba(168,85,247,.3);
}

/* ============================================================
   MISSIONS / CHALLENGES
   ============================================================ */
.missions-list {
  display: flex; flex-direction: column; gap: 12px;
}
.mission-item {
  background: linear-gradient(160deg, rgba(12,5,30,.97) 0%, rgba(7,3,20,.97) 100%);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.mission-item:hover {
  border-color: rgba(168,85,247,.32);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.mission-item.mission-done {
  border-color: rgba(74,222,128,.35);
  background: linear-gradient(160deg, rgba(74,222,128,.08) 0%, rgba(0,0,0,.05) 100%);
}
.mission-item.mission-completed {
  border-color: rgba(251,191,36,.52);
  background: linear-gradient(160deg, rgba(251,191,36,.1) 0%, rgba(234,179,8,.03) 100%);
  box-shadow: 0 0 18px rgba(251,191,36,.12);
}
@keyframes missionClaimFlash {
  0%,100% { box-shadow: none; }
  30%     { box-shadow: 0 0 0 3px rgba(251,191,36,.55), 0 4px 20px rgba(251,191,36,.28); }
}
.mission-item.mission-claim-flash {
  animation: missionClaimFlash .7s ease;
}
.mission-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.mission-label {
  font-size: .9rem; font-weight: 800; color: #ffffff;
}
.mission-item.mission-done .mission-label { color: #6ee7b7; }
.mission-item.mission-completed .mission-label { color: #fde68a; }

.mission-meta {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.mission-reward {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 800; color: #fde68a;
  background: rgba(234,179,8,.2); border-radius: 6px;
  padding: 4px 9px;
  box-shadow: 0 0 8px rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.25);
}
.mission-diff {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; padding: 3px 8px; border-radius: 6px;
}
.mission-diff-easy   { background: rgba(74,222,128,.2);  color: #6ee7b7;  border: 1px solid rgba(74,222,128,.25); }
.mission-diff-medium { background: rgba(251,191,36,.2);  color: #fcd34d;  border: 1px solid rgba(251,191,36,.3);  }
.mission-diff-hard   { background: rgba(239,68,68,.2);   color: #fca5a5;  border: 1px solid rgba(239,68,68,.3);   }

.mission-desc {
  font-size: .8rem; color: #a4b8d0;
  margin: 5px 0 8px; line-height: 1.5;
}
.mission-item.mission-done .mission-desc { margin-bottom: 0; }

.mission-footer {
  display: flex; align-items: center; gap: 9px;
}
.mission-progress {
  font-size: .72rem; font-weight: 700; color: #8ca0b4;
  white-space: nowrap; flex-shrink: 0;
}
.mission-bar-track {
  flex: 1; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.1); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.mission-bar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-light), #e879f9);
  transition: width .5s cubic-bezier(.16,1,.3,1);
}

/* Claim button */
.mission-claim-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 9px;
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(234,179,8,.08));
  border: 1px solid rgba(251,191,36,.55);
  border-radius: var(--radius-sm);
  color: #fde68a;
  font-size: .82rem; font-weight: 700;
  padding: 8px 15px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s;
  box-shadow: 0 0 12px rgba(251,191,36,.15);
}
.mission-claim-btn:hover {
  background: linear-gradient(135deg, rgba(251,191,36,.34), rgba(234,179,8,.18));
  border-color: rgba(251,191,36,.8);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(251,191,36,.25);
}
.mission-claim-btn:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
.mission-claim-btn .coin-icon { animation: none; }

/* Claimed label */
.mission-claimed-label {
  font-size: .76rem; color: #6ee7b7; font-weight: 700;
  margin-top: 6px;
}

/* Completed challenges section */
.missions-completed-heading {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #7a8fa0;
  margin-top: 20px;
  margin-bottom: 8px;
}
.mission-item.mission-done {
  opacity: .55;
  border-color: rgba(74,222,128,.18);
  background: rgba(74,222,128,.04);
}

/* Locked tier */
.mission-item.mission-tier-locked {
  opacity: .42;
  pointer-events: none;
  border-color: rgba(255,255,255,.06);
}
.mission-locked-label {
  font-size: .74rem; color: #7a8fa0;
  margin-top: 5px; font-style: italic;
}

/* Mission completion toast */
.mission-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(160deg, #1a0f30, #16102a);
  border: 1px solid rgba(168,85,247,.5);
  border-radius: var(--radius); padding: 13px 22px;
  font-size: .9rem; color: var(--text); text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.65), 0 0 20px rgba(168,85,247,.2);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  z-index: 9999; pointer-events: none;
  max-width: min(340px, 90vw);
}
.mission-toast.mission-toast-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}


/* ============================================================
   SHOP - FULL-SCREEN PREMIUM REDESIGN
   ============================================================ */

.shop-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.shop-fullscreen {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  border-radius: 0; overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #0e0428 0%, #100832 50%, #0a1228 100%);
  isolation: isolate;
}

/* Layered ambient glows */
.shop-fullscreen::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 50% at 18% 12%, rgba(124,58,237,.32) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 82% 82%, rgba(236,72,153,.18) 0%, transparent 55%),
    radial-gradient(ellipse 65% 45% at 55% 50%, rgba(56,189,248,.07) 0%, transparent 62%);
  pointer-events: none; z-index: 0;
}
.shop-topbar, .shop-body, .shop-footer { position: relative; z-index: 1; }

/* -- Top bar ----------------------------------------------- */
.shop-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 36px; height: 72px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(8,2,22,.98) 0%, rgba(14,4,36,.98) 100%);
  border-bottom: 1px solid rgba(139,92,246,.38);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 36px rgba(0,0,0,.7), inset 0 -1px 0 rgba(139,92,246,.15);
  z-index: 10;
}
.shop-topbar-left { flex-shrink: 0; min-width: 110px; }
.shop-title {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -1px; margin: 0;
  background: linear-gradient(90deg, #ffffff 0%, #e8d8ff 35%, #c084fc 70%, #a855f7 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; white-space: nowrap;
  filter: drop-shadow(0 0 18px rgba(168,85,247,.55));
}

/* -- Tabs -------------------------------------------------- */
.shop-tabs {
  display: flex; align-items: center; gap: 6px;
  flex: 1; justify-content: center;
}
.shop-tab-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #aabbd4; font-family: inherit;
  font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; letter-spacing: .01em;
}
.shop-tab-btn:hover {
  background: rgba(139,92,246,.22); color: #e0d2ff;
  border-color: rgba(139,92,246,.42); transform: translateY(-1px);
}
.shop-tab-btn.shop-tab-active {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
  color: #ffffff; border-color: rgba(167,139,250,.75);
  box-shadow: 0 4px 22px rgba(109,40,217,.55), 0 0 30px rgba(139,92,246,.3),
              inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 4px rgba(0,0,0,.5); transform: translateY(-1px);
}
.shop-tab-btn:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
.shop-tab-icon { font-size: 1rem; line-height: 1; }

/* -- Top-right --------------------------------------------- */
.shop-topbar-right {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; min-width: 110px; justify-content: flex-end;
}
.shop-topbar-right .shop-coin-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(251,191,36,.32) 0%, rgba(245,158,11,.16) 100%);
  border: 1.5px solid rgba(251,191,36,.68); border-radius: 999px;
  padding: 8px 18px 8px 10px;
  box-shadow: 0 2px 22px rgba(251,191,36,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
.shop-topbar-right .shop-coin-pill .coin-icon  { width: 22px; height: 22px; }
.shop-topbar-right .shop-coin-pill .coins-value {
  font-size: 1.1rem; font-weight: 900; color: #fef08a;
  text-shadow: 0 0 16px rgba(251,191,36,.75); letter-spacing: -.5px;
}
.shop-close-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%; color: #d4d4d4; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease;
}
.shop-close-btn:hover {
  background: rgba(239,68,68,.28); border-color: rgba(239,68,68,.55);
  color: #fca5a5; transform: scale(1.08);
}

/* -- Body -------------------------------------------------- */
.shop-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.7) rgba(255,255,255,.06);
}
.shop-body::-webkit-scrollbar { width: 8px; }
.shop-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  margin: 6px 0;
}
.shop-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,.35);
  min-height: 48px;
}
.shop-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

/* -- Panels ------------------------------------------------ */
.shop-panel {
  display: none; padding: 36px 40px 80px;
  max-width: 1400px; margin: 0 auto; width: 100%;
  animation: shopPanelIn .25s cubic-bezier(.16,1,.3,1) both;
}
.shop-panel.shop-panel-active { display: block; }
.shop-panel[hidden]           { display: none !important; }

@keyframes shopPanelIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.shop-panel-hint {
  font-size: .92rem; color: #c4d4e8; margin: 0 0 30px;
  line-height: 1.65; max-width: 680px; font-weight: 500;
}
.shop-panel-heading {
  font-size: .74rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 3px; color: #c4d4e8; margin: 0 0 22px;
  padding: 0 0 12px 16px;
  border-left: 4px solid var(--accent);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center;
}
.shop-stats-section    { margin-top: 56px; }
.shop-lifetime-section { margin-top: 56px; }

/* -- Footer ------------------------------------------------ */
.shop-footer {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(8,2,22,.97); backdrop-filter: blur(6px);
}
.shop-footer .btn { min-width: 160px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   SKINS PANEL
   ═══════════════════════════════════════════════════════════ */
.shop-panel .shop-skin-split { display: flex; align-items: flex-start; gap: 28px; }

/* Featured preview panel */
.shop-panel .shop-preview-panel {
  width: 264px; flex-shrink: 0; position: sticky; top: 20px;
  border-radius: 24px;
  background: linear-gradient(175deg, rgba(80,20,180,.30) 0%, rgba(40,10,90,.94) 60%, rgba(14,4,38,.98) 100%);
  border: 1.5px solid rgba(139,92,246,.5);
  box-shadow: 0 10px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.18),
              inset 0 1px 0 rgba(255,255,255,.12);
  padding: 28px 20px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  overflow: hidden;
}
.shop-panel .shop-preview-panel::before {
  content: ''; position: absolute; top: -20px; left: 50%;
  transform: translateX(-50%); width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.38) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}
.shop-panel .shop-preview-panel > * { position: relative; z-index: 1; }

#skin-preview-canvas {
  width: 200px; height: 200px; border-radius: 18px;
  background: transparent; display: block;
}
.preview-skin-name {
  font-size: 1.22rem; font-weight: 900; letter-spacing: -.5px;
  color: #ffffff; text-align: center;
}
.preview-skin-rarity {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 2px; opacity: 1; padding: 4px 14px; border-radius: 999px;
}
.preview-skin-rarity[data-rarity="common"]    { color: #d4d8e4; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); }
.preview-skin-rarity[data-rarity="rare"]      { color: #7dd3fc; background: rgba(56,189,248,.18);  border: 1px solid rgba(56,189,248,.38); }
.preview-skin-rarity[data-rarity="epic"]      { color: #fde68a; background: rgba(251,191,36,.18);  border: 1px solid rgba(251,191,36,.42); }
.preview-skin-rarity[data-rarity="legendary"] { color: #e9d5ff; background: rgba(192,132,252,.24); border: 1px solid rgba(192,132,252,.5); text-shadow: 0 0 14px rgba(168,85,247,.85); }

.preview-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.preview-actions .btn {
  width: 100%; justify-content: center; font-size: .84rem;
  padding: 11px 12px; border-radius: 14px; font-weight: 800;
}
.preview-btn-disabled { opacity: .5; }

.shop-panel .shop-skin-grid-panel { max-height: none; overflow: visible; flex: 1; min-width: 0; }

/* -- Skin grid --------------------------------------------- */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 14px;
}
.skin-grid .skin-btn {
  width: 100%; padding: 22px 12px 18px; gap: 11px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24,10,56,.98) 0%, rgba(16,6,38,.98) 100%);
  border: 1.5px solid rgba(255,255,255,.13);
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 3px 14px rgba(0,0,0,.45);
}
.skin-grid .skin-btn:hover:not(:disabled) {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 26px rgba(168,85,247,.35);
}

/* Per-skin colored backgrounds */
.skin-grid .skin-btn[data-skin="classic"]   { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(192,132,252,.28) 0%, transparent 58%), linear-gradient(180deg,rgba(26,10,60,.98),rgba(16,6,40,.98)); }
.skin-grid .skin-btn[data-skin="neon"]      { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(6,182,212,.30) 0%, transparent 58%), linear-gradient(180deg,rgba(4,36,56,.98),rgba(2,20,40,.98)); }
.skin-grid .skin-btn[data-skin="ice"]       { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(125,211,252,.26) 0%, transparent 58%), linear-gradient(180deg,rgba(6,30,58,.98),rgba(3,18,46,.98)); }
.skin-grid .skin-btn[data-skin="lava"]      { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(249,115,22,.30) 0%, transparent 58%), linear-gradient(180deg,rgba(56,16,4,.98),rgba(38,8,2,.98)); }
.skin-grid .skin-btn[data-skin="crimson"]   { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(239,68,68,.28) 0%, transparent 58%), linear-gradient(180deg,rgba(52,8,8,.98),rgba(34,4,4,.98)); }
.skin-grid .skin-btn[data-skin="aurora"]    { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(34,211,238,.26) 0%, transparent 58%), linear-gradient(180deg,rgba(4,32,50,.98),rgba(2,18,36,.98)); }
.skin-grid .skin-btn[data-skin="gold"]      { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(251,191,36,.30) 0%, transparent 58%), linear-gradient(180deg,rgba(50,32,4,.98),rgba(34,18,2,.98)); }
.skin-grid .skin-btn[data-skin="void"]      { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(192,132,252,.32) 0%, transparent 58%), linear-gradient(180deg,rgba(26,4,58,.98),rgba(14,2,42,.98)); }
.skin-grid .skin-btn[data-skin="electric"]  { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(56,189,248,.28) 0%, transparent 58%), linear-gradient(180deg,rgba(4,26,54,.98),rgba(2,14,38,.98)); }
.skin-grid .skin-btn[data-skin="inferno"]   { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(249,115,22,.32) 0%, transparent 58%), linear-gradient(180deg,rgba(52,12,2,.98),rgba(36,6,2,.98)); }
.skin-grid .skin-btn[data-skin="prism"]     { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(232,121,249,.26) 0%, transparent 58%), linear-gradient(180deg,rgba(34,8,52,.98),rgba(20,4,36,.98)); }
.skin-grid .skin-btn[data-skin="afterglow"] { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(251,113,133,.28) 0%, transparent 58%), linear-gradient(180deg,rgba(52,6,28,.98),rgba(34,4,18,.98)); }
.skin-grid .skin-btn[data-skin="galaxy"]    { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(129,140,248,.30) 0%, transparent 58%), linear-gradient(180deg,rgba(12,4,48,.98),rgba(6,2,34,.98)); }
.skin-grid .skin-btn[data-skin="eclipse"]   { background: radial-gradient(ellipse 70% 45% at 50% 28%, rgba(167,139,250,.28) 0%, transparent 58%), linear-gradient(180deg,rgba(16,4,48,.98),rgba(8,2,32,.98)); }

/* Rarity borders + glows */
.skin-grid .skin-btn[data-rarity="common"]    { border-color: rgba(200,200,225,.18); }
.skin-grid .skin-btn[data-rarity="rare"]      { border-color: rgba(56,189,248,.52);  box-shadow: 0 3px 18px rgba(56,189,248,.16); }
.skin-grid .skin-btn[data-rarity="epic"]      { border-color: rgba(251,191,36,.52);  box-shadow: 0 3px 18px rgba(251,191,36,.13); }
.skin-grid .skin-btn[data-rarity="legendary"] { border-color: rgba(192,132,252,.62); box-shadow: 0 3px 22px rgba(168,85,247,.22); animation: legendaryCardPulse 2.8s ease-in-out infinite; }

.skin-grid .skin-btn:hover:not(:disabled)[data-rarity="rare"]      { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 28px rgba(56,189,248,.45); }
.skin-grid .skin-btn:hover:not(:disabled)[data-rarity="epic"]      { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 28px rgba(251,191,36,.45); }
.skin-grid .skin-btn:hover:not(:disabled)[data-rarity="legendary"] { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 34px rgba(168,85,247,.60); }

.skin-grid .skin-btn .skin-preview { width: 68px; height: 68px; }

.skin-grid-lock-icon { position: absolute; top: 10px; right: 10px; font-size: .82rem; opacity: .9; }
.skin-grid-status {
  font-size: .68rem; font-weight: 800; padding: 4px 12px;
  border-radius: 999px; letter-spacing: .05em;
  text-transform: uppercase; margin-top: 2px;
}
.skin-grid-status.skin-grid-equipped {
  background: linear-gradient(135deg, rgba(109,40,217,.55), rgba(139,92,246,.35));
  color: #ede9fe; box-shadow: 0 0 16px rgba(139,92,246,.55);
  border: 1px solid rgba(139,92,246,.6);
}
.skin-grid-status.skin-grid-owned {
  background: rgba(52,211,153,.22); color: #6ee7b7;
  border: 1px solid rgba(52,211,153,.38);
}
.skin-grid-cost {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .76rem; font-weight: 800; color: #fef08a;
  background: linear-gradient(135deg, rgba(251,191,36,.26), rgba(234,179,8,.14));
  border-radius: 999px; padding: 4px 12px; margin-top: 2px;
  border: 1px solid rgba(251,191,36,.42); box-shadow: 0 0 12px rgba(251,191,36,.22);
}
.skin-grid-cost.skin-grid-unaffordable {
  color: #64748b; background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1); box-shadow: none;
}
.skin-grid-lock-info { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; margin-top: 3px; }
.skin-grid-lock-label { font-size: .67rem; color: #94a3b8; font-weight: 700; text-align: center; }
.skin-grid .skin-bar-track { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   POWERUPS PANEL
   ═══════════════════════════════════════════════════════════ */
#shop-panel-upgrades .powerup-upgrades-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px; margin-top: 0;
}
#shop-panel-upgrades .powerup-upgrade-card {
  padding: 26px; gap: 20px;
  background: linear-gradient(160deg, rgba(12,6,32,.98) 0%, rgba(6,3,20,.98) 100%);
  border: 1.5px solid rgba(56,189,248,.26); border-radius: 22px;
  box-shadow: 0 6px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
#shop-panel-upgrades .powerup-upgrade-card:hover {
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 28px rgba(56,189,248,.2);
  transform: translateY(-3px);
}
#shop-panel-upgrades .powerup-upgrade-icon {
  width: 58px; height: 58px; font-size: 1.6rem; border-radius: 18px;
  background: linear-gradient(135deg, rgba(56,189,248,.30), rgba(56,189,248,.12));
  border: 1.5px solid rgba(56,189,248,.45);
  box-shadow: 0 4px 18px rgba(56,189,248,.22);
}
#shop-panel-upgrades .powerup-upgrade-name   { font-size: 1.05rem; font-weight: 900; color: #ffffff; }
#shop-panel-upgrades .powerup-upgrade-meta   { color: #a0c0d8; font-size: .82rem; }
#shop-panel-upgrades .powerup-upgrade-effect { color: #a0c0d8; font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════
   CHALLENGES PANEL
   ═══════════════════════════════════════════════════════════ */
#shop-panel-challenges .missions-list { max-width: 860px; }
#shop-panel-challenges .shop-stats-section { max-width: 700px; }

#shop-panel-challenges .mission-item {
  background: linear-gradient(160deg, rgba(14,6,36,.97) 0%, rgba(8,3,22,.97) 100%);
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 18px;
  padding: 18px 20px; box-shadow: 0 3px 14px rgba(0,0,0,.38);
}
#shop-panel-challenges .mission-item:hover {
  border-color: rgba(139,92,246,.42);
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 20px rgba(139,92,246,.12);
}
#shop-panel-challenges .mission-item.mission-done {
  border-color: rgba(52,211,153,.32);
  background: linear-gradient(160deg, rgba(12,40,26,.96) 0%, rgba(6,22,14,.96) 100%);
}
#shop-panel-challenges .mission-item.mission-completed {
  border-color: rgba(251,191,36,.58);
  background: linear-gradient(160deg, rgba(38,22,4,.97) 0%, rgba(24,12,2,.97) 100%);
  box-shadow: 0 0 28px rgba(251,191,36,.16);
}
#shop-panel-challenges .mission-label { font-size: .94rem; font-weight: 800; color: #ffffff; }
#shop-panel-challenges .mission-desc  { color: #a0b8d0; }
#shop-panel-challenges .mission-diff { font-size: .68rem; font-weight: 800; padding: 4px 10px; border-radius: 8px; }

#shop-panel-challenges .stat-item {
  background: linear-gradient(160deg, rgba(14,6,36,.97) 0%, rgba(8,3,22,.97) 100%);
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
#shop-panel-challenges .stat-item:hover {
  border-color: rgba(139,92,246,.38);
  box-shadow: 0 4px 22px rgba(0,0,0,.45), 0 0 14px rgba(139,92,246,.1);
}
#shop-panel-challenges .stat-label { color: #b0c8e0; }
#shop-panel-challenges .stat-value { color: #ffffff; font-size: 1.1rem; }


/* -- Responsive -------------------------------------------- */
@media (max-width: 640px) {
  .shop-topbar { padding: 0 16px; height: 60px; gap: 8px; }
  .shop-title  { font-size: 1.1rem; }
  .shop-tab-btn { padding: 7px 14px; font-size: .8rem; gap: 4px; }
  .shop-tab-icon { display: none; }
  .shop-panel { padding: 24px 18px 60px; }
  .skin-grid  { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .shop-panel .shop-preview-panel { width: 162px; padding: 16px 12px 14px; }
  #skin-preview-canvas { width: 136px; height: 136px; }
  .shop-topbar-left { display: none; }
  /* Lifetime road on mobile: smaller tiles */
  #shop-panel-lifetime.shop-panel { padding: 0; }
  .lp-header { padding: 16px 18px 12px; }
  .lp-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lp-score-val { font-size: 1.8rem; }
  .lp-road-wrap { padding: 24px 16px 20px; }
  .lp-node { width: 130px; }
  .lp-tile  { width: 112px; }
}@media (max-width: 420px) {
  .shop-tab-btn { padding: 6px 10px; font-size: .75rem; }
  .skin-grid    { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shop-panel .shop-skin-split { flex-direction: column; }
  .shop-panel .shop-preview-panel {
    width: 100%; position: static;
    flex-direction: row; gap: 14px; padding: 14px;
  }
  #skin-preview-canvas { width: 110px; height: 110px; flex-shrink: 0; }
  .preview-skin-meta { align-items: flex-start; }
  .preview-actions { flex-direction: row; flex-wrap: wrap; }
  .preview-actions .btn { flex: 1; min-width: 84px; }
  .shop-panel .shop-skin-grid-panel { flex: none; width: 100%; }
}
@media (min-width: 900px) {
  .skin-grid  { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 16px; }
  .shop-panel { padding: 44px 64px 88px; }
  .shop-topbar { padding: 0 52px; }
  .shop-panel .shop-preview-panel { width: 284px; }
  #skin-preview-canvas { width: 220px; height: 220px; }
}
@media (min-width: 1280px) {
  .skin-grid  { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
  .shop-panel { padding: 50px 88px 96px; }
}



/* ============================================================
   NOCOINS DIALOG
   ============================================================ */
.nocoins-dialog {
  border-color: rgba(251,191,36,.52) !important;
}
.ncd-icon {
  font-size: 2.4rem; margin-bottom: 6px;
  animation: ncdIconBounce .7s ease-in-out infinite alternate;
}
@keyframes ncdIconBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}
.ncd-body {
  font-size: .9rem; color: #d4dff2; margin: 0 0 14px;
  line-height: 1.55;
}
.ncd-need {
  font-size: .78rem; color: #fbbf24; font-weight: 700;
  margin: 4px 0 0; line-height: 1.4;
}
.ncd-watch-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%) !important;
  color: #1c1208 !important; font-weight: 900 !important;
  border-color: rgba(251,191,36,.8) !important;
  box-shadow: 0 4px 22px rgba(251,191,36,.45), 0 0 0 1px rgba(255,255,255,.18) !important;
  gap: 8px;
}
.ncd-watch-btn:hover {
  box-shadow: 0 6px 30px rgba(251,191,36,.65) !important;
  transform: translateY(-2px) scale(1.03);
}
.ncd-play-icon { font-size: 1rem; }
.ncd-bonus {
  background: rgba(0,0,0,.2); border-radius: 999px;
  padding: 2px 10px; font-size: .8rem; font-weight: 900;
  display: inline-flex; align-items: center; gap: 3px;
}
.ncd-actions { gap: 10px; }
.preview-buy-video-hint {
  font-size: .68rem; opacity: .75; font-weight: 600;
  background: rgba(251,191,36,.18); border-radius: 999px;
  padding: 2px 8px; margin-left: 4px;
}
.preview-buy-needcoins {
  background: linear-gradient(135deg, rgba(180,110,0,.85), rgba(234,160,8,.7)) !important;
  border-color: rgba(251,191,36,.65) !important;
  box-shadow: 0 3px 18px rgba(251,191,36,.3) !important;
}


/* ============================================================
   REWARDED AD MODAL - PREMIUM REDESIGN
   ============================================================ */

/* -- Overlay backdrop --------------------------------------- */
.rad-overlay {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(2, 0, 14, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; animation: radOverlayIn .22s ease forwards;
}
@keyframes radOverlayIn {
  to { opacity: 1; }
}

/* -- Modal card --------------------------------------------- */
.rad-modal {
  position: relative;
  width: min(560px, 100%);
  background: linear-gradient(170deg, #160836 0%, #0d0528 45%, #080320 100%);
  border: 1.5px solid rgba(139, 92, 246, .55);
  border-radius: 26px;
  box-shadow:
    0 30px 100px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.055),
    0 0 80px rgba(109,40,217,.18);
  overflow: hidden;
  transform: scale(.9) translateY(32px);
  animation: radModalIn .32s cubic-bezier(.16,1,.3,1) .06s forwards;
}
@keyframes radModalIn {
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Ambient glow blobs */
.rad-glow {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.rad-glow-1 {
  width: 320px; height: 200px;
  top: -80px; left: -60px;
  background: radial-gradient(ellipse, rgba(124,58,237,.28) 0%, transparent 70%);
}
.rad-glow-2 {
  width: 260px; height: 200px;
  bottom: -80px; right: -40px;
  background: radial-gradient(ellipse, rgba(236,72,153,.18) 0%, transparent 70%);
}
.rad-modal > *:not(.rad-glow) { position: relative; z-index: 1; }

/* -- Header ------------------------------------------------- */
.rad-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 16px;
  background: rgba(255,255,255,.038);
  border-bottom: 1px solid rgba(139,92,246,.25);
}
.rad-header-text {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.rad-title {
  font-size: 1.05rem; font-weight: 900; color: #ede9fe;
  letter-spacing: .3px; line-height: 1;
}
.rad-subtitle {
  font-size: .74rem; font-weight: 600;
  color: #9ca3af; letter-spacing: .02em;
}

/* Gold reward chip */
.rad-reward-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, rgba(251,191,36,.3), rgba(245,158,11,.18));
  border: 1.5px solid rgba(251,191,36,.7);
  border-radius: 999px; padding: 6px 14px;
  font-size: .9rem; font-weight: 900; color: #fef08a;
  letter-spacing: .02em;
  box-shadow: 0 0 18px rgba(251,191,36,.3),
              inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow: 0 0 14px rgba(251,191,36,.65);
  animation: chipGlow 2s ease-in-out infinite;
}
.rad-reward-chip .coin-icon { width: 18px; height: 18px; animation: none; }
@keyframes chipGlow {
  0%,100% { box-shadow: 0 0 18px rgba(251,191,36,.3); }
  50%     { box-shadow: 0 0 32px rgba(251,191,36,.55), 0 0 60px rgba(251,191,36,.12); }
}

/* Close button */
.rad-close-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #cbd5e1; font-size: .88rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  line-height: 1;
}
.rad-close-btn:hover:not(:disabled) {
  background: rgba(239,68,68,.26); border-color: rgba(239,68,68,.5); color: #fca5a5;
  transform: scale(1.08);
}
.rad-close-btn:disabled { opacity: .28; cursor: not-allowed; }

/* -- Video / Ad area ---------------------------------------- */
.rad-video-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; overflow: hidden;
}
.rad-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* -- Fallback mock ad panel --------------------------------- */
.rad-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #080228 0%, #0f0640 50%, #080228 100%);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Animated background orbs */
.rad-fb-orbs { position: absolute; inset: 0; pointer-events: none; }
.rad-fb-orb {
  position: absolute; border-radius: 50%;
  opacity: .55;
}
.rad-fb-orb-1 {
  width: 180px; height: 180px; top: -60px; left: -40px;
  background: radial-gradient(circle, rgba(124,58,237,.6), transparent 70%);
  animation: radFbOrb 6s ease-in-out infinite;
}
.rad-fb-orb-2 {
  width: 140px; height: 140px; bottom: -50px; right: -30px;
  background: radial-gradient(circle, rgba(236,72,153,.5), transparent 70%);
  animation: radFbOrb 5s ease-in-out infinite 1.2s reverse;
}
.rad-fb-orb-3 {
  width: 100px; height: 100px; top: 40%; left: 60%;
  background: radial-gradient(circle, rgba(56,189,248,.45), transparent 70%);
  animation: radFbOrb 7s ease-in-out infinite .6s;
}
.rad-fb-orb-4 {
  width: 80px; height: 80px; top: 20%; left: 20%;
  background: radial-gradient(circle, rgba(251,191,36,.35), transparent 70%);
  animation: radFbOrb 4.5s ease-in-out infinite 2s reverse;
}
@keyframes radFbOrb {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(14px,-18px) scale(1.1); }
  66%     { transform: translate(-10px, 12px) scale(.9); }
}
/* Ad tag */
.rad-fb-ad-tag {
  position: absolute; top: 10px; right: 12px;
  font-size: .62rem; font-weight: 800; letter-spacing: 1.5px;
  color: #94a3b8; background: rgba(0,0,0,.5);
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 5px; padding: 2px 7px; z-index: 2;
}
/* Main content */
.rad-fb-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; z-index: 2; text-align: center; padding: 0 24px;
}
.rad-fb-logo-ring {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 4px;
  background: radial-gradient(circle at 38% 35%, #e879f9, #7c3aed 55%, #312e81);
  box-shadow: 0 0 32px rgba(168,85,247,.7), 0 0 8px rgba(255,255,255,.2);
  animation: fbLogoSpin 3s ease-in-out infinite;
}
@keyframes fbLogoSpin {
  0%,100% { box-shadow: 0 0 32px rgba(168,85,247,.7); transform: scale(1); }
  50%     { box-shadow: 0 0 48px rgba(168,85,247,.9), 0 0 80px rgba(168,85,247,.2); transform: scale(1.06); }
}
.rad-fb-game-title {
  font-size: 1.4rem; font-weight: 900; color: #f5f3ff;
  text-shadow: 0 0 20px rgba(168,85,247,.8);
  letter-spacing: -.5px;
}
.rad-fb-tagline {
  font-size: .82rem; color: #c4b5fd; font-weight: 600; margin: 0;
}
.rad-fb-stars {
  color: #fbbf24; font-size: 1rem; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(251,191,36,.6);
}
.rad-fb-badge {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; color: #fde68a;
  background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(245,158,11,.15));
  border: 1px solid rgba(251,191,36,.5); border-radius: 999px;
  padding: 4px 12px;
}
/* Fallback progress at bottom */
.rad-fb-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 100%);
  z-index: 2;
}
.rad-fb-bar-track {
  flex: 1; height: 4px; background: rgba(255,255,255,.14);
  border-radius: 999px; overflow: hidden;
}
.rad-fb-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #e879f9);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(168,85,247,.55);
}
.rad-fb-secs {
  font-size: .72rem; color: #9ca3af; font-weight: 700;
  white-space: nowrap; min-width: 26px; text-align: right;
}

/* -- Idle overlay (shown before start) --------------------- */
.rad-idle-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(5, 0, 24, .78);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  transition: opacity .3s;
}
/* Hide idle overlay when playing/completed/etc. */
.rad-modal:not([data-state="idle"]) .rad-idle-overlay {
  opacity: 0; pointer-events: none;
}
.rad-idle-reward-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(251,191,36,.28), rgba(245,158,11,.16));
  border: 2px solid rgba(251,191,36,.72);
  border-radius: 999px; padding: 8px 22px;
  font-size: 1.1rem; font-weight: 900; color: #fef08a;
  box-shadow: 0 0 28px rgba(251,191,36,.35);
  animation: idleBadgeFloat 2.2s ease-in-out infinite;
}
@keyframes idleBadgeFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.rad-idle-badge-icon { font-size: 1.4rem; }
.rad-idle-badge-text { letter-spacing: .02em; }

/* Start button */
.rad-start-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; border-radius: 16px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
  color: #ffffff; font-family: inherit;
  font-size: 1.1rem; font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 6px 32px rgba(109,40,217,.6), 0 0 50px rgba(139,92,246,.22),
              inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .18s, box-shadow .18s;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.rad-start-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 44px rgba(109,40,217,.75), 0 0 60px rgba(139,92,246,.3),
              inset 0 1px 0 rgba(255,255,255,.3);
}
.rad-start-btn:active { transform: translateY(-1px) scale(1.01); }
.rad-start-icon { font-size: 1.2rem; }
.rad-idle-hint {
  font-size: .76rem; color: #94a3b8; font-weight: 600;
  margin: 0; text-align: center; max-width: 240px; line-height: 1.5;
}

/* -- Completion overlay ------------------------------------- */
.rad-complete-overlay {
  position: absolute; inset: 0; z-index: 12;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  animation: radCompleteIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes radCompleteIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
.rad-complete-sparks {
  position: absolute; inset: 0; pointer-events: none;
}
.rad-spark {
  position: absolute; font-size: 1.2rem; color: #fbbf24;
  animation: sparkFly 1.4s ease-out forwards;
  opacity: 0;
}
.rad-spark-1 { top: 25%; left: 18%; animation-delay: .05s; }
.rad-spark-2 { top: 18%; left: 75%; animation-delay: .15s; }
.rad-spark-3 { top: 60%; left: 12%; animation-delay: .22s; color: #e879f9; }
.rad-spark-4 { top: 70%; left: 80%; animation-delay: .08s; }
.rad-spark-5 { top: 35%; left: 86%; animation-delay: .28s; color: #38bdf8; }
.rad-spark-6 { top: 72%; left: 45%; animation-delay: .18s; }
@keyframes sparkFly {
  0%  { opacity: 0; transform: scale(.3) rotate(0deg); }
  30% { opacity: 1; }
  100%{ opacity: 0; transform: scale(1.6) rotate(180deg) translateY(-20px); }
}
.rad-complete-ring {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(34,197,94,.65), 0 0 80px rgba(34,197,94,.18);
  animation: ringPop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ringPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.rad-complete-check {
  font-size: 2.2rem; color: #ffffff; font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.4); line-height: 1;
}
.rad-complete-text {
  font-size: 1.5rem; font-weight: 900; color: #ffffff; margin: 0;
  text-shadow: 0 0 24px rgba(255,255,255,.5);
  animation: completeTxtIn .4s ease .2s both;
}
@keyframes completeTxtIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Progress section --------------------------------------- */
.rad-progress-section {
  padding: 16px 22px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rad-progress-track {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.rad-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9 0%, #a855f7 50%, #38bdf8 100%);
  box-shadow: 0 0 10px rgba(168,85,247,.6);
  transition: width .45s linear;
  position: relative; overflow: hidden;
}
/* Shimmer on playing progress bar */
.rad-modal[data-state="playing"] .rad-progress-fill::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -50%;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: progShimmer 1.6s linear infinite;
}
@keyframes progShimmer {
  from { left: -50%; }
  to   { left: 150%; }
}
.rad-progress-info {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.rad-status-text {
  font-size: .74rem; font-weight: 600; color: #94a3b8;
  line-height: 1.4;
}
.rad-timer-label {
  font-size: .78rem; font-weight: 800; color: #c4b5fd;
  letter-spacing: .5px; white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* Highlight timer when complete */
.rad-modal[data-state="completed"] .rad-timer-label { color: #86efac; }

/* -- Footer (state-driven) ---------------------------------- */
.rad-footer {
  padding: 14px 22px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* Idle footer: helper text */
.rad-footer-idle {
  display: none; /* shown via state */
  text-align: center;
}
.rad-modal[data-state="idle"] .rad-footer-idle { display: block; }
.rad-helper-text {
  font-size: .82rem; color: #94a3b8; margin: 0; line-height: 1.5;
}

/* Playing footer: animated dot + text */
.rad-footer-playing {
  display: none;
  align-items: center; gap: 10px;
}
.rad-modal[data-state="playing"] .rad-footer-playing { display: flex; }
.rad-playing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 8px #a855f7;
  animation: playingPulse 1.2s ease-in-out infinite;
}
@keyframes playingPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .45; transform: scale(.7); }
}
.rad-playing-text {
  font-size: .8rem; color: #c4b5fd; font-weight: 600;
}

/* Claim button - hidden by default, shown when completed */
.rad-claim-btn {
  display: none; /* shown by state */
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 320px; padding: 17px 28px;
  border: none; border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 40%, #fbbf24 70%, #f59e0b 100%);
  background-size: 200% auto;
  color: #1c1005; font-family: inherit;
  font-size: 1.12rem; font-weight: 900; letter-spacing: .01em;
  box-shadow: 0 6px 36px rgba(251,191,36,.6), 0 0 60px rgba(251,191,36,.18),
              inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 2px rgba(255,255,255,.2);
  animation: claimPulse 1.3s ease-in-out infinite;
  transition: transform .18s, box-shadow .18s;
}
.rad-modal[data-state="completed"] .rad-claim-btn { display: flex; }
.rad-claim-btn:hover {
  transform: translateY(-3px) scale(1.03);
  animation-play-state: paused;
  box-shadow: 0 10px 48px rgba(251,191,36,.8), 0 0 80px rgba(251,191,36,.22),
              inset 0 1px 0 rgba(255,255,255,.5);
}
.rad-claim-btn:active { transform: translateY(-1px) scale(1.01); }
.rad-claim-btn .coin-icon { width: 22px; height: 22px; animation: none; flex-shrink: 0; }
@keyframes claimPulse {
  0%,100% { box-shadow: 0 6px 36px rgba(251,191,36,.6); background-position: 0% center; }
  50%     { box-shadow: 0 8px 50px rgba(251,191,36,.9), 0 0 80px rgba(251,191,36,.2); background-position: 100% center; }
}

/* -- Responsive --------------------------------------------- */
@media (max-width: 480px) {
  .rad-modal { border-radius: 20px; }
  .rad-header { padding: 14px 16px 12px; }
  .rad-reward-chip { padding: 5px 12px; font-size: .82rem; }
  .rad-progress-section { padding: 14px 16px 10px; }
  .rad-footer { padding: 12px 16px 18px; }
  .rad-claim-btn { font-size: 1rem; padding: 15px 20px; }
  .rad-start-btn { padding: 14px 28px; font-size: 1rem; }
}

/* ============================================================
   COIN REWARD TOAST
   ============================================================ */
.coin-reward-toast {
  position: fixed;
  /* Positioned near top-center of viewport, near the coin display */
  top: 88px; left: 50%; transform: translateX(-50%);
  z-index: 13000;
  background: linear-gradient(135deg, rgba(40,20,2,.97), rgba(80,48,4,.97));
  border: 2px solid rgba(251,191,36,.85);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 1.3rem; font-weight: 900; color: #fef08a;
  box-shadow: 0 8px 48px rgba(251,191,36,.6),
              0 0 100px rgba(251,191,36,.18),
              inset 0 1px 0 rgba(255,255,255,.18);
  display: flex; align-items: center; gap: 8px;
  text-shadow: 0 0 16px rgba(251,191,36,.9);
  pointer-events: none;
  opacity: 0; white-space: nowrap;
}
.coin-reward-toast .coin-icon { width: 22px; height: 22px; animation: none; }
.coin-reward-toast.crt-show {
  animation: crtIn .4s cubic-bezier(.16,1,.3,1) both,
             crtOut .45s ease 2s both;
}
@keyframes crtIn {
  from { opacity: 0; transform: translateX(-50%) scale(.6) translateY(-14px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1)  translateY(0); }
}
@keyframes crtOut {
  from { opacity: 1; transform: translateX(-50%) scale(1)  translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) scale(.9) translateY(-10px); }
}

/* Cancelled toast variant */
.coin-reward-toast.crt-cancelled {
  background: linear-gradient(135deg, rgba(30,8,2,.97), rgba(60,20,4,.97));
  border-color: rgba(239,68,68,.65);
  color: #fca5a5;
  box-shadow: 0 8px 40px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.1);
  text-shadow: 0 0 12px rgba(239,68,68,.6);
  font-size: 1rem; padding: 12px 22px; border-radius: 16px;
}

/* ── Low Performance Mode ─────────────────────────────────────────────────
   Applied via body.perf-low when settings.perfMode === 'low'.
   Strips expensive GPU operations: backdrop-filter, large blurs, animations. */
body.perf-low .blob                { filter: blur(16px) !important; animation: none !important; }
body.perf-low body::before,
body.perf-low::before              { animation: none !important; }
body.perf-low .shop-topbar         { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.perf-low .shop-footer         { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.perf-low .modal               { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.perf-low .rad-overlay         { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.perf-low .skin-preview        { animation: none !important; }
body.perf-low .coin-icon           { animation: none !important; }
body.perf-low #btn-start           { animation: none !important; }
body.perf-low .pup-seg-on          { animation: none !important; }
body.perf-low .rad-reward-chip     { animation: none !important; }
body.perf-low .home-blobs::before,
body.perf-low .home-blobs::after   { animation: none !important; }

/* ============================================================
   LEADERBOARD — FULL MODAL SYSTEM
   ============================================================ */

/* Overlay backdrop */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,2,14,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: lbFadeIn .28s ease;
}
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel */
.lb-panel {
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(20,10,52,.98) 0%, rgba(10,4,28,.98) 100%);
  border: 1.5px solid rgba(139,92,246,.45);
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(109,40,217,.15), inset 0 1px 0 rgba(255,255,255,.08);
  animation: lbSlideUp .32s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
@keyframes lbSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Header */
.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(139,92,246,.2);
  background: linear-gradient(90deg, rgba(109,40,217,.12) 0%, transparent 60%);
  flex-shrink: 0;
}
.lb-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lb-trophy-icon { font-size: 2.1rem; filter: drop-shadow(0 0 12px rgba(251,191,36,.5)); }
.lb-title {
  font-size: 1.5rem; font-weight: 900; color: #fff; margin: 0 0 2px;
  letter-spacing: -.4px; text-shadow: 0 0 20px rgba(167,139,250,.35);
}
.lb-subtitle { font-size: .78rem; color: #8b9ec4; margin: 0; font-weight: 600; }
.lb-close-btn {
  color: #94a3b8; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06);
  border-radius: 10px; width: 36px; height: 36px; font-size: .9rem; cursor: pointer;
  flex-shrink: 0; transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.lb-close-btn:hover { background: rgba(239,68,68,.25); color: #fca5a5; border-color: rgba(239,68,68,.4); }

/* Your Stats card */
.lb-your-stats {
  margin: 14px 20px 0; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(109,40,217,.2) 0%, rgba(76,29,149,.14) 100%);
  border: 1px solid rgba(139,92,246,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px 14px; flex-shrink: 0;
}
.lb-stat-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lb-stat-val {
  font-size: 1.05rem; font-weight: 900; color: #e9d5ff;
  text-shadow: 0 0 10px rgba(167,139,250,.35); letter-spacing: -.02em;
}
.lb-stat-lbl { font-size: .6rem; font-weight: 800; color: #7888a0; text-transform: uppercase; letter-spacing: .08em; }

/* Tabs */
.lb-tabs { display: flex; gap: 4px; padding: 12px 20px 0; flex-shrink: 0; }
.lb-tab {
  flex: 1; padding: 9px 10px; border-radius: 10px;
  border: 1px solid rgba(139,92,246,.22); background: rgba(255,255,255,.04);
  color: #7888a0; font-size: .78rem; font-weight: 800; cursor: pointer;
  transition: background .15s, color .15s; font-family: inherit; letter-spacing: .02em;
}
.lb-tab:hover { background: rgba(139,92,246,.14); color: #c4b5fd; }
.lb-tab.lb-tab-active {
  background: linear-gradient(135deg, rgba(109,40,217,.38) 0%, rgba(76,29,149,.28) 100%);
  color: #e9d5ff; border-color: rgba(139,92,246,.55); box-shadow: 0 0 14px rgba(109,40,217,.2);
}

/* Board wrap */
.lb-board-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; margin: 10px 0 0; }
.lb-board {
  flex: 1; overflow-y: auto; padding: 0 20px 16px;
  scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.3) transparent;
}
.lb-board::-webkit-scrollbar { width: 5px; }
.lb-board::-webkit-scrollbar-thumb { background: rgba(139,92,246,.35); border-radius: 4px; }

/* Rows */
.lb-rows { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.lb-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 0 12px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.035);
  transition: background .15s, border-color .15s, transform .15s; cursor: default;
}
.lb-row:hover { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.25); transform: translateX(2px); }
.lb-row[data-rank="1"] {
  background: linear-gradient(90deg, rgba(251,191,36,.14) 0%, rgba(255,255,255,.03) 100%);
  border-color: rgba(251,191,36,.35); padding: 13px 14px;
}
.lb-row[data-rank="2"] { background: linear-gradient(90deg, rgba(148,163,184,.1) 0%, rgba(255,255,255,.03) 100%); border-color: rgba(148,163,184,.3); }
.lb-row[data-rank="3"] { background: linear-gradient(90deg, rgba(205,127,50,.1) 0%, rgba(255,255,255,.03) 100%); border-color: rgba(205,127,50,.28); }
.lb-row.lb-row-you {
  background: linear-gradient(90deg, rgba(109,40,217,.22) 0%, rgba(76,29,149,.12) 100%);
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 16px rgba(109,40,217,.15), inset 0 1px 0 rgba(255,255,255,.07);
}
.lb-row.lb-row-you:hover { background: linear-gradient(90deg, rgba(109,40,217,.32) 0%, rgba(76,29,149,.18) 100%); }

.lb-rank { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; }
.lb-rank-num { font-size: .95rem; font-weight: 900; color: #64748b; letter-spacing: -.02em; line-height: 1; }
.lb-row[data-rank="1"] .lb-rank-num { color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,.5); font-size: 1.05rem; }
.lb-row[data-rank="2"] .lb-rank-num { color: #cbd5e1; text-shadow: 0 0 8px rgba(148,163,184,.4); }
.lb-row[data-rank="3"] .lb-rank-num { color: #cd7f32; text-shadow: 0 0 8px rgba(205,127,50,.4); }
.lb-rank-icon { font-size: .9rem; line-height: 1; }

.lb-player { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-player-name { font-size: .9rem; font-weight: 800; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row[data-rank="1"] .lb-player-name { color: #fff; font-size: .98rem; }
.lb-row.lb-row-you .lb-player-name { color: #e9d5ff; }
.lb-you-badge {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
  background: rgba(139,92,246,.3); border: 1px solid rgba(139,92,246,.55); color: #c4b5fd;
  font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  margin-left: 6px; vertical-align: middle;
}
.lb-player-meta { font-size: .65rem; color: #4b5a70; font-weight: 600; }

.lb-score-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb-score-val { font-size: .92rem; font-weight: 900; color: #c4b5fd; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lb-row[data-rank="1"] .lb-score-val { color: #fde68a; text-shadow: 0 0 10px rgba(251,191,36,.4); font-size: 1rem; }
.lb-row[data-rank="2"] .lb-score-val { color: #e2e8f0; }
.lb-row[data-rank="3"] .lb-score-val { color: #d4916a; }
.lb-row.lb-row-you .lb-score-val { color: #e9d5ff; }

.lb-empty { text-align: center; padding: 36px 20px; color: #4b5a70; font-size: .88rem; font-weight: 700; }
.lb-empty-icon { font-size: 2.2rem; margin-bottom: 8px; display: block; filter: grayscale(1) opacity(.4); }

/* Footer */
.lb-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 16px; border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0; gap: 10px; flex-wrap: wrap;
}
.lb-name-label { font-size: .8rem; color: #7888a0; font-weight: 600; }
.lb-name-label strong { color: #c4b5fd; }
.lb-change-name-btn {
  font-size: .75rem; padding: 6px 14px; border-radius: 8px;
  background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.4);
  color: #c4b5fd; cursor: pointer; font-weight: 800; transition: background .15s; font-family: inherit;
}
.lb-change-name-btn:hover { background: rgba(139,92,246,.32); }
.lb-local-footer { padding: 12px 0 4px; text-align: center; }
.lb-reset-btn {
  font-size: .75rem; padding: 7px 18px; border-radius: 8px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5; cursor: pointer; font-weight: 800; transition: background .15s; font-family: inherit;
}
.lb-reset-btn:hover { background: rgba(239,68,68,.22); }

/* Row animations */
@keyframes lbRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.lb-row.lb-new { animation: lbRowIn .4s cubic-bezier(.16,1,.3,1); }

/* Rank change badges */
.lb-rank-change { font-size: .62rem; font-weight: 900; border-radius: 999px; padding: 1px 6px; display: inline-flex; align-items: center; gap: 2px; }
.lb-rank-change.up   { background: rgba(34,197,94,.18); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.lb-rank-change.down { background: rgba(239,68,68,.14); color: #f87171; border: 1px solid rgba(239,68,68,.28); }
.lb-rank-change.same { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.25); }

/* Player name dialog */
.name-dialog { max-width: 360px !important; }
.nd-input {
  display: block; width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 11px 16px;
  border-radius: 10px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(139,92,246,.38);
  color: #f1f5f9; font-size: 1rem; font-weight: 700; font-family: inherit; outline: none; transition: border-color .15s;
}
.nd-input::placeholder { color: #4b5a70; }
.nd-input:focus { border-color: rgba(139,92,246,.75); box-shadow: 0 0 0 3px rgba(109,40,217,.18); }
.nd-error { font-size: .78rem; color: #f87171; font-weight: 700; margin: 6px 0 0; min-height: 1.1em; }

/* Post-run rank in game-over */
.go-rank-section {
  margin: 8px 0 0; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(109,40,217,.2), rgba(76,29,149,.12));
  border: 1px solid rgba(139,92,246,.38);
}
.go-rank-row { font-size: .88rem; font-weight: 800; color: #c4b5fd; text-align: center; line-height: 1.55; }
.go-rank-highlight { color: #fde68a; }

/* Rank toast */
.lb-rank-toast {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-120%);
  padding: 10px 22px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(109,40,217,.96), rgba(76,29,149,.96));
  border: 1.5px solid rgba(167,139,250,.55); color: #fff; font-size: .88rem; font-weight: 800;
  z-index: 9999; transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s;
  box-shadow: 0 6px 24px rgba(0,0,0,.4); pointer-events: none; white-space: nowrap;
}
.lb-rank-toast.lrt-show { transform: translateX(-50%) translateY(0); }

/* Leaderboard button on home */
.btn-lb-open {
  background: linear-gradient(135deg, rgba(251,191,36,.18) 0%, rgba(245,158,11,.1) 100%) !important;
  border: 1.5px solid rgba(251,191,36,.45) !important;
  color: #fde68a !important;
}
.btn-lb-open:hover { background: linear-gradient(135deg, rgba(251,191,36,.3) 0%, rgba(245,158,11,.2) 100%) !important; }

/* Leaderboard button in game-over share row */
.btn-lb-gameover {
  padding: 8px 16px; border-radius: 10px; background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.4); color: #c4b5fd; font-weight: 800; font-size: .82rem;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.btn-lb-gameover:hover { background: rgba(139,92,246,.3); }

/* Sticky "your rank" pinned bar */
.lb-you-sticky {
  position: sticky; bottom: 0; margin: 0 -20px; padding: 10px 20px;
  background: linear-gradient(90deg, rgba(109,40,217,.94), rgba(76,29,149,.94));
  border-top: 1px solid rgba(139,92,246,.4);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; font-weight: 800; color: #e9d5ff; backdrop-filter: blur(8px);
}
.lb-you-sticky.hidden { display: none !important; }

/* Perf-low: strip animations */
body.reduced-motion .lb-panel, body.perf-low .lb-panel { animation: none !important; }
body.reduced-motion .lb-overlay, body.perf-low .lb-overlay { animation: none !important; }
body.reduced-motion .lb-row, body.perf-low .lb-row { animation: none !important; transition: none !important; }

/* Mobile */
@media (max-width: 540px) {
  .lb-panel { border-radius: 18px; max-height: 96vh; }
  .lb-header { padding: 16px 16px 12px; }
  .lb-title { font-size: 1.25rem; }
  .lb-board { padding: 0 14px 12px; }
  .lb-tabs { padding: 10px 14px 0; gap: 3px; }
  .lb-tab { font-size: .72rem; padding: 7px 6px; }
  .lb-your-stats { margin: 10px 14px 0; padding: 12px 14px; }
  .lb-footer { padding: 10px 14px 12px; }
  .lb-row { grid-template-columns: 36px 1fr auto; gap: 0 8px; padding: 10px 10px; }
  .lb-rank-num { font-size: .85rem; }
  .lb-player-name { font-size: .82rem; }
  .lb-score-val { font-size: .82rem; }
}