.math-missions-hero{
  padding-bottom:24px;
}

.math-page-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr);
  gap:24px;
  align-items:start;
}

.math-main-column,
.math-player-column,
.math-summary-panel,
.math-domain-panel,
.math-card-panel,
.math-player-shell{
  display:grid;
  gap:18px;
}

.math-summary-panel,
.math-domain-panel,
.math-card-panel,
.math-player-shell{
  padding:24px;
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
  border:1px solid rgba(10,22,40,.08);
  border-radius:28px;
  box-shadow:0 18px 42px rgba(15,23,42,.08);
  overflow:hidden;
  position:relative;
}

.math-summary-panel::before,
.math-domain-panel::before,
.math-card-panel::before,
.math-player-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#3b82f6 0%,#c59f46 100%);
}

.math-summary-panel{
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  align-items:start;
  gap:20px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(197,165,90,.14), transparent 28%),
    linear-gradient(145deg,#f8fbff 0%,#ffffff 46%,#f8f4ea 100%);
}

.math-summary-copy h2,
.math-panel-head h2,
.math-domain-head h3,
.math-player-top h3{
  margin:0;
  color:var(--navy);
}

.math-summary-copy p,
.math-panel-head p,
.math-player-top p,
.math-domain-card p,
.math-activity-card p,
.math-player-empty p,
.math-finish-card p,
.math-step-card p,
.math-story-card p,
.math-feedback,
.math-instruction{
  color:#5b6b84;
}

.math-summary-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.math-stat-card{
  border-radius:22px;
  border:1px solid rgba(10,22,40,.08);
  padding:18px;
  background:#fff;
  box-shadow:0 14px 28px rgba(10,22,40,.06);
}

.math-stat-card strong{
  display:block;
  font-size:1.8rem;
  color:var(--navy);
  line-height:1;
  margin-bottom:8px;
}

.math-stat-card span{
  color:#64748b;
  font-size:.92rem;
}

.math-pill-eyebrow,
.math-player-kicker,
.math-domain-badge,
.math-chip,
.math-meta-chip,
.math-option-chip,
.math-score-pill,
.math-empty-badge,
.math-token-count{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  line-height:1;
}

.math-pill-eyebrow,
.math-empty-badge{
  background:rgba(10,22,40,.06);
  color:var(--navy);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.math-domain-list,
.math-activity-grid{
  display:grid;
  gap:16px;
}

.math-domain-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.math-domain-card,
.math-activity-card,
.math-choice-card,
.math-sort-card,
.math-drop-zone,
.math-finish-card,
.math-ten-card,
.math-story-card,
.math-bin,
.math-step-card,
.math-line-node,
.math-classify-column{
  border-radius:22px;
  border:1px solid rgba(10,22,40,.08);
  background:#fff;
  box-shadow:0 12px 24px rgba(10,22,40,.05);
}

.math-domain-card{
  padding:18px;
  display:grid;
  gap:10px;
}

.math-domain-card strong,
.math-activity-card h3,
.math-choice-card strong,
.math-story-card strong,
.math-classify-column strong,
.math-drop-zone strong,
.math-finish-card h4,
.math-step-card strong{
  color:var(--navy);
}

.math-domain-badge{
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
  font-size:.8rem;
}

.math-panel-head,
.math-domain-head,
.math-progress-head,
.math-player-top,
.math-bin-head,
.math-finish-row,
.math-line-top,
.math-sort-top,
.math-classify-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.math-back-link{
  align-self:start;
}

.math-activity-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.math-activity-card{
  padding:20px;
  display:grid;
  gap:14px;
  position:relative;
  overflow:hidden;
}

.math-activity-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--activity-color,#3b82f6),rgba(197,165,90,.92));
}

.math-activity-card.is-active{
  border-color:rgba(59,130,246,.26);
  box-shadow:0 0 0 4px rgba(59,130,246,.08), 0 18px 34px rgba(10,22,40,.10);
  transform:translateY(-2px);
}

.math-activity-card h3{
  margin:0;
  font-size:1.3rem;
}

.math-activity-top,
.math-card-footer,
.math-player-meta,
.math-controls,
.math-answer-grid,
.math-token-pool,
.math-drop-grid,
.math-choice-grid,
.math-line-grid,
.math-shape-pool,
.math-shape-bins,
.math-mission-grid,
.math-classify-grid,
.math-chip-row,
.math-order-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.math-card-footer{
  justify-content:space-between;
  align-items:center;
}

.math-chip,
.math-meta-chip,
.math-score-pill,
.math-option-chip{
  background:#fff;
  border:1px solid rgba(10,22,40,.08);
  color:#20324d;
  font-size:.84rem;
}

.math-chip.is-domain{background:rgba(59,130,246,.10);color:#1d4ed8;border-color:rgba(59,130,246,.12)}
.math-chip.is-difficulty{background:rgba(197,165,90,.14);color:#8f6c1e;border-color:rgba(197,165,90,.18)}
.math-chip.is-complete{background:rgba(16,185,129,.10);color:#047857;border-color:rgba(16,185,129,.16)}
.math-score-pill{background:rgba(10,22,40,.05)}

.math-card-btn,
.math-next-btn,
.math-secondary-btn,
.math-target-btn,
.math-select-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid transparent;
  font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.math-card-btn,
.math-next-btn,
.math-target-btn{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);
  color:#fff;
  box-shadow:0 14px 24px rgba(10,22,40,.14);
}

.math-secondary-btn,
.math-select-btn{
  background:#fff;
  color:var(--navy);
  border-color:rgba(10,22,40,.10);
}

.math-card-btn:hover,
.math-next-btn:hover,
.math-secondary-btn:hover,
.math-target-btn:hover,
.math-select-btn:hover{
  transform:translateY(-2px);
}

.math-player-shell{
  position:sticky;
  top:112px;
}

.math-player-empty{
  min-height:540px;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:14px;
}

.math-player{
  display:grid;
  gap:16px;
}

.math-player-kicker{
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
  font-size:.8rem;
}

.math-close-btn{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:rgba(10,22,40,.06);
  color:var(--navy);
  font-size:1.2rem;
}

.math-progress-wrap{
  display:grid;
  gap:10px;
}

.math-progress-head span,
.math-progress-head strong{
  color:var(--navy);
}

.math-instruction{
  padding:16px 18px;
  border-radius:20px;
  background:rgba(10,22,40,.04);
  font-weight:600;
}

.math-feedback{
  padding:16px 18px;
  border-radius:20px;
  font-weight:700;
}

.math-feedback.is-correct{
  background:rgba(16,185,129,.12);
  color:#047857;
  border:1px solid rgba(16,185,129,.16);
}

.math-feedback.is-wrong{
  background:rgba(225,87,87,.10);
  color:#b42318;
  border:1px solid rgba(225,87,87,.14);
}

.math-canvas{
  min-height:250px;
  display:grid;
  gap:16px;
}

.math-controls{
  justify-content:flex-end;
}

.math-choice-grid,
.math-answer-grid,
.math-order-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.math-choice-card,
.math-sort-card,
.math-line-node,
.math-classify-column{
  padding:16px;
}

.math-choice-card,
.math-sort-card,
.math-target-btn,
.math-line-node,
.math-card-btn,
.math-select-btn,
.math-token,
.math-shape,
.math-classify-item{
  cursor:pointer;
}

.math-choice-card:hover,
.math-sort-card:hover,
.math-line-node:hover,
.math-target-btn:hover,
.math-select-btn:hover,
.math-token:hover,
.math-shape:hover,
.math-classify-item:hover{
  box-shadow:0 18px 30px rgba(10,22,40,.08);
}

.math-choice-card.is-selected,
.math-sort-card.is-selected,
.math-line-node.is-selected,
.math-token.is-selected,
.math-shape.is-selected,
.math-classify-item.is-selected,
.math-drop-zone.is-targeted,
.math-bin.is-targeted,
.math-classify-column.is-targeted{
  border-color:rgba(59,130,246,.28);
  box-shadow:0 0 0 4px rgba(59,130,246,.08);
}

.math-choice-card.is-locked,
.math-token.is-locked,
.math-shape.is-locked,
.math-line-node.is-locked,
.math-classify-item.is-locked{
  pointer-events:none;
  opacity:.72;
}

.math-collection{
  display:grid;
  grid-template-columns:repeat(5,minmax(20px,1fr));
  gap:10px;
  justify-items:center;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfdff 0%,#f3f7fd 100%);
}

.math-token-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--token-color,#3b82f6), rgba(197,165,90,.85));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 4px 10px rgba(59,130,246,.15);
}

.math-value-display{
  display:grid;
  place-items:center;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg,#fbfdff 0%,#f4f7fc 100%);
  font-size:2.2rem;
  font-weight:900;
  color:var(--navy);
}

.math-number-option,
.math-target-btn,
.math-line-node{
  min-height:72px;
  font-size:1.4rem;
  font-weight:900;
}

.math-line-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.math-line-node{
  border:1px solid rgba(10,22,40,.08);
  background:#fff;
  border-radius:18px;
  color:var(--navy);
}

.math-line-node.is-current{
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
}

.math-line-clue{
  padding:14px 16px;
  border-radius:18px;
  background:#fff7e8;
  color:#9a6700;
  border:1px solid rgba(245,158,11,.18);
  font-weight:700;
}

.math-drop-grid,
.math-shape-bins,
.math-classify-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.math-drop-zone,
.math-bin,
.math-classify-column{
  min-height:160px;
  padding:16px;
  display:grid;
  align-content:start;
  gap:12px;
}

.math-drop-zone{
  background:linear-gradient(180deg,#fcfdfd 0%,#f7fafc 100%);
}

.math-bin-note,
.math-classify-note{
  color:#64748b;
  font-size:.92rem;
}

.math-token-pool,
.math-shape-pool{
  min-height:74px;
  padding:14px;
  border-radius:20px;
  background:rgba(10,22,40,.04);
  align-items:flex-start;
}

.math-token,
.math-shape,
.math-classify-item{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(10,22,40,.08);
  background:#fff;
  box-shadow:0 10px 16px rgba(10,22,40,.05);
  user-select:none;
  font-weight:900;
  color:var(--navy);
}

.math-token[data-size="large"]{width:56px;height:56px;border-radius:16px}
.math-token span,
.math-classify-item span{font-size:1.1rem}

.math-shape.is-circle::before,
.math-shape.is-square::before,
.math-shape.is-triangle::before{
  content:"";
  display:block;
}

.math-shape.is-circle::before{width:20px;height:20px;border-radius:50%;background:#3b82f6}
.math-shape.is-square::before{width:20px;height:20px;border-radius:5px;background:#16a34a}
.math-shape.is-triangle::before{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:22px solid #f59e0b}

.math-story-card{
  padding:18px;
  display:grid;
  gap:14px;
  background:linear-gradient(180deg,#f8fbff 0%,#fffefb 100%);
}

.math-story-scene{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.math-step-card{
  padding:16px;
  display:grid;
  gap:12px;
}

.math-bar-stack{
  display:grid;
  gap:10px;
}

.math-bar-row{
  display:grid;
  gap:8px;
}

.math-bar-label{
  font-weight:700;
  color:var(--navy);
}

.math-bar{
  height:22px;
  border-radius:999px;
  background:linear-gradient(90deg,#60a5fa,#c59f46);
}

.math-sort-card{
  display:grid;
  gap:12px;
}

.math-sort-slot{
  display:flex;
  align-items:center;
  gap:10px;
}

.math-slot-rank{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(10,22,40,.06);
  color:var(--navy);
  font-weight:900;
}

.math-ten-frame{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(10,22,40,.08);
  background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
}

.math-ten-cell{
  aspect-ratio:1;
  border-radius:16px;
  border:1px solid rgba(10,22,40,.08);
  background:#fff;
  display:grid;
  place-items:center;
}

.math-ten-cell::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(10,22,40,.08);
}

.math-ten-cell.is-filled::before{
  background:linear-gradient(135deg,#2563eb,#c59f46);
}

.math-mission-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.math-finish-card{
  padding:22px;
  display:grid;
  gap:16px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 32%),
    radial-gradient(circle at bottom left, rgba(197,165,90,.12), transparent 28%),
    linear-gradient(180deg,#fff 0%,#f9fbff 100%);
}

.math-finish-stars{
  font-size:1.4rem;
}

.math-hidden{display:none !important}

@media (max-width:1100px){
  .math-page-grid,
  .math-summary-panel{
    grid-template-columns:1fr;
  }

  .math-player-shell{
    position:static;
  }
}

@media (max-width:760px){
  .math-domain-list,
  .math-activity-grid,
  .math-choice-grid,
  .math-answer-grid,
  .math-line-grid,
  .math-drop-grid,
  .math-shape-bins,
  .math-classify-grid,
  .math-mission-grid,
  .math-story-scene{
    grid-template-columns:1fr;
  }

  .math-summary-stats{
    grid-template-columns:1fr 1fr;
  }

  .math-panel-head,
  .math-domain-head,
  .math-card-footer,
  .math-finish-row,
  .math-player-top,
  .math-progress-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .math-player-empty{
    min-height:320px;
  }

  .math-collection{
    grid-template-columns:repeat(4,minmax(20px,1fr));
  }
}