:root{
  --ink:#111936;
  --muted:#5d6684;
  --paper:#fffaf0;
  --panel:#ffffff;
  --mint:#00e0b8;
  --mint-dark:#008b74;
  --sun:#ffd327;
  --orange:#ff9f1c;
  --coral:#ff477e;
  --berry:#b42dff;
  --violet:#5f3bff;
  --sky:#14b8ff;
  --navy:#111936;
  --line:rgba(17,25,54,.14);
  --shadow:0 24px 46px rgba(29,39,86,.20);
  --soft-shadow:0 12px 24px rgba(29,39,86,.14);
}

*{box-sizing:border-box}
html{min-height:100%;background:#f4fbff}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:'Nunito',sans-serif;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,247,115,.95) 0 118px,transparent 120px),
    radial-gradient(circle at 82% 10%,rgba(0,223,255,.75) 0 150px,transparent 152px),
    radial-gradient(circle at 78% 88%,rgba(255,64,132,.72) 0 210px,transparent 212px),
    radial-gradient(circle at 10% 80%,rgba(0,224,184,.78) 0 174px,transparent 176px),
    linear-gradient(160deg,#3f35ff 0%,#23c8ff 32%,#77f4d2 58%,#ffe87a 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.95;
  background-image:
    radial-gradient(circle at 20% 25%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 68%,rgba(255,255,255,.70) 0 2px,transparent 3px),
    linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:92px 92px,116px 116px,36px 36px,36px 36px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.28));
}

body::after{
  content:"";
  position:fixed;
  left:50%;
  top:49%;
  width:min(1040px,92vw);
  height:520px;
  transform:translate(-50%,-50%) rotate(-1deg);
  border-radius:60px;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(105deg,rgba(255,255,255,.30),rgba(255,255,255,.08)),
    radial-gradient(circle at 18% 18%,rgba(255,211,39,.36),transparent 34%),
    radial-gradient(circle at 82% 30%,rgba(180,45,255,.24),transparent 34%),
    radial-gradient(circle at 45% 100%,rgba(0,224,184,.30),transparent 42%);
  box-shadow:0 40px 90px rgba(21,36,96,.22);
}

button,a{font:inherit}
button:focus-visible,a:focus-visible{outline:4px solid rgba(255,191,47,.65);outline-offset:4px}

.app{
  width:min(1120px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:14px 20px 104px;
  position:relative;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:10px 16px;
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  background:linear-gradient(180deg,#ffffff,#ffe672);
  border:3px solid rgba(255,255,255,.95);
  border-radius:999px;
  box-shadow:0 7px 0 rgba(217,145,0,.55),var(--soft-shadow);
}

.session-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#111936,#4620a8 58%,#b42dff);
  color:#fff;
  font-weight:900;
  box-shadow:var(--soft-shadow);
}

.brand-ribbon{
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:2;
  color:#ffffff;
  font-weight:1000;
  font-size:1rem;
  line-height:1;
  white-space:nowrap;
  padding:10px 24px 11px;
  border-radius:999px;
  background:linear-gradient(135deg,#111936,#5f3bff 48%,#b42dff);
  border:3px solid rgba(255,255,255,.82);
  box-shadow:0 7px 0 rgba(17,25,54,.22),0 13px 24px rgba(95,59,255,.30),inset 0 1px 0 rgba(255,255,255,.36);
  text-shadow:0 2px 0 rgba(17,25,54,.22);
}

.hud{
  display:grid;
  grid-template-columns:1fr minmax(280px,1.35fr) 1fr;
  align-items:stretch;
  gap:14px;
  margin-bottom:8px;
}

.hud-card,.title-card{
  background:linear-gradient(145deg,rgba(17,25,54,.96),rgba(53,35,138,.94));
  border:3px solid rgba(255,255,255,.28);
  border-radius:24px;
  box-shadow:0 9px 0 rgba(17,25,54,.26),0 18px 34px rgba(17,25,54,.22);
  padding:12px 16px;
}

.hud-card{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:center;
}

.stat-label{
  display:block;
  color:rgba(255,255,255,.66);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.stat-value{
  display:block;
  margin-top:2px;
  font-size:1.1rem;
  font-weight:1000;
  color:#ffffff;
}

.title-card{
  text-align:center;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,211,39,.70),transparent 28%),
    radial-gradient(circle at 86% 4%,rgba(20,184,255,.50),transparent 32%),
    linear-gradient(145deg,#111936,#36208f 52%,#771ec2);
  border-color:rgba(255,255,255,.34);
}
.hud-title{
  margin:0;
  color:#ffffff;
  text-shadow:0 4px 0 rgba(17,25,54,.28);
  font-size:2rem;
  font-weight:1000;
  line-height:1.05;
  letter-spacing:0;
}
.subtitle{
  margin:6px 0 0;
  color:#ffe672;
  font-size:.98rem;
  font-weight:800;
}

.progress-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:2px auto 12px;
  max-width:820px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.12));
  border:2px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 10px 24px rgba(17,25,54,.14);
}

.progress-dot{
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:1rem;
  font-weight:1000;
  color:#5b647d;
  background:
    radial-gradient(circle at 32% 24%,#ffffff 0 18%,transparent 19%),
    linear-gradient(180deg,#ffffff,#dfe9ff);
  border:4px solid rgba(255,255,255,.95);
  box-shadow:0 7px 0 rgba(17,25,54,.18),0 12px 20px rgba(17,25,54,.18),inset 0 -5px 10px rgba(80,120,180,.16);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
button.progress-dot{cursor:pointer}
button.progress-dot:hover{
  transform:translateY(-5px) scale(1.08);
  box-shadow:0 0 0 5px rgba(255,255,255,.28),0 10px 0 rgba(17,25,54,.22),0 18px 26px rgba(17,25,54,.24),inset 0 -5px 10px rgba(80,120,180,.16);
}
button.progress-dot:active{transform:translateY(0) scale(.98)}
.progress-dot::after{
  content:"";
  position:absolute;
  inset:7px 10px auto 10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.44);
  pointer-events:none;
}
.progress-num{
  position:relative;
  z-index:1;
  line-height:1;
}
.progress-star{
  position:absolute;
  right:-8px;
  bottom:-3px;
  z-index:2;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4b2a00;
  background:linear-gradient(180deg,#fff7a8,#ffd327);
  border:2px solid #fff;
  font-size:.6rem;
  box-shadow:0 3px 7px rgba(17,25,54,.20);
}
.progress-dot.current{
  color:#ffffff;
  background:linear-gradient(145deg,#ff477e,#b42dff 55%,#5f3bff);
  border-color:#fff;
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 0 0 5px rgba(255,255,255,.34),0 0 0 10px rgba(255,211,39,.28),0 11px 0 rgba(78,25,153,.62),0 20px 28px rgba(17,25,54,.28),inset 0 -6px 12px rgba(17,25,54,.20);
}
.progress-dot.current .progress-star{display:none}
.progress-dot.completed{color:#fff;border-color:#fff}
.progress-dot.star3{background:linear-gradient(145deg,#ffd327,#ff9f1c)}
.progress-dot.star2{background:linear-gradient(145deg,#14b8ff,#5f3bff)}
.progress-dot.star1{background:linear-gradient(145deg,#ff477e,#b42dff)}
.progress-dot.locked{
  opacity:.72;
  filter:saturate(.75);
}

.badge-container{
  display:flex;
  min-height:38px;
  justify-content:center;
  gap:8px;
  margin-bottom:4px;
}
.badge{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:2px solid rgba(255,191,47,.75);
  box-shadow:0 8px 18px rgba(255,143,31,.18);
  animation:badgePop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop{0%{transform:scale(.2)}80%{transform:scale(1.18)}100%{transform:scale(1)}}

.game-board{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 20px 86px;
  overflow:hidden;
}

.mission-shell{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  gap:20px;
  align-items:stretch;
  padding:18px;
  border-radius:38px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.10)),
    radial-gradient(circle at 10% 14%,rgba(255,211,39,.22),transparent 36%),
    radial-gradient(circle at 88% 80%,rgba(255,71,126,.20),transparent 38%);
  border:4px solid rgba(255,255,255,.30);
  box-shadow:0 18px 50px rgba(18,27,74,.20);
}

.visual-stage{
  width:100%;
  height:390px;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:
    radial-gradient(circle at 13% 12%,rgba(255,236,88,.52),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(181,100,255,.38),transparent 34%),
    radial-gradient(circle at 18% 94%,rgba(0,224,184,.34),transparent 40%),
    linear-gradient(145deg,#fffdf5 0%,#eff9ff 42%,#f1e7ff 100%);
  border:5px solid transparent;
  background-clip:padding-box;
  border-radius:30px;
  box-shadow:0 0 0 5px rgba(255,255,255,.72),0 0 0 11px rgba(255,211,39,.34),0 18px 34px rgba(17,25,54,.18),var(--shadow);
  transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  overflow:hidden;
}

.coach-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
}

.step-box,.question-card{
  width:100%;
  background:linear-gradient(145deg,#ffffff,#f7fbff);
  border:3px solid rgba(95,59,255,.16);
  border-radius:24px;
  box-shadow:0 8px 0 rgba(17,25,54,.06),var(--soft-shadow);
}

.step-box{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:16px;
}
.step-box.active{display:flex}

.step-line{
  display:flex;
  align-items:center;
  gap:8px;
  color:#344054;
  font-size:.98rem;
  font-weight:800;
  line-height:1.35;
}
.step-line::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--mint);
  box-shadow:0 0 0 5px rgba(36,198,164,.13);
}
.step-line strong{color:var(--violet);font-weight:1000}

.question-card{
  padding:18px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,211,39,.32),transparent 34%),
    linear-gradient(145deg,#ffffff,#fff1f8);
  border-color:rgba(255,71,126,.38);
  box-shadow:0 9px 0 rgba(255,71,126,.18),0 16px 28px rgba(17,25,54,.14);
}
.question-text{
  margin:0;
  color:var(--ink);
  font-size:1.26rem;
  font-weight:1000;
  line-height:1.35;
}

.options-row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:12px;
}

.choice-btn{
  min-height:66px;
  padding:12px 14px;
  color:#111827;
  border:0;
  border-radius:22px;
  background:linear-gradient(180deg,#fff7b8,#ffd327);
  box-shadow:0 8px 0 #d99100,0 14px 24px rgba(255,210,46,.34);
  cursor:pointer;
  font-weight:1000;
  font-size:1.42rem;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease;
}
.choice-btn:hover{transform:translateY(-4px);box-shadow:0 0 0 6px rgba(255,79,123,.28),0 8px 0 #d99100,0 18px 28px rgba(255,210,46,.34)}
.choice-btn:active{transform:translateY(2px);box-shadow:0 4px 0 #df9d10,0 10px 18px rgba(255,191,47,.18)}
.choice-btn.correct{background:linear-gradient(180deg,#d9fff6,#78f1d9);box-shadow:0 8px 0 var(--mint-dark),0 14px 24px rgba(36,198,164,.25)}
.choice-btn.wrong{background:linear-gradient(180deg,#fff0ee,#ffaaa4);box-shadow:0 8px 0 #d4473d,0 14px 24px rgba(255,107,95,.23);animation:shake .36s}
.choice-btn:disabled{cursor:not-allowed;filter:saturate(.75);opacity:.72;transform:none}
.choice-btn:nth-child(2){background:linear-gradient(180deg,#e7fbff,#14b8ff);box-shadow:0 8px 0 #087fb3,0 14px 24px rgba(20,184,255,.30);color:#08243a}
.choice-btn:nth-child(3){background:linear-gradient(180deg,#f6e8ff,#c85cff);box-shadow:0 8px 0 #7421aa,0 14px 24px rgba(180,45,255,.25);color:#111827}
.choice-btn:nth-child(4){background:linear-gradient(180deg,#ffe3ec,#ff7aa2);box-shadow:0 8px 0 #b91d4c,0 14px 24px rgba(255,71,126,.26);color:#111827}
.choice-btn.correct{background:linear-gradient(180deg,#d8fff6,#00e0b8);box-shadow:0 8px 0 var(--mint-dark),0 14px 24px rgba(0,224,184,.30);color:#063c34}
.choice-btn.wrong{background:linear-gradient(180deg,#ffe2df,#ff4f4f);box-shadow:0 8px 0 #bf2525,0 14px 24px rgba(255,79,79,.25);color:#fff}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.show-me-how{
  display:none;
  min-height:50px;
  align-self:center;
  padding:11px 22px;
  color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--berry));
  border:0;
  border-radius:999px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(101,84,255,.25);
}
.show-me-how.active{display:inline-flex;align-items:center}
.show-me-how:hover{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(101,84,255,.18),0 12px 24px rgba(101,84,255,.24)}

.guide-section{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  width:min(940px,calc(100% - 32px));
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  pointer-events:none;
}
.guide-bubble{
  pointer-events:auto;
  max-width:760px;
  min-height:58px;
  padding:13px 18px;
  color:#172033;
  background:linear-gradient(145deg,#ffffff,#e7fff9);
  border:3px solid rgba(0,224,184,.42);
  border-radius:20px 20px 6px 20px;
  box-shadow:0 8px 0 rgba(0,139,116,.16),var(--soft-shadow);
  font-size:1.08rem;
  font-weight:900;
  line-height:1.35;
}
.guide-avatar{
  flex:0 0 auto;
  font-size:2.8rem;
  filter:drop-shadow(0 9px 12px rgba(24,32,52,.24));
}

.pv-svg{display:block;width:100%;height:100%;max-width:760px}
.big-mult,.decomp,.word-problem,.challenge-display{text-align:center;color:var(--ink)}
.big-mult{font-size:3rem;font-weight:1000}
.big-mult .bm-num{color:var(--violet)}
.big-mult .bm-op{color:var(--coral);margin:0 8px}
.big-mult .bm-q{color:var(--mint-dark)}
.decomp{font-size:1.15rem;line-height:1.8}
.decomp .dc-title{font-size:1.65rem;font-weight:1000;color:var(--violet)}
.decomp .dc-step{color:#344054}
.decomp .dc-final{color:var(--mint-dark);font-weight:1000;font-size:1.35rem}
.word-problem{font-size:1.45rem;line-height:1.7;max-width:520px}
.word-problem strong{color:var(--berry);font-size:1.8rem}
.challenge-num{font-size:3rem;font-weight:1000;color:var(--violet)}
.challenge-hint{margin-top:10px;color:var(--muted);font-weight:900}

.modal,.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:20px;
  background:rgba(16,24,40,.42);
  backdrop-filter:blur(10px);
}
.modal.hidden,.overlay{display:none}
.overlay.active{display:flex}
.modal-content,.overlay-content{
  width:min(520px,100%);
  text-align:center;
  padding:36px;
  border-radius:32px;
  background:
    radial-gradient(circle at 22% 8%,rgba(255,211,39,.30),transparent 34%),
    radial-gradient(circle at 82% 14%,rgba(20,184,255,.24),transparent 34%),
    linear-gradient(145deg,#fff,#f3fbff);
  border:3px solid rgba(255,255,255,.86);
  box-shadow:0 30px 80px rgba(16,24,40,.25);
  animation:modalAppear .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalAppear{0%{opacity:0;transform:scale(.9) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.modal-icon,.overlay-icon{
  width:92px;
  height:92px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  background:linear-gradient(135deg,var(--sky),var(--violet));
  color:#fff;
  font-size:3.2rem;
  box-shadow:0 18px 30px rgba(80,184,255,.24);
}
.modal-content h2,.overlay-title{
  margin:0 0 10px;
  font-size:1.75rem;
  line-height:1.1;
  font-weight:1000;
  color:var(--ink);
}
.modal-content p{
  margin:0 auto 24px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.45;
  font-weight:800;
}
.btn-start-game,.btn-next{
  min-height:56px;
  padding:14px 30px;
  border:0;
  border-radius:999px;
  color:#172033;
  background:linear-gradient(180deg,#ffdb68,var(--sun));
  box-shadow:0 8px 0 #d69000,0 16px 24px rgba(255,191,47,.24);
  cursor:pointer;
  font-weight:1000;
  font-size:1.08rem;
}
.btn-start-game:hover,.btn-next:hover{transform:translateY(-3px);box-shadow:0 0 0 6px rgba(255,191,47,.24),0 8px 0 #d69000,0 18px 28px rgba(255,191,47,.25)}
.overlay-stars{font-size:2.2rem;margin:18px 0 22px;color:var(--sun)}

.confetti-container,.particle-container{position:fixed;pointer-events:none;z-index:99}
.particle{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:particleBurst .7s ease-out forwards}
@keyframes particleBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}
.float-score{position:fixed;font-size:2rem;font-weight:1000;color:var(--mint-dark);text-shadow:0 2px 10px rgba(255,255,255,.8);pointer-events:none;z-index:150;animation:floatUp 1.2s ease-out forwards}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}40%{opacity:1;transform:translateY(-30px) scale(1.16)}100%{opacity:0;transform:translateY(-78px) scale(.68)}}
.confetti-piece{position:absolute;width:10px;height:10px;border-radius:3px;animation:confetti-fall 2s ease-out forwards}
@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

.col-highlight{animation:colPulse 1.4s ease-in-out infinite}
@keyframes colPulse{0%,100%{stroke:rgba(101,84,255,.22);stroke-width:1}50%{stroke:var(--berry);stroke-width:4}}

@media(max-width:900px){
  .app{padding-inline:14px}
  .hud{grid-template-columns:1fr}
  .hud-card{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mission-shell{grid-template-columns:1fr}
  .visual-stage{height:340px;min-height:320px}
  .options-row{grid-template-columns:repeat(2,minmax(120px,1fr))}
}

@media(max-width:560px){
  .app{padding:12px 10px 132px}
  .topbar{align-items:stretch}
  .session-pill{display:none}
  .brand-ribbon{top:16px;font-size:.72rem;padding:8px 12px 9px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
  .back-btn{min-height:44px;padding:8px 12px}
  .hud-title{font-size:1.45rem}
  .subtitle{font-size:.84rem}
  .hud-card{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}
  .progress-bar{flex-wrap:wrap;gap:8px;padding:7px 8px;border-radius:22px}
  .progress-dot{width:38px;height:38px;flex-basis:38px;font-size:.9rem;border-width:3px}
  .progress-star{width:18px;height:18px;font-size:.65rem}
  .game-board{gap:12px;padding:8px 0 118px}
  .mission-shell{padding:10px;border-radius:28px}
  .visual-stage{height:230px;min-height:220px;padding:8px;border-radius:22px}
  .question-text{font-size:1.03rem}
  .choice-btn{min-height:54px;font-size:1.08rem;border-radius:16px}
  .guide-section{width:calc(100% - 18px);gap:8px;bottom:16px}
  .guide-bubble{font-size:.86rem;padding:10px 12px;min-height:52px}
  .guide-avatar{font-size:2.2rem}
  .modal-content,.overlay-content{padding:28px 22px;border-radius:26px}
}