/* Compact game menu. Original class and ability icons are shared with the HUD. */
#select.menu-shell {
  --gold:#d7b97c; --edge:#b5c5ce29; --muted:#99adb8;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:82px 1fr auto 44px;
  column-gap:44px; row-gap:0; align-items:center;
  padding:0 max(24px,calc((100vw - 1040px)/2)); overflow-y:auto;
  background:linear-gradient(#07121adb,#07121ad9),url('assets/menu/moonfall-arena.png') center/cover fixed;
  color:#e9e8df;
}
#select.menu-shell.hidden { display:none; }
.menu-shell [hidden] { display:none!important; }
.menu-shell button,.menu-shell input { font:inherit; }
.menu-shell button { cursor:pointer; transition:background .15s,border-color .15s; }
.menu-shell button:disabled { opacity:.4; cursor:default; }
.menu-shell :is(button,input,a,summary,[tabindex]):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.menu-top { grid-column:1/-1; align-self:stretch; display:flex; align-items:center; border-bottom:1px solid var(--edge); }
.wordmark { color:#f1e7d0; font-weight:750; font-size:26px; letter-spacing:5px; text-decoration:none; }
.wordmark small { color:var(--gold); font-size:11px; letter-spacing:4px; margin-left:10px; }
.home-layout { grid-column:2; grid-row:2; width:100%; padding:34px 0; }
.play-panel { padding:24px; border:1px solid var(--edge); border-top-color:#b59a69; background:#0b1821ed; box-shadow:0 16px 50px #0004; border-radius:4px; }
.field-label { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; }
.menu-shell input:not([type=checkbox]) { display:block; min-width:0; width:100%; border:1px solid var(--edge); background:#071119; color:#e4e9e7; padding:11px 12px; border-radius:3px; font-size:13px; }
.menu-shell input::placeholder { color:#8599a6; }
.mode-options { display:flex; gap:8px; margin:16px 0; }
.mode-choice { flex:1; padding:11px; background:#111e28; border:1px solid var(--edge); border-radius:3px; color:#9aafbb; font-size:16px!important; font-weight:700!important; }
.mode-choice.on { background:#bca36c1f; color:#efd7a3; border-color:#baa06b; }
.primary-action { background:linear-gradient(#dfc48b,#bea06a); border:1px solid #e1c78f; border-radius:3px; padding:13px 18px; color:#17212a; font-weight:750!important; font-size:13px!important; }
.primary-action:hover:not(:disabled) { background:#e7d19e; }
.play-panel>.primary-action { display:block; width:100%; }
.secondary-action { background:#14232f; color:#c8d3d9; border:1px solid var(--edge); border-radius:3px; padding:11px 13px; font-size:12px!important; }
.secondary-action:hover:not(:disabled) { border-color:#bba57a; background:#203240; }
.join-row { display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:8px; margin-top:10px; }
#room-code { text-transform:uppercase; letter-spacing:1px; font-size:11px; }
.local-actions { display:flex; gap:8px; border-top:1px solid var(--edge); padding-top:18px; margin-top:20px; }
.local-actions button { flex:1; }
.difficulty { display:flex; justify-content:center; gap:16px; margin-top:14px; }
.menu-shell .opt { border:0; border-bottom:1px solid transparent; border-radius:0; padding:4px 0; background:none; color:var(--muted); font-size:10px; }
.menu-shell .opt.on { color:var(--gold); border-bottom-color:var(--gold); }
.connection-settings { margin-top:20px; color:#8fa5b1; font-size:11px; }
.connection-settings summary { cursor:pointer; }.connection-settings .field-label { margin-top:14px; }
.roster-section { grid-column:1; grid-row:2; min-width:0; padding:34px 0; }
#select .roster-section h2 { color:#b2c0c9; font:600 12px 'Segoe UI',sans-serif; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 16px; }
#select .classes { width:100%; max-width:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
#select .card { display:flex; flex-direction:column; align-items:center; padding:13px 6px 12px; min-width:0; position:relative; background:linear-gradient(145deg,#1a2733ed,#0c1923f5); border:1px solid var(--edge); border-radius:4px; box-shadow:none; }
#select .card:hover { transform:none; border-color:var(--class-color); background:#20313d; }
#select .card.selected { border-color:var(--gold); box-shadow:inset 0 0 18px #d7b97c0c; background:linear-gradient(145deg,#3d3729a3,#101e29); }
.hero-mark { display:block; width:82px; height:82px; max-width:100%; background-repeat:no-repeat; }
#select .card .name { font:600 12px 'Segoe UI',sans-serif; margin-top:8px; color:#e7e5db; letter-spacing:0; }
.hero-check { position:absolute; top:6px; right:8px; font-size:10px; color:var(--gold); }
.card:not(.selected) .hero-check { visibility:hidden; }
#selected-hero { display:block; color:#b8c4c9; font-size:11px; margin-top:20px; }
.hero-detail { display:flex; gap:8px; margin-top:12px; }
.menu-ability { width:48px; height:48px; display:block; position:relative; border:1px solid #ac9366; border-radius:3px; overflow:hidden; background:#07131b; }
.menu-ability i { position:absolute; inset:0; background-repeat:no-repeat; }
.menu-ability kbd { position:absolute; bottom:0; left:0; right:0; color:#f2e0b7; background:#06101ce6; text-align:center; font:9px 'Segoe UI',sans-serif; padding:2px; }
.netstatus { grid-row:3; grid-column:1/-1; color:#e3c796; font-size:12px; margin:0; padding:10px 0; line-height:1.5; }
.netstatus:empty { display:none; }
.menu-footer { grid-column:1/-1; grid-row:4; color:#728995; border-top:1px solid var(--edge); align-self:stretch; display:flex; align-items:center; font-size:10px; }
#select.in-lobby { grid-template-rows:70px auto auto auto 44px; align-items:start; }
.lobby-view { grid-column:1/-1; grid-row:2; padding:24px 0; }
.lobby-heading { display:flex; justify-content:space-between; align-items:center; }
#select .lobby-heading h1 { color:#f0e5ce; font:600 24px 'Segoe UI',sans-serif; letter-spacing:0; margin:0; text-shadow:none; }
.lobby-heading p { color:var(--muted); font-size:12px; margin:7px 0 0; }
.lobby-meta { display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding:16px 0; margin:14px 0 6px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); }
#copy-room { border:0; background:none; display:flex; gap:12px; align-items:center; color:#adbdc7; padding:0; }
#lobby-code { font:700 19px 'Segoe UI',sans-serif; letter-spacing:3px; color:var(--gold); }
#copy-label { font-size:10px; }.lobby-meta strong { color:#a5b9c4; font-size:12px; font-weight:500; }#lobby-mode { margin-left:auto; }
.teams-grid { display:grid; grid-template-columns:1fr 32px 1fr; gap:12px; align-items:center; }
.team-panel { padding:16px; background:#0c1b25e8; border:1px solid #78b6d44d; border-top:2px solid #78b6d4; border-radius:3px; }
.team-panel.red { border-color:#df67744d; border-top-color:#df6774; }
.team-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.team-heading h2 { font:600 13px 'Segoe UI',sans-serif; margin:0; color:#95c5e0; }.red .team-heading h2 { color:#ff8b96; }
.team-heading button { padding:6px 10px; font-size:10px!important; }
.versus { color:#9ba9ad; font-size:11px; text-align:center; }
.player-slot { display:flex; gap:12px; align-items:center; min-height:65px; padding:10px; margin-top:7px; border:1px solid #a8c1ce1c; background:#07131ca1; }
.player-slot.mine { border-color:#b49d696e; }.player-slot.empty { border-style:dashed; }
.slot-mark { flex:0 0 40px; height:40px; display:grid; place-items:center; color:#6b828e; font-size:22px; background-repeat:no-repeat; }
.slot-info { flex:1; min-width:0; }.slot-info strong { display:block; font-size:12px; color:#dce4e7; overflow:hidden; text-overflow:ellipsis; }.slot-info small { display:block; font-size:10px; color:#8ca4b2; margin-top:4px; }.empty .slot-info strong { color:#758e9b; font-weight:400; }
.slot-status { color:#8199a6; font-size:8px; letter-spacing:.5px; }.slot-status.ready { color:#8dd4ad; }.empty .slot-status { display:none; }
.lobby-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:18px; }
.bot-toggle { display:flex; align-items:center; gap:8px; font-size:11px; color:#b4c6ce; }.bot-toggle input { width:14px; height:14px; accent-color:var(--gold); }
.lobby-bottom p { color:#8ea6b3; font-size:11px; margin:8px 0 0; }
.lobby-actions { display:flex; gap:8px; }.lobby-actions button { min-width:100px; }.lobby-actions .is-ready { border-color:#83c9a580; color:#91d6b2; }
.in-lobby .roster-section { grid-row:3; grid-column:1/-1; padding:18px 0; border-top:1px solid var(--edge); }
#select.in-lobby .classes { grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
#select.in-lobby .card { padding:8px 4px; }#select.in-lobby .hero-mark { width:56px; height:56px; }
.in-lobby #selected-hero { margin-top:12px; }.in-lobby .hero-detail { margin-top:8px; }.in-lobby .menu-ability { width:38px; height:38px; }
.in-lobby .netstatus { grid-row:4; }.in-lobby .menu-footer { grid-row:5; }
@media(min-width:1400px) { #select.menu-shell { column-gap:60px; grid-template-columns:minmax(0,1fr) 310px; } }
@media(max-width:800px) {
  #select.menu-shell { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0 20px; }
  .menu-top { order:0; min-height:72px; }.roster-section { order:1; padding:28px 0 22px; }.home-layout { order:2; padding:0 0 22px; }.netstatus { order:3; }.menu-footer { order:4; min-height:44px; }
  .play-panel { padding:20px; }.hero-mark { width:64px; height:64px; }#select .classes { gap:7px; }#select .card { padding:10px 4px; }#select .card .name { font-size:10px; }
  .lobby-view { order:1; padding:20px 0; }.in-lobby .roster-section { order:2; }
  .teams-grid { grid-template-columns:1fr; gap:10px; }.versus { display:none; }.team-panel { padding:12px; }
  #select.in-lobby .classes { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lobby-meta { gap:14px; }.lobby-bottom { align-items:stretch; flex-direction:column; gap:14px; }.lobby-actions button { flex:1; }
}
@media(prefers-reduced-motion:reduce) { .menu-shell * { transition:none!important; } }
/* Match results: compact numeric columns, scrollable on narrow screens. */
#endscreen { z-index:20; overflow-y:auto; padding:32px 20px; justify-content:flex-start; background:linear-gradient(#061019f5,#08121cf5); }
.results-panel { width:min(1120px,100%); margin:auto 0; }
#endscreen h1 { font:600 clamp(28px,4vw,44px) 'Segoe UI',sans-serif; letter-spacing:3px; color:#efdbaf; text-shadow:none; }
#endscreen .sub { margin-top:8px; color:#a9bdc8; font-size:14px; }
.scoreboard-scroll { margin-top:26px; overflow-x:auto; border:1px solid #9fb5c532; border-radius:4px; background:#0d1c26; }
.results-table { border-collapse:collapse; width:100%; min-width:900px; color:#ccdae2; font-size:12px; }
.results-table th,.results-table td { padding:14px 12px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.results-table th:first-child { text-align:left; }
.results-table thead th { background:#11232f; color:#8fa9b8; font-size:10px; font-weight:600; }
.results-table tbody tr:not(.result-team) { border-top:1px solid #a1bdce14; }
.results-table tbody th { font-weight:500; }
.results-table .result-team th { padding:10px 12px; font-size:10px; letter-spacing:.7px; color:#83c4e1; background:#112c3b; }
.results-table .result-red .result-team th { color:#ff9bae; background:#331322; }
.result-player { display:flex; align-items:center; gap:10px; min-width:155px; }
.result-player img { flex-shrink:0; object-fit:contain; }.result-player>span { display:flex; flex-direction:column; gap:4px; }
.result-player small { color:#819cae; font-size:10px; }.results-table .result-me { background:#aec8df0a; }.results-table .result-me th { color:#fff1ce; }
.results-table .result-best { color:#eed298; font-weight:700; }
.results-note { color:#7793a5; font-size:10px; margin:12px 0 0; }
#endscreen .endrow { margin-top:24px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:650px) { #endscreen { padding:24px 12px; }.results-table th,.results-table td { padding:12px 10px; }.scoreboard-scroll { margin-top:20px; } }
.menu-footer>a { margin-left:auto; color:#8da7b7; text-decoration:none; }.menu-footer>a:hover { color:#dcc28b; }

.tournament-choice{display:flex;align-items:center;gap:9px;margin:12px 0;font-size:12px;color:#e2cea0}.tournament-choice input{accent-color:#dfc389}#watch-room{width:100%;margin:8px 0}#lobby-spectators{margin:22px 0;padding:18px;border:1px solid #7b7260;background:#101d25b3}#lobby-spectators[hidden]{display:none}#lobby-spectators h2{font-size:17px;color:#dfc99a;margin:0 0 8px}#lobby-spectators p{font-size:12px;color:#aabfc7}.spectator-lobby-actions{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.spectator-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.spectator-slot{display:flex;align-items:center;gap:8px;min-height:46px;padding:8px;background:#101820;color:#e6dfcd;font-size:12px;border:1px solid #4b5960}.spectator-slot.empty{border-style:dashed;color:#8a9ca9}.spectator-slot img{width:28px;height:28px;object-fit:contain}.in-lobby.is-spectator .roster-section{display:none}@media(max-width:700px){.spectator-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}