#onlineDialog{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px;overflow:auto;box-sizing:border-box;color:#e1e9dc;background:#152a31;border:1px solid #a8b99e;border-radius:14px;}
#onlineDialog::backdrop{background:#04121aca;backdrop-filter:blur(5px)}
.online-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.online-head h2{font-size:25px;margin:7px 0 20px}.online-head small{color:#e2c286;font-size:11px;letter-spacing:.1em}
#closeOnline{min-width:44px;min-height:44px;font-size:26px}.online-profile{display:grid;grid-template-columns:1fr 1fr;gap:12px}.online-profile label:first-child{grid-column:1/-1}
#onlineDialog label{display:grid;gap:6px;font-size:13px;color:#bbccca}#onlineDialog input,#onlineDialog select{min-height:44px;width:100%;box-sizing:border-box;border:1px solid #566e71;border-radius:6px;background:#102128;color:#f1e8cf;padding:9px 12px;font:inherit}
.online-forms{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.online-forms form{display:grid;align-content:start;gap:12px;border-top:1px solid #546a69;padding-top:15px}.online-forms h3{margin:0 0 2px;font-size:17px}.online-forms button{min-height:46px}
#onlineMessage{min-height:20px;color:#ffcb87;font-size:13px;line-height:1.5;margin:15px 0 0}#onlineRoom{text-align:center}#onlineCode{display:block;font:32px Consolas,monospace;letter-spacing:.2em;color:#ffda91;margin:8px 0 18px}#onlineRoom p{font-size:14px;line-height:1.5;color:#c2d0ca}#onlineSeats{color:#8fdee1!important}#onlineRoom label{text-align:left}#onlineRoom button{min-height:44px;margin-top:12px}#onlineLeave{display:block;width:100%;margin-top:22px!important}#onlineJoinCode{text-transform:uppercase;letter-spacing:.15em}
@media(max-width:520px){#onlineDialog{padding:18px}.online-forms{grid-template-columns:1fr;gap:22px}.online-profile{gap:10px}.online-head h2{font-size:22px;margin-bottom:15px}}

.online-reconnect{position:absolute;top:104px;left:50%;transform:translateX(-50%);z-index:8;max-width:80%;padding:10px 14px;border:1px solid #e0b477;border-radius:8px;background:#1b2b2aee;color:#ffe0a3;font:12px Consolas,monospace;text-align:center;pointer-events:none}.online-reconnect[hidden]{display:none}#onlineConsent{color:#e0bc7b!important}#onlineReady{display:block;width:100%}#onlineReady[hidden]{display:none}

#onlineRoster{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left;margin:16px 0}#onlineRoster p{margin:0!important;padding:8px;background:#0c1c23;border-radius:6px;font-size:12px!important}#onlineRoster p:nth-child(1){color:#8bdce0}#onlineRoster p:nth-child(2){color:#f3a079}#onlineRoster p:nth-child(3){color:#b9dc81}#onlineRoster p:nth-child(4){color:#c6a7ec}
#onlineNameHint{font:11px/1.4 var(--sans);color:#a8bbb7}#onlineName[aria-invalid=true]{border-color:#ffad75;box-shadow:0 0 0 1px #ffad7555}#onlineName[aria-invalid=true]+small{color:#ffcb87}

#onlineDialog [hidden]{display:none!important}
.online-entry{display:grid;gap:12px}.online-entry p{margin:0 0 4px;color:#bdcfcb}.online-choice{display:grid;gap:7px;text-align:left;padding:17px;border:1px solid #7c9690;border-radius:8px;background:#20383e;min-height:76px}.online-choice strong{font-size:18px;color:#f2cc8d}.online-choice small{font-size:12px;color:#b4cbc7}.online-back{border:0;background:transparent;color:#e1bc7c;padding:0 0 16px;min-height:40px;text-align:left;font-size:12px}.online-appearance{grid-column:1/-1;border-bottom:1px solid #526a67;padding-bottom:10px}.online-appearance summary{cursor:pointer;font-size:12px;color:#e2c286;padding:9px 0}.online-appearance>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.online-flow{margin-top:18px}.online-flow form{display:grid;gap:13px}.online-flow h3{font-size:16px;margin:0 0 5px}.online-flow form button{min-height:46px}#onlineDialog label.online-option{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid #49615f;border-radius:6px;background:#1c3236}#onlineDialog label.online-option input{width:18px;min-height:18px;height:18px;margin:1px 0 0;flex:0 0 18px;accent-color:#efbd72}#onlineDialog label.online-option span{line-height:1.4;color:#e5e7d5}#onlineDialog label.online-option small{display:block;font-size:11px;color:#a8bfba;margin-top:4px}
.public-room-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.public-room-head h3{margin:0}.public-room-head button{min-height:40px;padding:8px 12px}.public-rooms{display:grid;gap:9px;margin:12px 0 22px}.public-room{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #496461;border-radius:7px;background:#10252b;padding:12px}.public-room>div{display:grid;gap:5px;min-width:0}.public-room strong{font-size:14px;color:#d9e9dc;overflow-wrap:anywhere}.public-room small,.public-room span{font-size:11px;line-height:1.4;color:#aac4c0}.public-room span{color:#edc58b}.public-room button{min-width:72px;min-height:44px;padding:8px 12px;border:1px solid #9bb489;border-radius:5px;background:#25413c;font-weight:600;flex-shrink:0}#onlineRoomsStatus{font-size:12px;line-height:1.5;color:#b2c8c3}.online-selected{margin:0;padding:9px;border-left:2px solid #e4ba74;color:#ead0a0;font-size:12px}#onlineJoinForm{border-top:1px solid #496461;padding-top:18px}

/* Lobby administration and observers share the compact mobile room view. */
.public-room-actions{display:flex!important;flex-direction:column;gap:6px;flex-shrink:0}.public-room-actions button{width:100%}
.online-host{text-align:left;border:1px solid #5b7771;border-radius:8px;margin:14px 0;padding:10px}.online-host summary{cursor:pointer;color:#f0ca8b;min-height:28px;display:flex;align-items:center;font-size:14px}.online-host-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px}.online-host-fields>p,.online-host-fields>#onlineHostApply{grid-column:1/-1}.online-host-fields p{font-size:11px!important;margin:0}.online-host-fields button{margin:0!important}
#onlineRoster p{display:flex;flex-direction:column;gap:7px;min-width:0;overflow-wrap:anywhere}#onlineRoster p button{padding:7px;font-size:11px;min-height:40px;margin:0}#onlineRoster p select{font-size:11px;padding:5px}
#onlineTakeSeat,#onlineWatchBattle{width:100%}#onlineWatchStatus{color:#e3c78c!important}
@media(max-width:380px){.online-host-fields{grid-template-columns:1fr}.online-host-fields>p,.online-host-fields>#onlineHostApply{grid-column:1}}