/* ═══════════════════════════════════════════════════════════
   GAME LAYER — Duolingo-grade juice
   Chunky pressable buttons · XP HUD · level-up celebration ·
   mascot guide · striped progress bars · squash & stretch
   Loads AFTER components.css so overrides win.
   ═══════════════════════════════════════════════════════════ */

/* ── Juice keyframes ───────────────────────────────────── */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(.5); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bubble-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.85); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes xp-pop-in {
  0%   { opacity: 0; transform: translateX(40px) scale(.7); }
  60%  { opacity: 1; transform: translateX(-4px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-10deg) scale(1.08); }
  40% { transform: rotate(9deg)  scale(1.05); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes stripe-move { to { background-position: 24px 0; } }
@keyframes ray-spin { to { transform: rotate(360deg); } }
@keyframes badge-drop {
  0%   { opacity: 0; transform: scale(2.4) rotate(-14deg); }
  55%  { opacity: 1; transform: scale(.92) rotate(3deg); }
  75%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes hud-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Chunky pressable buttons (the Duolingo press) ─────── */
.btn-v {
  box-shadow: 0 5px 0 oklch(0.46 0.24 295), 0 0 28px var(--violet-glow), 0 8px 18px oklch(0 0 0 / .35);
}
.btn-v:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 oklch(0.46 0.24 295), 0 0 48px var(--violet-glow), 0 12px 26px oklch(0 0 0 / .4);
}
.btn-v:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 oklch(0.46 0.24 295), 0 0 20px var(--violet-glow) !important;
}
.btn-l {
  box-shadow: 0 5px 0 oklch(0.58 0.20 135), 0 0 24px var(--lime-glow);
}
.btn-l:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 oklch(0.58 0.20 135), 0 0 44px var(--lime-glow);
}
.btn-l:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 oklch(0.58 0.20 135), 0 0 18px var(--lime-glow) !important;
}
.btn-o:active { transform: translateY(2px) scale(.98) !important; }

/* Filter tabs pop when selected */
.ftab.on { animation: pop-in .35s var(--spring); }
.tab-btn.on { animation: pop-in .3s var(--spring); }

/* ── Striped, moving progress fills ────────────────────── */
.proj-bar-fill, .fund-fill, .xp-fill, .ar-progress-fill, .fund-bar-fill-v {
  position: relative; overflow: hidden;
}
.proj-bar-fill::after, .fund-fill::after, .xp-fill::after,
.ar-progress-fill::after, .fund-bar-fill-v::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    oklch(1 0 0 / 0.22) 0 6px,
    transparent 6px 12px
  );
  background-size: 24px 100%;
  animation: stripe-move .9s linear infinite;
}

/* ── XP HUD (nav) ──────────────────────────────────────── */
.xp-hud {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px; border-radius: 100px;
  background: oklch(0.14 0.03 285 / 0.8);
  border: 1px solid var(--border-hi);
  cursor: none; user-select: none;
  transition: border-color .2s ease;
}
.xp-hud:hover { border-color: oklch(0.68 0.28 295 / 0.55); }
.xp-hud.pulse .xp-badge { animation: hud-pulse .5s var(--spring); }
.xp-badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px;
  color: oklch(0.1 0.01 270);
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  box-shadow: 0 0 12px var(--lime-glow), inset 0 -2px 0 oklch(0 0 0 / .18);
  flex-shrink: 0;
}
.xp-meta { display: flex; flex-direction: column; gap: 3px; }
.xp-title {
  font-family: 'DM Mono', monospace; font-size: 8px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
  line-height: 1;
}
.xp-track {
  width: 74px; height: 6px; border-radius: 99px;
  background: var(--bg-float); overflow: hidden;
}
.xp-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  transition: width .6s var(--spring);
}

/* ── XP pops (top-right) ───────────────────────────────── */
.xp-pop-stack {
  position: fixed; top: 74px; right: 22px; z-index: 8500;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.xp-pop {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 100px;
  background: oklch(0.16 0.06 145 / 0.95);
  border: 1px solid oklch(0.88 0.24 135 / 0.5);
  color: var(--lime);
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em;
  box-shadow: 0 8px 24px oklch(0 0 0 / .4), 0 0 18px oklch(0.88 0.24 135 / 0.18);
  animation: xp-pop-in .45s var(--spring), t-out .3s ease 2s both;
}
.xp-pop-amt { font-weight: 600; }
.xp-pop-label { color: var(--text-dim); text-transform: uppercase; font-size: 9px; letter-spacing: .12em; }

/* ── Level-up celebration ──────────────────────────────── */
.levelup-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.05 0.02 285 / 0.82);
  backdrop-filter: blur(8px);
  animation: fade-in .25s ease both;
  cursor: none;
}
.levelup-card {
  position: relative; text-align: center; padding: 54px 72px;
  overflow: hidden; border-radius: 28px;
  background: oklch(0.11 0.035 285 / 0.9);
  border: 1px solid var(--border-hi);
  animation: pop-in .5s var(--spring) both;
}
.levelup-rays {
  position: absolute; top: 50%; left: 50%; width: 560px; height: 560px;
  margin: -280px 0 0 -280px; pointer-events: none;
  background: conic-gradient(
    oklch(0.68 0.28 295 / 0.18) 0 12deg, transparent 12deg 30deg,
    oklch(0.88 0.24 135 / 0.14) 30deg 42deg, transparent 42deg 60deg,
    oklch(0.82 0.18 200 / 0.16) 60deg 72deg, transparent 72deg 90deg
  );
  border-radius: 50%;
  animation: ray-spin 14s linear infinite;
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 68%);
          mask-image: radial-gradient(circle, black 0%, transparent 68%);
}
.levelup-badge {
  position: relative; width: 96px; height: 96px; margin: 0 auto 20px;
  border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 52px;
  color: oklch(0.1 0.01 270);
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  box-shadow: 0 8px 0 oklch(0.58 0.20 135), 0 0 54px var(--lime-glow);
  animation: badge-drop .7s var(--spring) .1s both;
}
.levelup-heading {
  position: relative;
  font-family: 'Bebas Neue', sans-serif; font-size: 44px; letter-spacing: .04em;
  background: linear-gradient(120deg, var(--violet), var(--cyan), var(--lime));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.levelup-title {
  position: relative;
  font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--text); margin-top: 4px;
}
.levelup-sub {
  position: relative;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em;
  color: var(--text-faint); margin-top: 14px;
}

/* ── Demo mode pill (nav) ──────────────────────────────── */
.demo-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 100px; cursor: none; flex-shrink: 0;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid oklch(0.80 0.20 68 / 0.45);
  transition: transform .2s var(--spring), box-shadow .2s ease;
}
.demo-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px oklch(0.80 0.20 68 / 0.25);
}
.demo-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px oklch(0.80 0.20 68 / 0.7);
  animation: glow-pulse 1.6s ease infinite;
}

/* ── Sound toggle (nav) ────────────────────────────────── */
.sfx-toggle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.14 0.03 285 / 0.8);
  border: 1px solid var(--border-hi);
  color: var(--text-dim); cursor: none; flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, transform .25s var(--spring);
}
.sfx-toggle:hover {
  color: var(--lime); border-color: oklch(0.88 0.24 135 / 0.5);
  transform: scale(1.12);
}
.sfx-toggle:active { transform: scale(.9); }

/* ── Blip the mascot ───────────────────────────────────── */
.mascot-wrap {
  position: fixed; left: 22px; bottom: 22px; z-index: 7000;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.mascot {
  background: none; border: none; padding: 0; cursor: none;
  filter: drop-shadow(0 10px 22px oklch(0 0 0 / .5)) drop-shadow(0 0 18px oklch(0.68 0.28 295 / 0.25));
  animation: bob 3.2s ease-in-out infinite;
  transition: transform .25s var(--spring);
}
.mascot:hover { transform: scale(1.1); }
.mascot.wiggle { animation: wiggle .7s ease; }
.mascot-eyes { transform-origin: 32px 31px; animation: blink 4.6s ease infinite; }
.mascot-antenna { animation: glow-pulse 1.8s ease infinite; }
.mascot-bubble {
  max-width: 230px; padding: 11px 15px; border-radius: 16px 16px 16px 4px;
  background: oklch(0.15 0.035 285 / 0.96);
  border: 1px solid var(--border-hi);
  backdrop-filter: blur(14px);
  font-size: 12.5px; line-height: 1.55; color: var(--text);
  box-shadow: 0 10px 28px oklch(0 0 0 / .45);
  animation: bubble-in .45s var(--spring) both;
}

/* ══ LEAGUE LEADERBOARD (Duolingo / Candy Crush kit) ═════ */

@keyframes row-in {
  0%   { opacity: 0; transform: translateX(-28px) scale(.92); }
  70%  { opacity: 1; transform: translateX(5px)  scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes pillar-grow {
  0%   { transform: scaleY(0); }
  75%  { transform: scaleY(1.08); }
  100% { transform: scaleY(1); }
}
@keyframes medal-shine {
  0%, 60%, 100% { transform: translateX(-120%) rotate(20deg); }
  30%           { transform: translateX(220%)  rotate(20deg); }
}
@keyframes crown-land {
  0%   { opacity: 0; transform: translateY(-26px) rotate(-18deg) scale(1.6); }
  60%  { opacity: 1; transform: translateY(3px) rotate(4deg) scale(.95); }
  100% { opacity: 1; transform: none; }
}
@keyframes crown-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-4px) rotate(4deg); }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0); }
  50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes chest-wiggle {
  0%, 84%, 100% { transform: rotate(0); }
  87% { transform: rotate(-6deg) scale(1.05); }
  90% { transform: rotate(6deg)  scale(1.05); }
  93% { transform: rotate(-4deg); }
  96% { transform: rotate(3deg); }
}
@keyframes chest-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25) rotate(-5deg); }
  70%  { transform: scale(.9)  rotate(3deg); }
  100% { transform: scale(1); }
}

/* Rank medals */
.lb-medal {
  position: relative; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 oklch(0 0 0 / .3), inset 0 2px 2px oklch(1 0 0 / .5), 0 3px 8px oklch(0 0 0 / .4);
  overflow: hidden;
}
.lb-medal::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; width: 34%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / .65), transparent);
  animation: medal-shine 3.2s ease infinite;
}
.lb-medal-num {
  font-family: 'Bebas Neue', sans-serif; font-size: .55em;
  color: oklch(0.2 0.02 60); position: relative; z-index: 1;
  font-size: 15px;
}
.lb-medal-crown {
  position: absolute; top: -13px; left: 50%; margin-left: -8px;
  color: #ffe27a; filter: drop-shadow(0 2px 4px oklch(0 0 0 / .5));
}
.lb-rank-chip {
  border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px;
  background: var(--bg-float); border: 1px solid var(--border);
  color: var(--text-dim);
}

/* Podium */
.podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 14px; padding: 34px 8px 0; margin-bottom: 26px;
}
.pod-col {
  position: relative; display: flex; flex-direction: column;
  align-items: center; width: 132px; cursor: none;
  transition: transform .25s var(--spring);
}
.pod-col:hover { transform: translateY(-5px); }
.pod-avatar {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 600;
  color: oklch(0.1 0.01 270);
  border: 2.5px solid oklch(1 0 0 / .25);
  box-shadow: 0 6px 18px oklch(0 0 0 / .45);
  animation: badge-drop .6s var(--spring) both;
  margin-bottom: 9px;
}
.pod-1 .pod-avatar { width: 72px; height: 72px; font-size: 18px; animation-delay: .75s; box-shadow: 0 8px 26px oklch(0 0 0 / .5), 0 0 34px oklch(0.85 0.16 85 / 0.35); }
.pod-2 .pod-avatar { animation-delay: .45s; }
.pod-3 .pod-avatar { animation-delay: .15s; }
.pod-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fade-in .4s ease both;
}
.pod-1 .pod-name { animation-delay: .9s; }
.pod-2 .pod-name { animation-delay: .6s; }
.pod-3 .pod-name { animation-delay: .3s; }
.pod-rep {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .03em;
  color: var(--lime); margin: 2px 0 10px;
  animation: fade-in .4s ease both;
}
.pod-1 .pod-rep { color: #ffe27a; font-size: 24px; animation-delay: .9s; }
.pod-2 .pod-rep { animation-delay: .6s; }
.pod-3 .pod-rep { animation-delay: .3s; }
.pod-pillar {
  width: 100%; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; border-radius: 14px 14px 0 0;
  transform-origin: bottom; animation: pillar-grow .55s var(--spring) both;
  border: 1px solid var(--border-hi); border-bottom: none;
}
.pod-1 .pod-pillar {
  height: 112px; animation-delay: .6s;
  background: linear-gradient(180deg, oklch(0.5 0.13 85 / 0.5), oklch(0.24 0.05 85 / 0.25));
  box-shadow: 0 0 34px oklch(0.85 0.16 85 / 0.18);
}
.pod-2 .pod-pillar {
  height: 80px; animation-delay: .3s;
  background: linear-gradient(180deg, oklch(0.55 0.02 260 / 0.4), oklch(0.25 0.01 260 / 0.2));
}
.pod-3 .pod-pillar {
  height: 60px; animation-delay: .05s;
  background: linear-gradient(180deg, oklch(0.45 0.09 55 / 0.45), oklch(0.22 0.04 55 / 0.22));
}
.pod-crown {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  color: #ffe27a; z-index: 2;
  filter: drop-shadow(0 0 10px oklch(0.85 0.16 85 / 0.6));
  animation: crown-land .6s var(--spring) 1.15s both, crown-bob 2.6s ease 1.8s infinite;
}
.pod-spark {
  position: absolute; width: 7px; height: 7px; z-index: 2; pointer-events: none;
  background: #ffe27a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.ps-a { top: 4px;  left: 12%;  animation: sparkle 2.2s ease 1.4s infinite; }
.ps-b { top: 30px; right: 8%;  animation: sparkle 2.6s ease 1.9s infinite; }
.ps-c { top: -8px; right: 26%; animation: sparkle 2.0s ease 2.3s infinite; }

/* League rows */
.community-lb-row { position: relative; }
.community-lb-row:hover .lb-medal { animation: hud-pulse .4s var(--spring); }
.lb-bar-track {
  height: 5px; border-radius: 99px; background: var(--bg-float);
  overflow: hidden; margin-top: 6px; max-width: 220px;
}
.lb-bar-fill {
  height: 100%; border-radius: 99px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform-origin: left; animation: bar-grow 1s var(--snappy) .3s both;
}
.lb-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-55deg, oklch(1 0 0 / 0.2) 0 6px, transparent 6px 12px);
  background-size: 24px 100%;
  animation: stripe-move .9s linear infinite;
}

/* Zone dividers */
.lb-zone {
  display: flex; align-items: center; gap: 12px;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; padding: 10px 4px;
}
.lb-zone::before, .lb-zone::after {
  content: ''; flex: 1; height: 0; border-top: 1.5px dashed currentColor; opacity: .5;
}
.lb-zone-up   { color: var(--lime); }
.lb-zone-down { color: var(--rose); }

/* Replay ceremony button */
.lb-replay {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: oklch(0.14 0.03 285 / 0.8);
  border: 1px solid var(--border-hi);
  color: var(--text-dim); cursor: none; flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, transform .5s var(--spring);
}
.lb-replay:hover {
  color: var(--violet); border-color: oklch(0.68 0.28 295 / 0.55);
  transform: rotate(-180deg) scale(1.1);
}
.lb-replay:active { transform: rotate(-360deg) scale(.92); }

/* Reward chest */
.lb-chest {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px; border: none; cursor: none;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: oklch(0.16 0.05 60);
  background: linear-gradient(135deg, #ffe27a, #f5a83d);
  box-shadow: 0 4px 0 oklch(0.5 0.12 60), 0 0 22px oklch(0.85 0.16 85 / 0.3);
  animation: chest-wiggle 3.4s ease infinite;
  transition: transform .2s var(--spring), box-shadow .2s ease;
}
.lb-chest:hover { transform: translateY(-2px) scale(1.04); }
.lb-chest:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 oklch(0.5 0.12 60) !important; }
.lb-chest.opening { animation: chest-pop .55s var(--spring); }
.lb-chest.claimed {
  animation: none; cursor: none;
  background: var(--bg-float); color: var(--text-faint);
  box-shadow: none; border: 1px solid var(--border);
}

@media (max-width: 600px) {
  .podium { gap: 8px; }
  .pod-col { width: 30%; }
  .pod-1 .pod-pillar { height: 88px; }
  .pod-2 .pod-pillar { height: 62px; }
  .pod-3 .pod-pillar { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-medal::after, .lb-chest, .pod-crown, .pod-spark { animation: none; }
}

/* ── Extra squash & stretch on cards ───────────────────── */
.proj-card:active, .fund-card:active { transform: translateY(-2px) scale(.97) !important; transition-duration: .08s; }
.pipe-step:active { transform: translateY(-2px) scale(.98) !important; }

/* Springier reveals (overrides animations.css) */
.reveal { transform: translateY(42px) scale(.95); }
.reveal.in { transform: none; }

/* ── Responsive / a11y ─────────────────────────────────── */
@media (max-width: 900px) {
  .mascot-wrap { display: none; }
  .xp-meta { display: none; }
  .xp-hud { padding: 4px; border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot-eyes, .mascot-antenna { animation: none; }
  .proj-bar-fill::after, .fund-fill::after, .xp-fill::after,
  .ar-progress-fill::after, .fund-bar-fill-v::after { animation: none; }
  .levelup-rays { animation: none; }
}