#game { width: min(100%, calc(100cqh * 21 / 31)); height: auto; max-height: 100%; aspect-ratio: 21 / 31; border-radius: 1.5rem; background: #11182d; box-shadow: 0 18px 60px rgba(0,0,0,.35); touch-action: none; }
#game.impact { animation: road-impact .42s ease-out; }
@keyframes road-impact { 0%, 100% { translate: 0; } 15% { translate: -9px 3px; } 32% { translate: 8px -2px; } 50% { translate: -6px 1px; } 70% { translate: 4px; } }
.steer-button { min-width: 5.2rem; font-size: 1.2rem; }
.steer-hint { position: absolute; bottom: .75rem; left: 50%; translate: -50%; width: max-content; max-width: calc(100% - 1.5rem); padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(12,15,18,.78); color: rgba(255,255,255,.82); font-size: .68rem; font-weight: 800; letter-spacing: .025em; pointer-events: none; }
.game-stage { position: relative; }
.scorebar .metric:nth-child(2) { text-align: center; }
@media (max-height: 760px) and (orientation: portrait) { #game { border-radius: 1rem; } .steer-button { min-width: 4.7rem; font-size: 1rem; } }
@media (max-height: 620px) and (orientation: landscape) { #game { width: auto; height: min(94vh, 35rem, 100cqh); } .steer-button { min-width: 0; } }
@media (max-width: 340px) { .steer-button { min-width: 4rem; font-size: .84rem; } }