.pip-math-run-page{background:linear-gradient(180deg,#f8f7ff 0%,#eefaff 45%,#f7fff0 100%)}
.runner-page-shell{padding:2rem 0 3rem}
.runner-topbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}
.runner-stars{background:#fff6bf;border:2px solid #ffe37a;border-radius:999px;padding:.55rem .9rem;font-weight:900;color:#5e45c9;box-shadow:0 10px 24px rgba(91,68,183,.1)}
.runner-heading{text-align:center;max-width:820px;margin:0 auto 1.4rem}.runner-heading h1{margin:.35rem 0 .5rem}.runner-heading p{margin:0;color:var(--ink-soft);font-weight:700}
.runner-layout{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:1.2rem;align-items:start}
.runner-help-card{background:#fff;border-radius:28px;padding:1.15rem;box-shadow:0 18px 36px rgba(75,61,136,.1);border:1px solid rgba(91,68,183,.08);position:sticky;top:94px}.runner-help-card h2{margin-top:0}
.help-step{display:flex;gap:.7rem;align-items:flex-start;margin:.75rem 0}.help-step>span{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eee8ff;color:#5e45c9;font-weight:1000}.help-step p{margin:.15rem 0 0;font-weight:700;color:var(--ink-soft)}
.help-example{margin-top:1rem;padding:.8rem;border-radius:18px;background:#edf9ff;display:flex;flex-direction:column;gap:.25rem}.help-example strong{color:#5e45c9}.help-example span{font-weight:800}
.runner-progress-card{margin-top:1rem;padding:.9rem;border-radius:20px;background:#f8f6ff;display:grid;gap:.35rem}.runner-progress-card>span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:1000;color:#7c68cf}.runner-progress-card strong{font-size:1.25rem;color:#4b389e}.runner-progress-track{height:10px;background:#e7e1ff;border-radius:999px;overflow:hidden}.runner-progress-track i{display:block;width:10%;height:100%;background:linear-gradient(90deg,#7b66ec,#52cbe8);border-radius:999px;transition:width .3s ease}
.runner-game-card{position:relative;background:#fff;border-radius:32px;padding:1rem;box-shadow:0 22px 46px rgba(75,61,136,.12);border:1px solid rgba(91,68,183,.08);overflow:hidden}
.runner-status-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:.7rem}.runner-count-pill,.runner-target-pill{padding:.55rem .8rem;border-radius:999px;font-weight:900}.runner-count-pill{background:#e7fbef;color:#226a44}.runner-target-pill{background:#fff1c9;color:#7a551c}
.runner-prompt{text-align:center;background:#f2efff;border-radius:22px;padding:.75rem 1rem;margin-bottom:.85rem;display:flex;flex-direction:column;gap:.1rem}.runner-prompt strong{font-size:clamp(1.5rem,4vw,2.2rem);color:#5037bd}.runner-prompt span{font-weight:800;color:var(--ink-soft)}
.runner-stage{position:relative;min-height:610px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#8cd9ff 0 42%,#aee681 42% 100%);border:5px solid #eef0ff;touch-action:pan-y;outline:none;isolation:isolate}.runner-stage:focus-visible{box-shadow:0 0 0 4px #826df1}
.sky-decor{position:absolute;z-index:1;user-select:none;pointer-events:none}.cloud-one{left:7%;top:6%;font-size:4rem;opacity:.8}.cloud-two{right:9%;top:14%;font-size:3rem;opacity:.72}.sun{right:7%;top:4%;font-size:3rem}
.runner-hills{position:absolute;z-index:1;bottom:39%;width:45%;height:24%;background:#63bd59;border-radius:50% 50% 0 0}.hill-left{left:-15%;transform:rotate(5deg)}.hill-right{right:-18%;transform:rotate(-5deg);background:#78c85d}
.runner-road{position:absolute;z-index:2;left:18%;right:18%;top:26%;bottom:-12%;background:linear-gradient(180deg,#d4c7ba,#b8a697);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.road-stripe{position:absolute;left:50%;width:8px;height:34px;background:#fff8ce;border-radius:8px;transform:translateX(-50%);opacity:.88}.s1{top:6%}.s2{top:24%}.s3{top:43%}.s4{top:62%}.s5{top:82%}.runner-stage.running .road-stripe{animation:roadDash .65s linear infinite}@keyframes roadDash{from{transform:translate(-50%,-8px)}to{transform:translate(-50%,32px)}}
.gate-row{position:absolute;z-index:5;left:12%;right:12%;top:28%;display:grid;grid-template-columns:1fr 1fr;gap:9%;transition:transform .3s ease,opacity .3s ease}.gate-row.advance{transform:translateY(90px) scale(1.12);opacity:0}
.math-gate{min-height:145px;border:none;border-radius:22px 22px 14px 14px;background:linear-gradient(180deg,#fff,#f6f4ff);box-shadow:0 18px 25px rgba(62,46,115,.18),inset 0 0 0 4px #7c68e9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;cursor:pointer;position:relative;color:#4f39b0;transition:transform .18s ease,filter .18s ease,background .18s ease,box-shadow .18s ease;touch-action:manipulation}.math-gate::before,.math-gate::after{content:'';position:absolute;bottom:-26px;width:15px;height:36px;background:#7057d8;border-radius:0 0 8px 8px}.math-gate::before{left:15px}.math-gate::after{right:15px}.math-gate:hover,.math-gate:focus-visible{transform:translateY(-4px) scale(1.02);box-shadow:0 22px 30px rgba(62,46,115,.22),inset 0 0 0 5px #8b77ef}.math-gate strong{font-size:2.2rem}.math-gate small{font-weight:900;color:#776a9d}.gate-cap{font-size:.72rem;letter-spacing:.08em;font-weight:1000;color:#9385c4}.math-gate.wrong{background:linear-gradient(180deg,#ffd7df,#ffb7c4);box-shadow:0 0 0 5px rgba(225,52,82,.28),0 18px 24px rgba(138,38,58,.16);color:#a51f3a;animation:wrongShake .34s ease}.math-gate.wrong::before,.math-gate.wrong::after{background:#d84b63}.math-gate.correct{background:linear-gradient(180deg,#d9ffe4,#aef2c0);box-shadow:0 0 0 5px rgba(62,188,99,.25),0 18px 24px rgba(41,125,65,.16);color:#247041}@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.runner-squad{position:absolute;z-index:7;left:50%;bottom:66px;width:250px;height:190px;transform:translateX(-50%);transition:left .28s ease,transform .28s ease}.runner-squad.lane-left{left:31%}.runner-squad.lane-right{left:69%}.pip-runner{position:absolute;width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 7px 5px rgba(46,45,87,.2));transform-origin:center bottom;animation:pipJog .5s ease-in-out infinite alternate}.pip-runner.main{width:106px;height:106px;left:72px;bottom:0;z-index:10}.pip-runner.extra-1{left:5px;bottom:6px;z-index:7}.pip-runner.extra-2{right:5px;bottom:6px;z-index:7}.pip-runner.extra-3{left:35px;bottom:70px;z-index:5;transform:scale(.82)}.pip-runner.extra-4{right:35px;bottom:70px;z-index:5;transform:scale(.82)}.runner-stage:not(.running) .pip-runner{animation-play-state:paused}@keyframes pipJog{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-7px) rotate(1deg)}}
.runner-message{position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%);max-width:80%;background:rgba(255,255,255,.94);border-radius:999px;padding:.5rem .9rem;font-weight:900;color:#5039b0;box-shadow:0 9px 18px rgba(67,55,115,.13);text-align:center}.runner-message.try-again{background:#ffe5ea;color:#9a2940}.runner-message.good{background:#e0ffe8;color:#276e42}
.swipe-hint{position:absolute;z-index:4;left:8%;right:8%;bottom:36%;display:flex;justify-content:space-between;color:rgba(255,255,255,.9);font-weight:1000;text-shadow:0 2px 6px rgba(45,45,90,.3);pointer-events:none}
.runner-controls{display:flex;gap:.8rem;justify-content:center;margin-top:.9rem}.runner-arrow{flex:1;max-width:220px;min-height:50px;border:none;border-radius:18px;background:#eee9ff;color:#533ab8;font-weight:1000;font-size:1rem;cursor:pointer;touch-action:manipulation}.runner-arrow:hover,.runner-arrow:focus-visible{background:#ded5ff}.runner-arrow:active{transform:scale(.98)}
.runner-start-layer,.runner-finish-layer{position:absolute;z-index:20;inset:0;background:rgba(248,247,255,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.2rem}.runner-start-layer img{width:min(200px,42%);max-height:230px;object-fit:contain}.runner-start-layer h2,.runner-finish-layer h2{margin:.4rem 0}.runner-start-layer p,.runner-finish-layer p{max-width:580px;color:var(--ink-soft);font-weight:700}.runner-start-btn{font-size:1.05rem}.runner-finish-layer img{width:min(190px,40%);max-height:210px;object-fit:contain}.finish-confetti{font-size:1.8rem;margin-bottom:.4rem}.finish-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.runner-squad.add-pop .pip-runner:last-child{animation:addPop .5s ease both}@keyframes addPop{0%{opacity:0;transform:scale(.25) translateY(20px)}70%{opacity:1;transform:scale(1.14) translateY(-5px)}100%{opacity:1;transform:scale(1)}}.runner-squad.subtract-pop{animation:subPulse .4s ease}@keyframes subPulse{50%{transform:translateX(-50%) scale(.92)}}
@media(max-width:900px){.runner-layout{grid-template-columns:1fr}.runner-help-card{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.runner-help-card h2,.help-example,.runner-progress-card{grid-column:1/-1}.help-step{margin:0}.runner-stage{min-height:590px}}
@media(max-width:640px){.runner-page-shell{padding-top:1rem}.runner-topbar{align-items:flex-start}.runner-help-card{grid-template-columns:1fr}.runner-game-card{padding:.65rem;border-radius:24px}.runner-stage{min-height:520px;border-width:3px}.gate-row{left:6%;right:6%;top:29%;gap:7%}.math-gate{min-height:118px}.math-gate strong{font-size:1.8rem}.runner-road{left:7%;right:7%;top:25%}.runner-squad{width:210px;height:160px;bottom:64px}.pip-runner{width:68px;height:68px}.pip-runner.main{width:88px;height:88px;left:61px}.runner-squad.lane-left{left:28%}.runner-squad.lane-right{left:72%}.runner-controls{gap:.5rem}.runner-arrow{font-size:.92rem;padding:.55rem}.cloud-one{font-size:2.7rem}.cloud-two{font-size:2.3rem}.sun{font-size:2.4rem}.swipe-hint{font-size:.82rem;bottom:38%}}
@media(prefers-reduced-motion:reduce){.road-stripe,.pip-runner,.math-gate,.runner-squad{animation:none!important;transition:none!important}}


/* v11.1 — hidden overlays must actually stay hidden */
.runner-start-layer[hidden],
.runner-finish-layer[hidden]{display:none !important;}


/* v11.2 robust overlay state + cache-busted Math Run assets */
.runner-start-layer.runner-layer-hidden,
.runner-finish-layer.runner-layer-hidden,
.runner-start-layer[hidden],
.runner-finish-layer[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important;}
.runner-start-layer:not(.runner-layer-hidden):not([hidden]),
.runner-finish-layer:not(.runner-layer-hidden):not([hidden]){display:flex!important;visibility:visible!important;}
.runner-game-card.game-active .runner-start-layer,
.runner-game-card.game-active .runner-finish-layer.runner-layer-hidden{pointer-events:none;}