/* The battle stage stays dark in both quiz themes so the original art reads clearly. */
.theme-cute .battle-arena, .battle-arena {
    background: #080e1e; height: 38vh; min-height: 210px; max-height: 440px;
    flex: 0 0 auto; border-bottom: 1px solid #bca26a55;
}
.arena-hud {
    position: absolute; inset: 12px 3% auto; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(8px, 2vw, 28px); align-items: start; pointer-events: none;
    color: #f4efe3; font-family: 'Noto Sans SC', sans-serif;
}
.arena-player {
    display: flex; align-items: center; gap: 12px; max-width: 390px;
    padding: 8px 14px; border: 1px solid #e7c98635; border-radius: 12px;
    background: linear-gradient(110deg, #2b152be8, #101929d9);
    box-shadow: 0 6px 24px #0003; min-width: 0; width: 100%;
}
.arena-player-right { justify-self: end; flex-direction: row-reverse; text-align: right; background: linear-gradient(250deg, #102d45e8, #101929d9); }
.arena-score { font: 700 clamp(25px, 3vw, 38px)/1 'Orbitron', sans-serif; color: #e7c986; flex-shrink: 0; }
.arena-player-copy { min-width: 0; }
.arena-name { font-weight: 900; font-size: clamp(14px, 1.5vw, 22px); overflow-wrap: anywhere; line-height: 1.2; }
.arena-meta { margin-top: 4px; font-size: clamp(10px, 1vw, 13px); color: #b8b5b0; }
.arena-stage-title { text-align: center; color: #e7c986; padding-top: 4px; font-weight: 900; letter-spacing: .2em; font-size: clamp(12px, 1.2vw, 17px); }
.arena-phase { margin-top: 4px; color: #b9c2d3; font-weight: 400; font-size: 11px; letter-spacing: .08em; }
#battle-canvas { touch-action: none; }
.battle-audio-toolbar { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 24px); flex: 0 0 auto; min-height: 38px; padding: 3px 8px; background: #0d1526; border-bottom: 1px solid #e7c98625; color: #e7c986; }
.arena-sound-controls, #bgm-widget { display: flex; align-items: center; gap: 7px; color: #e7c986; }
#bgm-widget { top: auto; right: auto; bottom: 12px; left: 12px; padding: 8px 12px; }
#bgm-widget.hidden { display: none; }
.battle-audio-toolbar #bgm-widget { position: static; padding: 0; background: none; border-radius: 0; }
.arena-sound-controls button, #bgm-widget button { border: 0; padding: 4px 3px; background: none; color: inherit; cursor: pointer; font: 12px 'Noto Sans SC', sans-serif; white-space: nowrap; }
.arena-sound-controls input, #bgm-widget input { width: clamp(55px, 9vw, 100px); min-width: 0; accent-color: #e7c986; cursor: pointer; }
.battle-audio-toolbar output, #bgm-widget output { min-width: 3ch; font: 11px monospace; text-align: right; }
.battle-audio-toolbar button:focus-visible, .battle-audio-toolbar input:focus-visible, #bgm-widget button:focus-visible { outline: 2px solid #e7c986; outline-offset: 2px; }
/* Allow unusually long questions/options to scroll instead of being clipped. */
.question-zone { overflow-y: auto; }
@media (max-width: 640px) {
    .battle-arena, .theme-cute .battle-arena { height: 32vh; min-height: 200px; }
    .arena-hud { inset: 8px 8px auto; gap: 6px; }
    .arena-player { padding: 7px 8px; gap: 6px; border-radius: 9px; }
    .arena-stage-title { font-size: 11px; letter-spacing: 0; }
    .arena-phase { font-size: 9px; letter-spacing: 0; }
    .question-zone { padding-left: 53px; padding-right: 53px; }
    .buzzer-side { width: 48px; }
    #battle-question { font-size: 1.3rem !important; }
    .option-btn { font-size: 1.05rem; padding: .6rem .7rem; margin-bottom: .3rem; }
    #battle-note { left: 53px !important; right: 53px !important; }
}
@media (max-height: 650px) and (min-width: 641px) {
    .battle-arena, .theme-cute .battle-arena { min-height: 180px; height: 34vh; }
    #battle-question { font-size: 1.6rem !important; }
    .option-btn { font-size: 1.2rem; padding: .55rem 1rem; }
}