.material-game-main{padding-top:clamp(28px,4vw,48px)}
.game-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;margin-bottom:22px}.back-materials{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;text-decoration:none;color:var(--muted);font-weight:850}.back-materials:hover{color:var(--purple)}.material-game-title{font-size:clamp(2.5rem,5vw,4.7rem);max-width:14ch}.game-top .copy{max-width:760px}
.game-score-panel{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:21px;background:var(--surface);box-shadow:var(--shadow-soft)}.game-score-panel>span{min-width:76px;min-height:58px;padding:8px 12px;border-radius:15px;background:var(--surface-soft);display:flex;flex-direction:column;justify-content:center}.game-score-panel small{color:var(--muted);font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.game-score-panel strong{font-family:var(--font-ui);font-size:1.25rem}.game-reset{min-height:58px;padding:0 14px;border:0;border-radius:15px;background:var(--surface-lilac);color:var(--purple);font-weight:900;cursor:pointer}.game-reset span{font-size:1.25rem;margin-right:4px}
.game-card{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);gap:18px;border:1px solid var(--line);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow-card);padding:18px;min-height:590px}.game-board{position:relative;min-height:550px;border-radius:calc(var(--radius-xl) - 12px);background:radial-gradient(circle at 20% 12%,rgba(88,208,239,.13),transparent 34%),radial-gradient(circle at 84% 16%,rgba(255,112,170,.12),transparent 31%),linear-gradient(145deg,var(--surface-soft),var(--surface));border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;padding:24px}.game-challenge{align-self:stretch;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:calc(var(--radius-xl) - 12px);background:var(--surface);box-shadow:0 8px 0 rgba(85,107,145,.05)}.challenge-badge{align-self:flex-start;padding:7px 10px;border-radius:999px;background:var(--surface-lilac);color:var(--purple);font-size:.72rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.challenge-prompt{min-height:108px;display:grid;place-items:center;text-align:center;font-family:var(--font-ui);font-size:clamp(2rem,4vw,3.25rem);font-weight:950;letter-spacing:-.04em;color:var(--ink-strong);padding:18px 0}.challenge-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.challenge-option{min-height:62px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,var(--surface),var(--surface-soft));box-shadow:0 5px 0 color-mix(in srgb,var(--line-strong) 65%,transparent);color:var(--ink-strong);font-family:var(--font-ui);font-size:1.2rem;font-weight:950;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.challenge-option:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--purple) 32%,var(--line));box-shadow:0 8px 0 color-mix(in srgb,var(--purple) 11%,var(--line)),0 13px 22px rgba(48,74,112,.1)}.challenge-option:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line-strong)}.challenge-option[disabled]{cursor:default;opacity:.65}.challenge-option.is-correct{background:var(--surface-mint);border-color:color-mix(in srgb,var(--mint) 60%,var(--line));color:var(--success)}.challenge-option.is-wrong{background:var(--surface-pink);border-color:color-mix(in srgb,var(--pink) 55%,var(--line));color:var(--danger)}.challenge-feedback{min-height:58px;margin-top:14px;display:grid;place-items:center;text-align:center;font-weight:900;color:var(--muted)}.challenge-feedback.is-correct{color:var(--success)}.challenge-feedback.is-wrong{color:var(--danger)}.game-next{margin-top:auto;width:100%}
.game-source-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:20px;padding:18px 20px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 8px 0 rgba(85,107,145,.05)}.source-note-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--surface-lilac);color:var(--purple);font-size:1.25rem}.game-source-note strong{font-family:var(--font-ui)}.game-source-note p{margin:4px 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}

/* Tug of war */
.tug-board{width:min(95%,760px);display:flex;flex-direction:column;gap:30px;align-items:center}.tug-labels{width:100%;display:flex;justify-content:space-between;font-weight:900;color:var(--muted)}.tug-track{position:relative;width:100%;height:92px;display:grid;grid-template-columns:repeat(19,1fr);align-items:center}.tug-cell{aspect-ratio:1;border:2px solid var(--line-strong);border-radius:50%;background:var(--surface)}.tug-cell:nth-child(-n+9){background:color-mix(in srgb,var(--cyan) 11%,var(--surface))}.tug-cell:nth-last-child(-n+9){background:color-mix(in srgb,var(--pink) 10%,var(--surface))}.tug-cell:nth-child(10){border-color:var(--orange);background:color-mix(in srgb,var(--orange) 28%,var(--surface))}.tug-token{position:absolute;top:50%;left:50%;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,var(--yellow),var(--orange));box-shadow:0 7px 0 var(--orange-edge),0 15px 24px rgba(255,157,92,.25);transform:translate(-50%,-50%);transition:left .52s cubic-bezier(.2,.8,.2,1),transform .3s ease}.tug-token::after{content:"✦";display:grid;place-items:center;height:100%;color:#fff;font-size:1.3rem}.tug-token.bump{transform:translate(-50%,-50%) scale(1.12) rotate(7deg)}

/* Race */
.race-board{position:relative;width:min(92%,720px);aspect-ratio:1.5/1;display:grid;place-items:center}.race-path{position:absolute;inset:9% 7%;display:flex;flex-wrap:wrap;align-content:space-between;justify-content:center;gap:6px}.race-step{position:relative;width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:950;color:var(--muted);box-shadow:0 4px 0 rgba(85,107,145,.06);transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,background-color .2s ease,border-color .2s ease,color .2s ease}.race-step.is-done{background:var(--surface-mint);color:var(--success);border-color:color-mix(in srgb,var(--mint) 55%,var(--line))}.race-step.is-current{z-index:2;background:linear-gradient(145deg,var(--yellow),var(--orange));color:#fff;border-color:var(--orange);transform:translateY(-3px) scale(1.08);box-shadow:0 7px 0 var(--orange-edge),0 15px 22px rgba(255,157,92,.22)}.race-step.is-current::after{content:"";position:absolute;top:-9px;right:-8px;width:15px;height:15px;border-radius:50%;background:linear-gradient(145deg,#fff8bf,var(--yellow) 42%,var(--orange));border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 0 color-mix(in srgb,var(--orange-edge) 75%,transparent),0 7px 12px rgba(255,157,92,.24)}.race-step.is-finish{border-color:color-mix(in srgb,var(--purple) 38%,var(--line));padding-right:7px}.race-step.is-finish::before{content:"";position:absolute;top:-7px;left:50%;width:13px;height:11px;transform:translateX(-50%);background:conic-gradient(from 90deg,#fff 0 25%,var(--ink-strong) 0 50%,#fff 0 75%,var(--ink-strong) 0);clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%);border-radius:2px;box-shadow:-3px 7px 0 -2px var(--muted)}

/* Numbers */
.numbers-board{width:min(94%,820px);display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.number-tile{aspect-ratio:1;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 7px 0 rgba(85,107,145,.07),0 16px 24px rgba(48,74,112,.08);display:grid;place-items:center;font-family:var(--font-ui);font-size:2rem;font-weight:950;color:var(--ink-strong);transition:transform .18s ease,box-shadow .18s ease}.number-tile.is-target{transform:translateY(-5px);box-shadow:0 11px 0 color-mix(in srgb,var(--purple) 14%,var(--line)),0 22px 30px rgba(48,74,112,.11)}.dot-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;width:min(80%,420px)}.dot-cloud i{width:25px;height:25px;border-radius:50%;background:linear-gradient(145deg,var(--cyan),var(--blue));box-shadow:0 4px 0 var(--blue-edge)}

/* Ice cream */
.ice-board{width:min(90%,680px);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;justify-items:center}.ice-stack{display:flex;flex-direction:column-reverse;align-items:center;min-height:390px;justify-content:flex-start}.ice-cone{width:96px;height:118px;clip-path:polygon(10% 0,90% 0,58% 100%,42% 100%);background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 2px,transparent 2px 12px),repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 2px,transparent 2px 12px),linear-gradient(145deg,#e9b45f,#c98739);border-radius:16px}.ice-scoop{width:82px;height:82px;margin-bottom:-10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 24%,transparent);box-shadow:0 7px 0 rgba(64,74,103,.08);animation:scoop-pop .34s cubic-bezier(.2,.9,.25,1.3)}.ice-scoop:nth-child(3n+1){background:var(--surface-pink)}.ice-scoop:nth-child(3n+2){background:var(--surface-lilac)}.ice-scoop:nth-child(3n){background:var(--surface-mint)}@keyframes scoop-pop{0%{transform:scale(.5) translateY(-15px);opacity:0}100%{transform:scale(1);opacity:1}}

/* Dice 1-6 */
.dice-board{display:grid;grid-template-columns:1fr auto 1fr;gap:36px;align-items:center;width:min(92%,760px)}.dice-path{display:grid;gap:9px}.dice-path.left{direction:rtl}.dice-node{width:58px;height:58px;border-radius:50%;border:2px solid color-mix(in srgb,var(--mint) 60%,var(--line));background:var(--surface);display:grid;place-items:center;font-family:var(--font-ui);font-size:1.2rem;font-weight:950;box-shadow:0 5px 0 rgba(85,107,145,.06)}.dice-node.is-active{background:var(--surface-mint);color:var(--success);transform:scale(1.08)}.dice-center{width:150px;height:150px;border-radius:50%;border:3px solid color-mix(in srgb,var(--purple) 60%,var(--line));background:var(--surface-lilac);display:grid;place-items:center}.die-face{width:86px;height:86px;border-radius:22px;background:var(--surface);box-shadow:0 8px 0 rgba(85,107,145,.08),0 18px 28px rgba(48,74,112,.12);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14px}.die-face i{width:13px;height:13px;border-radius:50%;background:var(--purple);place-self:center;opacity:0}.die-face[data-value="1"] i:nth-child(5),.die-face[data-value="2"] i:nth-child(1),.die-face[data-value="2"] i:nth-child(9),.die-face[data-value="3"] i:nth-child(1),.die-face[data-value="3"] i:nth-child(5),.die-face[data-value="3"] i:nth-child(9),.die-face[data-value="4"] i:nth-child(1),.die-face[data-value="4"] i:nth-child(3),.die-face[data-value="4"] i:nth-child(7),.die-face[data-value="4"] i:nth-child(9),.die-face[data-value="5"] i:nth-child(1),.die-face[data-value="5"] i:nth-child(3),.die-face[data-value="5"] i:nth-child(5),.die-face[data-value="5"] i:nth-child(7),.die-face[data-value="5"] i:nth-child(9),.die-face[data-value="6"] i:nth-child(1),.die-face[data-value="6"] i:nth-child(3),.die-face[data-value="6"] i:nth-child(4),.die-face[data-value="6"] i:nth-child(6),.die-face[data-value="6"] i:nth-child(7),.die-face[data-value="6"] i:nth-child(9){opacity:1}

@media(max-width:980px){.game-top{grid-template-columns:1fr}.game-score-panel{justify-self:start}.game-card{grid-template-columns:1fr}.game-board{min-height:480px}.game-challenge{min-height:330px}.game-source-note{grid-template-columns:auto 1fr}.game-source-note .button{grid-column:1/-1;justify-self:start}}
@media(max-width:640px){.game-score-panel{width:100%;display:grid;grid-template-columns:1fr 1fr}.game-reset{grid-column:1/-1}.game-card{padding:10px;border-radius:30px}.game-board{min-height:400px;padding:14px;border-radius:22px}.game-challenge{padding:17px;border-radius:22px}.challenge-options{grid-template-columns:1fr 1fr}.tug-track{height:72px}.tug-cell{border-width:1px}.tug-token{width:42px;height:42px}.race-step{width:34px;height:34px;border-radius:11px;font-size:.78rem}.numbers-board{grid-template-columns:repeat(5,1fr);gap:7px}.number-tile{border-radius:15px;font-size:1.4rem}.ice-board{gap:28px}.ice-stack{min-height:310px}.ice-cone{width:72px;height:92px}.ice-scoop{width:64px;height:64px}.dice-board{gap:15px}.dice-node{width:44px;height:44px}.dice-center{width:104px;height:104px}.die-face{width:70px;height:70px;padding:11px}.game-source-note{grid-template-columns:1fr;text-align:center}.source-note-icon{margin:auto}.game-source-note .button{justify-self:stretch}}
@media(max-width:420px){.challenge-options{grid-template-columns:1fr}.game-board{min-height:360px}.numbers-board{grid-template-columns:repeat(5,1fr)}.number-tile{font-size:1.2rem}.dice-board{grid-template-columns:1fr 90px 1fr;gap:8px}.dice-node{width:39px;height:39px}.dice-center{width:88px;height:88px}.die-face{width:62px;height:62px}.ice-board{gap:16px}.ice-scoop{width:58px;height:58px}.ice-cone{width:65px;height:84px}}
@media(prefers-reduced-motion:reduce){.ice-scoop{animation:none!important}}
.tug-token.pos-n9{left:2.6316%}.tug-token.pos-n8{left:7.8947%}.tug-token.pos-n7{left:13.1579%}.tug-token.pos-n6{left:18.4211%}.tug-token.pos-n5{left:23.6842%}.tug-token.pos-n4{left:28.9474%}.tug-token.pos-n3{left:34.2105%}.tug-token.pos-n2{left:39.4737%}.tug-token.pos-n1{left:44.7368%}.tug-token.pos-z{left:50.0000%}.tug-token.pos-p1{left:55.2632%}.tug-token.pos-p2{left:60.5263%}.tug-token.pos-p3{left:65.7895%}.tug-token.pos-p4{left:71.0526%}.tug-token.pos-p5{left:76.3158%}.tug-token.pos-p6{left:81.5789%}.tug-token.pos-p7{left:86.8421%}.tug-token.pos-p8{left:92.1053%}.tug-token.pos-p9{left:97.3684%}

/* UI-0020 — compact decorative back control.
   It stays a text link, not a second carousel button, but the arrow now belongs to the School icon family. */
.back-materials{gap:9px;transition:color .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.back-materials-icon{
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:10px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-lilac) 84%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--purple) 16%,var(--line));
  box-shadow:0 3px 0 color-mix(in srgb,var(--purple-edge) 20%,var(--line-strong)),0 7px 13px rgba(80,92,145,.10);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;
}
.back-materials-icon::before,.back-materials-icon::after{
  content:"";position:absolute;inset:5px;
  -webkit-mask:url("../img/material-icons/back.svg") center/contain no-repeat;
  mask:url("../img/material-icons/back.svg") center/contain no-repeat;
}
.back-materials-icon::after{
  transform:translateY(1.6px);
  background:linear-gradient(105deg,var(--purple-edge),var(--pink-edge));
  opacity:.72;
}
.back-materials-icon::before{
  z-index:1;
  background:linear-gradient(105deg,var(--yellow) 0%,var(--orange) 35%,var(--pink) 68%,var(--purple) 100%);
}
@media(hover:hover) and (pointer:fine){
  .back-materials:hover{color:var(--purple);transform:translateX(-1px)}
  .back-materials:hover .back-materials-icon{
    transform:translateX(-3px) translateY(-1px) rotate(-3deg);
    border-color:color-mix(in srgb,var(--purple) 32%,var(--line));
    box-shadow:0 4px 0 color-mix(in srgb,var(--purple-edge) 24%,var(--line-strong)),0 10px 18px rgba(80,92,145,.14);
  }
}
.back-materials:active .back-materials-icon{transform:translateX(-1px) translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--purple-edge) 24%,var(--line-strong)),0 4px 9px rgba(80,92,145,.09)}
html[data-theme="night"] .back-materials-icon{box-shadow:0 3px 0 rgba(5,8,25,.32),0 8px 16px rgba(1,4,18,.28)}
@media(prefers-color-scheme:dark){html[data-theme="auto"] .back-materials-icon{box-shadow:0 3px 0 rgba(5,8,25,.32),0 8px 16px rgba(1,4,18,.28)}}
@media(prefers-reduced-motion:reduce){.back-materials,.back-materials-icon{transition:none!important}.back-materials:hover,.back-materials:hover .back-materials-icon{transform:none!important}}
@media(forced-colors:active){.back-materials-icon{box-shadow:none;border:1px solid CanvasText}.back-materials-icon::before{background:CanvasText}.back-materials-icon::after{display:none}}


/* UI-0022 — material-game narrow-screen integrity. */
.material-game-main,.game-top,.game-card,.game-board,.game-challenge,.game-source-note,
.tug-board,.race-board,.numbers-board,.ice-board,.dice-board{min-width:0;max-width:100%}
.back-materials{min-height:44px;padding:0 4px;border-radius:12px}
@media(max-width:640px){
  .material-game-main{padding-top:22px}
  .game-card{width:100%;max-width:100%;gap:12px}
  .game-board,.game-challenge{width:100%;max-width:100%}
  .game-score-panel{gap:7px;padding:7px}
  .game-score-panel>span,.game-reset{min-height:56px;min-width:0}
  .challenge-option{min-height:58px}
}
@media(max-width:380px){
  .game-card{padding:8px;border-radius:26px}
  .game-board{padding:10px;min-height:340px}
  .game-challenge{padding:14px}
  .material-game-title{font-size:clamp(2.05rem,12vw,2.65rem)}
  .race-step{width:32px;height:32px;border-radius:10px;font-size:.72rem}
  .game-source-note{padding:14px}
}