@font-face{font-family:Bowlby;src:url('../../assets/bowlby.ttf');font-display:swap}@font-face{font-family:DM;src:url('../../assets/dm-sans.ttf');font-display:swap}
:root{font-family:DM,Arial,sans-serif;color:#332b23;background:#efe1bd;color-scheme:light;--ink:#332b23;--paper:#fbefd0;--red:#b6382c;--green:#4e7352}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #28756d;outline-offset:4px}button:disabled{cursor:default}.game-shell{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:320px;overflow:hidden;background:#ddcfad}.game-shell:after{content:"";position:absolute;z-index:1;inset:0;box-shadow:inset 0 0 65px #51352035;pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.heading{position:absolute;inset:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) auto max(16px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3}.title-lockup{color:#372d23;text-shadow:0 2px #fff0cc}.title-lockup p{font-size:8px;font-weight:900;letter-spacing:2px;margin:0 0 2px}.title-lockup h1{font:400 clamp(22px,3vw,38px)/1.03 Bowlby,Impact,sans-serif;letter-spacing:-1px;margin:0}.title-lockup i{color:var(--red);font-style:normal}.toolbar{display:flex;gap:6px;align-items:center}.toolbar>button,.arcade-audio-controls .arcade-audio-pill{min-height:44px;min-width:54px;padding:8px 12px;border:2px solid #51402c;border-radius:99px;background:#fbefd0eF;font-size:10px;font-weight:900;box-shadow:0 2px 0 #51402c44}.toolbar>button:disabled{opacity:.55}.arcade-audio-controls .arcade-audio-pill{min-width:85px;font-size:10px}.toolbar #fullscreen{font-size:24px;min-width:44px;padding:0 6px}.scoreboard{position:absolute;z-index:2;top:82px;left:max(20px,env(safe-area-inset-left));display:flex;align-items:center;gap:22px;background:#fbefd0ef;border:2px solid #645035;border-radius:16px;padding:9px 15px;box-shadow:0 3px 0 #64503533;transform:rotate(-1deg)}.scoreboard>div{display:flex;align-items:center;gap:8px}.scoreboard span{font-size:8px;letter-spacing:.8px;font-weight:900}.scoreboard b{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}.fill-dots{display:flex;gap:4px}.fill-dots i{display:block;width:9px;height:9px;border:1.5px solid #5c523a;border-radius:50%;background:#d3c4a2}.fill-dots i.filled{background:#4e7352;box-shadow:inset 0 0 0 1px #cbd5a0}.control-panel{position:absolute;z-index:3;right:3%;bottom:max(38px,calc(env(safe-area-inset-bottom) + 22px));width:min(30%,345px);text-align:center;padding:18px 21px 13px;background:#fbefd0f7;border:2px solid #493925;border-radius:25px;box-shadow:0 4px 0 #6a4c30,0 12px 30px #37261525;transform:rotate(1deg)}.kicker{margin:0 0 8px;font-size:8px;font-weight:900;letter-spacing:1.2px;color:#776041}h2{font:400 clamp(21px,2.5vw,29px)/1.1 Bowlby,Impact,sans-serif;margin:0 0 10px;letter-spacing:-.7px}#play-directions{font-size:12px;line-height:1.45;margin:0 auto 13px;font-weight:600;max-width:300px}.pump-button{width:100%;min-height:59px;display:flex;align-items:center;justify-content:center;gap:22px;padding:11px 18px;border:3px solid var(--ink);border-radius:99px;background:var(--red);box-shadow:inset 0 3px #e67954,0 4px 0 var(--ink);color:#fff4d8;font:400 22px/1.1 Bowlby,Impact,sans-serif;text-shadow:0 2px #77291f;transition:transform .08s,background .08s}.pump-button:hover{background:#a83028}.pump-button:active{transform:translateY(3px);box-shadow:inset 0 2px #e67954,0 1px 0 var(--ink)}.pump-button:disabled{background:#7c7860;box-shadow:inset 0 3px #aaa082,0 3px 0 var(--ink)}.button-symbol{font-size:26px}.input-hint{font-size:9px;font-weight:800;letter-spacing:.4px;margin:11px 0 0}.orientation-hint{font-size:9px;line-height:1.3;font-weight:600;margin:7px 0 0;color:#7b6245}.game-note{position:absolute;z-index:2;bottom:10px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1.1px;font-weight:900;color:#513c27;margin:0;text-shadow:0 1px #f9ebc2}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game-shell[data-mode=playing] .control-panel{background:#fbefd0ed}.game-shell[data-mode=playing] .kicker{display:none}.game-shell[data-mode=playing] h2{font-size:24px;margin-bottom:7px}.game-shell[data-mode=playing] #play-directions{font-size:11px;margin-bottom:10px}.game-shell[data-mode=playing] .orientation-hint{display:none}.game-shell[data-mode=paused] .control-panel{border-style:dashed}.game-shell[data-mode=won] h2{color:var(--green)}.game-shell[data-mode=lost] h2{color:var(--red)}
@media(orientation:portrait){.heading{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));top:max(13px,env(safe-area-inset-top));gap:6px}.title-lockup h1{font-size:27px;line-height:.99;max-width:155px}.title-lockup h1 span{display:block}.title-lockup h1 i{position:static}.title-lockup p{font-size:6px;letter-spacing:1.1px;margin-bottom:5px}.toolbar{gap:5px}.toolbar>button{font-size:9px;min-width:48px;padding:8px}.toolbar #fullscreen{display:none}.arcade-audio-controls .arcade-audio-pill{min-width:80px;padding:8px;font-size:9px}.scoreboard{top:max(91px,calc(env(safe-area-inset-top) + 78px));left:16px;right:16px;justify-content:space-between;gap:10px;padding:8px 12px;transform:rotate(-.6deg)}.scoreboard>div{gap:5px}.scoreboard span{font-size:7px;letter-spacing:.5px}.scoreboard b{font-size:16px}.fill-dots{gap:3px}.fill-dots i{width:7px;height:7px}.control-panel{width:min(350px,calc(100% - 34px));right:50%;bottom:max(31px,calc(env(safe-area-inset-bottom) + 20px));transform:translateX(50%) rotate(1deg);padding:15px 18px 12px;border-radius:24px}.kicker{font-size:7px;letter-spacing:1px;margin-bottom:7px}h2{font-size:24px;margin-bottom:8px}#play-directions{font-size:11px;margin-bottom:10px}.pump-button{min-height:57px;font-size:22px}.game-shell[data-mode=playing] .control-panel{padding:13px 18px 12px}.game-note{bottom:max(10px,env(safe-area-inset-bottom))}}
@media(orientation:portrait) and (max-height:660px){.control-panel{padding:11px 16px 9px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px))}.kicker{display:none}h2{font-size:21px;margin-bottom:6px}#play-directions{font-size:10px;line-height:1.35;margin-bottom:8px}.pump-button{min-height:52px;font-size:21px}.input-hint{font-size:8px;margin-top:8px}.orientation-hint{font-size:8px;margin-top:5px}.game-shell[data-mode=playing] .control-panel{padding:11px 16px 10px}.game-shell[data-mode=playing] h2{font-size:21px}.scoreboard{gap:5px}.fill-dots{display:none}.game-note{bottom:6px;font-size:6px}}
@media(orientation:landscape) and (max-height:480px){.heading{top:max(8px,env(safe-area-inset-top));left:max(17px,env(safe-area-inset-left));right:max(17px,env(safe-area-inset-right))}.title-lockup h1{font-size:26px}.title-lockup p{font-size:6px;letter-spacing:1.2px}.toolbar #fullscreen{display:none}.scoreboard{top:65px;left:max(20px,env(safe-area-inset-left));gap:15px;padding:6px 12px}.scoreboard span{font-size:7px}.scoreboard b{font-size:15px}.fill-dots{display:none}.control-panel{width:35%;right:3%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 9px));padding:11px 15px 9px;border-radius:21px}.kicker{display:none}h2{font-size:21px;margin-bottom:7px}#play-directions{font-size:10px;line-height:1.35;margin-bottom:9px}.pump-button{min-height:48px;font-size:20px}.input-hint{font-size:8px;margin-top:8px}.orientation-hint{font-size:8px;margin-top:5px}.game-shell[data-mode=playing] h2{font-size:21px}.game-shell[data-mode=playing] #play-directions{font-size:10px}.game-note{font-size:6px;bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Short embedded phone frames keep the dial large without sacrificing touch targets. */
@media(orientation:portrait) and (max-height:560px){.title-lockup h1{font-size:24px}.heading{top:max(10px,env(safe-area-inset-top))}.scoreboard{top:max(80px,calc(env(safe-area-inset-top) + 68px));padding:6px 11px}.control-panel{padding:10px 12px 8px;bottom:max(21px,calc(env(safe-area-inset-bottom) + 9px))}h2,.game-shell[data-mode=playing] h2{font-size:17px;letter-spacing:-.55px;margin-bottom:6px}#play-directions,.game-shell[data-mode=playing] #play-directions{font-size:9px;line-height:1.3;margin-bottom:7px}.pump-button{min-height:48px;font-size:20px}.input-hint{margin-top:7px}.orientation-hint{margin-top:4px}.game-shell[data-mode=playing] .control-panel{padding:10px 12px 9px}}

.game-shell[data-mode=bursting] .kicker,.game-shell[data-mode=bursting] .orientation-hint{display:none}.game-shell[data-mode=bursting] h2{color:var(--red)}
@media(orientation:landscape) and (max-height:480px){h2,.game-shell[data-mode=playing] h2{font-size:19px}.control-panel{padding-inline:12px}.pump-button{font-size:18px}}

@media(orientation:landscape) and (max-height:480px){.pump-button{gap:8px;padding-inline:12px}.button-symbol{font-size:18px}#button-label{white-space:nowrap}}

/* Cartoon status cases retain a clear lane above the responsive gauge. */
#game-canvas{pointer-events:auto;touch-action:manipulation}
.heading{pointer-events:none}.heading .toolbar{pointer-events:auto}
.scoreboard{background:none;border:0;box-shadow:none;border-radius:0;transform:none;padding:0;gap:9px;align-items:stretch}
.scoreboard>div.hud-case{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 13px;min-height:67px}
.scoreboard .fill-stat{min-width:170px}.scoreboard .chance-stat{min-width:88px;background:#d9dba9}.scoreboard .timer-stat{min-width:90px}
.scoreboard .hud-stat-line{gap:7px}.scoreboard b{font:400 23px/1.1 Bowlby,Impact,sans-serif}
.scoreboard .fill-dots{display:flex;gap:0}.scoreboard .fill-dots i{width:24px;height:24px;opacity:.24;filter:grayscale(1)}
.scoreboard .fill-dots i.filled{background:url('../tread-toss/assets/tire-rolling-v9.png') center/contain no-repeat;box-shadow:none;opacity:1;filter:none}
.scoreboard .fill-stat .hud-stat-line{gap:10px}
@media(orientation:portrait){.scoreboard{left:12px;right:12px;gap:6px}.scoreboard>div.hud-case{padding:5px 8px;min-height:68px}.scoreboard .fill-stat{min-width:0;flex:1.55}.scoreboard .chance-stat,.scoreboard .timer-stat{min-width:0;flex:1}.scoreboard .hud-stat-label{font-size:10px}.scoreboard .fill-dots i{width:20px;height:20px}.scoreboard b{font-size:21px}.scoreboard .hud-stat-line{gap:3px}.scoreboard [data-hud-clock]{width:29px;height:33px}.scoreboard .hud-tire-icon{width:29px;height:29px}}
@media(orientation:portrait) and (max-width:350px){.scoreboard{left:8px;right:8px;gap:5px}.scoreboard>div.hud-case{padding-inline:5px}.scoreboard .fill-dots i{width:17px;height:19px}.scoreboard b{font-size:19px}.scoreboard .hud-stat-label{font-size:9px}}
@media(orientation:landscape) and (max-height:480px){.scoreboard{top:63px;left:15px;gap:7px}.scoreboard>div.hud-case{min-height:54px;padding:4px 10px}.scoreboard .fill-stat{min-width:125px}.scoreboard .chance-stat{min-width:74px}.scoreboard .timer-stat{min-width:76px}.scoreboard b{font-size:19px}.scoreboard .fill-dots i{width:18px;height:18px}.scoreboard [data-hud-clock]{width:26px;height:28px}.scoreboard .hud-tire-icon{width:25px;height:25px}.scoreboard .hud-stat-label{font-size:9px}}
