/* Heli Math : page-specific styles (shared: arcade-kit.css, sim3d.css for the banner / result card) */
.hm-wrap { position: relative; width: 100%; }
.hm-wrap .ak-stage { background: #bae6fd; touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; }
.hm-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; }
.hm-hud button, .hm-hud .sim-result { pointer-events: auto; }
.hm-q { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: #1e3a8a; color: #fff; border-radius: 16px; padding: 6px 22px; font: 900 clamp(24px, 4.4cqw, 40px)/1.1 system-ui, sans-serif; box-shadow: 0 4px 0 #172554; white-space: nowrap; }
.hm-q:empty { display: none; }
.hm-card { position: absolute; left: 10px; top: 10px; background: rgba(15, 23, 42, .75); color: #fff; border-radius: 12px; padding: 5px 12px; }
.hm-card b { display: block; font: 900 15px/1.2 system-ui, sans-serif; } .hm-card span { display: block; font: 800 12px system-ui, sans-serif; color: #bae6fd; }
.hm-pop { position: absolute; left: 50%; bottom: 22%; transform: translate(-50%, 0); font: 900 clamp(20px, 3.6cqw, 32px) system-ui, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(15, 23, 42, .8); opacity: 0; white-space: nowrap; }
.hm-pop.is-ok { color: #4ade80; } .hm-pop.is-bad { color: #fde047; }
.hm-pop.is-on { animation: hm-pop 1.4s ease-out forwards; }
@keyframes hm-pop { 0% { opacity: 0; transform: translate(-50%, 20%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30%); } }
.hm-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.hm-tb button, .hm-tb .ak-mute { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 23, 42, .7); color: #fff; font-size: 17px; cursor: pointer; }
.hm-ud { position: absolute; right: 14px; bottom: 14px; display: none; flex-direction: column; gap: 8px; }
.hm-ud button { width: 64px; height: 64px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .7); background: rgba(30, 58, 138, .55); font-size: 26px; touch-action: none; }
.hm-ud button.is-on { background: rgba(14, 165, 233, .85); }
.hm-hud.is-touch .hm-ud { display: flex; }
.hm-hud .sim-banner { pointer-events: none; }
.hm-hud .sim-result[hidden] { display: none; }
.hm-hud.is-over .hm-tb, .hm-hud.is-over .hm-ud, .hm-hud.is-over .hm-q { display: none; }
.hm-missed { text-align: left; background: rgba(250, 204, 21, .12); border-radius: 10px; padding: 6px 12px; margin: 6px 0; } .hm-missed p { margin: 0; font-weight: 800; } .hm-missed ul { margin: 2px 0 0; padding-left: 18px; }
.hm-opts { margin-top: 14px; } .hm-opts h3 { margin: 10px 0 6px; }
.hm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-row button { text-align: left; border-radius: 12px; padding: 8px 12px; 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; }
.hm-row button b { font-size: 13.5px; } .hm-row button small { font-size: 12px; color: #fde047; }
.hm-row button[aria-pressed="true"] { border-color: #ffd54a; background: rgba(255, 213, 74, .14); }
@container (max-width: 600px) { .hm-q { top: 54px; } .hm-tb { right: 6px; top: 6px; gap: 4px; } .hm-tb button, .hm-tb .ak-mute { width: 36px; height: 36px; font-size: 15px; } .hm-card { left: 6px; top: 6px; } }