:root {
  --divide: #087f71;
  --divide-dark: #075b54;
  --divide-soft: #e5f7f3;
  --divide-gold: #ffc857;
}

.divisibility-page { background: #f7faf9; }
.divisibility-page button { font: inherit; }
.divisibility-page [hidden] { display: none !important; }
.divisibility-page .button { background: var(--divide); }
.divisibility-page .button:hover { background: var(--divide-dark); }
.divisibility-page .button.secondary { border-color: #cbdedb; background: #fff; color: var(--ink); }
.divisibility-page .eyebrow { border-color: #a8dcd4; color: var(--divide-dark); }

.division-hero { padding: clamp(52px, 7vw, 88px) 0; border-bottom: 1px solid #d6e7e3; background: radial-gradient(circle at 85% 18%, rgba(255,200,87,.28), transparent 25%), radial-gradient(circle at 12% 85%, rgba(8,127,113,.15), transparent 30%), linear-gradient(135deg,#f6fffd,#effaf7 60%,#fff9ec); }
.division-hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: clamp(34px,6vw,76px); align-items: center; }
.grade-line { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 19px; }
.grade-line span { padding: 6px 11px; border: 1px solid #a8dcd4; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--divide-dark); font-size: .82rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.grade-line span:first-child { border-color: var(--divide); background: var(--divide); color: #fff; }
.division-hero h1 { font-size: clamp(2.4rem,5vw,4.65rem); }
.division-hero p { max-width: 680px; margin: 22px 0 0; color: var(--muted); font-size: clamp(1.05rem,2vw,1.25rem); }

.number-scanner { position: relative; overflow: hidden; padding: clamp(25px,4vw,40px); border: 1px solid #b9ddd7; border-radius: 28px; background: #102d31; color: #fff; box-shadow: 0 24px 60px rgba(7,91,84,.2); text-align: center; }
.scanner-label { color: #8fe0d5; font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.number-scanner > strong { display: block; margin: 15px 0 4px; font-family: "Cambria Math",Cambria,serif; font-size: clamp(3.2rem,7vw,5.5rem); line-height: 1; letter-spacing: .07em; }
.scanner-line { height: 3px; margin: 20px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.scanner-line span { display: block; width: 45%; height: 100%; background: #62e1cf; box-shadow: 0 0 14px #62e1cf; animation: scan 2.4s ease-in-out infinite alternate; }
.scanner-chips { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.scanner-chips span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; background: rgba(255,255,255,.08); font-weight: 850; }
.number-scanner small { display: block; margin-top: 18px; color: #b7cec9; }
@keyframes scan { to { transform: translateX(122%); } }

.division-heading { max-width: 800px; }
.rule-browser { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 20px; }
.rule-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; align-content: start; }
.rule-tab { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 1.05rem; font-weight: 900; cursor: pointer; }
.rule-tab:hover { border-color: #78c7bd; }
.rule-tab.is-active { border-color: var(--divide); background: var(--divide); color: #fff; box-shadow: 0 8px 20px rgba(8,127,113,.18); }
.rule-stage { min-height: 320px; padding: clamp(24px,4vw,42px); border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 40px rgba(16,42,67,.07); }
.rule-stage-header { color: var(--divide-dark); font-size: .8rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.rule-stage h3 { margin-top: 8px; font-size: clamp(1.5rem,3vw,2.1rem); }
.rule-stage p { max-width: 720px; color: var(--muted); }
.rule-example { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; margin-top: 27px; }
.rule-example > div { padding: 20px; border-radius: 15px; background: #f3f7f6; font-family: "Cambria Math",Cambria,serif; font-size: clamp(1.25rem,3vw,1.9rem); font-weight: 850; text-align: center; }
.rule-example > div:last-child { background: var(--divide-soft); color: var(--divide-dark); }
.rule-example > span { color: var(--divide); font-size: 1.55rem; font-weight: 900; }
.rule-example mark { padding: 1px 5px; border-radius: 6px; background: #ffdf8b; color: inherit; }
.rule-note { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: #fff7dc; color: #655000; }

.mission-section { border-block: 1px solid #d6e7e3; background: #eaf6f3; }
.mission-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 22px; align-items: start; }
.mission-sidebar { display: grid; gap: 14px; }
.player-card,.level-picker,.session-card,.quick-rules { padding: 18px; border: 1px solid #d5e3e0; border-radius: 17px; background: #fff; }
.player-card { display: grid; grid-template-columns: 48px 1fr; gap: 11px 13px; align-items: center; }
.player-avatar { display: grid; grid-row: span 2; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: linear-gradient(135deg,var(--divide),#3fb7a9); color: #fff; font-size: 1.6rem; font-weight: 900; box-shadow: 0 8px 18px rgba(8,127,113,.22); }
.sidebar-label { display: block; margin-bottom: 10px; color: var(--muted); font-size: .76rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.player-card .sidebar-label { margin: 0; }
.player-card strong { color: var(--divide-dark); }
.player-card small { grid-column: 1/-1; color: var(--muted); font-size: .76rem; }
.xp-line { grid-column: 1/-1; height: 7px; overflow: hidden; border-radius: 999px; background: #e7efed; }
.xp-line span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffb733,#ffd878); transition: width .35s ease; }
.segmented-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; border-radius: 11px; background: #edf2f1; }
.segmented-control button { padding: 8px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .86rem; font-weight: 800; cursor: pointer; }
.segmented-control button.is-active { background: #fff; color: var(--divide-dark); box-shadow: 0 2px 7px rgba(16,42,67,.12); }
.session-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; }
.progress-track { height: 9px; margin: 13px 0 15px; overflow: hidden; border-radius: 999px; background: #e7efed; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--divide),#56bcae); transition: width .3s ease; }
.game-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; text-align: center; }
.game-stats div { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 3px; padding: 7px 3px; border-radius: 9px; background: #f4f8f7; color: var(--divide-dark); }
.game-stats small { grid-column: 1/-1; color: var(--muted); font-size: .66rem; }
.hearts { grid-column: 1/-1; color: #e34d59; font-size: .82rem; white-space: nowrap; }
.quick-rules { border-color: #ead797; background: #fffaf0; }
.quick-rules > strong { color: #6a5200; }
.quick-rules dl { display: grid; gap: 7px; margin: 11px 0 0; }
.quick-rules dl div { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.quick-rules dt { color: var(--divide-dark); font-weight: 900; }
.quick-rules dd { margin: 0; color: #665c3b; font-size: .85rem; }
.zero-note { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid #ead797; color: #66520d; font-size: .82rem; line-height: 1.45; }

.challenge-card { min-height: 580px; padding: clamp(22px,4vw,38px); border: 1px solid #cce0dc; border-radius: 22px; background: #fff; box-shadow: 0 18px 45px rgba(7,91,84,.09); }
.challenge-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .84rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.challenge-badge { padding: 5px 10px; border-radius: 999px; background: var(--divide-soft); color: var(--divide-dark); }
.challenge-symbol { display: grid; width: 48px; height: 48px; margin: 32px auto 8px; place-items: center; border-radius: 50%; background: var(--divide-soft); color: var(--divide-dark); font-size: 1.6rem; font-weight: 900; }
.challenge-number { color: var(--ink); font-family: "Cambria Math",Cambria,serif; font-size: clamp(2.5rem,7vw,4.5rem); font-weight: 850; line-height: 1.12; text-align: center; }
.missing-digit { display: inline-grid; min-width: .82em; margin-inline: .05em; place-items: center; border: 3px solid var(--divide); border-radius: .15em; background: var(--divide-soft); color: var(--divide-dark); font-family: ui-sans-serif,system-ui,sans-serif; font-size: .72em; line-height: 1.05; vertical-align: .12em; }
.challenge-question { max-width: 700px; margin: 18px auto 0; color: var(--muted); font-size: 1.05rem; font-weight: 700; text-align: center; }
.choice-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 25px; }
.choice-button { min-height: 58px; padding: 10px; border: 1px solid #c9d8d5; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 850; cursor: pointer; }
.choice-button:hover { border-color: var(--divide); background: #f5fcfa; }
.choice-button[aria-pressed="true"],.choice-button.is-selected { border-color: var(--divide); background: var(--divide-soft); color: var(--divide-dark); box-shadow: inset 0 0 0 1px var(--divide); }
.choice-button.is-correct { border-color: #3e9e8d; background: #e8f7f3; color: #075e51; }
.choice-button.is-wrong { border-color: #d97068; background: #fff0ef; color: #9c251c; }
.digit-entry { max-width: 570px; margin: 24px auto 0; }
.digit-entry > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .8rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.digit-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.digit-input-row input { width: 100%; min-width: 0; padding: 13px 15px; border: 2px solid #b9d2cd; border-radius: 12px; color: var(--ink); font-size: 1.3rem; font-weight: 800; }
.digit-input-row input:focus { border-color: var(--divide); outline: 3px solid rgba(8,127,113,.14); }
.digit-input-row input.is-wrong { border-color: #d45d54; animation: shake .24s ease; }
.keyboard-hint { margin: 7px 2px 0; color: var(--muted); font-size: .8rem; }
.number-pad { display: none; }
.challenge-feedback,.explanation-card { margin-top: 18px; padding: 13px 15px; border-radius: 12px; font-weight: 750; }
.challenge-feedback.success { background: #e8f7f3; color: #075e51; }
.challenge-feedback.error { background: #fff0ef; color: #9c251c; }
.challenge-feedback.hint { background: #fff7dc; color: #604a00; }
.explanation-card { border-left: 4px solid var(--divide); background: #f2f8f7; color: var(--ink); }
.challenge-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.hint-button { padding: 9px 12px; border: 0; background: transparent; color: var(--divide-dark); font-weight: 850; cursor: pointer; }
.reward-pop { position: fixed; z-index: 40; top: 45%; left: 50%; padding: 11px 18px; border-radius: 999px; background: #12383a; color: #fff; font-weight: 900; pointer-events: none; transform: translate(-50%,-50%); animation: reward .8s ease both; }
.confetti-layer { position: fixed; z-index: 35; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -20px; width: 9px; height: 16px; border-radius: 3px; animation: fall 1.2s ease-in forwards; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes reward { 0% { opacity:0; transform:translate(-50%,-20%) scale(.75); } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } 100% { opacity:0; transform:translate(-50%,-85%); } }
@keyframes fall { to { transform: translateY(105vh) rotate(520deg); opacity:.2; } }

.method-section { background:#fff; }
.method-card { padding: clamp(24px,5vw,48px); border: 1px solid #cce0dc; border-radius: 25px; background: linear-gradient(135deg,#f8fffd,#eaf8f5); }
.method-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.method-steps div { position:relative; padding:20px 18px 20px 68px; border-radius:15px; background:#fff; }
.method-steps span { position:absolute; top:17px; left:17px; display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:var(--divide); color:#fff; font-weight:900; }
.method-steps strong,.method-steps small { display:block; }
.method-steps small { margin-top:4px; color:var(--muted); line-height:1.45; }

@media (max-width:900px) {
  .division-hero-grid,.mission-layout { grid-template-columns:1fr; }
  .number-scanner { max-width:620px; }
}
@media (max-width:680px) {
  .rule-browser { grid-template-columns:1fr; }
  .rule-tabs { grid-template-columns:repeat(7,1fr); }
  .rule-tab { min-height:44px; }
  .rule-example { grid-template-columns:1fr; }
  .rule-example > span { transform:rotate(90deg); text-align:center; }
  .choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .method-steps { grid-template-columns:1fr; }
  .digit-input-row { grid-template-columns:1fr; }
  .digit-input-row .button,.keyboard-hint { display:none; }
  .number-pad { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:11px; padding:10px; border-radius:15px; background:#19383b; }
  .number-pad button { min-height:47px; border:0; border-radius:9px; background:#fff; color:#182f31; font-weight:900; box-shadow:0 2px 0 #aebdbb; }
  .number-pad .pad-clear { grid-column:span 2; background:#e5eceb; }
  .number-pad .pad-submit { grid-column:span 3; background:var(--divide); color:#fff; box-shadow:0 2px 0 var(--divide-dark); }
}
@media (max-width:430px) {
  .rule-tabs { grid-template-columns:repeat(4,1fr); }
  .challenge-actions .button { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .scanner-line span,.reward-pop,.confetti-piece,.digit-input-row input.is-wrong { animation:none; }
}