/* Hill Climb Bus : page-specific styles (shared: arcade-kit.css, sim3d.css for the banner / result card) */
.hc-wrap { position: relative; width: 100%; }
.hc-wrap .ak-stage { background: #7dd3fc; touch-action: none; user-select: none; -webkit-user-select: none; }
.hc-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; color: #fff; }
.hc-hud button, .hc-hud .sim-result { pointer-events: auto; }
.hc-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hc-top > span:not(.hc-tb) { background: rgba(15, 23, 42, .8); border-radius: 10px; padding: 4px 10px; font: 900 17px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.hc-fuel { display: flex; align-items: center; gap: 6px; } .hc-fuel i { width: 90px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .25); overflow: hidden; display: block; }
.hc-fuel b { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #facc15 40%, #22c55e); }
.hc-fuel.is-low { animation: hc-blink .5s steps(2) infinite; }
@keyframes hc-blink { 50% { opacity: .5; } }
.hc-tb { margin-left: auto; display: flex; gap: 5px; }
.hc-tb button, .hc-tb .ak-mute { width: 40px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 23, 42, .78); color: #fff; font-size: 16px; cursor: pointer; }
.hc-stop { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); font: 900 16px system-ui, sans-serif; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); white-space: nowrap; }
.hc-pedals { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; }
.hc-pedal { width: 96px; height: 96px; border-radius: 22px; border: 2px solid rgba(255, 255, 255, .5); color: #fff; font: 900 15px system-ui, sans-serif; cursor: pointer; opacity: .85; touch-action: none; }
.hc-pedal.is-brake { background: rgba(185, 28, 28, .75); } .hc-pedal.is-gas { background: rgba(21, 128, 61, .8); }
.hc-pedal.is-on { transform: scale(.94); opacity: 1; }
.hc-hud .sim-banner { pointer-events: none; }
.hc-hud .sim-result[hidden] { display: none; }
.hc-shop { margin-top: 14px; } .hc-shop h3 { margin: 6px 0 8px; }
.hc-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hc-ups button { text-align: left; border-radius: 12px; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.hc-ups button:disabled { opacity: .5; cursor: not-allowed; }
.hc-ups b { font-size: 14px; } .hc-ups small { font-size: 12px; opacity: .8; } .hc-ups span { color: #fde047; letter-spacing: 2px; } .hc-ups em { font-style: normal; font-weight: 900; color: #fde047; }
@container (max-width: 600px) { .hc-top > span:not(.hc-tb) { font-size: 13px; padding: 3px 7px; } .hc-fuel i { width: 60px; } .hc-tb button, .hc-tb .ak-mute { width: 34px; height: 34px; } .hc-pedal { width: 84px; height: 84px; } .hc-stop { top: 84px; font-size: 14px; } }
@media (pointer: fine) { .hc-pedals { opacity: .55; } .hc-pedal { width: 72px; height: 72px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .hc-fuel.is-low { animation: none; } }