/* Keep the vanishing point and three lanes clear; feedback lives at the edges. */
#game-hud{padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left));font-variant-numeric:tabular-nums}
.hud-top strong{font-size:38px;letter-spacing:-1px}.hud-top small{letter-spacing:1px;font-size:10px}#hud-map{font-size:11px;color:#e9f8f8;margin:0}.hud-right{gap:10px}.hud-right button{height:42px;min-width:42px;padding:6px;border-radius:12px;box-shadow:0 3px 0 #172d4333}.hud-right .coin{display:flex;align-items:center;gap:5px;font-size:23px;transform-origin:right center;background:#153a50c9;padding:3px 10px;border-radius:10px;color:#fff1b1}
#run-pace{font-size:10px;color:#fff;background:#173a50ba;padding:3px 8px;border-radius:5px;margin-top:5px;width:max-content;text-shadow:none}
#powerups{margin-top:12px;display:flex;flex-direction:column;gap:7px;width:120px}
.power-card{display:flex;align-items:center;gap:8px;padding:7px 9px;background:#163748df;border:1px solid #d5ffff66;box-shadow:0 3px 0 #12304244;border-radius:10px;color:#e7ffff;min-height:48px}.power-card svg{width:25px;height:25px;fill:none;stroke:#83f2d5;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}.power-card>div{flex:1;min-width:0}.power-card b{display:block;font-size:11px;line-height:1.2;white-space:nowrap}.power-card small{display:block;font-size:10px;color:#c2dcde;font-weight:400}.power-card i{display:block;height:3px;background:#648595;border-radius:3px;overflow:hidden;margin-top:2px}.power-card em{display:block;height:100%;background:#8cf4d5;transform-origin:left}.power-card.expiring{border-color:#ffd080}.power-card.expiring em{background:#ffb86a}
#run-callout{position:absolute;left:50%;top:25%;transform:translate(-50%,8px) rotate(-3deg);opacity:0;transition:opacity .15s,transform .15s;white-space:nowrap;color:#fff5c1;font-size:23px;font-weight:900;text-shadow:0 3px 0 #204555,2px 0 #204555,-2px 0 #204555}#run-callout.show{opacity:1;transform:translate(-50%,0) rotate(-3deg)}
#impact-vignette{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 100px 22px #ff6f44;pointer-events:none;z-index:-1}
#hit-warning{top:auto;bottom:125px;font-size:11px;background:#a83324df;padding:5px 10px;border-radius:8px}
.touch-guide{transition:opacity .5s;bottom:76px}.touch-guide.guide-done{opacity:0}.touch-controls{gap:10px}.touch-controls button{width:52px;height:44px;border-radius:12px;font-size:22px;background:#f8f5ead9}
#resume-countdown{position:fixed;inset:0;z-index:6;display:grid;place-content:center;pointer-events:none;background:#17334633;color:#fff4c0;text-align:center;text-shadow:0 4px 0 #23424d}#resume-countdown strong{font-size:84px;line-height:1.1}#resume-countdown small{font-size:15px;margin-top:10px}#sound-toggle{font-size:11px;color:#38515c;background:#e9ece5}
@media(max-width:680px){#game-hud{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.hud-top strong{font-size:32px}.hud-right .coin{font-size:20px;padding:3px 8px}.hud-right .betel-icon{height:26px}.power-card{min-height:43px;padding:5px 7px;gap:6px}#powerups{width:112px;margin-top:10px;gap:5px}.power-card svg{width:23px;height:23px}#run-callout{font-size:21px}}
@media(prefers-reduced-motion:reduce){#run-callout,.touch-guide{transition:none}}