.online-connect{display:grid;grid-template-columns:minmax(320px,.7fr) 1.3fr;gap:16px}.connection-panel,.rooms-panel{padding:20px}.server-cards{display:grid;gap:8px}.server-card{padding:13px;border:1px solid #244650;background:#06171d;border-radius:6px;cursor:pointer;text-align:left}.server-card.selected{border-color:var(--cyan);box-shadow:inset 3px 0 var(--cyan)}.server-card strong{display:block;font-size:13px}.server-card p{font-size:10px;color:#728f98;margin-top:4px;line-height:1.45}.connection-status{display:flex;align-items:center;gap:9px;padding:10px;margin:12px 0;border:1px solid #203f48;background:#06151a;font-size:11px;color:#89a6ae}.connection-status i{width:8px;height:8px;border-radius:50%;background:#5c7076}.connection-status.online i{background:var(--green);box-shadow:0 0 10px var(--green)}.connection-status.connecting i{background:var(--amber);animation:pulse 1s infinite}.room-browser{display:grid;gap:8px;max-height:520px;overflow:auto}.room-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:13px;border:1px solid #21434d;background:linear-gradient(90deg,#081c23,#061318);border-radius:6px}.room-row h3{font-size:14px}.room-row p{font-size:10px;color:#78959d;margin-top:4px}.room-row .room-code{font-family:monospace;letter-spacing:.12em;color:var(--cyan)}.room-empty{min-height:220px;display:grid;place-items:center;text-align:center;border:1px dashed #254650;color:#66828a}.create-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mode-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mode-option{padding:14px 10px;border:1px solid #264852;background:#071920;border-radius:5px;cursor:pointer;text-align:center}.mode-option.selected{border-color:var(--cyan);background:#0a303b;box-shadow:0 0 20px rgba(87,229,255,.08)}.mode-option strong{display:block;font-size:14px}.mode-option small{color:#78969e;font-size:10px}.lobby-shell{min-height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(0,1.45fr) 360px;gap:14px}.lobby-main,.lobby-side{padding:18px}.lobby-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:15px}.room-code-large{font:900 30px/1 monospace;letter-spacing:.16em;color:var(--cyan);text-shadow:0 0 18px rgba(87,229,255,.25)}.lobby-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.lobby-meta span{font-size:10px;padding:4px 7px;border:1px solid #28505b;color:#82a3ac}.room-config-bar{display:grid;grid-template-columns:1fr 110px 1fr auto;gap:9px;align-items:end;margin-bottom:14px;padding:12px;border:1px solid #234650;background:#06171d}.encounter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}.encounter-grid::before{content:"VS";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid #3b6a75;background:#07181e;color:var(--cyan);font-weight:900;z-index:2;box-shadow:0 0 30px #000}.lobby-slot{min-height:138px;padding:13px;border:1px solid #274b55;background:linear-gradient(135deg,#0a2028,#06151a);display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;position:relative;overflow:hidden}.lobby-slot:nth-child(odd){clip-path:polygon(0 0,97% 0,100% 50%,97% 100%,0 100%)}.lobby-slot:nth-child(even){clip-path:polygon(3% 0,100% 0,100% 100%,3% 100%,0 50%);padding-left:22px}.lobby-slot.ready{border-color:#2f8c72}.lobby-slot.host::after{content:"HOST";position:absolute;right:8px;top:7px;font-size:9px;color:var(--amber);letter-spacing:.12em}.slot-portrait{width:58px;height:78px;display:grid;place-items:center;border:1px solid #32606b;background:#0a2a33;font-size:30px;color:var(--slot-color,var(--cyan))}.slot-copy h3{font-size:14px}.slot-copy p{font-size:10px;color:#78959e;margin-top:4px}.slot-copy .slot-state{display:inline-block;margin-top:9px;font-size:9px;letter-spacing:.1em;color:#758f96}.slot-copy .slot-state.on{color:var(--green)}.slot-actions{display:grid;gap:5px}.slot-actions button{width:31px;height:31px;border:1px solid #31535d;background:#081a20;color:#a6c0c6;cursor:pointer}.commander-select-row{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:7px;overflow-x:auto;padding-bottom:6px}.lobby-commander{min-width:110px;padding:10px;border:1px solid #234650;background:#06171d;text-align:center;cursor:pointer}.lobby-commander.selected{border-color:var(--accent,var(--cyan));box-shadow:inset 0 -3px var(--accent,var(--cyan))}.lobby-commander span{display:block;font-size:26px;color:var(--accent,var(--cyan))}.lobby-commander strong{display:block;font-size:10px;margin-top:5px}.chat-box{height:320px;display:flex;flex-direction:column}.chat-list{flex:1;overflow:auto;display:grid;align-content:start;gap:7px;padding:4px}.chat-line{font-size:11px;line-height:1.5}.chat-line strong{color:var(--cyan);margin-right:5px}.chat-line.system strong{color:var(--amber)}.chat-send{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}.invite-box{padding:12px;border:1px solid #234650;background:#06171d;margin-top:12px}.invite-box code{display:block;font-size:10px;color:#7fa0a8;word-break:break-all;margin-top:6px}.ready-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}@keyframes pulse{50%{opacity:.35}}