/* ═══════════════ MATH ARCADE — core styles ═══════════════ */
:root {
  --bg-deep: #1a1740;
  --bg-panel: #2a2560;
  --bg-card: #352f78;
  --neon-pink: #ff5fa2;
  --neon-yellow: #ffd93d;
  --neon-cyan: #4dd8ff;
  --neon-green: #6bf178;
  --neon-purple: #b388ff;
  --neon-orange: #ff9f45;
  --ink: #ffffff;
  --ink-soft: #cfc9ff;
  --radius: 22px;
  --font-fun: "Arial Rounded MT Bold", "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-fun);
  background: radial-gradient(1200px 700px at 50% -10%, #3a2f8f 0%, var(--bg-deep) 60%) fixed;
  color: var(--ink);
  overflow-x: hidden;
  user-select: none;
}
button { font-family: inherit; }

/* screens */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ─────────── TITLE ─────────── */
#screen-title.active { align-items: center; justify-content: center; text-align: center; padding: 24px; position: relative; }
.title-inner { position: relative; z-index: 2; max-width: 900px; width: 100%; }
.marquee {
  background: linear-gradient(180deg, #241f55, #1c1847);
  border: 4px solid var(--neon-yellow);
  border-radius: 28px;
  padding: 18px 30px 22px;
  box-shadow: 0 0 40px rgba(255, 217, 61, .25), inset 0 0 30px rgba(0,0,0,.4);
  display: inline-block;
}
.marquee-bulbs { display: flex; justify-content: center; gap: 14px; margin-bottom: 6px; }
.marquee-bulbs.bottom { margin: 8px 0 0; }
.marquee-bulbs::before { content: "💡 · 💡 · 💡 · 💡 · 💡"; letter-spacing: 4px; font-size: 14px; opacity: .9; animation: twinkle 1.2s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .35; } }
.game-logo { margin: 0; font-size: clamp(2.6rem, 9vw, 5.2rem); line-height: 1; letter-spacing: 2px; }
.logo-math {
  color: var(--neon-cyan);
  text-shadow: 0 0 14px rgba(77,216,255,.8), 4px 4px 0 #123;
}
.logo-arcade {
  color: var(--neon-pink);
  text-shadow: 0 0 14px rgba(255,95,162,.8), 4px 4px 0 #312;
}
.tagline { color: var(--ink-soft); font-size: 1.15rem; margin: 18px 0 8px; }

.mascot-bubble { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 22px; }
.mascot { font-size: 3.2rem; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.bubble {
  background: #fff; color: #333; border-radius: 18px; padding: 10px 16px;
  font-size: 1rem; max-width: 320px; position: relative; box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.bubble::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent; border-right-color: #fff; }

.grade-picker { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 8px 0 26px; }
.grade-btn {
  --c: var(--neon-cyan);
  width: 128px; height: 128px; border-radius: 26px; border: 4px solid var(--c);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.25)), var(--bg-card);
  color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 0 24px color-mix(in srgb, var(--c) 35%, transparent);
  transition: transform .12s, box-shadow .12s;
}
.grade-btn:hover, .grade-btn:focus-visible { transform: translateY(-4px) scale(1.04); }
.grade-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.grade-btn .g-emoji { font-size: 2.4rem; }
.grade-btn .g-label { font-weight: bold; font-size: 1.05rem; }
.grade-btn .g-stars { font-size: .8rem; color: var(--neon-yellow); }

.title-footer { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.chip-btn {
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25); color: var(--ink-soft);
  border-radius: 999px; padding: 8px 16px; font-size: .9rem; cursor: pointer; text-decoration: none;
  transition: background .15s;
}
.chip-btn:hover { background: rgba(255,255,255,.2); }
.teacher-link { font-size: .8rem; opacity: .75; }

/* ─────────── ARCADE (game picker) ─────────── */
.arcade-header, .play-header {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  background: rgba(0,0,0,.25); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px);
}
.arcade-header h2, .play-header h2 { margin: 0; flex: 1; text-align: center; font-size: 1.4rem; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.back-btn {
  background: var(--neon-pink); border: none; color: #fff; font-weight: bold; font-size: 1rem;
  border-radius: 999px; padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 0 #a83a6b;
}
.back-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #a83a6b; }
.star-bank { background: rgba(0,0,0,.35); border-radius: 999px; padding: 8px 14px; font-weight: bold; color: var(--neon-yellow); }

.cabinet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px; padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%;
}
.cabinet {
  --c: var(--neon-cyan);
  border: 4px solid var(--c); border-radius: var(--radius); background: var(--bg-card);
  padding: 18px 16px 16px; cursor: pointer; text-align: center; color: #fff; position: relative;
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 0 20px color-mix(in srgb, var(--c) 25%, transparent);
  transition: transform .12s;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.cabinet:hover, .cabinet:focus-visible { transform: translateY(-5px) rotate(-.6deg); }
.cabinet:active { transform: translateY(2px); }
.cabinet .cab-icon { font-size: 3rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.cabinet .cab-title { font-size: 1.15rem; font-weight: bold; }
.cabinet .cab-skill { font-size: .82rem; color: var(--ink-soft); }
.cabinet .cab-stars { font-size: .95rem; color: var(--neon-yellow); min-height: 1.2em; }

/* ─────────── PLAY AREA ─────────── */
.game-container {
  flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 18px;
  display: flex; flex-direction: column;
}

/* shared widgets games may use */
.big-btn {
  --c: var(--neon-cyan);
  background: var(--c); color: #14123a; border: none; border-radius: 20px;
  font-family: inherit; font-size: 1.6rem; font-weight: bold; padding: 18px 26px; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.35); transition: transform .1s; min-width: 84px; min-height: 68px;
}
.big-btn:hover { transform: translateY(-3px); }
.big-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.big-btn.correct { background: var(--neon-green); animation: pulse .4s; }
.big-btn.wrong { background: #ff6464; animation: shake .4s; }
@keyframes pulse { 50% { transform: scale(1.12); } }
@keyframes shake { 25% { transform: translateX(-8px);} 75% { transform: translateX(8px);} }

.hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hud .hud-pill { background: rgba(0,0,0,.3); border-radius: 999px; padding: 8px 16px; font-weight: bold; font-size: 1.05rem; }
.prompt-card {
  background: rgba(255,255,255,.08); border: 3px dashed rgba(255,255,255,.25);
  border-radius: var(--radius); padding: 22px; text-align: center; font-size: 1.5rem; margin-bottom: 18px;
}
.choices { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* progress dots */
.round-dots { display: flex; gap: 6px; }
.round-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.2); }
.round-dots i.done { background: var(--neon-green); }
.round-dots i.now { background: var(--neon-yellow); animation: twinkle 1s infinite; }

/* ─────────── OVERLAY ─────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(10,8,30,.75); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .25s;
}
.overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.overlay-card {
  background: linear-gradient(180deg, #3d3690, #2a2560);
  border: 4px solid var(--neon-yellow); border-radius: 28px; padding: 30px 34px;
  text-align: center; max-width: 460px; width: 100%; box-shadow: 0 0 60px rgba(255,217,61,.35);
  animation: popIn .35s cubic-bezier(.2,1.6,.4,1);
}
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
.overlay-card h2 { margin: 0 0 6px; font-size: 2rem; color: var(--neon-yellow); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.overlay-card .result-stars { font-size: 2.6rem; letter-spacing: 6px; margin: 10px 0; }
.overlay-card .result-stars .dim { opacity: .25; }
.overlay-card p { color: var(--ink-soft); font-size: 1.05rem; }
.overlay-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100vw; height: 100vh; }

.title-stars { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.title-stars i { position: absolute; font-size: 14px; opacity: .5; animation: twinkle 2s infinite; }

@media (max-width: 560px) {
  .grade-btn { width: 104px; height: 104px; }
  .cabinet-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 14px; }
  .big-btn { font-size: 1.3rem; padding: 14px 18px; }
}

/* ─────────── FX / JUICE ─────────── */
.fx-float {
  position: fixed; z-index: 70; pointer-events: none; font-weight: bold;
  font-size: 1.6rem; text-shadow: 0 2px 4px rgba(0,0,0,.5); transform: translateX(-50%);
  animation: fxFloat 1.05s ease-out forwards;
}
@keyframes fxFloat {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(1); }
}
.fx-particle {
  position: fixed; z-index: 70; pointer-events: none; font-size: 1.2rem;
  animation: fxParticle .85s ease-out forwards;
}
@keyframes fxParticle {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.5); }
}
.fx-boing { animation: fxBoing .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes fxBoing {
  0% { transform: scale(1); } 30% { transform: scale(1.25, .8); }
  60% { transform: scale(.9, 1.15); } 100% { transform: scale(1); }
}
.fx-wiggle { animation: fxWiggle .5s; }
@keyframes fxWiggle {
  25% { transform: rotate(-8deg) scale(1.08); } 50% { transform: rotate(8deg); }
  75% { transform: rotate(-5deg); } 100% { transform: rotate(0); }
}
.fx-thump { animation: fxThump .3s; }
@keyframes fxThump { 30% { transform: translateY(3px) scale(1.004); } }
.streak-pill { background: linear-gradient(90deg, #ff9f45, #ff5fa2); color: #fff; }

/* moving sprite base for games */
.sprite { position: absolute; font-size: 2.4rem; user-select: none; cursor: pointer;
  transition: transform .15s; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.sprite:hover { transform: scale(1.15); }
.stage {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: rgba(255,255,255,.06); border: 3px dashed rgba(255,255,255,.2);
  min-height: 300px;
}
@keyframes drift { from { transform: translateX(-10%); } to { transform: translateX(110%); } }
@keyframes bobble { 50% { transform: translateY(-10px); } }

/* ─────────── ART ASSETS ─────────── */
img.art { display: block; object-fit: contain; }
.g-emoji img.art { width: 78px; height: 78px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.cab-icon img.art { width: 88px; height: 88px; filter: drop-shadow(0 5px 7px rgba(0,0,0,.45)); }
.cabinet .cab-icon { font-size: 3rem; line-height: 1; }
.mascot img.art { width: 72px; height: 72px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.result-mascot { display: flex; justify-content: center; margin: -6px 0 4px; }
.result-mascot img.art { width: 118px; height: 118px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); animation: bob 2.2s ease-in-out infinite; }
.result-stars img.rstar { width: 54px; height: 54px; display: inline-block; vertical-align: middle; margin: 0 3px; }
.result-stars img.rstar.dim { opacity: .35; filter: grayscale(.6); }

/* background scenes (fall back to dark overlay if the image is missing) */
#screen-title.active {
  background:
    linear-gradient(rgba(18,14,48,.60), rgba(18,14,48,.82)),
    url('../assets/art/bg-title.png') center / cover no-repeat fixed;
}
#screen-arcade.active, #screen-play.active {
  background:
    linear-gradient(rgba(18,14,48,.86), rgba(18,14,48,.92)),
    url('../assets/art/bg-play.png') center / cover no-repeat fixed;
}