:root{
  --ink:#151327;          /* deep indigo base                       */
  --ink-2:#1F1B33;        /* raised panel                           */
  --ink-3:#2B2545;        /* borders, inactive chips                */
  --amber:#FFB020;        /* primary action, timer                  */
  --mint:#45E0C8;         /* your team, positive states             */
  --coral:#FF5D6C;        /* danger, elimination, boss              */
  --paper:#F2EEF7;
  --muted:#9A93B5;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  background:var(--ink);color:var(--paper);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.45;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
#game{position:fixed;inset:0}
#game canvas{display:block}

.panel{
  position:fixed;inset:0;z-index:20;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 0%,#241E42 0%,var(--ink) 60%);
  padding:calc(var(--safe-t) + 22px) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 22px) calc(var(--safe-l) + 20px);
}
.panel[hidden]{display:none}
.menu-inner{max-width:26rem;margin:0 auto;display:flex;flex-direction:column;gap:14px;min-height:100%;justify-content:center}

.tag{margin:0;color:var(--muted);font-size:.8rem;letter-spacing:.04em}
.wordmark{
  margin:0;font-size:clamp(2.6rem,13vw,4rem);line-height:.92;font-weight:800;
  letter-spacing:-.03em;
}
.wordmark::after{content:"";display:block;width:64px;height:5px;margin-top:14px;border-radius:3px;background:var(--amber)}
.lede{margin:0;color:var(--muted);max-width:30ch}

.field{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.field span{font-size:.8rem;color:var(--muted)}
input{
  font:inherit;color:var(--paper);background:var(--ink-2);
  border:2px solid var(--ink-3);border-radius:12px;padding:12px 14px;width:100%;
}
input:focus{outline:none;border-color:var(--amber)}

.code-entry{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.code-box{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:2.6rem;font-weight:700;text-align:center;letter-spacing:.5em;
  text-indent:.5em;padding:14px 0;text-transform:uppercase;
}
.code-box::placeholder{color:#3E3660}

.btn{
  font:inherit;font-weight:600;border:0;border-radius:12px;padding:15px 18px;
  min-height:52px;cursor:pointer;transition:transform .06s ease,filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default}
.btn-primary{background:var(--amber);color:#241A00}
.btn-ghost{background:transparent;color:var(--paper);border:2px solid var(--ink-3)}
.btn:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--ink-3)}
.err{color:var(--coral);min-height:1.4em;margin:0;font-size:.9rem}

/* ── лобби ── */
.lobby-head{display:flex;align-items:center;gap:14px;max-width:34rem;margin:0 auto 18px}
.code-display{
  margin:0;font-family:ui-monospace,Menlo,monospace;font-size:2.4rem;font-weight:700;
  letter-spacing:.22em;color:var(--amber)
}
.btn-back,.btn-copy{
  background:var(--ink-2);border:2px solid var(--ink-3);color:var(--paper);
  border-radius:12px;padding:10px 12px;font:inherit;font-size:.85rem;min-height:44px;cursor:pointer
}
.btn-back{font-size:1.3rem;line-height:1}
.btn-copy{margin-left:auto}
.lobby-body{max-width:34rem;margin:0 auto;padding-bottom:96px}
.roster{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pill{background:var(--ink-2);border:2px solid var(--ink-3);border-radius:999px;padding:7px 14px;font-size:.9rem}
.pill.host{border-color:var(--amber)}
.pill.you{background:var(--ink-3)}

.game-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.game-card{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  background:var(--ink-2);border:2px solid var(--ink-3);border-radius:14px;
  padding:13px 14px;color:var(--paper);font:inherit;cursor:pointer;min-height:64px;
}
.game-card[aria-pressed="true"]{border-color:var(--amber);background:#2A2246}
.game-card[disabled]{opacity:.5}
.game-card b{display:block;font-size:1rem}
.game-card small{color:var(--muted);font-size:.82rem;display:block;margin-top:2px}
.game-card .cap{margin-left:auto;color:var(--muted);font-size:.78rem;white-space:nowrap;padding-top:3px}

.lobby-foot{
  position:fixed;left:0;right:0;bottom:0;display:flex;gap:12px;align-items:center;
  padding:12px calc(var(--safe-r) + 20px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 20px);
  background:linear-gradient(to top,var(--ink) 60%,transparent);
}
.lobby-foot .btn{flex:0 0 auto;min-width:140px}
.hint{margin:0;color:var(--muted);font-size:.85rem;flex:1}

/* ── HUD ── */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 12px);
  display:flex;flex-direction:column}
.hud[hidden]{display:none}
.hud-top{display:flex;gap:12px;align-items:flex-start}
.timer{background:rgba(21,19,39,.72);border-radius:12px;padding:6px 12px;text-align:center;backdrop-filter:blur(6px)}
.timer b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--amber);line-height:1.1}
.timer span{font-size:.68rem;color:var(--muted)}
.timer.danger b{color:var(--coral)}
.board{margin-left:auto;background:rgba(21,19,39,.72);border-radius:12px;padding:6px 10px;
  font-size:.8rem;min-width:120px;backdrop-filter:blur(6px)}
.board .row{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.board .row.me{color:var(--mint)}
.board .row.dim{opacity:.45}
.board .cap{color:var(--muted);font-size:.68rem;margin-bottom:2px}

.bossbar{position:absolute;top:calc(var(--safe-t) + 12px);left:50%;transform:translateX(-50%);height:22px;margin:0;width:min(460px,44%);
  background:rgba(21,19,39,.8);border-radius:11px;overflow:hidden;border:2px solid var(--ink-3)}
.bossbar-fill{position:absolute;inset:0;right:auto;width:100%;background:linear-gradient(90deg,#8E2434,var(--coral));transition:width .2s linear}
.bossbar span{position:relative;display:block;text-align:center;font-size:.72rem;line-height:18px}

.banner{align-self:center;margin:10px 0 0;background:rgba(255,176,32,.14);border:1px solid var(--amber);
  color:var(--amber);border-radius:10px;padding:6px 14px;font-size:.88rem}
.banner[hidden]{display:none}
.killfeed{margin-top:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-size:.78rem}
.killfeed div{background:rgba(21,19,39,.7);border-radius:8px;padding:3px 9px;animation:fade 5s forwards}
@keyframes fade{0%,70%{opacity:1}100%{opacity:0}}

.hud-bottom{margin-top:auto;display:flex;align-items:flex-end;gap:12px}
.weapon{background:rgba(21,19,39,.72);border-radius:12px;padding:6px 12px;backdrop-filter:blur(6px)}
.weapon b{display:block;font-size:.95rem}
.weapon span{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.weapon .mag{display:block;letter-spacing:2px;font-size:.9rem;color:var(--ink-0, #F2EEF7)}
.weapon .mag i{font-style:normal;opacity:.28}
.reloadbar{margin-top:5px;height:4px;width:104px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.reloadbar i{display:block;height:100%;width:0;background:#FFB020;border-radius:3px}
.weapon.reloading b{color:#FFB020}
.controls-right{margin-left:auto;display:flex;gap:8px;pointer-events:auto}
.chip{background:rgba(21,19,39,.72);border:2px solid var(--ink-3);color:var(--muted);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:.78rem;min-height:44px;cursor:pointer}
.chip.on{border-color:var(--mint);color:var(--mint)}
.apk-link{display:block;margin-top:10px;text-align:center;color:var(--muted);
  font-size:.85rem;text-decoration:none;border:1px dashed var(--ink-3);
  border-radius:12px;padding:9px 12px}
.apk-link:active{color:#45E0C8;border-color:#45E0C8}
.apk-link[hidden]{display:none}
.switch{display:flex;align-items:center;gap:9px;margin:10px 0 2px;color:var(--muted);font-size:.85rem;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:#45E0C8}
.rooms{margin-top:18px;text-align:left}
.rooms-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rooms-list{display:grid;gap:6px;max-height:196px;overflow-y:auto}
.room-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--ink-3);color:inherit;font:inherit;text-align:left;cursor:pointer}
.room-row:active{background:rgba(255,255,255,.1)}
.room-row .rcode{font-weight:700;letter-spacing:2px;font-variant-numeric:tabular-nums}
.room-row small{color:var(--muted);display:block}
.room-row .rnum{color:var(--muted);font-variant-numeric:tabular-nums}
.prof-name-edit{display:flex;gap:8px;align-items:center;margin-top:8px}
.prof-name-edit input{flex:1;min-width:0}
#net-overlay{position:fixed;inset:0;z-index:65;display:grid;place-items:center;
  background:rgba(10,9,20,.78);backdrop-filter:blur(3px);padding:24px;text-align:center}
#net-overlay[hidden]{display:none}
.net-inner{display:grid;gap:10px;justify-items:center;max-width:320px}
.net-inner b{font-size:1.05rem}
.net-inner small{color:var(--muted)}
.net-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);
  border-top-color:#45E0C8;animation:netspin .8s linear infinite}
@keyframes netspin{to{transform:rotate(360deg)}}
#net-chip{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:64;padding:4px 12px;border-radius:999px;background:rgba(255,93,108,.18);
  border:1px solid rgba(255,93,108,.55);color:#FF8A96;font-size:.78rem;pointer-events:none}
#net-chip[hidden]{display:none}
.pill.away{opacity:.45}
.pill.away::after{content:' · нет связи';font-size:.72rem;color:var(--muted)}
/* Portrait phone that could not be turned: the game turns a quarter instead.
   JS keeps --app-w/--app-h equal to the real viewport, which beats vw/vh on
   mobile browsers whose toolbars make 100vh lie. */
body.rot90 #game,
body.rot90 #screen-hud,
body.rot90 #net-overlay{
  inset:auto;top:0;left:0;right:auto;bottom:auto;
  width:var(--app-h,100vh);height:var(--app-w,100vw);
  transform-origin:0 0;transform:translateX(var(--app-w,100vw)) rotate(90deg);
}
#rotate-note{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(10,9,20,.94);padding:24px;text-align:center}
#rotate-note[hidden]{display:none}
.rot-inner{max-width:320px;display:grid;gap:10px;justify-items:center}
.rot-icon{font-size:3rem;line-height:1;animation:rot 1.8s ease-in-out infinite}
@keyframes rot{0%,60%{transform:rotate(0)}80%,100%{transform:rotate(-90deg)}}
.rot-inner b{font-size:1.15rem}
.rot-inner small{color:var(--muted);line-height:1.4}
#dbg{position:fixed;left:6px;top:6px;z-index:70;pointer-events:none;
  font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;color:#9EF7D4;
  background:rgba(10,9,20,.62);padding:5px 7px;border-radius:6px;white-space:pre}
#dbg[hidden]{display:none}
.bossbar.rage #hud-boss-fill{background:#FF3B48}
.bossbar.rage #hud-boss-label{color:#FF6B6B;font-weight:700;letter-spacing:.5px}

.respawn{position:fixed;left:50%;top:32%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  background:rgba(21,19,39,.62);border-radius:16px;padding:8px 22px;text-align:center}
.respawn[hidden]{display:none}
.respawn b{font-size:2.6rem;color:var(--coral);line-height:1}
.respawn span{color:var(--muted)}

/* ── итоги ── */
.headline{margin:0;font-size:1.9rem;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.result-board{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
.result-board .row{display:flex;justify-content:space-between;gap:12px;background:var(--ink-2);
  border-radius:10px;padding:10px 14px;font-variant-numeric:tabular-nums}
.result-board .row.win{border:2px solid var(--amber)}
.result-board .row small{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-height:720px) and (orientation:portrait){.menu-inner{justify-content:center}}

/* ── карточки игр: иконка + название, ничего больше ── */
.game-card{align-items:center;gap:14px;min-height:72px}
.game-card img{border-radius:12px;flex:0 0 auto;display:block}
.game-card b{font-size:1.02rem;flex:1;text-align:left}
.game-card .cap{margin-left:0;color:var(--muted);font-size:.8rem;padding-top:0}
.pill{display:inline-flex;align-items:center;gap:7px}
.pill img{display:block;border-radius:50%}
.pill em{font-style:normal;color:var(--muted);font-size:.78rem}

/* ── ранговая полоска в меню ── */
.rank-strip{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--ink-2);border:2px solid var(--ink-3);border-radius:14px;
  padding:10px 14px;color:var(--paper);font:inherit;min-height:64px;margin-top:6px;
}
.rank-strip img{display:block;flex:0 0 auto}
.rank-strip b{display:block;font-size:.98rem}
.rank-strip small{color:var(--muted);font-size:.8rem}
.rank-strip em{margin-left:auto;font-style:normal;color:var(--amber);font-variant-numeric:tabular-nums}

/* ── профиль ── */
.sub-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.rank-card{display:flex;gap:16px;align-items:center;background:var(--ink-2);
  border:2px solid var(--ink-3);border-radius:16px;padding:16px}
.rank-card img{flex:0 0 auto;display:block}
.rank-card h2{margin:0;font-size:1.3rem}
.rank-line{margin:2px 0 8px;color:var(--muted);font-size:.9rem}
.rank-line b{color:var(--amber);font-size:1.05rem}
.progress{height:8px;border-radius:4px;background:var(--ink-3);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--amber));width:0}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--ink-2);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.15rem;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:.72rem}

.medal-rack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.medal{margin:0;text-align:center;background:var(--ink-2);border-radius:12px;padding:10px 6px}
.medal img{display:block;margin:0 auto}
.medal figcaption{font-size:.78rem;margin-top:4px}
.medal figcaption small{display:block;color:var(--muted);font-size:.68rem}
.medal.locked{opacity:.32;filter:grayscale(1)}

.game-stats{display:flex;flex-direction:column;gap:6px}
.game-stat{display:flex;align-items:center;gap:10px;background:var(--ink-2);border-radius:12px;padding:8px 12px}
.game-stat img{border-radius:8px;display:block}
.game-stat span{flex:1;font-size:.92rem}
.game-stat b{font-variant-numeric:tabular-nums;color:var(--mint)}

/* ── топ ── */
.top-list{display:flex;flex-direction:column;gap:6px}
.top-row{display:flex;align-items:center;gap:10px;background:var(--ink-2);border-radius:12px;padding:9px 12px}
.top-row.me{border:2px solid var(--amber)}
.top-row .place{width:1.7em;color:var(--muted);font-variant-numeric:tabular-nums}
.top-row img{display:block}
.top-row .who{flex:1;font-size:.94rem}
.top-row small{color:var(--muted);font-size:.78rem}
.top-row b{color:var(--amber);font-variant-numeric:tabular-nums}

/* ── изменение MMR в итогах ── */
.mmr-change{display:flex;align-items:center;gap:14px;background:var(--ink-2);
  border:2px solid var(--ink-3);border-radius:14px;padding:12px 16px}
.mmr-change[hidden]{display:none}
.mmr-change img{display:block}
.mmr-change b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.mmr-change small{display:block;color:var(--muted);font-size:.82rem}
.mmr-change em{margin-left:auto;font-style:normal;color:var(--amber);font-size:.85rem}
.up{color:var(--mint)}
.down{color:var(--coral)}
.result-board .row i{font-style:normal;font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right}

/* boss shield */
.bossbar.shield{border-color:#9BFFE8;box-shadow:0 0 12px rgba(155,255,232,.45)}
.bossbar.shield #hud-boss-fill{background:linear-gradient(90deg,#2E9C86,#9BFFE8)}
.bossbar.shield #hud-boss-label{color:#DFFFF8;font-weight:700;letter-spacing:.5px}
/* kit picker in the lobby */
.kit-row{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.kit{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:74px;padding:7px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(36,30,66,.9);color:var(--muted,#9A93B5);font:inherit;font-size:.78rem;cursor:pointer}
.kit b{color:#F2EEF7;font-size:.82rem}
.kit small{font-size:.66rem;opacity:.8}
.kit[aria-pressed=true]{border-color:#FFB020;background:rgba(255,176,32,.14);color:#FFD23F}
.pill .kit-tag{font-style:normal;font-size:.66rem;margin-left:4px;padding:1px 5px;border-radius:6px;background:rgba(255,176,32,.16);color:#FFD23F}

/* spectator bar */
.spec{position:absolute;left:50%;bottom:calc(var(--safe-b) + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  background:rgba(21,19,39,.8);border:1px solid var(--ink-3);border-radius:999px;padding:4px 6px;pointer-events:auto;font-size:.9rem;white-space:nowrap}
.spec[hidden]{display:none}
.spec b{color:var(--mint)}
.spec-btn{width:48px;height:44px;border-radius:999px;border:0;background:var(--ink-3);color:var(--paper);font-size:1.1rem;cursor:pointer}
.spec-btn:active{background:#3E3660}

/* ── главное меню: только кнопки и разделы, без прокрутки ── */
.home{max-width:34rem;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:16px}
.home-head{display:flex;align-items:center;gap:12px}
.home-title{flex:1;min-width:0}
.home-mark{font-size:clamp(1.9rem,8vw,2.8rem)}
.home-mark::after{width:48px;height:4px;margin-top:10px}
.profile-btn{display:flex;align-items:center;gap:9px;background:var(--ink-2);border:2px solid var(--ink-3);
  border-radius:14px;padding:7px 12px;color:var(--paper);font:inherit;cursor:pointer;min-height:56px;text-align:left}
.profile-btn img{display:block}
.profile-btn b{display:block;font-size:.88rem}
.profile-btn small{display:block;color:var(--muted);font-size:.72rem}
.profile-btn em{font-style:normal;color:var(--amber);font-size:.78rem;margin-left:4px}
.profile-btn > span{min-width:0}
.profile-btn small#menu-stats{color:#C9C2E0}
.menu-boss{display:flex;gap:2px;margin-left:auto;font-style:normal}
.menu-boss img{width:22px;height:22px;display:block}
.menu-boss img.locked{filter:grayscale(1) brightness(.55);opacity:.55}
.home-actions{display:grid;gap:12px}
.big-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;
  min-height:92px;padding:16px 20px;border-radius:18px;border:2px solid var(--ink-3);background:var(--ink-2);
  color:var(--paper);font:inherit;text-align:left;cursor:pointer;transition:transform .06s ease}
.big-btn:active{transform:translateY(1px)}
.big-btn b{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.big-btn small{color:var(--muted);font-size:.86rem}
.big-primary{background:var(--amber);border-color:var(--amber);color:#241A00}
.big-primary small{color:rgba(36,26,0,.7)}
.home-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-row .btn{min-height:48px;padding:10px 12px}
.home-row .apk-link{display:flex;align-items:center;justify-content:center;margin:0;border-style:solid}
.home-row .apk-link[hidden]{display:none}
.home .err{min-height:1.2em}
.section{justify-content:flex-start;gap:14px}
.section .sub-head{margin-bottom:6px}
.section-title{margin:0;font-size:1.4rem;flex:1}
.big-switch{margin:4px 0;padding:14px 16px;border-radius:14px;background:var(--ink-2);border:2px solid var(--ink-3)}
.big-switch span{display:flex;flex-direction:column}
.big-switch b{color:var(--paper);font-size:1rem}
.big-switch small{font-size:.8rem}
.join .rooms-list{max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px);min-height:80px}
.code-row{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--ink-3)}
.code-row .tag{white-space:nowrap}
.code-box.small{font-size:1.5rem;letter-spacing:.35em;text-indent:.35em;padding:9px 0;flex:1;min-width:0}
.code-row .btn{min-height:48px;padding:10px 18px}

@media (orientation:landscape) and (max-height:560px){
  .home{max-width:52rem;display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto 1fr auto;gap:12px 22px;align-content:center}
  .home-head{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start}
  .home-actions{grid-column:2;grid-row:1 / span 3;align-self:center}
  .home-row{grid-column:1;grid-row:2;align-self:end}
  .home .err{grid-column:1;grid-row:3}
  .big-btn{min-height:78px;padding:12px 18px}
  .big-btn b{font-size:1.25rem}
  .join .rooms-list{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
}

/* ── лобби: всё на одном экране, прокрутки нет ── */
#screen-lobby{display:flex;flex-direction:column;overflow:hidden;
  padding-top:calc(var(--safe-t) + 12px);padding-bottom:calc(var(--safe-b) + 10px)}
#screen-lobby[hidden]{display:none}
#screen-lobby .lobby-head{flex:0 0 auto;width:100%;max-width:56rem;margin:0 auto 8px;flex-wrap:wrap;row-gap:8px}
#screen-lobby .code-display{font-size:1.9rem}
#screen-lobby .btn-back,#screen-lobby .btn-copy{min-height:40px;padding:8px 12px}
.lobby-head .roster{order:5;flex:1 1 100%;margin:0;gap:6px;max-height:70px;overflow-y:auto}
.lobby-head .pill{padding:4px 10px;font-size:.84rem;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lobby-head .pill img{width:20px;height:20px}
.lobby-head .pill em{font-style:normal;color:var(--muted);font-size:.72rem}
.lobby-body{flex:1 1 auto;min-height:0;width:100%;max-width:56rem;margin:0 auto;padding-bottom:0;
  display:grid;gap:8px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"games" "opts"}
.lobby-games{grid-area:games;min-height:0;display:flex;flex-direction:column}
.lobby-opts{grid-area:opts;display:flex;flex-direction:column;gap:4px;min-width:0}
.lobby-body:not(.with-opts) .lobby-opts{display:none}
.lobby-opts .kit-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:3px 0 0}
.lobby-opts .kit{min-width:0;padding:6px 3px;gap:0}
.lobby-opts .kit b{font-size:.78rem;white-space:nowrap}
.lobby-opts .kit small{font-size:.62rem;white-space:nowrap}
.game-grid{flex:1 1 auto;min-height:0;display:grid;gap:7px;margin-top:6px;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,118px);align-content:start}
.game-card.tile{flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:0;
  max-height:118px;padding:6px 4px;text-align:center;border-radius:12px;overflow:hidden}
.game-card.tile img{width:38px;height:38px;border-radius:10px}
.game-card.tile b{flex:0 0 auto;font-size:.78rem;line-height:1.12;text-align:center}
.game-card.tile .cap{font-size:.66rem}
.kit.level[disabled]{opacity:.7;cursor:default}
#screen-lobby .lobby-foot{position:static;flex:0 0 auto;width:100%;max-width:56rem;margin:8px auto 0;
  padding:0;background:none}
#screen-lobby .lobby-foot .btn{min-height:50px;padding:10px 18px}
@media (max-aspect-ratio:4/3) and (max-height:760px){
  .game-card.tile img{width:26px;height:26px;border-radius:8px}
  .game-card.tile b{font-size:.72rem}
  .game-card.tile .cap{display:none}
  .lobby-opts .kit small{display:none}
  .lobby-opts .kit.level small{display:block}
  .lobby-opts .kit{padding:8px 3px}
}
@media (min-aspect-ratio:4/3){
  .lobby-head .roster{order:0;flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow:auto hidden;justify-content:center;max-height:none}
  #screen-lobby .btn-copy{margin-left:0}
  .lobby-body.with-opts{grid-template-columns:minmax(200px,1fr) minmax(0,2.4fr);grid-template-rows:minmax(0,1fr);
    grid-template-areas:"opts games";column-gap:16px}
  .lobby-body:not(.with-opts){grid-template-rows:minmax(0,1fr);grid-template-areas:"games"}
  .lobby-opts{align-self:start;gap:8px}
  .game-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:560px){
  #screen-lobby{padding-top:calc(var(--safe-t) + 8px);padding-bottom:calc(var(--safe-b) + 8px)}
  #screen-lobby .lobby-head{margin-bottom:4px}
  #screen-lobby .code-display{font-size:1.45rem}
  #screen-lobby .lobby-head .tag{display:none}
  .game-card.tile img{width:28px;height:28px}
  .game-card.tile b{font-size:.72rem}
  .lobby-opts{gap:4px}
  .lobby-opts .tag{font-size:.7rem}
  .lobby-opts .kit small{display:none}
  .lobby-opts .kit.level small{display:block}
  .lobby-opts #lobby-kit-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lobby-opts .kit{padding:6px 2px}
  #screen-lobby .lobby-foot{margin-top:6px}
  #screen-lobby .lobby-foot .btn{min-height:42px}
}
@media (orientation:landscape) and (max-width:760px){
  .game-card.tile b{font-size:.66rem}
  .lobby-body.with-opts{grid-template-columns:190px minmax(0,1fr);column-gap:12px}
}
@media (max-width:520px){
  .home-head{flex-wrap:wrap}
  .home-title{flex:1 1 100%}
  .profile-btn{flex:1 1 100%}
  .profile-btn em{margin-left:auto}
}
.hud.spectating #hud-weapon,.hud.spectating #hud-respawn{display:none!important}