/* Bus Math : page-specific styles (shared: arcade-kit.css for the answer bar, sim3d.css for the banner / result card) */
.bm-wrap { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bm-wrap .ak-stage { background: #bae6fd; user-select: none; -webkit-user-select: none; }
.bm-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; }
.bm-hud button, .bm-hud .sim-result { pointer-events: auto; }
.bm-card { position: absolute; left: 10px; top: 10px; background: rgba(15, 23, 42, .75); color: #fff; border-radius: 12px; padding: 5px 12px; }
.bm-card b { display: block; font: 900 15px/1.2 system-ui, sans-serif; } .bm-card span { display: block; font: 800 12px system-ui, sans-serif; color: #bae6fd; }
.bm-count { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: #fff; color: #0f172a; border-radius: 16px; padding: 5px 18px; font: 800 clamp(16px, 2.8cqw, 26px)/1.2 system-ui, sans-serif; box-shadow: 0 4px 0 rgba(15, 23, 42, .2); white-space: nowrap; }
.bm-count b { color: #16a34a; font-size: 1.2em; }
.bm-pop { position: absolute; left: 50%; top: 24%; transform: translate(-50%, 0); font: 900 clamp(22px, 4cqw, 38px) system-ui, sans-serif; color: #fff; background: rgba(15, 23, 42, .65); border-radius: 999px; padding: 4px 20px; opacity: 0; white-space: nowrap; }
.bm-pop.is-ok { color: #4ade80; } .bm-pop.is-bad { color: #fde047; }
.bm-pop.is-on { animation: bm-pop 2.2s ease-out forwards; }
@keyframes bm-pop { 0% { opacity: 0; transform: translate(-50%, 20%) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 85% { opacity: 1; } 100% { opacity: 0; } }
.bm-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.bm-tb button, .bm-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; }
.bm-hud .sim-banner { pointer-events: none; }
.bm-hud .sim-result[hidden] { display: none; }
.bm-hud.is-over .bm-tb, .bm-hud.is-over .bm-count { display: none; }
.bm-wrap .ak-answers { min-height: 132px; }
.bm-wrap .ak-question { max-width: 46em; line-height: 1.35; }
.bm-stopname { display: inline-block; font-size: .72em; font-weight: 800; color: #93c5fd; margin-right: 4px; }
.bm-wrap .ak-answer { min-width: 88px; font-size: 1.6rem; }
.bm-missed { text-align: left; background: rgba(250, 204, 21, .12); border-radius: 10px; padding: 6px 12px; margin: 6px 0; } .bm-missed p { margin: 0; font-weight: 800; } .bm-missed ul { margin: 2px 0 0; padding-left: 18px; }
.bm-opts { margin-top: 14px; } .bm-opts h3 { margin: 10px 0 6px; }
.bm-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bm-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; }
.bm-row button b { font-size: 13.5px; } .bm-row button small { font-size: 12px; color: #fde047; }
.bm-row button[aria-pressed="true"] { border-color: #ffd54a; background: rgba(255, 213, 74, .14); }
@container (max-width: 599px) {
  .bm-tb { right: 6px; top: 6px; gap: 4px; } .bm-tb button, .bm-tb .ak-mute { width: 36px; height: 36px; font-size: 15px; } .bm-card { left: 6px; top: 6px; }
  .bm-count { top: 52px; font-size: clamp(16px, 4.6cqw, 22px); }
  /* the phone stage is short: a compact, scrollable results card */
  .bm-hud .sim-result__card { max-height: calc(100% - 12px); overflow-y: auto; padding: 8px 12px; }
  .bm-hud .sim-result__card h3 { font-size: 17px; margin-bottom: 2px; }
  .bm-hud .sim-result__card p { margin: 2px 0; font-size: 14px; }
  .bm-hud .sim-result__btns { margin-top: 6px; flex-wrap: nowrap; }
  .bm-hud .sim-result__btns .btn { padding: 6px 10px; font-size: 13px; }
  .bm-missed { padding: 3px 8px; margin: 3px 0; font-size: 13px; }
}
@media (max-width: 599px) { .bm-wrap .ak-answer { min-width: 64px; font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .bm-pop.is-on { animation-duration: .01s; opacity: 1; } }