.lobby-launch{width:min(620px,60vw)}
.mode-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#startScreen .mode-actions button{width:100%;min-height:66px;margin:0;padding:12px 18px;text-align:left;border-radius:8px;display:flex;flex-direction:column;gap:6px;justify-content:center;font:700 13px inherit;transition:transform .15s,filter .15s}
.mode-actions small{font-size:11px;font-weight:400;opacity:1;letter-spacing:0}
#startScreen #onlineButton small{color:#29344c;margin:0;text-align:left}#startScreen #startButton small{color:#c5d4e9;margin:0;text-align:left}
#onlineButton{background:linear-gradient(120deg,#ff773f,#ffb57d);color:#192135;border:1px solid #ffb57d}
#startScreen #startButton{background:#213149;color:#e5edff;border:1px solid #55718f;box-shadow:none}
.mode-actions button:hover{filter:brightness(1.14);transform:translateY(-2px)}.mode-actions button:active{transform:translateY(0)}
#onlineLobby{width:min(600px,calc(100vw - 32px));max-height:90dvh;overflow:auto;box-sizing:border-box;padding:32px;background:linear-gradient(140deg,#1c2b44,#101b2e);color:#eef4ff;border:1px solid #526580;border-radius:18px;box-shadow:0 25px 100px #0009;font-family:inherit}
#onlineLobby::backdrop{background:#050d1bbd;backdrop-filter:blur(8px)}
#onlineLobby h2{margin:10px 0;font-size:28px;letter-spacing:-.04em}#onlineLobby p{line-height:1.6;color:#afc0d8;font-size:13px}
#onlineLobby button{border:1px solid #526783;border-radius:7px;background:#243853;color:#edf4ff;padding:13px 18px;font:700 12px inherit;cursor:pointer;transition:background .15s}#onlineLobby button:hover{background:#354c6a}#onlineLobby button:disabled{opacity:.4;cursor:not-allowed}#onlineLobby button:focus-visible{outline:2px solid #ffb079;outline-offset:3px}
#onlineLobby #createRoom,#onlineLobby #startOnlineMatch{background:#ff965e;color:#152137;border-color:#ff965e}#closeOnline{float:right}#onlineLobby label{display:block;font-size:12px;margin:22px 0 8px}#onlineLobby input{box-sizing:border-box;width:100%;background:#0d1728;color:#fff;border:1px solid #5a6d89;border-radius:6px;padding:13px;font:inherit;text-transform:uppercase;letter-spacing:.18em}
.room-join,.room-actions{display:flex;gap:14px;margin:12px 0 22px}.room-join input{flex:1;min-width:0}.room-join button{flex-shrink:0}
#onlineLobby #groupName,#onlineLobby input[type="password"]{text-transform:none;letter-spacing:normal}
#onlineLobby #createRoom,#onlineLobby #joinRoom{margin-top:12px}
#onlineLobby #roomTitle{overflow-wrap:anywhere}
#onlineLobby #leaveRoom{border-color:#ff965e;color:#ffbd98}
#availableRooms{display:grid;gap:8px;margin-top:12px}#roomMembers{list-style:none;padding:0;margin:20px 0}#roomMembers li{padding:13px 12px;margin:7px 0;background:#ffffff08;border-left:3px solid #ffb37e;border-radius:4px;font-size:13px}
#onlineStatus{min-height:22px;overflow-wrap:anywhere}#connectionBadge{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:7;background:#101b2de8;color:#ddeaff;padding:6px 12px;border-radius:6px;font:11px system-ui;pointer-events:none}
@media(max-width:760px){.lobby-launch{width:100%}.mode-actions{grid-template-columns:1fr}.lobby-footer{flex-shrink:0}#onlineLobby{padding:22px}.room-actions{flex-direction:column}}
@media(min-width:761px){#startScreen{grid-template-rows:80px minmax(0,1fr) 122px}#startScreen .mode-actions button,#startScreen #startButton{height:68px;min-height:68px;padding:10px 18px}.lobby-footer{padding-top:14px;padding-bottom:14px}}

/* Group discovery: clear primary action, paired forms and a separate directory. */
#onlineLobby{width:min(960px,calc(100vw - 32px));padding:28px;background:radial-gradient(ellipse at top left,#254363,#101b2e 65%)}
#onlineLobby .group-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
#onlineLobby .group-header h2{font-size:clamp(25px,4vw,34px);margin:7px 0}
#onlineLobby .group-header p{margin:0}
#onlineLobby #closeOnline{flex-shrink:0;padding:10px 14px;float:none}
#onlineLobby .group-eyebrow{font-size:10px;font-weight:800;letter-spacing:.13em;color:#9dcbe6}
#onlineLobby #onlineStatus{padding:9px 13px;border:1px solid #7aadc02d;background:#07142166;border-radius:8px;margin:18px 0}
.group-forms{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#onlineLobby .group-panel{min-width:0;display:flex;flex-direction:column;padding:22px;border:1px solid #52678380;border-radius:14px;background:#101e32bd}
#onlineLobby .group-panel-create{border-color:#ffad7066;background:linear-gradient(155deg,#3b3540aa,#14243c)}
#onlineLobby .group-panel-create .group-eyebrow{color:#ffc69f}
#onlineLobby .group-panel h3{font-size:22px;letter-spacing:-.025em;margin:8px 0}
#onlineLobby .group-panel>p{margin:0 0 4px;font-size:12px}
#onlineLobby .group-panel label{margin:18px 0 7px;font-size:12px;font-weight:700}
#onlineLobby .group-panel label span{font-weight:400;color:#9aaec7;margin-left:5px}
#onlineLobby .group-panel input{letter-spacing:normal;text-transform:none;font-size:14px;min-height:46px;border-radius:8px}
#onlineLobby .group-panel input:focus-visible{outline:2px solid #ffc08d;outline-offset:2px}
#onlineLobby .group-panel input::placeholder{color:#91a6c1;opacity:1}
#onlineLobby .group-panel .group-match-summary,#onlineLobby .group-panel .group-form-hint{margin:16px 0;font-size:11px;line-height:1.5;flex:1}
#onlineLobby .group-match-summary{color:#ffd5b7}
#onlineLobby .group-panel button{display:flex;justify-content:space-between;align-items:center;min-height:48px;width:100%;margin:0;font-weight:800}
#onlineLobby .group-discovery{margin-top:24px;border-top:1px solid #809abb33;padding-top:20px}
#onlineLobby .group-discovery>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#onlineLobby .group-discovery h3{font-size:17px;margin:0}
#onlineLobby .group-discovery p{margin:4px 0;font-size:12px}
#onlineLobby #refreshRooms{font-size:10px;padding:10px 12px;background:transparent;white-space:nowrap}
#onlineLobby #availableRooms{grid-template-columns:repeat(2,minmax(0,1fr))}
#onlineLobby .group-list-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;text-align:left;padding:16px;background:#1a2e46}
#onlineLobby .group-list-card strong{font-size:14px;overflow-wrap:anywhere}
#onlineLobby .group-list-card small{grid-column:1/-1;color:#afc5dc;font-size:11px;font-weight:400}
#onlineLobby .group-access-badge{align-self:start;font-size:8px;letter-spacing:.04em;color:#abdcd7;border:1px solid #81bfb94d;border-radius:5px;padding:4px 6px}
#onlineLobby .group-empty{grid-column:1/-1;border:1px dashed #67809d66;border-radius:10px;padding:20px;text-align:center}
#onlineLobby .group-footer-note{border-top:1px solid #809abb33;margin:22px 0 0;padding-top:14px;font-size:11px}
#lobbyActions[hidden]{display:none}
@media(max-width:640px){#onlineLobby{padding:18px;max-height:94dvh}.group-forms{grid-template-columns:1fr;gap:14px}#onlineLobby .group-panel{padding:18px}#onlineLobby #availableRooms{grid-template-columns:1fr}#onlineLobby .group-header p{font-size:12px}}
#onlineLobby #groupPasswordDialog{box-sizing:border-box;width:min(430px,calc(100vw - 32px));max-height:90dvh;overflow:auto;padding:26px;border:1px solid #6dcfff;border-radius:16px;background:#102c43;color:#fff;box-shadow:0 20px 80px #0009}
#groupPasswordDialog::backdrop{background:#03101cbd;backdrop-filter:blur(5px)}
#onlineLobby #groupPasswordTitle{font-size:24px;margin:10px 0}
#onlineLobby #passwordGroupName{font-size:17px;color:#ffda91;overflow-wrap:anywhere;margin:0 0 20px}
#onlineLobby #groupPasswordStatus{min-height:22px;color:#ffd3b8}
#onlineLobby #groupPasswordDialog .room-actions{margin-bottom:0}
#onlineLobby #groupPasswordDialog button[type="submit"]{background:#ffba50;color:#112439;border-color:#ffcb7e}