/* Wheels on the Bus : page-specific styles (shared: arcade-kit.css, sim3d.css for the result card) */
.wb-wrap { position: relative; width: 100%; }
.wb-wrap .ak-stage { background: #bae6fd; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.wb-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; }
.wb-hud button, .wb-hud .sim-result { pointer-events: auto; }
.wb-seats { position: absolute; left: 10px; top: 10px; display: flex; gap: 4px; background: rgba(255, 255, 255, .85); border-radius: 16px; padding: 4px 10px; box-shadow: 0 3px 0 rgba(15, 23, 42, .15); min-height: 36px; }
.wb-seats:empty { display: none; }
.wb-seats span { font-size: clamp(20px, 3.2cqw, 28px); line-height: 1.2; }
.wb-seats span.is-empty { filter: grayscale(1); opacity: .35; }
.wb-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.wb-tb button, .wb-tb .ak-mute { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(15, 23, 42, .65); color: #fff; font-size: 18px; cursor: pointer; }
/* the sung line, word by word */
.wb-lyric { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); text-align: center; font: 900 clamp(20px, 3.4cqw, 34px)/1.25 system-ui, sans-serif; color: rgba(255, 255, 255, .7); background: rgba(15, 23, 42, .55); border-radius: 20px; padding: 6px 18px; opacity: 0; transition: opacity .2s; }
.wb-lyric.is-on { opacity: 1; }
.wb-lyric span { display: inline-block; transition: transform .12s, color .12s; }
.wb-lyric span.is-sung { color: #fff; }
.wb-lyric span.is-now { color: #fde047; transform: translateY(-4px) scale(1.12); }
.wb-prompt { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 0); width: max-content; text-align: center; font: 900 clamp(20px, 3.4cqw, 32px)/1.2 system-ui, sans-serif; color: #fff; background: rgba(15, 23, 42, .62); border-radius: 22px; padding: 6px 20px; text-shadow: 0 2px 6px rgba(15, 23, 42, .6); opacity: 0; transition: opacity .25s; max-width: calc(100% - 24px); }
.wb-prompt.is-on { opacity: 1; }
.wb-prompt small { display: block; font-size: .62em; font-weight: 800; color: #fde047; margin-top: 2px; }
/* the eight verse buttons along the bottom */
.wb-btns { position: absolute; left: 8px; right: 8px; bottom: 8px; height: calc(17.5% - 12px); display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.wb-btns button { border: 0; border-radius: 18px; background: #fff; color: #0f172a; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 5px 0 rgba(15, 23, 42, .25); transition: transform .1s, box-shadow .1s, background .2s; padding: 0; min-height: 44px; }
.wb-btns button span { font-size: clamp(26px, 4.4cqw, 40px); line-height: 1; }
.wb-btns button small { font: 800 clamp(11px, 1.5cqw, 14px) system-ui, sans-serif; }
.wb-btns button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(15, 23, 42, .25); }
.wb-btns button.is-singing { background: #fde047; }
.wb-btns button.is-need { background: #bbf7d0; animation: wb-need 1s ease-in-out infinite; }
@keyframes wb-need { 50% { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 6px rgba(74, 222, 128, .6), 0 9px 0 rgba(15, 23, 42, .2); } }
.wb-hud .sim-result[hidden] { display: none; }
.wb-hud.is-over .wb-tb, .wb-hud.is-over .wb-btns, .wb-hud.is-over .wb-prompt { display: none; }
.wb-big { font-size: 38px; margin: 6px 0; letter-spacing: 6px; }
.wb-places { margin-top: 12px; } .wb-places h3 { margin: 10px 0 6px; }
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wb-grid button { text-align: left; border-radius: 14px; padding: 10px 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: 3px; }
.wb-grid button b { font-size: 15px; } .wb-grid button small { font-size: 12px; color: #fde047; }
.wb-grid button[aria-pressed="true"] { border-color: #ffd54a; background: rgba(255, 213, 74, .14); }
/* phones: the stage is 600x820 and the buttons sit in two rows of four */
@container (max-width: 599px) {
  .wb-btns { height: calc(26% - 12px); grid-template-columns: repeat(4, 1fr); }
  .wb-btns button span { font-size: clamp(26px, 8cqw, 40px); }
  .wb-btns button small { font-size: clamp(11px, 3cqw, 14px); }
  .wb-lyric { top: 11%; font-size: clamp(17px, 5cqw, 26px); }
  .wb-prompt { top: 23%; font-size: clamp(18px, 5.4cqw, 28px); }
  .wb-tb { right: 6px; top: 6px; } .wb-seats { left: 6px; top: 6px; padding: 3px 8px; }
  .wb-seats span { font-size: clamp(18px, 5.4cqw, 26px); }
}
@media (prefers-reduced-motion: reduce) { .wb-btns button.is-need { animation: none; box-shadow: 0 0 0 5px rgba(74, 222, 128, .7); } .wb-lyric span { transition: none; } }