.name-label{display:grid;gap:8px;margin:18px 0 22px;color:#9db6c5;font-size:11px;letter-spacing:.18em}.name-label input{background:#07131c;border:1px solid rgba(103,216,255,.35);color:#eaf9ff;padding:13px 14px;font:700 16px ui-monospace,monospace;outline:none}.name-label input:focus{border-color:#62dcff;box-shadow:0 0 24px rgba(73,202,255,.12)}#netState.ok{color:#63f3a6}#netState.bad{color:#ff6b72}.foot a{color:#83dcff}.remote-tag{position:absolute;pointer-events:none}.hud-panel{user-select:none}
.room-label{margin-top:-8px}.room-label input{text-transform:uppercase;letter-spacing:.28em;font-size:20px}.lobby-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:-8px 0 12px}.lobby-actions button{min-height:48px}.play-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}#roomCodeTop{color:#8fe8ff;font-weight:800;letter-spacing:.12em}@media(max-width:620px){.lobby-actions{grid-template-columns:1fr}}


/* Touch controls */
#touchControls{display:none;position:fixed;inset:0;z-index:45;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}
#touchControls.active{display:block}
.touch-pad{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:150px;height:150px;pointer-events:auto;touch-action:none}
.pad-ring{position:absolute;inset:10px;border:2px solid rgba(143,232,255,.42);border-radius:50%;background:radial-gradient(circle,rgba(31,105,136,.18),rgba(7,19,28,.42));box-shadow:inset 0 0 22px rgba(69,207,255,.12)}
.pad-knob{position:absolute;width:58px;height:58px;left:46px;top:46px;border-radius:50%;border:2px solid rgba(207,247,255,.85);background:rgba(36,123,158,.58);box-shadow:0 0 20px rgba(69,207,255,.3);transform:translate(0,0)}
.look-zone{position:absolute;left:42%;right:0;top:72px;bottom:0;pointer-events:auto;touch-action:none}
.touch-actions{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:228px;height:190px;pointer-events:none}
.touch-btn{position:absolute;pointer-events:auto;touch-action:none;border:1px solid rgba(147,226,255,.5);background:rgba(6,18,27,.72);color:#eafaff;border-radius:50%;font:800 12px ui-monospace,monospace;letter-spacing:.04em;width:54px;height:54px;box-shadow:0 0 18px rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.touch-btn:active,.touch-btn.pressed{transform:scale(.94);background:rgba(48,156,193,.78)}
.touch-btn.fire{width:78px;height:78px;right:0;bottom:0;border-color:rgba(255,120,120,.72);background:rgba(117,35,39,.7)}
.touch-btn:nth-child(2){right:84px;bottom:10px}.touch-btn:nth-child(3){right:126px;bottom:66px}.touch-btn.support{right:62px;bottom:92px;width:66px;height:66px;font-size:9px}.touch-btn.class{right:0;bottom:96px;font-size:9px}.touch-btn.score{right:154px;bottom:4px;font-size:9px}.touch-btn.fullscreen{right:176px;bottom:62px;font-size:8px}
#touchHint{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);font:700 9px ui-monospace,monospace;letter-spacing:.12em;color:rgba(207,239,250,.55);white-space:nowrap}
body.touch-mode #crosshair{transform:translate(-50%,-50%) scale(.9)}
body.touch-mode #rightHud{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 195px);right:14px}
body.touch-mode #leftHud{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 160px);left:14px}
body.touch-mode #minimapWrap{top:68px;right:12px;transform:scale(.72);transform-origin:top right}
body.touch-mode #leaderboard{max-height:76vh;overflow:auto}
@media (pointer:coarse),(max-width:900px){#touchControls{display:none}.card{max-height:92vh;overflow:auto}.grid{grid-template-columns:1fr 1fr}.touch-pad{width:138px;height:138px}.pad-knob{left:40px;top:40px}.touch-actions{transform:scale(.92);transform-origin:bottom right}}
@media (orientation:portrait) and (pointer:coarse){#touchHint:after{content:' · QUERFORMAT EMPFOHLEN'}}

/* Pre-match lobby */
.prematch{display:none;margin:14px 0 18px;border:1px solid rgba(104,216,255,.25);background:rgba(4,15,23,.72);padding:14px}
.prematch.active{display:block}.prematch-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;color:#c8f4ff;font:800 12px ui-monospace,monospace;letter-spacing:.1em}.prematch-title span{font-size:10px;color:#84dfff}
.loadout-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.loadout-row label{display:grid;gap:5px;color:#86a7b8;font:700 9px ui-monospace,monospace;letter-spacing:.12em}.loadout-row select{background:#07131c;border:1px solid rgba(103,216,255,.28);color:#eaf9ff;padding:10px;font:700 12px ui-monospace,monospace}
.lobby-members{display:grid;gap:6px;max-height:190px;overflow:auto;margin-bottom:12px}.lobby-member{display:grid;grid-template-columns:1.5fr .8fr 1fr .65fr;gap:8px;align-items:center;padding:8px 9px;background:rgba(14,32,43,.72);border-left:3px solid #72828a;font:700 10px ui-monospace,monospace}.lobby-member.blue{border-color:#45cfff}.lobby-member.red{border-color:#ff5f64}.lobby-member.me{outline:1px solid rgba(255,255,255,.18)}.lobby-member .ready{color:#63f3a6}.lobby-member .not-ready{color:#ff9ca1}.host-mark{color:#ffd66e}.lobby-empty{padding:10px;color:#6d8795;font:11px ui-monospace,monospace}.prematch-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.prematch-actions button.ready-on{border-color:#63f3a6;color:#63f3a6}.prematch-actions #hostStartBtn{border-color:rgba(255,214,110,.5)}
@media(max-width:620px){.loadout-row,.prematch-actions{grid-template-columns:1fr}.lobby-member{grid-template-columns:1.35fr .8fr 1fr}.lobby-member .status{grid-column:1/-1}}

.match-config{margin:0 0 12px;padding:11px;border:1px solid rgba(104,216,255,.18);background:rgba(7,22,32,.62)}
.config-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:#c8f4ff;font:800 10px ui-monospace,monospace;letter-spacing:.1em}.config-head span{font-size:8px;color:#ffd66e}
.config-grid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:7px}.config-grid label{display:grid;gap:4px;color:#779aaa;font:700 8px ui-monospace,monospace;letter-spacing:.09em}.config-grid select{min-width:0;background:#07131c;border:1px solid rgba(103,216,255,.24);color:#eaf9ff;padding:8px 6px;font:700 10px ui-monospace,monospace}.config-grid select:disabled{opacity:.48}.map-description{margin-top:8px;color:#6f9caf;font:9px ui-monospace,monospace;letter-spacing:.04em}
@media(max-width:760px){.config-grid{grid-template-columns:1fr 1fr}.config-grid label:first-child{grid-column:1/-1}}

/* Keep the lobby controls and the entry button reachable on short screens. */
#menu.lobby-active .card{max-height:calc(100vh - 24px);overflow-y:auto}
#menu.lobby-active .name-label,#menu.lobby-active .lobby-actions,#menu.lobby-active .grid,#menu.lobby-active .card>.foot{display:none}
#menu.lobby-active #startBtn{position:sticky;bottom:0;z-index:1;margin-top:4px}
@media(max-width:760px){
  #menu.lobby-active .card{padding:20px 18px 18px}
  #menu.lobby-active .prematch{margin-top:0}
  #menu.lobby-active .match-config{padding:9px}
  #menu.lobby-active .lobby-members{max-height:120px}
}