/* Layout only: every ornament, icon, panel and button comes from NativeUI atlases. */
.online-overlay[hidden],.online-overlay [hidden],.online-status[hidden]{display:none!important}
.online-overlay{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:#031319d9;overflow:auto}
.online-panel{width:min(690px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px 30px;color:#eee2b9;font-family:var(--pixel);display:grid;gap:14px;overscroll-behavior:contain}
.online-panel header{display:flex;align-items:center;gap:12px;min-width:0}
.online-panel h2{font-size:25px;line-height:1.1;margin:4px 0}
.online-panel header small{font-size:10px;color:#a8c8bd;letter-spacing:.08em}
.online-emblem{width:48px;height:48px;image-rendering:pixelated}
.online-panel .online-close{margin-left:auto;min-width:74px;min-height:38px;padding:10px 16px}
.online-note{font-size:13px;line-height:1.5;margin:0;color:#d2dfcd;min-height:38px}
.online-selection{display:grid;grid-template-columns:124px 1fr;gap:20px;align-items:center}
.online-fighter{display:grid;justify-items:center;gap:9px}
.online-fighter strong{font-size:17px;text-align:center}
.online-portrait{width:108px;height:108px;object-fit:contain;image-rendering:pixelated}
.online-fields{display:grid;gap:7px;min-width:0}
.online-panel label{display:block;font-size:12px;color:#d3d8ba}
.online-panel select,.online-panel input{width:100%;min-width:0;font-family:var(--pixel);font-size:13px;color:#e8e0c4;background:transparent;border:0;box-sizing:border-box;min-height:42px;padding:9px 16px;outline-offset:-5px}
.online-panel select option{color:#eee2b9;background:#153039}
.online-panel .select-wrap{min-height:42px;display:block;padding:0}
.online-panel input{background:var(--native-tooltip) center/100% 100% no-repeat;image-rendering:pixelated}
.online-panel input::placeholder{color:#9fb6ad}
.online-panel .secondary,.online-panel .start-button{font-family:var(--pixel);font-size:14px;min-height:44px;line-height:1.2;padding:12px 20px;border:0;color:#ede1b2;background:var(--native-button) center/100% 100% no-repeat;image-rendering:pixelated;box-shadow:none}
.online-panel .start-button{background-image:var(--native-selected);font-size:17px}
.online-panel [data-online="team"]{min-height:34px;font-size:11px;padding:8px 14px;justify-self:start}
.online-team{display:flex;gap:4px;flex-wrap:wrap;min-height:0}
.online-panel .online-team .secondary{min-width:42px;min-height:42px;padding:4px;background-image:var(--native-card)}
.online-team img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.online-create-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;align-items:end}
.online-join{display:grid;gap:5px}
.online-create-actions>.start-button{align-self:stretch;margin-top:19px}
.online-room-area{display:grid;justify-items:center;gap:9px}
.online-panel #online-room-code{font-size:26px;letter-spacing:.1em;text-align:center;max-width:400px;min-height:64px;color:#ffe9a2}
.online-peer{font-size:12px;line-height:1.5;text-align:center;margin:2px 0;color:#b8e1c4}
.online-panel details{font-size:11px;color:#9ebeb2}
.online-panel summary{cursor:pointer;padding:5px 0}
.online-panel details p{line-height:1.5}
.online-turn-credentials{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.online-panel footer{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:3px}
.online-panel footer>span{font-size:10px;color:#a8c4b6;line-height:1.5;margin-right:auto;max-width:240px}
.online-status{position:fixed;right:16px;bottom:12px;z-index:78;min-width:130px;min-height:34px;padding:10px 17px;color:#d9e5c9;font:10px var(--pixel);border:0;background:var(--native-tooltip) center/100% 100% no-repeat;image-rendering:pixelated}
.online-modal-open{overflow:hidden}
#online-recovery{z-index:1000}
.online-recovery-panel{width:min(470px,100%);text-align:center;justify-items:center}
.online-recovery-panel p{font-size:15px;line-height:1.5;margin:0}
.online-recovery-panel [data-recovery-time]{font-variant-numeric:tabular-nums;color:#ffe9a2}
.boot-title-options:has([data-open-online]),.boot-modes footer:has([data-open-online]){flex-wrap:wrap;justify-content:center}
#online-lobby .online-panel{padding:24px 30px;gap:14px}
#online-lobby .select-wrap{margin:0;grid-area:auto}
#online-lobby .start-button{grid-area:auto;position:static;margin:0;min-height:44px;height:auto!important;font-size:17px!important}
#online-lobby .online-create-actions>.start-button{align-self:center;min-height:66px}
#online-lobby .online-portrait,#online-lobby .online-team img{clip-path:circle(48%)}
#online-lobby footer .start-button{width:auto}
@media(max-width:640px){.online-overlay{padding:7px}.online-panel{max-height:calc(100dvh - 14px);padding:21px 20px;gap:11px}.online-panel h2{font-size:20px}.online-panel header{gap:7px}.online-emblem{width:32px;height:32px}.online-panel header small{font-size:8px}.online-panel .online-close{min-width:60px;padding:8px 11px;font-size:11px}.online-selection{grid-template-columns:82px 1fr;gap:10px}.online-portrait{width:76px;height:76px}.online-fighter strong{font-size:13px}.online-create-actions{gap:8px;grid-template-columns:1fr 1.3fr}.online-panel .start-button{font-size:14px}.online-panel #online-room-code{font-size:22px}.online-status{right:8px;bottom:8px;min-width:100px;font-size:9px}.online-panel footer>span{max-width:170px}}
@media(max-height:520px) and (min-width:641px){.online-panel{gap:8px;padding:18px 25px}.online-portrait{width:72px;height:72px}.online-note{min-height:0;font-size:11px}.online-panel h2{font-size:20px}.online-selection{grid-template-columns:94px 1fr}.online-fields{grid-template-columns:1fr 1.2fr;align-items:center}.online-team{grid-column:1/-1}.online-create-actions{grid-template-columns:1fr 2fr}.online-join{grid-template-columns:1fr 1fr;align-items:end}.online-join label{grid-column:1/-1}.online-create-actions>.start-button{margin-top:18px}.online-panel details{font-size:10px}}
@media(max-width:640px){#online-lobby .online-panel{padding:21px 20px;gap:11px}#online-lobby .start-button{font-size:14px!important}#online-lobby .online-create-actions{grid-template-columns:1fr 1.3fr}#online-lobby .online-create-actions>.start-button{min-height:56px}#online-lobby .online-join{grid-column:2;grid-row:1}}
@media(max-height:520px) and (min-width:641px){#online-lobby .online-panel{gap:8px;padding:18px 25px}#online-lobby .online-fields{grid-template-columns:100px 1fr}#online-lobby .online-team{grid-column:2;grid-row:3}#online-lobby [data-online="team"]{grid-column:1;grid-row:3}#online-lobby .online-create-actions>.start-button{min-height:52px}#online-lobby footer>span{display:none}}
@media(pointer:coarse),(max-width:900px){body.in-game .online-status{top:90px;right:12px;bottom:auto;min-width:100px;min-height:28px;padding:8px 12px;font-size:9px}}
@media(max-width:600px) and (orientation:portrait){body.in-game .online-status{top:140px;right:10px}}
/* Keep the generated frame outside the scrolling surface. */
#online-lobby{padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#online-lobby .online-panel{display:flex;flex-direction:column;width:min(690px,100%);max-width:690px;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden}
#online-lobby .online-scroll{display:grid;gap:14px;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-block:8px}
#online-lobby .online-scroll>header>div{min-width:0}
@media(max-width:640px){#online-lobby{padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}#online-lobby .online-panel{max-height:calc(100dvh - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}#online-lobby .online-scroll{gap:11px}}
@media(max-height:520px) and (min-width:641px){#online-lobby .online-scroll{gap:8px}}