*{box-sizing:border-box}
:root{
  --ink:#16213d;--muted:#64748b;--purple:#674df6;--purple2:#8c6cff;
  --yellow:#ffca28;--green:#21c58b;--red:#ff5d73;--blue:#28a9ff;
  --card:#fff;--border:rgba(44,59,100,.12)
}
body{
  margin:0;font-family:Tahoma,Arial,sans-serif;color:var(--ink);
  min-height:100vh;background:
  radial-gradient(circle at 12% 15%,rgba(255,202,40,.22),transparent 22%),
  radial-gradient(circle at 88% 10%,rgba(103,77,246,.22),transparent 25%),
  linear-gradient(180deg,#f8f9ff,#eef4ff);
}
button{font:inherit}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#674df6 1px,transparent 1px);background-size:36px 36px}
.game-shell{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:22px 0 70px;position:relative}
.game-header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:92px}.brand strong{font-size:25px;display:block}.brand span{font-size:13px;color:var(--muted)}
.hud{display:flex;gap:10px;align-items:center}.hud-pill{background:#fff;border:1px solid var(--border);padding:12px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(48,62,105,.08)}
.mini{border:0;border-radius:12px;padding:10px 14px;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(42,53,90,.08);cursor:pointer}.danger{color:#c9344d}
.game-alert{background:#fff0f2;border:1px solid #ffc6cf;color:#b4233b;padding:13px 16px;border-radius:16px;margin-bottom:16px}
.welcome-card{background:linear-gradient(135deg,#5b43e9,#896cff);color:white;border-radius:30px;padding:30px 34px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 22px 60px rgba(84,62,210,.25)}
.welcome-card h1{font-size:clamp(26px,4vw,45px);margin:8px 0}.welcome-card p{opacity:.9}.eyebrow{font-size:13px;font-weight:900;letter-spacing:.2px;opacity:.8}
.mascot-bubble{width:125px;height:125px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:55px;border:2px solid rgba(255,255,255,.35);position:relative}.mascot-bubble span{position:absolute;bottom:-8px;background:#fff;color:#5b43e9;font-size:12px;padding:7px 10px;border-radius:999px;font-weight:bold}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.subject-card{border:0;text-align:right;border-radius:26px;padding:24px;min-height:220px;cursor:pointer;color:white;position:relative;overflow:hidden;box-shadow:0 18px 45px rgba(40,50,90,.15);transition:.2s transform}
.subject-card:hover{transform:translateY(-5px)}.subject-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.13);left:-45px;bottom:-50px}
.subject-icon{font-size:52px;display:block;margin-bottom:18px}.subject-card strong{font-size:25px;display:block}.subject-card small{display:block;margin-top:10px;min-height:34px;line-height:1.6}
.math{background:linear-gradient(135deg,#4f46e5,#8b5cf6)}.science{background:linear-gradient(135deg,#009f83,#2bcf8f)}.persian{background:linear-gradient(135deg,#f28b24,#ffbf33)}
.subject-progress{height:8px;background:rgba(255,255,255,.22);border-radius:999px;margin-top:18px;overflow:hidden}.subject-progress i{height:100%;display:block;background:white;width:0;border-radius:999px}
.map-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px}.map-head h2{font-size:34px;margin:3px 0}
.stage-map{display:grid;grid-template-columns:repeat(10,1fr);gap:12px;padding:24px;background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:28px;box-shadow:0 18px 50px rgba(55,70,110,.08)}
.stage-node{aspect-ratio:1;border:0;border-radius:18px;font-weight:900;font-size:18px;cursor:default;position:relative}
.stage-node.today{background:linear-gradient(135deg,#ffca28,#ff9f1a);color:#623c00;cursor:pointer;box-shadow:0 8px 20px rgba(255,166,30,.28);animation:pulse 1.8s infinite}.stage-node.completed{background:#dff9ef;color:#087955}.stage-node.locked{background:#edf0f6;color:#a0a8b8}.stage-node.missed{background:#f9e5e8;color:#bf6674}.stage-node small{display:block;font-size:10px;margin-top:2px}
@keyframes pulse{50%{transform:scale(1.06)}}
.play-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.stage-name{font-weight:900;font-size:22px}.lives{font-weight:bold}.lives span{color:#ff6b7f;letter-spacing:5px}
.timer-wrap{display:flex;align-items:center;gap:18px;margin:16px 0}.timer{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--purple) 100%,#e8e9f2 0);position:relative}.timer:before{content:"";position:absolute;inset:8px;background:white;border-radius:50%}.timer span{position:relative;font-weight:900;font-size:28px}.timer-wrap h2{margin:5px 0}
.question-card{background:white;border:1px solid var(--border);border-radius:30px;padding:32px;box-shadow:0 22px 60px rgba(50,64,105,.1)}.question-card h1{font-size:clamp(24px,3vw,38px);line-height:1.7;margin:0 0 24px}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.option{border:2px solid #e4e6ef;background:#fbfcff;border-radius:20px;padding:20px;text-align:right;font-weight:800;font-size:18px;cursor:pointer;transition:.15s}.option:hover{border-color:#8f7eff;background:#f5f2ff;transform:translateY(-2px)}.option:disabled{opacity:.55;cursor:not-allowed}.option .key{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ece9ff;color:#5a45e8;margin-left:10px}
.feedback{margin-top:16px;border-radius:18px;padding:16px;font-weight:900;text-align:center;font-size:19px}.feedback.good{background:#e7faef;color:#087955}.feedback.retry{background:#fff5d9;color:#8a5a00}.feedback.bad{background:#ffe9ed;color:#a52f45}
.lesson-card,.complete-card{max-width:760px;margin:30px auto;background:#fff;border:1px solid var(--border);border-radius:30px;padding:30px;box-shadow:0 25px 70px rgba(49,62,100,.12)}.lesson-head{display:flex;align-items:center;gap:14px}.lesson-icon{font-size:55px}.lesson-head h2{margin:5px 0}.lesson-text{background:#f6f4ff;border-radius:16px;padding:15px;line-height:1.9;margin:12px 0}.lesson-card video{width:100%;max-height:440px;background:#101320;border-radius:18px;margin:14px 0}.video-lock{font-size:13px;color:var(--muted);margin-bottom:12px}.lesson-card button,.complete-card button{width:100%;border:0;border-radius:16px;padding:16px;background:var(--purple);color:white;font-weight:900;cursor:pointer}.lesson-card button:disabled{background:#c7c9d5;cursor:not-allowed}
.complete-card{text-align:center}.big-trophy{font-size:90px}.complete-card h1{font-size:42px;margin:8px}.score-pop{font-size:35px;font-weight:900;color:#ef9c00;margin:16px}.complete-card p{color:var(--muted)}
.hidden{display:none!important}
@media(max-width:850px){.subject-grid{grid-template-columns:1fr}.stage-map{grid-template-columns:repeat(5,1fr)}.game-header{align-items:flex-start}.brand span{display:none}.option-grid{grid-template-columns:1fr}.welcome-card{padding:24px}.mascot-bubble{width:90px;height:90px;font-size:40px}}
.level-hud{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);padding:7px 10px;border-radius:17px}.level-badge{background:linear-gradient(135deg,#674df6,#9b7bff);color:#fff;border-radius:11px;padding:8px 9px;font-size:11px;font-weight:900}.xp-mini{width:110px;font-size:10px;color:var(--muted)}.xp-mini span{display:block;margin-bottom:5px}.xp-mini i{height:6px;background:#ebe9f8;border-radius:999px;display:block;overflow:hidden}.xp-mini em{height:100%;display:block;background:linear-gradient(90deg,#674df6,#b084ff);width:0;transition:.6s}.hud-pill.fire{background:#fff4e9;color:#ad5000}.hud-pill.coin{background:#fff9dc;color:#8c6500}
.mission-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.mission-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;box-shadow:0 15px 40px rgba(49,63,105,.08)}.mission-card.daily{background:linear-gradient(135deg,#fff,#f4f1ff)}.mission-card.chest{background:linear-gradient(135deg,#fff,#fff8dd)}.mission-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:35px;background:rgba(103,77,246,.09)}.mission-body h3{margin:4px 0}.mission-body p{margin:5px 0;color:var(--muted)}.mission-progress{height:8px;background:#e9e9f2;border-radius:999px;overflow:hidden;margin:8px 0}.mission-progress i{display:block;height:100%;background:linear-gradient(90deg,#674df6,#a783ff);width:0;transition:.6s}.chest .mission-progress i{background:linear-gradient(90deg,#ffb300,#ffd54f)}.mission-state{background:#ebe7ff;color:#5b43e9;padding:8px 10px;border-radius:999px;font-size:11px;font-weight:900}.mission-state.done{background:#ddf8eb;color:#087955}.mission-state.gold{background:#fff1b8;color:#896000}
.club-card{margin-top:20px;background:rgba(255,255,255,.82);border:1px solid var(--border);border-radius:28px;padding:24px}.club-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.club-stats{display:flex;gap:10px;flex-wrap:wrap}.club-stats span{background:#f4f3fa;padding:9px 12px;border-radius:999px;font-size:12px}.badge-shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}.badge-item{min-height:125px;border:1px solid #e8e8f0;background:#fafbff;border-radius:19px;padding:13px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}.badge-item.locked{filter:grayscale(1);opacity:.35}.badge-icon{font-size:37px}.badge-item strong{font-size:12px}.badge-item small{font-size:9px;color:var(--muted)}
.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:430px;margin:15px auto}.reward-chip{padding:14px;border-radius:17px;font-weight:900;font-size:18px}.reward-chip.xp{background:#eee9ff;color:#5c43dd}.reward-chip.coins{background:#fff4c8;color:#8e6700}.bonus-box{max-width:560px;margin:14px auto;background:#fff3bd;border-radius:18px;padding:15px;font-weight:900;color:#7d5a00}.new-badges{max-width:560px;margin:14px auto;background:#f4f0ff;border-radius:18px;padding:15px}.badge-unlock{display:inline-flex;gap:6px;background:#fff;padding:9px 12px;border-radius:999px;margin:4px;font-weight:900}
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:confettiFall 1.8s ease-in forwards}@keyframes confettiFall{to{transform:translate(var(--x),110vh) rotate(720deg);opacity:.15}}.question-card.correct-flash{animation:correctFlash .55s ease}.question-card.wrong-shake{animation:wrongShake .35s ease}@keyframes correctFlash{50%{transform:scale(1.015);box-shadow:0 0 0 7px rgba(33,197,139,.16)}}@keyframes wrongShake{25%{transform:translateX(7px)}50%{transform:translateX(-7px)}75%{transform:translateX(4px)}}.mascot-bubble{cursor:pointer}
@media(max-width:950px){.mission-row{grid-template-columns:1fr}.badge-shelf{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.level-hud{width:100%}.badge-shelf{grid-template-columns:repeat(2,1fr)}.club-head{flex-direction:column;align-items:flex-start}}


.league-card{margin-top:20px;display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#241d52,#5644b7);color:#fff;text-decoration:none;border-radius:24px;padding:20px 23px;box-shadow:0 18px 45px rgba(52,40,130,.20)}.league-icon{font-size:45px}.league-card h3{margin:4px 0}.league-card small{opacity:.8}.league-card>b{margin-right:auto;background:rgba(255,255,255,.14);padding:10px 13px;border-radius:12px;font-size:12px}

.question-image{text-align:center;margin:12px auto}.question-image img{width:100%;max-width:420px;height:auto;max-height:260px;object-fit:contain;border-radius:20px;box-shadow:0 10px 30px #0002}

/* Keep educational images compact on desktop and fluid on small screens. */
.lesson-image-wrap{width:100%;max-width:440px;margin:14px auto;padding:0 10px;text-align:center}
.lesson-image-wrap img{display:block;width:100%;max-width:420px;height:auto;max-height:260px;margin:0 auto;object-fit:contain;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,.15)}
@media(max-width:600px){.lesson-image-wrap{max-width:100%;margin:12px auto;padding:0 6px}.lesson-image-wrap img{max-width:100%;max-height:220px;border-radius:14px}}