/* Reference layout: score above, guide and history at the sides, controls below. */
body:has(#game:not([hidden])) .top-score{display:none}body:has(#game:not([hidden])) .hero-copy{display:none}body:has(#game:not([hidden])) main{position:static;height:auto;padding:0}body:has(#game:not([hidden])) #game{position:static;display:block}#game .layout,#game .arena,#game aside{display:contents}#game .duel-score{position:fixed;left:50%;top:20px;transform:translateX(-50%);width:min(48vw,690px);height:78px;z-index:5;grid-template-columns:1fr 100px 1fr;padding:8px 20px!important;border:1px solid #c6d9f3;border-radius:10px;background:#041126ef}#game .duel-score>div:first-child,#game .duel-score>div:last-child{border-bottom:0;padding:0}#game .duel-score>div:not(.versus){justify-content:flex-start;gap:13px}#game .duel-score>div:last-child{border-left:1px solid #7b91ad;padding-left:18px}#game .duel-score .versus{border-left:1px solid #7b91ad;font-size:0;height:53px;display:grid;place-items:center}#game .duel-score .versus:after{content:'1 vs 1';font-size:12px;color:#fff8ee;grid-row:2}#game .duel-score .versus #turn{font-size:15px;color:#fff8ee;font-weight:900;white-space:nowrap;margin:0}#game .duel-score .portrait{width:48px;height:48px}#game .duel-score strong{font-size:22px;letter-spacing:1px}#game .duel-score label{font-size:12px}#game .duel-score small:not(#turn){display:none}
#game .roomline{position:fixed;right:150px;top:25px;width:auto;z-index:5;border:1px solid #4d739e;border-radius:8px;padding:8px!important;gap:10px;background:#061329e8;margin:0!important}#game .roomline>span:first-child{display:none}#game .roomline #connection{font-size:10px;margin:0}#game .roomline #copy{font-size:9px}body:has(#game:not([hidden])) .game-header nav{top:28px;right:22px}body:has(#game:not([hidden])) .game-header{pointer-events:none}body:has(#game:not([hidden])) .game-header>*{pointer-events:auto}
#game .flow-panel,#game .feed{position:fixed;top:clamp(125px,21vh,200px);width:clamp(190px,19vw,290px);height:clamp(200px,33vh,330px);z-index:3;border:1px solid #38d9f4;border-radius:10px;background:#041329ef}#game .flow-panel{left:4%;display:flex;flex-direction:column;justify-content:space-between;padding:16px}#game .flow-panel h3{font-size:14px;padding-bottom:9px;margin:0;border-color:#4c6482}#game .flow-panel .flow-step{gap:10px}#game .flow-panel .flow-step>span{width:38px;height:38px;font-size:21px}#game .flow-panel .flow-step>div{font-size:12px}#game .flow-panel .flow-step small{font-size:9px;margin-top:3px}#game .flow-panel .flow-arrow{padding:0 0 0 14px;font-size:15px}#game .feed{right:4%;display:flex;flex-direction:column;margin:0}#game .feed .panelhead{padding:13px 15px}#game .feed .panelhead h3{font-size:12px}#game .feed #logs{flex:1;min-height:0;background:#162b46aa;padding:12px}.chat-bubble{font-size:12px}
#game .battle{position:fixed;left:5.5%;right:5.5%;bottom:42px;height:clamp(260px,32vh,320px);z-index:4;border:2px solid #ff4268;border-radius:12px;background:#031228f5;display:grid!important;grid-template-columns:auto minmax(0,1fr) 220px;grid-template-rows:32px 17px minmax(40px,1fr) 47px 43px;column-gap:18px;row-gap:5px;padding:16px 20px!important}#game .battle .phase{grid-column:1;grid-row:1;align-self:center}#game .battle #battleMode{display:none}#game .battle h2{grid-column:2/4;grid-row:1;align-self:center;margin:0!important;font-size:clamp(18px,1.8vw,29px)}#game .battle>p{display:none}#game .input-caption{grid-column:1/4;grid-row:2;margin:0}#game .target{grid-column:1/4;grid-row:3;max-height:none;min-height:0!important;height:100%;margin:0!important;padding:8px 15px!important;border-radius:7px;font-size:clamp(18px,2vw,29px);display:block;line-height:1.5}#game textarea{grid-column:1/4;grid-row:4;height:47px;min-height:0!important;padding:8px 13px;font-size:19px}#game .timer-row{grid-column:1/3;grid-row:5;align-self:center;margin:0}#game #timer{font-size:30px;color:#fff9ee;min-width:65px}#game .remaining{color:#ff5275}#game .timebar{height:18px;padding:3px;border-radius:5px;background:#12243f}#game .timebar>div{height:100%;background:#ff4268}#game .inputfoot{grid-column:3;grid-row:5;align-self:stretch;margin:0;display:flex;min-height:0}#game .inputfoot>span{display:none}#game .inputfoot .primary{width:100%;height:100%;min-height:0;padding:8px 13px;font-size:15px;border-radius:5px}body[data-phase="defend"] #game .battle{border-color:#38d9f4}body[data-phase="defend"] #game .timebar>div{background:#38d9f4}body[data-phase="finished"] #game .battle{border-color:#fff3cb}body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"]) #game textarea{display:none}body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"]) #game .target{grid-row:3/5}body[data-phase="compose"] #game .target{display:none}body[data-phase="compose"] #game textarea{grid-row:3/5;height:100%}body:has(#game:not([hidden])) #error:not([hidden]){position:fixed;left:7%;right:30%;bottom:100px;z-index:10;margin:0;padding:6px 12px;font-size:11px}body:has(#game:not([hidden])) .audio-panel{bottom:8px;right:20px}body:has(#game:not([hidden])) .audio-panel summary{padding:7px 13px;font-size:11px}
@media(max-width:1100px){#game .duel-score{width:50vw;top:14px;height:72px;padding:7px 12px!important;grid-template-columns:1fr 75px 1fr}#game .duel-score label{font-size:10px}#game .duel-score .portrait{width:37px;height:37px}#game .duel-score strong{font-size:18px}#game .duel-score>div:not(.versus){gap:7px}#game .duel-score>div:last-child{padding-left:9px}#game .roomline{right:110px;top:20px}#game .roomline #connection{display:none}body:has(#game:not([hidden])) .game-header nav{right:12px;top:24px}body:has(#game:not([hidden])) .game-header nav .quiet{font-size:10px}#game .flow-panel,#game .feed{width:21vw;top:125px;height:225px}#game .flow-panel{left:2%;padding:12px}#game .feed{right:2%}#game .flow-panel .flow-step>span{height:29px;width:29px;font-size:17px}#game .flow-panel .flow-step>div{font-size:10px}#game .flow-panel .flow-step small{font-size:8px}#game .battle{left:3%;right:3%;height:255px;grid-template-columns:auto minmax(0,1fr) 185px;padding:12px 16px!important;gap:5px 12px}}
@media(max-width:650px){#game .duel-score{top:65px;width:94vw;height:58px;grid-template-columns:1fr 68px 1fr}#game .duel-score .portrait{height:32px;width:32px}#game .duel-score strong{font-size:16px}#game .duel-score .versus{height:40px}#game .duel-score .versus #turn{font-size:12px}#game .duel-score .versus:after{font-size:9px}#game .duel-score label{font-size:9px}#game .roomline{top:14px;right:90px;min-height:30px;padding:4px!important}#game .roomline #copy{display:none}#game .roomline #leave{font-size:9px}#game .flow-panel{display:none}#game .feed{top:135px;right:3%;width:35vw;height:clamp(100px,22vh,165px)}#game .feed .panelhead{padding:6px 9px}#game .feed .panelhead h3{font-size:9px}#game .feed #logs{padding:6px}#game .chat-avatar{display:none}#game .chat-content{max-width:100%}#game .chat-bubble{font-size:10px;padding:6px}#game .chat-name{font-size:8px}#game .battle{left:2%;right:2%;bottom:36px;height:clamp(255px,40vh,300px);grid-template-columns:1fr 145px;grid-template-rows:24px 23px 16px minmax(38px,1fr) 43px 38px;padding:10px 12px!important;gap:4px 9px}#game .battle .phase{grid-column:1/3;grid-row:1}#game .battle h2{grid-column:1/3;grid-row:2;font-size:17px}#game .input-caption{grid-column:1/3;grid-row:3}#game .target{grid-column:1/3;grid-row:4;font-size:17px;padding:6px 10px!important}#game textarea{grid-column:1/3;grid-row:5;font-size:16px;height:43px}#game .timer-row{grid-column:1;grid-row:6;gap:7px}#game .inputfoot{grid-column:2;grid-row:6}#game .inputfoot .primary{font-size:10px;padding:6px}#game #timer{font-size:22px;min-width:45px}#game .remaining{font-size:11px;gap:5px}#game #timer span{font-size:9px;margin-left:3px}#game .timebar{height:12px;padding:2px}body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"]) #game .target{grid-row:4/6}body[data-phase="compose"] #game textarea{grid-row:4/6}body:has(#game:not([hidden])) #error:not([hidden]){left:4%;right:4%;bottom:82px;font-size:9px}body:has(#game:not([hidden])) .audio-panel{bottom:5px;right:8px}}
@media(max-height:600px) and (min-width:651px){#game .flow-panel,#game .feed{top:95px;height:155px}#game .flow-panel .flow-step small,#game .flow-arrow{display:none}#game .flow-panel .flow-step>span{width:23px;height:23px;font-size:14px}#game .battle{height:235px;bottom:30px;padding:8px 15px!important;grid-template-rows:28px 14px minmax(35px,1fr) 38px 36px}#game textarea{height:38px}#game .duel-score{height:65px;top:10px}}

#game .duel-score .versus #turn{grid-row:1}

/* Keep the text fields stable across attack and defense. */
body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"],[data-phase="compose"]) #game .target{display:block;grid-row:3;height:100%}
body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"],[data-phase="compose"]) #game textarea{display:block;grid-row:4;height:47px}
/* Put both header actions in the same flex row to prevent overlaps. */
.game-header nav .roomline{display:none}body:has(#game:not([hidden])) .game-header nav{display:flex;align-items:center;gap:10px;right:22px;top:24px}body:has(#game:not([hidden])) .game-header nav .roomline{display:flex;position:static;transform:none;width:auto;margin:0;padding:6px 8px;min-height:38px;border:1px solid #4d739e;border-radius:7px;background:#061329e8;gap:10px;flex-wrap:nowrap}body:has(#game:not([hidden])) .game-header nav .roomline>span:first-child{display:none}body:has(#game:not([hidden])) .game-header nav #connection{margin:0;font-size:10px}body:has(#game:not([hidden])) .game-header nav .roomline .quiet{white-space:nowrap;font-size:11px;padding:6px 10px}body:has(#game:not([hidden])) .game-header nav>#rules{white-space:nowrap;position:static}
@media(max-width:1100px){body:has(#game:not([hidden])) .game-header nav #connection{display:none}body:has(#game:not([hidden])) .game-header nav{right:12px;gap:8px}body:has(#game:not([hidden])) .game-header nav .roomline{padding:4px;gap:5px}}
@media(max-width:650px){body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"],[data-phase="compose"]) #game .target{grid-row:4}body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"],[data-phase="compose"]) #game textarea{grid-row:5;height:43px}body:has(#game:not([hidden])) .game-header nav{right:8px;top:14px;gap:6px}body:has(#game:not([hidden])) .game-header nav .roomline{min-height:30px;padding:3px}body:has(#game:not([hidden])) .game-header nav .roomline .quiet{font-size:9px;padding:5px 7px}body:has(#game:not([hidden])) .game-header nav>#rules{font-size:9px;padding:7px}body:has(#game:not([hidden])) .game-header nav #copy{display:none}}
@media(max-height:600px) and (min-width:651px){body:is([data-phase="prepare"],[data-phase="waiting"],[data-phase="defenseReady"],[data-phase="result"],[data-phase="finished"],[data-phase="compose"]) #game textarea{height:38px}}

body[data-phase='finished'] #game #target{font-size:28px;line-height:1.1;padding:6px 15px!important}body[data-phase='finished'] #game #target>span{font-size:10px;line-height:1.3;margin-top:2px}

.defense-countdown{position:fixed;z-index:30;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;width:clamp(170px,19vw,300px);height:clamp(170px,19vw,300px);border-radius:50%;background:radial-gradient(circle,#04152dde 0%,#04152d99 54%,transparent 72%);text-align:center;text-shadow:0 4px 0 #041226,0 0 25px #29ddff}.defense-countdown>span{font:900 clamp(14px,1.5vw,22px) 'Space Grotesk',sans-serif;letter-spacing:5px;color:#8aeeff}.defense-countdown strong{font:900 clamp(100px,12vw,190px)/1 'Space Grotesk',sans-serif;color:#fff9e9;-webkit-text-stroke:2px #40ddff;filter:drop-shadow(0 0 18px #3bceff77)}.defense-countdown small{font-size:11px;color:#d8faff;font-weight:900;letter-spacing:1px}body[data-phase="countdown"] #game .timebar>div{background:#35d8f4}body[data-phase="countdown"] #game #timer{color:#fff9e9}@media(max-width:650px){.defense-countdown{top:34%;left:43%;width:170px;height:170px}.defense-countdown strong{font-size:105px}.defense-countdown small{font-size:9px}}@media(prefers-reduced-motion:reduce){.defense-countdown strong{filter:none}}