#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%; padding: .35rem .7rem; border-radius: 999px; background: rgba(17,24,45,.72); color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 800; 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; } }