/* Battle panels share the lobby palette, borders and solid action buttons. */
body:has(#game:not([hidden])) .game-header{height:105px}body:has(#game:not([hidden])) .hero-copy{height:170px;padding:0}body:has(#game:not([hidden])) main{max-width:1500px;padding:0 28px 24px}#game .roomline{padding:12px 18px;background:#051329ed;border-top:2px solid #37d8f4;border-radius:6px;margin-bottom:14px}#game .roomline b{color:#fff8e9;letter-spacing:3px}#game .roomline .quiet{border-color:#849aba;border-radius:5px;background:#06142d}.top-score{border-radius:7px;border:1px solid #c0d3ed;background:#041127ed;box-shadow:none}.top-score #topHealth{color:#ff4268}.arena{border-radius:10px;border:2px solid #ff4268;background:#041127f5;box-shadow:none}.duel-score{position:relative;background:#07152e;border-bottom:1px solid #6a7c99;padding:17px 20px}.duel-score>div:first-child{border-bottom:3px solid #ff4268;padding-bottom:9px}.duel-score>div:last-child{border-bottom:3px solid #33d5f4;padding-bottom:9px}.duel-score label{font-size:14px}.duel-score .portrait{width:58px;height:58px;border-color:#ff6580}.duel-score .portrait.rival{border-color:#35d8f4}.duel-score>div:last-child strong{color:#33d5f4}.versus{color:#fff9e9;font-size:25px}.battle{padding:24px}.battle h2{font-size:clamp(21px,2.1vw,32px);color:#fff8eb;letter-spacing:0}.battle>p{font-size:12px;color:#b6c8e1}.phase span:first-child{border:0!important;border-radius:3px!important;background:#ff4268!important;color:#061227!important;font-size:10px;font-weight:900;letter-spacing:1px}.target{border-radius:7px;background:#fff9e9;box-shadow:none;padding:22px;font-size:clamp(22px,2.5vw,36px);letter-spacing:1px}textarea{border-radius:6px;border:1px solid #c4d8f4;box-shadow:none;background:#051329;color:#72edff;font-size:22px}textarea:focus{box-shadow:0 0 0 2px #35d8f433;border-color:#35d8f4}.timebar{height:13px;box-shadow:none;border:1px solid #6887b1;padding:0;border-radius:3px}.timebar div{border-radius:2px;background:#ff4268;box-shadow:none}#timer{color:#ff5275}.inputfoot{gap:15px}.inputfoot .primary{background:#ff4268;box-shadow:none;border:0;border-radius:5px;color:#061227;font-size:16px;padding:13px 20px;min-height:48px}body[data-phase="defend"] .arena{border-color:#35d8f4;box-shadow:none}body[data-phase="defend"] .phase span:first-child{background:#35d8f4!important}body[data-phase="defend"] .inputfoot .primary{background:#35d8f4}.flow-panel{border:1px solid #36d5f4;border-top:3px solid #36d5f4;border-radius:8px;background:#06142cf5;box-shadow:none;padding:20px 16px}.flow-panel h3{font-size:15px;color:#fff9e9;border-color:#48617f;margin-bottom:20px}.flow-step>span{width:38px;height:38px;font-size:21px;border-width:1px}.flow-step.active>span{box-shadow:none;border:2px solid #35d8f4;color:#35d8f4}.flow-step.active small{color:#35d8f4}.flow-step>div{font-size:12px}.flow-panel>p{margin-top:18px}.flow-arrow{font-size:17px}.feed{border-radius:8px;border:1px solid #647d9f;margin-top:14px}.panelhead{background:#06142c}.panelhead h3{font-size:10px;color:#fff9e9}body[data-phase="finished"] .arena{border-color:#fff3cb}body[data-phase="finished"] #target{color:#061227;font-size:clamp(28px,4vw,56px);text-align:center}body[data-phase="finished"] #action{background:#35d8f4}body[data-phase="finished"] #leave{border-color:#fff9e9;color:#fff9e9}#modal{border-radius:12px;border:1px solid #b7cce7;background:#07172f}#modal h2{font-size:29px;color:#fff9e9}#modal p{font-size:13px;line-height:1.9}#modal .mini-label{color:#35d8f4}.how-step{display:flex;gap:15px;align-items:flex-start;margin:22px 0}.how-step>b{font:900 24px 'Space Grotesk',sans-serif;color:#ff5275}.how-step h3{font-size:16px;margin:0 0 5px;color:#fff9e9}.how-step p{margin:0!important}.how-tip{border-top:1px solid #4b6689;padding-top:15px;color:#a9dfee!important}
@media(max-width:950px){#game .layout{grid-template-columns:1fr}#game aside{grid-template-columns:1fr 1fr}.feed{margin:0}#game .flow-panel{padding:18px}.flow-panel>p{display:none}}@media(max-width:650px){body:has(#game:not([hidden])) .hero-copy{height:180px}body:has(#game:not([hidden])) main{padding:0 12px 18px}#game .roomline{flex-wrap:wrap;padding:10px;gap:8px;font-size:10px}#game .roomline b{font-size:16px}.battle{padding:16px}.duel-score{padding:12px 10px;grid-template-columns:1fr 35px 1fr}.duel-score>div:not(.versus){gap:7px}.duel-score .portrait{width:37px;height:37px}.duel-score label{font-size:10px}.duel-score strong{font-size:16px}.versus{font-size:17px}.versus small{font-size:8px}.battle>p{font-size:11px}.inputfoot{flex-wrap:wrap}.inputfoot .primary{width:100%;font-size:14px}.target{padding:17px}.remaining{font-size:14px}#timer{font-size:33px}#game aside{grid-template-columns:1fr}.flow-panel{display:none}.feed #logs{height:240px}}
/* Keep the streamer visible above the battle surface. */
body:has(#game:not([hidden])) .hero-copy{height:clamp(285px,24vw,380px);padding:0;pointer-events:none}
body:has(#game:not([hidden])) .hero-copy .cheer{display:none}
body:has(#game:not([hidden])) #game .roomline{max-width:100%;margin-bottom:10px}
body:has(#game:not([hidden])) .duel-score{padding:10px 18px}
body:has(#game:not([hidden])) .battle{padding:18px 22px}
body:has(#game:not([hidden])) .battle h2{margin-top:10px}
body:has(#game:not([hidden])) .target{margin:12px 0;min-height:86px;padding:17px 22px}
body:has(#game:not([hidden])) textarea{min-height:70px}
@media(max-width:650px){body:has(#game:not([hidden])) .hero-copy{height:255px}body:has(#game:not([hidden])) .battle{padding:16px}body:has(#game:not([hidden])) .target{padding:15px}}

/* Fit all battle controls inside the viewport; histories scroll within their panel. */
body:has(#game:not([hidden])){height:100dvh;min-height:0;overflow:hidden}
body:has(#game:not([hidden])) .game-header{height:76px}
body:has(#game:not([hidden])) main{height:calc(100dvh - 76px);padding:0 24px 12px;display:flex;flex-direction:column;min-height:0}
body:has(#game:not([hidden])) .hero-copy{height:clamp(95px,17vh,180px);flex-shrink:0}
body:has(#game:not([hidden])) #game{flex:1;min-height:0;display:flex;flex-direction:column}
body:has(#game:not([hidden])) footer{display:none}
#game .roomline{flex-shrink:0;min-height:36px;padding:5px 12px!important;margin-bottom:8px!important}#game .roomline .quiet{padding:5px 10px}
#game .layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 225px;gap:14px}
#game .arena{min-height:0;display:flex;flex-direction:column}#game .duel-score{flex-shrink:0;padding:7px 16px!important}#game .duel-score .portrait{width:42px;height:42px}#game .duel-score strong{font-size:18px;line-height:1.3}#game .duel-score label{font-size:12px}#game .duel-score>div:first-child,#game .duel-score>div:last-child{padding-bottom:4px}
#game .battle{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 18px!important;gap:5px}#game .phase{flex-shrink:0}#game .battle h2{font-size:clamp(18px,1.8vw,26px);margin:2px 0!important;line-height:1.3}#game .battle>p{margin:0;font-size:11px;line-height:1.4}#game .target{flex:1;min-height:48px!important;max-height:110px;overflow:auto;margin:3px 0!important;padding:10px 15px!important;font-size:clamp(18px,2vw,28px);line-height:1.5}#game .target>span:not(.correct):not(.wrong):not(.secret){margin-top:2px;font-size:10px}#game .target .secret{font-size:24px}#game .input-caption{margin:2px 0;flex-shrink:0}#game textarea{height:65px;min-height:45px!important;flex:0 1 65px;resize:none;padding:10px 14px;font-size:18px;line-height:1.4}#game .timer-row{margin:0;gap:14px;flex-shrink:0}#game #timer{font-size:32px}#game .remaining{font-size:14px}#game .inputfoot{margin:0;min-height:37px;flex-shrink:0}#game .inputfoot .primary{min-height:36px;padding:7px 15px;font-size:14px}
#game aside{min-height:0;display:flex;flex-direction:column;gap:10px}#game .flow-panel{padding:12px;flex-shrink:0}#game .flow-panel h3{font-size:13px;margin-bottom:10px;padding-bottom:8px}#game .flow-step>span{height:30px;width:30px;font-size:17px}#game .flow-step small{margin-top:2px;font-size:8px}#game .flow-arrow{padding:3px 0 3px 12px;font-size:14px}#game .flow-panel>p{display:none}#game .feed{flex:1;min-height:0;margin:0;display:flex;flex-direction:column}#game .panelhead{padding:10px 12px;flex-shrink:0}#game .feed #logs{height:auto;flex:1;min-height:0}#game .chat-empty{margin:20px 4px}body:has(#game:not([hidden])) .arena-backdrop{position:fixed}
@media(max-height:720px) and (min-width:651px){body:has(#game:not([hidden])) .hero-copy{height:85px}#game .flow-panel{display:none}#game .target{max-height:90px}#game .battle>p{font-size:10px}}
@media(max-width:650px){body:has(#game:not([hidden])) .game-header{height:68px}body:has(#game:not([hidden])) .game-header .brand{top:13px;left:10px;width:90px}body:has(#game:not([hidden])) .game-header .brand strong{font-size:22px}body:has(#game:not([hidden])) .game-header .brand .crown,body:has(#game:not([hidden])) .brand-keyboard,body:has(#game:not([hidden])) .brand small{display:none}body:has(#game:not([hidden])) .top-score{margin:10px 60px 0 auto;padding:7px 9px;gap:7px;font-size:9px}body:has(#game:not([hidden])) .top-score small{font-size:8px}body:has(#game:not([hidden])) .top-score b{font-size:15px}body:has(#game:not([hidden])) .top-score>span+span{padding-left:7px}body:has(#game:not([hidden])) #topHealth{font-size:13px;letter-spacing:0}body:has(#game:not([hidden])) main{height:calc(100dvh - 68px);padding:0 8px 8px}body:has(#game:not([hidden])) .hero-copy{height:65px}#game .layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 85px;gap:8px}#game aside{display:flex}#game .flow-panel{display:none}#game .roomline{gap:5px;flex-wrap:nowrap;font-size:8px;min-height:31px}#game .roomline b{font-size:12px}#game .roomline .quiet{font-size:9px;padding:5px}#game .roomline #copy{font-size:8px}#game .battle{padding:9px 12px!important;gap:3px}#game .battle h2{font-size:17px}#game .battle>p{font-size:9px}#game .duel-score{padding:5px 9px!important}#game .duel-score .portrait{height:30px;width:30px}#game .duel-score label{font-size:9px}#game .duel-score strong{font-size:14px}#game .duel-score small{font-size:7px}#game .target{max-height:80px;font-size:17px}#game textarea{flex-basis:48px;font-size:16px;min-height:36px!important}#game #timer{font-size:24px}#game .inputfoot{flex-wrap:nowrap;gap:8px;min-height:34px}#game .inputfoot>span{font-size:8px}#game .inputfoot .primary{width:auto;white-space:nowrap;font-size:11px;padding:6px 10px;min-height:32px}#game .feed .panelhead{padding:5px 10px}#game .feed #logs{padding:6px 10px}#game .chat-message{margin-bottom:9px}.audio-panel:not([open]){bottom:5px;right:8px}.audio-panel:not([open]) summary{font-size:9px;padding:5px 9px}}
@media(max-height:560px){body:has(#game:not([hidden])) .hero-copy{height:0}#game .battle>p,#game .inputfoot>span{display:none}#game .target{max-height:62px}#game .layout{grid-template-rows:minmax(0,1fr)}#game aside{display:none}}

#game #target .correct,#game #target .wrong{font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;margin:0;display:inline}