.runner-page,.runner-page *{cursor:url('assets/mascot-click-cursor-outline.png') 4 4,default}
.runner-page a,.runner-page button:not(:disabled),.runner-stage canvas{cursor:url('assets/mascot-click-cursor-outline.png') 4 4,pointer}
.runner-shell{max-width:1120px;padding-bottom:24px}
.runner-heading{grid-template-columns:minmax(0,1fr) 110px;min-height:104px;padding:9px 16px;margin-bottom:12px}
.runner-heading h1{font-size:1.8rem}.runner-heading img{height:86px;transform:scaleX(-1)}
.runner-game{display:grid;gap:10px}
.runner-hud,.runner-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border:2px solid #fff4d838;border-radius:8px;background:#09101cb8}
.runner-hud>div{min-width:0}.runner-hud span{display:block;color:#c5d4db;font:800 .75rem 'Space Mono',monospace;letter-spacing:.04em}.runner-hud strong{display:block;margin-top:3px;color:#fff4d8;font:800 1rem 'Space Mono',monospace;white-space:nowrap}
.runner-stage{position:relative;overflow:hidden;border:3px solid #fff4d847;border-radius:8px;background:#f3ead4;box-shadow:0 24px 80px #0006;touch-action:manipulation}
.runner-confetti{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;contain:layout paint style}
.runner-confetti[hidden]{display:none}
.runner-confetti span{position:absolute;top:-12px;width:8px;height:15px;border-radius:2px;opacity:0;animation:runner-confetti-fall 2.5s ease-in forwards}
@keyframes runner-confetti-fall{0%{opacity:0;transform:translate3d(0,-18px,0)}8%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),600px,0)}}
@media(prefers-reduced-motion:reduce){.runner-confetti{display:none}}
.runner-stage canvas{display:block;width:100%;height:auto;aspect-ratio:2/1}
.runner-static-preview{position:absolute;z-index:1;left:11.8%;top:58.3%;width:12.5%;height:26.7%;object-fit:contain;pointer-events:none}
.runner-static-preview[hidden]{display:none}
.runner-alert{position:absolute;z-index:1;top:14px;right:14px;max-width:min(68%,420px);padding:10px 14px;border:2px solid #9f342d;border-radius:6px;background:#fff4d8;color:#812d29;box-shadow:0 4px 12px #17263b44;font:900 .82rem 'Space Mono',monospace;text-align:center;letter-spacing:.02em;pointer-events:none}
.runner-alert[hidden]{display:none}.runner-alert.milestone{border-color:#346347;color:#24543a}
.runner-overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:#17263be8;text-align:center}.runner-overlay[hidden]{display:none}
.runner-overlay-inner{max-width:460px}.runner-seal{width:48px;height:48px;margin:0 auto 10px;display:grid;place-items:center;border:2px solid #b8e4c0;border-radius:50%;font:900 1.6rem system-ui;color:#b8e4c0}.runner-kicker{color:#b8e4c0;font:800 .75rem 'Space Mono',monospace;letter-spacing:.08em}.runner-overlay h2{margin:8px 0;color:#fff4d8;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1}.runner-overlay p{margin:0 auto 18px;max-width:360px;color:#e4edf2;line-height:1.5;font-size:.96rem}.runner-primary,.runner-touch button{min-height:50px;border:0;border-radius:6px;background:#b8e4c0;color:#17263b;font:900 .9rem 'Space Mono',monospace;padding:12px 20px}.runner-primary:hover,.runner-touch button:hover{background:#d9f2dd}
.runner-controls{min-height:58px;flex-wrap:wrap;color:#d8e1e3;font:700 .82rem 'Space Mono',monospace}.runner-help{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.runner-help b{color:#b8e4c0}.runner-help span{margin-inline:6px;color:#879ba8}.runner-actions{display:flex;gap:8px}.runner-actions button{min-height:48px;padding:8px 12px;border:1px solid #b8e4c08c;border-radius:5px;background:#17263b;color:#e7f4e8;font:800 .75rem 'Space Mono',monospace}.runner-actions button:hover:not(:disabled){background:#31533f}.runner-actions button:disabled{opacity:.45}
.runner-touch{display:flex;gap:12px;justify-content:center}.runner-touch button{min-width:125px;touch-action:none;user-select:none;-webkit-user-select:none}.runner-touch button:active{background:#f1bc4b}.runner-note{margin:2px 0 0;color:#cad6df;font-size:.82rem;line-height:1.4}
.runner-page :is(a,button,canvas):focus-visible{outline:3px solid #f1bc4b;outline-offset:3px}
@media(max-width:650px){.runner-shell{padding-inline:9px}.runner-heading{grid-template-columns:minmax(0,1fr) 85px;min-height:90px}.runner-heading img{height:72px}.runner-hud{padding:8px;gap:5px}.runner-hud span{font-size:.56rem}.runner-hud strong{font-size:.76rem}.runner-stage canvas{aspect-ratio:2/1}.runner-overlay p{font-size:.76rem;margin-bottom:10px}.runner-overlay h2{font-size:1.35rem;margin:5px 0}.runner-seal{display:none}.runner-kicker{font-size:.56rem}.runner-primary{min-height:46px;padding:8px 14px}.runner-help{font-size:.72rem}.runner-controls{padding:9px}.runner-alert{top:8px;right:8px;padding:5px 7px;font-size:.57rem}}
@media(max-width:440px){.runner-stage canvas{aspect-ratio:2/1}.runner-hud strong{font-size:.68rem}.runner-hud span{font-size:.5rem}.runner-touch button{flex:1}.runner-overlay-inner{max-width:300px}.runner-overlay p{line-height:1.32}}
@media(prefers-reduced-motion:reduce){.runner-stage *{transition:none!important;animation:none!important}}
/* Run report and practice controls live in HTML alongside the canvas. */
.runner-overlay{overflow-y:auto;align-items:center}
.runner-overlay-inner{margin:auto;min-width:0}
.runner-overlay-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.runner-secondary{min-height:50px;padding:11px 16px;border:2px solid #b8e4c0;border-radius:6px;background:transparent;color:#e5f3e7;font:800 .82rem 'Space Mono',monospace}
.runner-secondary:hover{background:#30485a}
.runner-secondary[hidden],.runner-report[hidden]{display:none}
.runner-report{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 auto 12px;text-align:left}
.runner-report>div{padding:6px 9px;border:1px solid #b8e4c075;border-radius:5px;background:#09101c99}
.runner-report dt{color:#b8e4c0;font:800 .69rem 'Space Mono',monospace;text-transform:uppercase}
.runner-report dd{margin:3px 0 0;color:#fff4d8;font:800 .88rem 'Space Mono',monospace}
.runner-event{margin:0;padding:10px 14px;border:1px solid #b8e4c070;border-radius:6px;background:#09101cb8;color:#e5f3e7;font-size:.91rem;line-height:1.4}
.runner-game,.runner-stage{min-width:0}
@media(max-width:650px){
  .runner-stage canvas{width:150%;max-width:none;height:auto}
  .runner-static-preview{left:17.7%;width:18.75%}
  .runner-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:9px 10px}
  .runner-hud span{font-size:.64rem;line-height:1.3}
  .runner-hud strong{font-size:.83rem;overflow:hidden;text-overflow:ellipsis}
  .runner-overlay{padding:10px}
  .runner-overlay p{margin:4px auto 9px;line-height:1.3}
  .runner-report{gap:4px;margin-bottom:8px}
  .runner-report>div{padding:4px 6px}
  .runner-report dt{font-size:.6rem}
  .runner-report dd{font-size:.74rem}
  .runner-primary,.runner-secondary{min-height:44px;padding:7px 10px;font-size:.74rem}
  .runner-event{padding:9px 10px;font-size:.84rem}
  .runner-alert{font-size:.63rem}
}
.runner-record{display:flex;align-items:center;gap:14px;padding:2px 8px 3px;color:#f4dfad}
.runner-record-caption{flex:0 0 auto;min-width:205px;font:800 .7rem 'Space Mono',monospace;letter-spacing:.03em}
.runner-record-track{position:relative;flex:1;height:9px;border:1px solid #f1bc4b91;border-radius:20px;background:#09101c;overflow:visible}
.runner-record-fill{display:block;height:100%;width:0;border-radius:20px;background:#f1bc4b;transition:width .18s linear}
.runner-record-flag{position:absolute;right:-4px;top:-10px;color:#f1bc4b;font:900 19px system-ui;text-shadow:0 1px 3px #09101c}
.runner-record.passed .runner-record-caption,.runner-record.passed .runner-record-flag{color:#b8e4c0}
.runner-record.passed .runner-record-fill{background:#b8e4c0}
@media(max-width:650px){.runner-record{gap:7px;padding:2px 5px}.runner-record-caption{min-width:0;font-size:.62rem}.runner-record-track{min-width:44px}}
@media(prefers-reduced-motion:reduce){.runner-record-fill{transition:none}}
.runner-page:has(#motion[aria-pressed="true"]) .runner-record-fill{transition:none}
.runner-difficulty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:min(100%,400px);margin:0 auto 10px;padding:0;border:0;text-align:left}
.runner-difficulty legend{padding:0 0 6px;color:#b8e4c0;font:800 .68rem 'Space Mono',monospace;letter-spacing:.04em}
.runner-difficulty label{position:relative;min-width:0;cursor:pointer}
.runner-difficulty input{position:absolute;width:1px;height:1px;opacity:0}
.runner-difficulty label span{display:grid;place-items:center;min-height:49px;padding:5px 3px;border:2px solid #81938e;border-radius:6px;background:#293f50;color:#fff4d8;font:800 .76rem 'Space Mono',monospace;text-align:center}
.runner-difficulty label small{font-size:.64rem;font-weight:700;color:#d2dfdc}
.runner-difficulty input:checked+span{border-color:#b8e4c0;background:#345e49}
.runner-difficulty input:focus-visible+span{outline:3px solid #f1bc4b;outline-offset:2px}
.runner-overlay:has(.runner-report:not([hidden])) .runner-report{grid-template-columns:repeat(3,minmax(0,1fr))}
.runner-overlay:has(.runner-report:not([hidden])){padding-block:4px}
.runner-overlay:has(.runner-report:not([hidden])) p{margin-bottom:6px}
.runner-overlay:has(.runner-report:not([hidden])) .runner-mishap-scene{min-height:78px}
.runner-overlay:has(.runner-report:not([hidden])) .runner-mishap-scene img{width:75px;height:78px}
.runner-overlay:has(.runner-report:not([hidden])) .runner-mishap-scene canvas{width:75px;height:65px}
.runner-impact-flash{position:absolute;z-index:2;inset:0;display:grid;place-items:center;padding:14px;background:#9f342dbb;color:#fffaf0;font:900 clamp(.8rem,2vw,1.4rem) 'Space Mono',monospace;text-align:center;text-shadow:0 2px 8px #17263b;pointer-events:none}
.runner-impact-flash[hidden]{display:none}
.runner-stage.impact{animation:runner-shake .42s ease-out both}
@keyframes runner-shake{0%,100%{transform:translateX(0)}15%{transform:translate(-9px,3px)}30%{transform:translate(8px,-3px)}45%{transform:translate(-6px,2px)}60%{transform:translate(5px,-1px)}80%{transform:translate(-2px,0)}}
.runner-page:has(#motion[aria-pressed="true"]) .runner-stage.impact{animation:none}
.runner-page:has(#motion[aria-pressed="true"]) .runner-impact-flash{background:#922e29e6}
.runner-hazard-cue{display:none}
.runner-hazard-cue[hidden],.runner-mishap-scene[hidden]{display:none}
.runner-mishap-scene{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-height:106px;margin:0 auto 3px}
.runner-overlay-inner:has(.runner-mishap-scene:not([hidden])) .runner-seal{display:none}
.runner-overlay-inner:has(.runner-mishap-scene:not([hidden])) .runner-report{gap:4px;margin-bottom:7px}
.runner-overlay-inner:has(.runner-mishap-scene:not([hidden])) .runner-mishap-scene{min-height:96px}
.runner-mishap-scene img{width:96px;height:96px;object-fit:contain;transform:rotate(-9deg);transform-origin:50% 90%}
.runner-mishap-scene canvas{width:92px;height:80px;object-fit:contain}
.runner-mishap-badge{max-width:125px;padding:5px 7px;border:1px solid #f1bc4b;border-radius:4px;color:#f1d387;font:800 .65rem 'Space Mono',monospace;text-align:left}
.runner-mishap-scene[data-kind="cooler"] img,.runner-mishap-scene[data-kind="wagon"] img{transform:rotate(12deg)}
.runner-mishap-scene[data-kind="rake"] img,.runner-mishap-scene[data-kind="notice"] img{transform:rotate(-19deg)}
.runner-mishap-scene[data-kind="flamingo"] img{transform:rotate(6deg)}
.runner-mishap-scene[data-kind="flamingo"] .runner-mishap-badge{border-color:#ed82a0;color:#f5b4c6}
@media(max-width:650px){.runner-hud{grid-template-columns:repeat(2,minmax(0,1fr))}.runner-difficulty{gap:5px;margin-bottom:7px}.runner-difficulty label span{min-height:48px;font-size:.66rem}.runner-overlay-inner:has(.runner-report:not([hidden])) .runner-report{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.runner-stage:has(.runner-report:not([hidden])){min-height:560px}}
@media(prefers-reduced-motion:reduce){.runner-stage.impact{animation:none}}
@media(max-width:650px){
  .runner-hazard-cue{position:absolute;z-index:1;top:38%;right:8px;display:flex;flex-direction:column;gap:2px;min-width:82px;padding:7px 8px;border:2px solid #17263b;border-radius:5px;background:#fff4d8ec;color:#17263b;text-align:center;box-shadow:0 4px 10px #17263b66;pointer-events:none}
  .runner-hazard-cue strong{font:900 .75rem 'Space Mono',monospace;white-space:nowrap}
  .runner-hazard-cue small{font:800 .58rem 'Space Mono',monospace;white-space:nowrap}
  .runner-mishap-scene{min-height:72px;margin-bottom:3px}
  .runner-mishap-scene img{width:66px;height:72px}
  .runner-mishap-scene canvas{width:66px;height:57px}
  .runner-mishap-badge{max-width:95px;font-size:.56rem}
}
