/* Visual mini-games: calm, age-respectful, touch-friendly, colour + text cues. */
.game-shell { background:#fff; border:1px solid #dce5ef; border-radius:22px; overflow:hidden; box-shadow:0 20px 44px rgba(13,31,63,.06); margin:16px 0; }
.game-banner { background:linear-gradient(116deg,#17274b 0%,#233867 68%,#184f5d 100%); padding:26px clamp(20px,3vw,33px); display:flex; gap:18px; align-items:center; }
.game-icon { width:80px; height:80px; min-width:80px; display:grid; place-items:center; color:#17315b; background:#ffda7c; border-radius:22px; font-weight:900; font-size:42px; border:4px solid #ffedb4; box-shadow:9px 8px 0 #ffffff19; }
.game-banner .eyebrow { color:#9de2d8; letter-spacing:.11em; }
.game-banner h2 { color:white; margin:5px 0 6px; font-size:clamp(25px,3.5vw,36px); }
.game-banner p { color:#d5e5f3; margin:0; max-width:650px; }
.game-meta { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 26px 14px; border-bottom:1px solid #eef1f6; }
.game-meta >div:first-child { display:flex; flex-wrap:wrap; gap:9px; }
.game-kicker { display:inline-flex; background:#e8f5f2; color:#086a63; border-radius:50px; padding:7px 11px; font-weight:900; font-size:11px; letter-spacing:.05em; }
.game-mission-chooser { display:flex; gap:7px; flex-wrap:wrap; }
.mission-button { width:39px; height:39px; border-radius:12px; border:1px solid #d3ddea; background:#f3f6fa; font-size:14px; font-weight:900; color:#455571; }
.mission-button.finished { background:#d8f5ea; border-color:#9ee0c8; color:#06725a; }
.mission-button.selected { background:#213a62; border-color:#213a62; color:white; }
.game-switch { display:flex; gap:8px; margin:14px 26px 0; padding:6px; background:#edf3f8; border-radius:14px; }
.game-switch button { border:0; flex:1 1 150px; padding:11px 10px; background:transparent; border-radius:10px; font-size:13px; font-weight:850; color:#52637c; }
.game-switch button.current { background:#fff; color:#14355b; box-shadow:0 3px 10px #203b5d14; }
.game-learning-tools { padding:17px 26px; }
.game-no-pressure { font-size:12px; color:#5d6980; margin:0 0 12px; }
.game-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.game-actions .btn-ghost { padding:9px 12px; }
.game-shell > .hint-panel { margin:1px 26px 14px; }
.game-worked { background:#f5fbf9; border:1px solid #b9e5d9; margin:14px 0 0; padding:16px 20px; border-radius:14px; width:100%; }
.game-worked h3 { font-size:17px; margin:0 0 9px; }
.game-worked ol { margin:0 0 12px; padding-left:20px; }
.game-worked li { margin:6px 0; font-size:13px; color:#345459; }
.game-worked > b { color:#096f63; font-size:14px; }
.game-model-caution { font-size:12px; margin:9px 0 0; }
.game-activity { margin:1px 26px 15px; border:1px solid #e3eaf0; background:linear-gradient(180deg,#fbfdff,#f6fafd); border-radius:18px; padding:24px 23px; min-width:0; }
.game-activity:focus { outline:none; }
.game-stage-chip { color:#096c66; background:#ddf4ed; border-radius:7px; padding:5px 9px; font-size:10px; font-weight:950; letter-spacing:.11em; }
.game-challenge-title h3 { font-size:clamp(21px,2.7vw,29px); margin:14px 0 9px; color:#15274a; overflow-wrap:anywhere; }
.game-challenge-title p { margin:0 0 22px; font-size:14px; }
.game-task { background:#fff7e6; border-left:4px solid #e6a53d; padding:13px 16px; border-radius:9px; font-size:14px; color:#5e4b2c; margin:18px 0 14px; }
.game-task b { color:#69421b; }
.game-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:19px 0 5px; }
.game-choice { border:2px solid #dde6ef; background:#fff; border-radius:15px; padding:17px 10px; min-height:84px; color:#223455; text-align:center; font-size:clamp(14px,1.9vw,20px); font-weight:900; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; overflow-wrap:anywhere; }
.game-choice:hover { border-color:#159488; background:#f0faf7; }
.game-choice span:not(.choice-letter) { font-size:12px; color:#677589; font-weight:650; }
.choice-letter { display:grid; place-items:center; width:24px; height:24px; background:#f1f4f9; color:#52627e; border-radius:7px; font-size:11px; }
.game-feedback { border:1px solid #d5e4e0; background:#f1faf5; border-radius:13px; padding:15px 19px; margin:14px 26px; }
.game-feedback.success { border-color:#a8dac4; background:#e9f8ef; }
.game-feedback.try-again { background:#fff6e8; border-color:#ead5b4; }
.game-feedback b { display:block; margin:0 0 4px; font-size:14px; color:#143e36; }
.game-feedback p { margin:0; font-size:13px; line-height:1.5; color:#385753; }
.game-feedback.try-again b { color:#80511d; }
.game-feedback.try-again p { color:#795831; }
.game-next-actions { border-top:1px solid #e8edf2; padding:16px 26px 22px; display:flex; gap:9px; flex-wrap:wrap; }
.game-next-actions .btn-ghost { padding:10px 12px; font-size:12px; }
.game-digit-track { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:5px; padding:24px 8px; border-radius:15px; border:1px solid #384d75; background:#192e53; overflow-x:auto; min-height:115px; scrollbar-width:thin; }
.game-digit { min-width:clamp(24px,4vw,43px); font-weight:950; color:#e7f1ff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:clamp(24px,4vw,42px); line-height:1.15; text-align:center; }
.game-digit.game-placeholder { color:#91a1b9; }
.game-moving-dot { color:#ffc96f; padding:0 4px; border-radius:6px; background:#6d633c77; font-family:ui-monospace,monospace; font-weight:950; font-size:clamp(36px,5vw,49px); transform:translateY(-5px); }
.game-hopline { display:flex; gap:15px; justify-content:space-between; flex-wrap:wrap; align-items:center; margin:15px 0; font-size:12px; font-weight:900; color:#3f526f; }
.game-hopline strong { color:#105d59; font-size:13px; background:#dff4ec; padding:7px 11px; border-radius:9px; }
.hop-pips { display:flex; flex-wrap:wrap; gap:5px; }
.hop-pips i { width:19px; height:10px; background:#dbe4ef; border-radius:50px; }
.hop-pips i.on { background:#0b8f81; }
.game-jump-row { display:flex; gap:11px; margin:16px 0 4px; flex-wrap:wrap; }
.game-jump-row button { min-height:50px; }
.game-jump-row button:disabled { opacity:.46; cursor:not-allowed; }
.game-victory { text-align:center; background:#f0faf3; border:1px solid #afdcc3; padding:22px 17px; border-radius:18px; margin-top:20px; }
.game-victory-symbol { margin:0 auto 8px; width:65px; height:65px; border-radius:20px; color:#805100; font-size:38px; display:grid; place-items:center; background:#ffdd8c; transform:rotate(-6deg); }
.game-victory h3 { margin:7px 0; font-size:23px; }
.game-victory p { margin:6px auto 12px; max-width:620px; font-size:13px; }
.game-victory .btn-row { justify-content:center; }
.game-stamp { display:inline-block; color:#086a5e; border:1px solid #b3ded1; padding:7px 12px; background:white; border-radius:9px; font-size:12px; font-weight:900; }
.bundle-visual { display:flex; align-items:stretch; gap:11px; margin:23px 0; justify-content:center; }
.bundle-total,.bundle-unit,.bundle-question { flex:1 1 0; min-width:0; padding:18px 12px; border:1px solid #d4e1eb; border-radius:17px; display:flex; flex-direction:column; gap:6px; text-align:center; justify-content:center; align-items:center; background:#fff; }
.bundle-total strong,.bundle-unit strong { font-size:clamp(16px,2.8vw,26px); color:#18385e; }
.bundle-total small,.bundle-unit small { font-size:11px; letter-spacing:.1em; color:#647993; font-weight:900; }
.bundle-total span,.bundle-unit span { font-size:11px; color:#738197; }
.bundle-operator { display:grid; place-items:center; font-size:35px; font-weight:850; color:#0b827d; }
.bundle-question { background:#fff1cd; font-size:44px; color:#805500; font-weight:900; }
.bundle-icons { display:grid; grid-template-columns:repeat(4,14px); gap:4px; }
.bundle-icons i { height:14px; width:14px; background:#8ad0c7; border:1px solid #169e91; border-radius:4px; }
.square-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,1fr); gap:23px; align-items:start; margin-bottom:16px; }
.square-figure { background:#fff; border:1px solid #dce8ef; padding:17px; border-radius:16px; display:flex; flex-direction:column; gap:9px; align-items:center; }
.square-top,.square-bottom { font-size:11px; color:#4a627b; font-weight:850; text-align:center; }
.square-grid { display:grid; grid-template-columns:repeat(var(--side),minmax(0,1fr)); grid-template-rows:repeat(var(--side),minmax(0,1fr)); width:min(100%,246px); aspect-ratio:1/1; gap:3px; }
.sq-cell { background:#ccebe5; border:1px solid #9cd4c6; border-radius:3px; }
.sq-cell.edge { background:#ffc665; border-color:#e0a246; }
.square-facts { display:grid; gap:9px; }
.game-fact { background:#eff7fb; padding:12px; border-left:3px solid #8cc1d8; border-radius:9px; }
.game-fact strong { font-size:12px; color:#244e69; }
.game-fact p { font-size:12px; margin:5px 0 0; }
.line-board { background:#fff; border:1px solid #dce5ed; padding:12px 10px 17px; border-radius:16px; }
.line-svg { width:100%; height:auto; max-height:220px; display:block; }
.order-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.order-slot { border:1px dashed #b9c9d8; min-height:77px; border-radius:11px; background:#f7fafd; display:flex; gap:3px; flex-direction:column; align-items:center; justify-content:center; }
.order-slot small { color:#7b8799; font-size:10px; }
.order-slot strong { font-size:clamp(15px,2.2vw,22px); color:#9aaac1; }
.order-slot.placed { background:#e6f8f1; border:1px solid #a5dcca; }
.order-slot.placed strong { color:#08705e; }
.order-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:19px 0 10px; }
.order-card { border:2px solid #d9e4ef; background:white; border-radius:13px; min-height:93px; padding:12px 7px; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:5px; }
.order-card strong { font-size:clamp(18px,2.5vw,27px); color:#233755; white-space:nowrap; }
.order-card span { font-size:10px; color:#6e7b91; font-weight:850; }
.order-card:hover { border-color:#089586; background:#f0faf7; }
.order-card.placed { background:#dff4ec; border-color:#96d7c3; }
.order-card:disabled { cursor:default; }
.game-conversions { padding:13px 15px; background:#ebf7fa; border-radius:12px; font-size:12px; }
.rounding-board { background:#fff; border:1px solid #dce5ed; padding:24px 15px 16px; border-radius:17px; margin:23px 0; }
.rounding-number { display:flex; flex-wrap:nowrap; gap:5px; justify-content:center; align-items:end; overflow-x:auto; padding:0 0 11px; scrollbar-width:thin; }
.rounding-digit { border:2px solid #dce5ef; border-radius:12px; min-width:clamp(34px,5vw,54px); width:clamp(34px,5vw,54px); padding:7px 2px 5px; background:#f8fafd; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; min-height:74px; }
.rounding-digit strong { font-size:clamp(22px,3.2vw,35px); font-weight:950; color:#263c61; line-height:1.1; }
.rounding-digit small { height:12px; font-size:clamp(6px,.8vw,8px); white-space:nowrap; font-weight:950; color:#5a6580; }
.rounding-digit.target { background:#ffe5a2; border-color:#db9f31; }
.rounding-digit.target strong { color:#614300; }
.rounding-digit.decision { background:#c9f3df; border-color:#19a876; }
.rounding-digit:disabled { cursor:default; }
.rounding-digit:hover:not(:disabled) { border-color:#159688; }
.digit-punctuation { font-size:42px; color:#55718f; font-weight:950; margin-bottom:17px; }
.rounding-legend { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:12px; font-size:11px; font-weight:850; color:#5b687b; }
.rounding-legend span { display:flex; align-items:center; gap:6px; }
.rounding-legend i { width:12px; height:12px; border-radius:4px; border:1px solid #bbb; }
.rounding-legend .key-yellow { background:#ffe5a2; border-color:#db9f31; }
.rounding-legend .key-green { background:#c9f3df; border-color:#19a876; }
@media(max-width:980px) { .game-choices { grid-template-columns:1fr; } .game-choice { min-height:62px; } .game-icon { width:65px; height:65px; min-width:65px; font-size:31px; } .bundle-operator { font-size:25px; } }
@media(max-width:700px) { .game-banner { padding:20px 17px; gap:11px; } .game-banner h2 { font-size:24px; } .game-icon { width:50px; height:50px; min-width:50px; border-radius:15px; font-size:28px; } .game-banner p { font-size:12px; } .game-meta { padding:14px; } .game-switch { margin:12px 14px 0; flex-wrap:wrap; } .game-learning-tools { padding:15px; } .game-activity { margin:0 13px 13px; padding:16px 12px; } .game-shell >.hint-panel { margin:0 13px 12px; } .game-feedback { margin:13px; } .game-next-actions { padding:13px; } .game-digit { min-width:26px; } .game-digit-track { gap:1px; } .square-layout { grid-template-columns:1fr; } .square-facts { grid-template-columns:1fr; } .bundle-visual { flex-wrap:wrap; gap:6px; } .bundle-operator { flex:0 0 17px; font-size:20px; } .bundle-total,.bundle-unit { min-width:94px; flex:1; padding:10px 5px; } .bundle-question { flex:1 1 100%; min-height:55px; padding:7px; font-size:27px; } .order-card { min-height:74px; } .order-cards { gap:5px; } .order-slots { gap:5px; } .rounding-board { padding:17px 6px; } .rounding-digit { min-width:29px; width:33px; min-height:61px; padding:5px 1px; } .rounding-digit small { font-size:5px; } .digit-punctuation { margin-bottom:12px; } }
@media(max-width:380px) { .game-meta { justify-content:center; } .game-actions .btn-ghost { flex:1 1 100%; } .game-activity { margin:0 9px 10px; padding:11px 9px; } .game-digit { font-size:21px; min-width:20px; } .game-digit-track { padding:15px 2px; } .game-moving-dot { font-size:30px; } .game-stage-chip { font-size:9px; } .game-kicker { font-size:10px; } .game-banner .eyebrow { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { .game-shell *, .game-shell *:before,.game-shell *:after { animation:none!important; transition:none!important; } }
@media print { .game-shell { display:none!important; } }
/* Grid children must not stretch the phone viewport to the width of the horizontal topic carousel. */
@media(max-width:710px) {
 .app-layout { grid-template-columns:minmax(0,1fr); width:100%; }
 .sidebar { min-width:0; width:100%; max-width:100vw; overflow:hidden; }
 #topicNav { width:100%; max-width:100%; overflow-x:auto; }
 .workspace { min-width:0; width:100%; max-width:100vw; }
 .tabs { min-width:0; }
}