/* FRONTLINE — единый файл дизайна интерфейса.
   1. Токены  2. База  3. Компоненты  4. Лобби  5. Диалоги  6. Пауза и настройки
   7. Выбор точки  8. HUD  9. Сенсорное управление  10. Финал, загрузка, ошибки */

/* ---------- 1. Токены ---------- */
:root{
 --f-ui:"Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
 --c-bg:#061014;--c-bg-2:#0a181d;
 --c-panel:rgba(8,21,26,.78);--c-panel-solid:#0b1a20;--c-panel-hi:rgba(22,48,55,.55);
 --c-line:rgba(130,215,225,.14);--c-line-strong:rgba(130,215,225,.3);
 --c-text:#e8f1f1;--c-muted:#8fa6a9;--c-dim:#5b7378;
 --c-accent:#2ad8e3;--c-accent-hi:#6ff0f6;--c-accent-soft:rgba(42,216,227,.12);--c-accent-ink:#04191c;
 --c-cta:#f4c534;--c-cta-hi:#ffd85c;--c-cta-ink:#17140a;
 --c-danger:#ff5b4d;--c-danger-soft:rgba(255,91,77,.14);--c-ok:#6fe39a;--c-armor:#5fb4ff;
 --glow:0 0 0 1px rgba(42,216,227,.55),0 0 22px rgba(42,216,227,.2);
 --shadow:0 18px 60px rgba(0,0,0,.45);
 --r-sm:3px;--r-md:5px;
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
 --t-fast:.15s ease;
 --safe-top:max(10px,env(safe-area-inset-top));--safe-bottom:max(12px,env(safe-area-inset-bottom));
 --safe-left:max(14px,env(safe-area-inset-left));--safe-right:max(14px,env(safe-area-inset-right));
 color-scheme:dark;
}

/* ---------- 2. База ---------- */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--c-bg);color:var(--c-text);font:14px/1.4 var(--f-ui);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
input{user-select:text}
svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lucide-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.hidden,[hidden]{display:none!important}
#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;z-index:20}
#vignette,#hit-flash,#damage-direction{position:absolute;inset:0;pointer-events:none}
#vignette{background:radial-gradient(ellipse,transparent 65%,rgba(4,12,15,.2))}
#hit-flash{z-index:8;opacity:0;background:radial-gradient(ellipse,transparent 35%,rgba(219,53,53,.5));transition:opacity .18s}
#damage-direction{z-index:9;overflow:hidden}
/* 5.6: one compact red arc per attacker round the crosshair (JS sets rotation and fade) */
.dmg-arc{position:absolute;left:50%;top:50%;width:clamp(170px,30vmin,260px);height:clamp(170px,30vmin,260px);opacity:0;overflow:visible;will-change:transform,opacity}
.dmg-arc path{fill:none;stroke-linecap:round}
.dmg-arc .u{stroke:rgba(35,0,0,.5);stroke-width:11}
.dmg-arc .a{stroke:#ff3b30;stroke-width:6}
.dmg-arc .t{fill:#ff3b30;stroke:rgba(35,0,0,.5);stroke-width:2;stroke-linejoin:round}

/* ---------- 3. Компоненты ---------- */
.brand{font-weight:800;font-size:28px;letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap;line-height:1}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--c-text)}
.eyebrow i{font-style:normal;color:var(--c-dim);margin:0 .4em}
.eyebrow.muted,.eyebrow span{color:var(--c-muted)}
.accent-title{position:relative;margin:0;padding-left:18px;font-weight:700;letter-spacing:-.01em;line-height:1.05}
.accent-title::before{content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:4px;background:var(--c-accent);box-shadow:0 0 14px var(--c-accent)}
.panel{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r-sm);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.framed{position:relative}
.framed::after{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;--k:14px;--c:var(--c-accent);
 background:linear-gradient(var(--c),var(--c)) 0 0/var(--k) 1px,linear-gradient(var(--c),var(--c)) 0 0/1px var(--k),
 linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--k),
 linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--k),
 linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--k);background-repeat:no-repeat;opacity:.75}
/* Главная кнопка действия — всегда жёлтая. */
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 22px;background:var(--c-cta);color:var(--c-cta-ink);border-radius:var(--r-sm);font-weight:800;font-size:15px;letter-spacing:.16em;text-transform:uppercase;transition:background var(--t-fast),box-shadow var(--t-fast)}
.cta svg{width:24px;height:24px;stroke-width:2;transition:transform var(--t-fast)}
.cta:hover:not(:disabled){background:var(--c-cta-hi);box-shadow:0 0 24px rgba(244,197,52,.3)}
.cta:hover:not(:disabled) svg{transform:translateX(4px)}
.cta:active:not(:disabled){transform:translateY(1px)}
.cta:disabled{opacity:.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(4,14,17,.5);color:var(--c-text);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.btn svg{width:17px;height:17px;color:var(--c-accent)}
.btn:hover:not(:disabled){border-color:var(--c-accent);background:var(--c-accent-soft)}
.btn-ghost{width:100%;text-transform:none;letter-spacing:.02em}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 12px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(4,14,17,.55);font-size:12px;letter-spacing:.04em;color:var(--c-text);transition:border-color var(--t-fast),background var(--t-fast)}
.chip-btn svg{width:16px;height:16px;color:var(--c-accent)}
.chip-btn:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}
.chip-btn[aria-pressed=false]{color:var(--c-muted)}.chip-btn[aria-pressed=false] svg{color:var(--c-dim)}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(4,14,17,.5);color:var(--c-text);transition:border-color var(--t-fast),background var(--t-fast)}
.icon-btn:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}
.link-btn{color:var(--c-accent);font-size:12px;letter-spacing:.04em;padding:6px 2px}
.link-btn:hover{color:var(--c-accent-hi);text-decoration:underline;text-underline-offset:3px}
.field-label{display:block;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.field-help{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--c-muted)}
.field{width:100%;min-width:0;height:50px;padding:0 14px;background:rgba(3,11,14,.62);border:1px solid var(--c-line-strong);border-radius:var(--r-sm);color:var(--c-text);font-size:16px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field::placeholder{color:var(--c-dim)}
.field:hover{border-color:rgba(130,215,225,.5)}
.field:focus{outline:none;border-color:var(--c-accent);box-shadow:var(--glow)}
.field[aria-invalid=true]{border-color:var(--c-danger);box-shadow:0 0 0 1px var(--c-danger)}
.select-wrap{position:relative;display:block;min-width:0}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;font-size:15px}
.select-wrap select option{background:var(--c-panel-solid);color:var(--c-text)}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.segmented>button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:8px 10px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(3,11,14,.5);color:var(--c-muted);font-size:15px;white-space:nowrap;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.segmented>button svg{width:19px;height:19px}
.segmented>button:hover:not(:disabled){color:var(--c-text);border-color:rgba(130,215,225,.5)}
.segmented>button.chosen,.segmented>button.active{color:#fff;border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:var(--glow)}
.segmented>button.chosen svg,.segmented>button.active svg{color:var(--c-accent)}
/* Ползунок: заливка задаётся переменной --fill из settings.js. */
.range{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;touch-action:pan-x;--fill:50%}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c-accent) var(--fill),rgba(255,255,255,.14) var(--fill))}
.range::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.range::-moz-range-progress{height:4px;border-radius:2px;background:var(--c-accent)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:2px;background:#e9fbfc;border:2px solid var(--c-accent);box-shadow:0 0 10px rgba(42,216,227,.55);transform:rotate(45deg)}
.range::-moz-range-thumb{width:13px;height:13px;border-radius:2px;background:#e9fbfc;border:2px solid var(--c-accent);box-shadow:0 0 10px rgba(42,216,227,.55);transform:rotate(45deg)}
.range:focus-visible{outline:none}.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(42,216,227,.35)}
.switch{-webkit-appearance:none;appearance:none;position:relative;width:46px;height:24px;margin:0;border:1px solid var(--c-line-strong);border-radius:12px;background:rgba(3,11,14,.7);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--c-muted);transition:transform var(--t-fast),background var(--t-fast)}
.switch:checked{background:var(--c-accent-soft);border-color:var(--c-accent);box-shadow:var(--glow)}
.switch:checked::after{transform:translateX(22px);background:var(--c-accent)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:88px;padding:12px 6px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(3,11,14,.45);color:var(--c-text);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:border-color var(--t-fast),background var(--t-fast)}
.tile svg{width:26px;height:26px;color:var(--c-text)}
.tile:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}.tile:hover svg{color:var(--c-accent)}
kbd{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--c-line-strong);border-bottom-width:2px;border-radius:var(--r-sm);background:rgba(3,11,14,.8);color:#fff;font:600 12px var(--f-ui);letter-spacing:.02em;white-space:nowrap}
.menu-status{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--c-muted);overflow-wrap:anywhere}
.menu-status:empty{display:none}
.menu-status[data-kind=error]{color:#ffb4a9;padding-left:10px;border-left:2px solid var(--c-danger)}

/* ---------- 4. Лобби ---------- */
#menu{display:flex;flex-direction:column;overflow:auto;padding:0 clamp(16px,3.2vw,56px);touch-action:pan-y;isolation:isolate;background:var(--c-bg)}
#menu::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(5,14,18,.95) 0%,rgba(6,17,21,.8) 45%,rgba(6,18,22,.62) 100%),linear-gradient(0deg,rgba(5,14,18,.9),transparent 45%),url('assets/ui/lobby-scene.webp') center 55%/cover no-repeat;filter:saturate(.7) hue-rotate(-8deg)}
#menu::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background:linear-gradient(rgba(130,215,225,.05) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(130,215,225,.05) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:radial-gradient(ellipse at 40% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 40% 45%,#000 20%,transparent 75%)}
.lobby-topbar{display:flex;align-items:center;gap:clamp(20px,4vw,64px);min-height:76px;border-bottom:1px solid var(--c-line);flex:none}
.lobby-nav{display:flex;align-self:stretch;gap:clamp(4px,1.6vw,28px);min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.lobby-nav::-webkit-scrollbar{display:none}
.nav-tab{position:relative;display:flex;align-items:center;padding:0 10px;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap;transition:color var(--t-fast)}
.nav-tab:hover{color:#fff}
.nav-tab.active{color:#fff}
.nav-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-accent);box-shadow:0 0 12px var(--c-accent)}
.lobby-tools{margin-left:auto;display:flex;gap:10px;flex:none}
.lobby-layout{flex:1 0 auto;width:100%;max-width:1640px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:clamp(16px,2vw,28px);align-items:stretch;padding:clamp(16px,3vh,32px) 0}
.armory{display:flex;flex-direction:column;min-width:0;padding:22px clamp(18px,2.4vw,34px) 20px}
.armory-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tech-note{font-size:10px;line-height:1.5;letter-spacing:.14em;color:var(--c-dim);text-align:right}
.armory-main{flex:1;display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.5fr);gap:20px;align-items:center;min-height:0}
.armory-info h1{margin:14px 0 10px;font-size:clamp(46px,6vw,96px);font-weight:800;line-height:.92;letter-spacing:-.02em;color:#fff}
.armory-blurb{margin:0 0 20px;max-width:34ch;font-size:14px;line-height:1.5;color:var(--c-muted)}
.weapon-stats{display:grid;gap:12px;margin:0;max-width:340px}
.weapon-stats>div{display:grid;grid-template-columns:minmax(120px,1fr) 1.2fr 40px;align-items:center;gap:12px}
.weapon-stats dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.weapon-stats dd{display:contents}
.weapon-stats .bar{display:block;height:5px;background:rgba(255,255,255,.1);border-radius:1px;overflow:hidden}
.weapon-stats .bar i{display:block;height:100%;width:calc(var(--v,0)*100%);background:linear-gradient(90deg,#b8c9cc,#fff);transition:width .4s ease}
.weapon-stats b{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.stats-note{display:block;margin-top:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-dim)}
.armory-view{position:relative;height:100%;min-height:clamp(220px,38vh,460px);background:radial-gradient(ellipse at 50% 55%,rgba(42,216,227,.08),transparent 65%)}
#lobby-model{display:block;width:100%;height:100%;cursor:grab;touch-action:none;outline:none}
#lobby-model:active{cursor:grabbing}
#lobby-model:focus-visible{outline:1px solid var(--c-accent);outline-offset:-2px}
#model-status{position:absolute;left:0;right:0;top:50%;text-align:center;font-size:13px;color:var(--c-muted)}
#model-reset{position:absolute;right:0;bottom:0;text-transform:uppercase;letter-spacing:.14em}
.armory-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.weapon-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:72px;padding:14px 18px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(3,11,14,.5);text-align:left;transition:border-color var(--t-fast),background var(--t-fast)}
.weapon-card strong{font-size:22px;font-weight:700;color:#fff;line-height:1}
.weapon-card small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.weapon-card:hover{border-color:rgba(130,215,225,.55)}
.weapon-card.active{border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:var(--glow)}
.weapon-card.active::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:3px;background:var(--c-accent)}
.match-panel{display:flex;flex-direction:column;min-width:0;padding:24px clamp(18px,2vw,30px) 22px;border-color:var(--c-line-strong);background:linear-gradient(180deg,rgba(12,32,38,.85),rgba(7,19,24,.88))}
.match-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px}
.match-panel .accent-title{font-size:clamp(32px,3vw,44px);margin-bottom:26px}
.field-meta{display:flex;justify-content:space-between;gap:10px;margin:7px 0 20px;font-size:12px;color:var(--c-dim)}
.nickname-hint{color:var(--c-muted)}
#nickname[aria-invalid=true]~.field-meta .nickname-hint{color:#ffb4a9}
#nickname-count{font-variant-numeric:tabular-nums}
.difficulty-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin:20px 0 4px}
.difficulty-row .field-label{margin:0}
.room-row{margin:18px 0 4px}
.room-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.room-label .field-label{margin:0}
#room{font-family:ui-monospace,Consolas,monospace;font-size:20px;letter-spacing:.2em;text-transform:uppercase}
#invite-room{margin-top:8px}
.server-state{display:flex;align-items:center;gap:8px;min-height:24px;margin-top:6px;font-size:12px;color:var(--c-muted)}
.server-state i{width:7px;height:7px;border-radius:50%;background:var(--c-dim);flex:none}
.server-state[data-state=ok] i{background:var(--c-ok);box-shadow:0 0 8px var(--c-ok)}
.server-state[data-state=pending] i{background:var(--c-cta)}
.server-state[data-state=error]{color:#ffb4a9}.server-state[data-state=error] i{background:var(--c-danger)}
#retry-server{margin-left:auto}
.match-start{margin-top:auto;padding-top:22px}
.match-start .cta{width:100%;min-height:62px;font-size:17px}
.quick-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.lobby-footer{display:flex;align-items:center;gap:24px;min-height:60px;border-top:1px solid var(--c-line);flex:none}
.footer-brand{font-weight:700;font-size:15px;letter-spacing:.06em}
.footer-tags{font-size:10px;letter-spacing:.2em;color:var(--c-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.footer-tags i{font-style:normal;margin:0 .6em;color:var(--c-accent);opacity:.6}
.lobby-audio-tools{margin-left:auto;display:flex;align-items:center;gap:12px}
.menu-volume-label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--c-muted)}
#menu-volume{width:120px}

/* ---------- 5. Диалоги ---------- */
.dialog{width:min(760px,calc(100% - 24px));max-height:min(92dvh,760px);padding:0;overflow:auto;color:var(--c-text);background:linear-gradient(180deg,#0e2228,#081419);border:1px solid var(--c-line-strong);border-top:2px solid var(--c-accent);border-radius:var(--r-sm);box-shadow:var(--shadow);font-family:var(--f-ui);touch-action:pan-y}
.dialog::backdrop{background:rgba(3,9,12,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dialog-wide{width:min(980px,calc(100% - 24px))}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px 16px;border-bottom:1px solid var(--c-line)}
.dialog-heading h2{font-size:30px;margin-top:6px}
.control-tabs{padding:16px 26px 0}
.control-device{padding:16px 26px}
.key-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.key-group{padding:14px 16px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:rgba(3,11,14,.45)}
.key-group h3{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent)}
.key-group ul{list-style:none;margin:0;padding:0}
.key-group li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;border-top:1px solid var(--c-line);font-size:14px;color:var(--c-muted)}
.key-group li:first-child{border-top:0}
.key-group li>span:last-child{display:flex;gap:4px}
.key-group li b{font-weight:600;color:var(--c-text);text-align:right}
.wasd{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:38px 38px;gap:4px;justify-content:center;margin:0 0 12px}
.wasd kbd{height:auto;font-size:15px}
.wasd kbd:nth-child(1){grid-area:1/2}.wasd kbd:nth-child(2){grid-area:2/1}.wasd kbd:nth-child(3){grid-area:2/2}.wasd kbd:nth-child(4){grid-area:2/3}
.control-settings{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;padding:6px 26px 4px;border-top:1px solid var(--c-line)}
.dialog-actions{display:flex;justify-content:flex-end;padding:14px 26px 22px}
/* 5.7: the dialog body scrolls under a sticky heading (close) and a sticky Done row */
.dialog-heading{position:sticky;top:0;z-index:3;background:#0e2228}
.dialog-actions{position:sticky;bottom:0;z-index:3;background:linear-gradient(180deg,rgba(8,20,25,.82),#081419 40%);border-top:1px solid var(--c-line)}
@media (max-height:500px){.dialog-actions{padding:6px 14px 8px}.dialog-actions .cta{min-height:38px;padding:6px 16px;width:auto;min-width:160px}}
.dialog-actions .cta{min-width:220px}
.help-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:20px 26px 6px}
.help-steps li{display:flex;gap:14px;padding:16px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:rgba(3,11,14,.45)}
.help-steps li>svg{width:26px;height:26px;margin-top:1px;color:var(--c-accent);filter:drop-shadow(0 0 6px rgba(42,216,227,.45))}
.help-steps h3{margin:2px 0 8px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.help-steps p{margin:0;font-size:13.5px;line-height:1.55;color:var(--c-muted)}
.help-steps b{color:var(--c-text);font-weight:600}
.help-steps kbd{height:22px;min-width:22px;padding:0 5px;margin:0 1px;font-size:11px;vertical-align:1px}

/* ---------- 6. Пауза и настройки ---------- */
#pause{display:flex;align-items:safe center;justify-content:center;padding:max(16px,var(--safe-top)) var(--safe-right) max(16px,var(--safe-bottom)) var(--safe-left);overflow:auto;background:rgba(3,9,12,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);touch-action:pan-y;z-index:25}
.pause-card{display:grid;grid-template-columns:minmax(0,300px);width:auto;max-width:100%;margin:auto;padding:0;background:linear-gradient(180deg,#0e2228,#081419);border-color:var(--c-line-strong);border-top:2px solid var(--c-accent)}
.pause-card.show-settings,#pause.menu-mode .pause-card{grid-template-columns:280px minmax(0,560px)}
.pause-rail{display:flex;flex-direction:column;gap:20px;padding:24px}
.pause-heading h2{font-size:34px;margin-top:8px}
#pause-note{margin:10px 0 0;font-size:13px;color:var(--c-muted)}
.pause-nav{display:grid;gap:8px}
.pause-nav .cta{min-height:54px}
.rail-btn{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:rgba(3,11,14,.45);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:left;transition:border-color var(--t-fast),background var(--t-fast)}
.rail-btn svg{width:18px;height:18px;color:var(--c-accent)}
.rail-btn:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}
.rail-btn[aria-expanded=true]{border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:var(--glow)}
.rail-btn.danger{margin-top:8px;color:#ffc9c1;border-color:rgba(255,91,77,.3)}
.rail-btn.danger svg{color:var(--c-danger)}
.rail-btn.danger:hover{background:var(--c-danger-soft);border-color:var(--c-danger)}
.pause-saved{margin-top:auto;font-size:11px;letter-spacing:.06em;color:var(--c-dim)}
.pause-main{display:none;min-width:0;padding:18px 26px 24px;border-left:1px solid var(--c-line)}
.pause-card.show-settings .pause-main,#pause.menu-mode .pause-main{display:block}
#pause.menu-mode #leave,#pause.menu-mode #pause-settings{display:none}
.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--c-line)}
.settings-tabs button{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;color:var(--c-muted);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.settings-tabs button svg{width:17px;height:17px}
.settings-tabs button:hover{color:#fff}
.settings-tabs button.active{color:#fff}.settings-tabs button.active svg{color:var(--c-accent)}
.settings-tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-accent);box-shadow:0 0 10px var(--c-accent)}
.settings-body{padding-top:6px;min-height:300px}
.setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,220px) 48px;align-items:center;gap:14px;min-height:56px;margin:0;border-bottom:1px solid var(--c-line);font-size:15px;color:var(--c-text)}
.setting output{text-align:right;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--c-accent)}
.setting .select-wrap,.setting>.btn{grid-column:2/4}
.setting .select-wrap .field{height:42px;font-size:14px}
.setting-check .switch{grid-column:2/4;justify-self:end}
.setting>.btn{justify-self:end}
.settings-help{margin:16px 0 0;font-size:13px;color:var(--c-muted)}
@media (pointer:fine){.touch-only{display:none!important}}
@media (pointer:coarse){.desktop-only{display:none!important}}

/* ---------- 7. Выбор точки появления ---------- */
.spawn-screen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;gap:14px;padding:calc(var(--safe-top) + 6px) var(--safe-right) var(--safe-bottom) var(--safe-left);color:var(--c-text);touch-action:none;background:linear-gradient(rgba(130,215,225,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(130,215,225,.04) 1px,transparent 1px) 0 0/48px 48px,radial-gradient(120% 90% at 30% 0%,#10252c 0%,var(--c-bg) 70%)}
.spawn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex:none}
.spawn-head h2{margin-top:8px;font-size:clamp(22px,2.6vw,34px);text-transform:uppercase}
.spawn-timer{display:flex;flex-direction:column;align-items:flex-end;min-width:110px;padding:8px 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:var(--c-panel)}
.spawn-timer small{font-size:10px;letter-spacing:.18em;color:var(--c-muted)}
.spawn-timer strong{font-size:clamp(26px,3vw,38px);line-height:1;font-variant-numeric:tabular-nums;color:var(--c-cta)}
.spawn-body{flex:1;min-height:0;display:flex;gap:16px}
.spawn-map-wrap{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.spawn-map-wrap.framed::after{display:none}
.spawn-map-wrap{position:relative}
#spawn-map{display:block;border:1px solid rgba(130,215,225,.34);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 6px rgba(42,216,227,.05),0 0 40px rgba(42,216,227,.08);cursor:crosshair;touch-action:none;background:#0d3a52}
.spawn-screen.locked #spawn-map{cursor:default}
.spawn-toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);max-width:88%;padding:10px 18px;border:1px solid var(--c-line-strong);border-left:3px solid var(--c-accent);border-radius:6px;background:rgba(6,16,20,.94);box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:14px;font-weight:600;text-align:center;pointer-events:none}
.spawn-toast.error{border-left-color:var(--c-danger);color:#ffd2cc}
.spawn-side{flex:0 0 330px;display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto;padding:18px;border-radius:10px;background:linear-gradient(180deg,rgba(12,30,36,.86),rgba(6,16,20,.9))}
.spawn-card{position:relative;padding:14px 16px 14px 18px;border:1px solid var(--c-line);border-radius:8px;background:linear-gradient(135deg,rgba(42,216,227,.08),rgba(3,11,14,.55) 60%);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.spawn-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-accent)}
.spawn-card.picked{border-color:rgba(244,197,52,.45);box-shadow:inset 0 0 0 1px rgba(244,197,52,.12)}
.spawn-card.picked::before{background:var(--c-cta)}
.spawn-card-head{display:flex;align-items:center;justify-content:space-between}
.spawn-card-head small,.spawn-sub{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--c-muted)}
.spawn-card-head svg{width:18px;height:18px;color:var(--c-muted);fill:none;stroke:currentColor;stroke-width:2}
.spawn-card.picked .spawn-card-head svg{color:var(--c-cta)}
.spawn-card-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:6px 0 8px}
.spawn-card strong{font-size:44px;line-height:1;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.spawn-area{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.spawn-card.picked .spawn-area{color:var(--c-cta)}
.spawn-card p{margin:0;font-size:12.5px;line-height:1.4;color:var(--c-muted)}
.spawn-legend-block{display:grid;gap:10px}
.spawn-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;font-size:12.5px;color:#b7c7c9}
.spawn-legend li{display:flex;align-items:center;gap:9px;min-width:0}
.spawn-legend i{width:18px;height:13px;border-radius:3px;flex:none}
.lg-ok{background:linear-gradient(135deg,#86a662,#6f9150);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.lg-house{background:linear-gradient(#cf7b55 50%,#a85d40 50%);outline:1.5px dashed rgba(255,96,80,.8);outline-offset:1px}
.lg-cliff{background:repeating-linear-gradient(135deg,rgba(235,78,62,.55) 0 3px,rgba(255,140,120,.3) 3px 5px)}
.lg-zone{background:none;border:1.5px dashed #e2f2fb;border-radius:50%}
.lg-road{background:linear-gradient(transparent 3px,#e4dfd2 3px,#e4dfd2 10px,transparent 10px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.lg-wood{background:radial-gradient(circle at 35% 40%,#4f8a45 0 3px,transparent 4px),radial-gradient(circle at 70% 60%,#2e5b2f 0 5px,transparent 6px),#6f9150}
.spawn-rules{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--c-line);display:grid;gap:9px;font-size:12.5px;line-height:1.45;color:var(--c-muted)}
.spawn-rules li{display:flex;gap:10px;align-items:flex-start}
.spawn-rules svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--c-accent);fill:none;stroke:currentColor;stroke-width:2}
.spawn-players{margin:0;font-size:13px;font-weight:600;color:var(--c-text)}
.spawn-players:empty{display:none}
.spawn-actions{display:grid;gap:10px;margin-top:auto}
.spawn-go{min-height:60px;font-size:16px;letter-spacing:.18em;box-shadow:0 10px 28px rgba(244,197,52,.2)}
.spawn-go:not(:disabled){animation:spawn-go-glow 2.4s ease-in-out infinite}
.spawn-go kbd{font:600 11px/1 inherit;letter-spacing:.06em;padding:5px 7px;border:1px solid rgba(23,20,10,.35);border-radius:4px;background:rgba(23,20,10,.08)}
.spawn-go:disabled{opacity:1;background:rgba(244,197,52,.12);color:rgba(244,197,52,.55);box-shadow:none;outline:1px solid rgba(244,197,52,.25);outline-offset:-1px}
.spawn-go:disabled kbd{border-color:rgba(244,197,52,.25)}
@keyframes spawn-go-glow{0%,100%{box-shadow:0 10px 28px rgba(244,197,52,.18)}50%{box-shadow:0 10px 34px rgba(244,197,52,.42)}}
@media (prefers-reduced-motion:reduce){.spawn-go:not(:disabled){animation:none}}
.spawn-random{min-height:46px;letter-spacing:.12em}
.spawn-leave{align-self:center;color:var(--c-muted)}
@media (pointer:coarse){.pointer-only{display:none}}
@media (max-width:760px) and (orientation:portrait){
 .spawn-body{flex-direction:column}.spawn-map-wrap{flex:none;height:min(100vw - 28px,56vh)}
 .spawn-side{flex:1 1 auto;padding:14px}.spawn-rules{display:none}.spawn-legend{grid-template-columns:1fr 1fr 1fr}
}
@media (max-height:560px) and (orientation:landscape){
 .spawn-screen{gap:4px}.spawn-head h2{font-size:15px;margin-top:0}.spawn-head .eyebrow{display:none}
 .spawn-timer{padding:4px 10px;min-width:90px}.spawn-timer strong{font-size:24px}
 .spawn-body{gap:10px}
 .spawn-side{flex-basis:236px;gap:8px;padding:10px}.spawn-card{padding:8px 12px 8px 14px}.spawn-card-main{margin:2px 0}.spawn-card strong{font-size:28px}.spawn-card p{display:none}
 .spawn-legend-block,.spawn-rules{display:none}.spawn-go{min-height:46px;font-size:13px;letter-spacing:.1em}.spawn-random{min-height:38px;font-size:11px}
}

/* ---------- 8. HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;color:var(--c-text);text-shadow:0 1px 2px rgba(0,0,0,.7)}
#hud button{pointer-events:auto}
#hud kbd{position:absolute;right:2px;top:2px;height:auto;min-width:0;padding:0 2px;border:0;background:none;font-size:9px;color:var(--c-muted);text-shadow:none}
.hud-chip{background:rgba(5,15,19,.62);border:1px solid var(--c-line)}
.hud-counters{position:absolute;top:var(--safe-top);right:var(--safe-right);display:flex;gap:4px;z-index:5}
.hud-counter{display:flex;align-items:center;gap:8px;padding:5px 12px;background:rgba(5,15,19,.62);border:1px solid var(--c-line);border-top:2px solid var(--c-accent)}
.hud-counter strong{font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.hud-counter small{max-width:5em;font-size:9px;line-height:1.15;letter-spacing:.14em;color:var(--c-muted)}
.hud-icon{display:grid;place-items:center;width:42px;background:rgba(5,15,19,.62);border:1px solid var(--c-line);border-top:2px solid var(--c-line-strong);color:#fff;transition:background var(--t-fast),border-color var(--t-fast)}
.hud-icon:hover,.hud-icon:focus-visible{background:var(--c-accent-soft);border-color:var(--c-accent)}
.hud-compass{position:absolute;top:var(--safe-top);left:50%;transform:translateX(-50%);width:min(520px,44vw);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:4}
#compass{display:block;width:100%;height:48px}
.hud-zone{display:flex;align-items:baseline;gap:8px;padding:3px 12px;background:rgba(5,15,19,.62);border:1px solid var(--c-line);font-size:9px;letter-spacing:.16em;color:var(--c-muted)}
.hud-zone strong{font-size:15px;letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums}
.zone-guide{display:flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid rgba(42,216,227,.4);background:rgba(6,40,46,.8);color:#c9f7fa;font-size:12px;font-weight:600;letter-spacing:.06em}
.zone-guide.danger{border-color:rgba(255,91,77,.6);background:rgba(90,24,18,.85);color:#ffe0d8}
.zone-guide svg{width:15px;height:15px}
.phase-banner{position:absolute;top:calc(var(--safe-top) + 112px);left:50%;transform:translateX(-50%);max-width:80vw;padding:9px 28px;background:linear-gradient(90deg,transparent,rgba(5,15,19,.82) 16%,rgba(5,15,19,.82) 84%,transparent);border-top:1px solid rgba(42,216,227,.35);border-bottom:1px solid rgba(42,216,227,.35);font-size:15px;font-weight:700;letter-spacing:.12em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:4}
.kill-feed{position:absolute;top:calc(var(--safe-top) + 50px);right:var(--safe-right);display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:320px;z-index:4}
.feed-line{padding:4px 10px;background:linear-gradient(90deg,transparent,rgba(5,15,19,.75) 20%);border-right:2px solid var(--c-accent);font-size:12px;color:var(--c-text)}
.feed-line b{color:var(--c-accent-hi)}
.minimap-box{position:absolute;right:var(--safe-right);bottom:var(--safe-bottom);width:210px;height:210px;background:#0c1d22;border:1px solid var(--c-line-strong);box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:4}
.minimap-box::after{content:"";position:absolute;inset:-4px;pointer-events:none;--k:12px;--c:var(--c-accent);background:linear-gradient(var(--c),var(--c)) 0 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 0/2px var(--k),linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px var(--k),linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px var(--k),linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px var(--k);background-repeat:no-repeat;opacity:.8}
#minimap{display:block;width:100%;height:100%}
.map-cell{position:absolute;left:0;top:0;padding:2px 8px;background:rgba(5,15,19,.8);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--c-accent-hi)}
.bottom-hud{position:absolute;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%);width:min(420px,calc(100vw - 2*var(--safe-right) - 470px));display:flex;flex-direction:column;align-items:stretch;gap:6px;z-index:4}
.weapon-panel{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 0 6px}
.weapon-head{display:flex;flex-direction:column;min-width:0}
#weapon-name{font-size:16px;font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#weapon-type{font-size:10px;letter-spacing:.16em;color:var(--c-accent)}
.ammo-line{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.ammo-line strong{font-size:36px;font-weight:700;line-height:.9}
.ammo-line span{font-size:15px;color:var(--c-muted)}
#hud.low-ammo .ammo-line strong{color:#ff8a6c}
#hud.unarmed .ammo-line{opacity:.45}
.reload-track{position:absolute;left:0;right:0;bottom:0;height:2px}
#hud.reloading .reload-track{background:rgba(255,255,255,.18)}
#reload-fill{display:block;height:100%;width:0;background:var(--c-accent);box-shadow:0 0 8px var(--c-accent);transition:width .1s linear}
.vitals{display:flex;flex-direction:column;gap:5px}
.protection{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:4px 14px;background:rgba(6,40,46,.82);border:1px solid rgba(42,216,227,.55);color:#dffcff;font-size:12px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.protection:empty{display:none}
.armor-row,.health-row{display:flex;align-items:center;gap:7px}
.armor-row svg{width:13px;height:13px;color:var(--c-armor)}
.health-row svg{width:14px;height:14px;color:#fff}
.armor-track{flex:1;height:5px;background:rgba(255,255,255,.14);transform:skewX(-20deg)}
#armor-fill{display:block;height:100%;width:0;background:var(--c-armor);transition:width .15s}
#armor-label,#hp-label{min-width:3ch;font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
#armor-label{color:#cfe6ff}
.health-track{position:relative;flex:1;height:14px;background:rgba(5,15,19,.62);border:1px solid rgba(255,255,255,.35);overflow:hidden;transform:skewX(-20deg)}
#health-fill{height:100%;width:100%;background:linear-gradient(90deg,#d6f7f9,#fff);transition:width .15s,background .2s}
#hud.low-hp #health-fill{background:var(--c-danger)}
#hud.low-hp #hp-label{color:#ff8a7c}
.quick-actions{position:absolute;right:calc(100% + 18px);bottom:0;display:flex;gap:5px}
.quick-actions button{position:relative;display:grid;place-items:center;width:46px;height:46px;background:rgba(5,15,19,.62);border:1px solid var(--c-line-strong);color:#fff;transition:border-color var(--t-fast),background var(--t-fast)}
.quick-actions button:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}
.quick-actions svg{width:20px;height:20px}
#med-count{position:absolute;left:4px;bottom:1px;font-size:11px;font-weight:700;color:var(--c-cta)}
.interaction{position:absolute;left:calc(50% + 60px);top:calc(50% + 36px);display:flex;align-items:center;gap:8px;max-width:min(440px,44vw);padding:6px 6px 6px 12px;background:rgba(5,15,19,.82);border:1px solid var(--c-line);border-left:3px solid var(--c-accent);font-size:13px;z-index:5}
#pickup-label{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.interaction button{min-height:38px;padding:8px 12px;border-radius:var(--r-sm);background:var(--c-cta);color:var(--c-cta-ink)!important;font-weight:800;font-size:12px;letter-spacing:.08em;text-shadow:none}
.interaction #door-btn{background:#e2f3f4}
.fps-meter{position:absolute;left:var(--safe-left);top:var(--safe-top);padding:3px 8px;background:rgba(5,15,19,.7);border:1px solid var(--c-line);font:600 12px ui-monospace,Consolas,monospace;color:var(--c-ok);z-index:6}
.rotate-hint{display:none}
/* Прицел и попадания */
.reticle{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none}
.reticle span{position:absolute;background:#f2fbfb;box-shadow:0 0 2px #000}
.reticle span:nth-child(1),.reticle span:nth-child(2){width:2px;height:6px;left:12px}.reticle span:nth-child(1){top:0}.reticle span:nth-child(2){bottom:0}
.reticle span:nth-child(3),.reticle span:nth-child(4){height:2px;width:6px;top:12px}.reticle span:nth-child(3){left:0}.reticle span:nth-child(4){right:0}
.reticle i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:2px;background:var(--c-accent-hi);border-radius:50%}
#hud.is-aiming .reticle,#hud.unarmed .reticle{display:none}
#hud.tps-aim .reticle{transform:translate(-50%,-50%) scale(.72)} /* third-person aim: a tighter crosshair */
/* Bandage use ring (PUBG-like): fills clockwise, seconds left inside */
.use-ring{position:absolute;left:50%;top:calc(50% + 78px);width:74px;height:74px;transform:translateX(-50%);z-index:6;pointer-events:none;display:grid;place-items:center;align-content:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.use-ring.hidden{display:none}
.use-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.use-ring circle{fill:none;stroke-width:3.2}
.use-ring .track{stroke:rgba(10,20,24,.45);fill:rgba(10,20,24,.28)}
.use-ring .arc{stroke:#f2f5f0;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.use-ring b{position:relative;font:700 17px/1 var(--f-display,system-ui),system-ui;letter-spacing:.02em}
.use-ring small{position:relative;font:600 8px/1.3 system-ui;letter-spacing:.14em;opacity:.85}
@media (pointer:coarse){.use-ring{top:calc(50% + 56px);width:62px;height:62px}.use-ring b{font-size:15px}}
/* Hit feedback (4.12): compact ticks that snap in; body white, armour blue, head gold, kill red + ring. */
.hit-marker{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);z-index:6;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.hit-marker span{position:absolute;left:50%;top:50%;width:9px;height:2.5px;margin:-1.25px 0 0 -4.5px;background:#fff;border-radius:2px;transform:rotate(var(--a)) translateX(10px)}
.hit-marker span:nth-child(1){--a:-135deg}.hit-marker span:nth-child(2){--a:-45deg}.hit-marker span:nth-child(3){--a:135deg}.hit-marker span:nth-child(4){--a:45deg}
.hit-marker.armor span{background:#7cc6ff}
.hit-marker.headshot span{background:#ffd23f;width:11px;height:3px;margin-left:-5.5px}
.hit-marker.kill span{background:#ff4b3e;width:13px;height:3.5px;margin:-1.75px 0 0 -6.5px}
.hit-marker.impact{animation:hm-pop .24s cubic-bezier(.2,.9,.3,1.25)}
.hit-marker.kill::after{content:"";position:absolute;inset:-5px;border:2px solid rgba(255,75,62,.85);border-radius:50%;animation:hm-ring .4s ease-out forwards}
@keyframes hm-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}40%{opacity:1;transform:translate(-50%,-50%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hm-ring{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.6);opacity:0}}
.hit-damage{display:none}
/* Kill confirmation (FRONTLINE tag): small, right of and below the crosshair, slides in and fades. */
.kill-confirm{position:absolute;left:calc(50% + 46px);top:calc(50% + 30px);z-index:8;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 9px;opacity:0;pointer-events:none;white-space:nowrap;font-family:var(--f-ui);
 background:linear-gradient(90deg,rgba(4,20,24,.84),rgba(4,20,24,.3));border-left:2px solid var(--c-accent);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.kill-confirm i{flex:none;width:8px;height:8px;border:2px solid var(--c-accent-hi);transform:rotate(45deg)}
.kill-confirm small{display:block;font:700 9px/1 var(--f-ui);letter-spacing:.24em;color:var(--c-accent-hi)}
.kill-confirm b{display:block;margin-top:3px;max-width:180px;overflow:hidden;text-overflow:ellipsis;font:700 14px/1 var(--f-ui);letter-spacing:.03em;color:#fff}
.kill-confirm em{padding-left:8px;border-left:1px solid rgba(255,255,255,.18);font:800 13px/1 var(--f-ui);font-style:normal;color:#ffc53d}
.kill-confirm.head{border-left-color:#ffc53d}.kill-confirm.head i{border-color:#ffc53d}.kill-confirm.head small{color:#ffc53d}
.kill-confirm.show{animation:kc-in 2.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes kc-in{0%{opacity:0;transform:translateX(-10px)}8%{opacity:1;transform:translateX(0)}82%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(6px)}}
@media (pointer:coarse){.kill-confirm{left:calc(50% + 34px);top:calc(50% + 24px);padding:4px 12px 4px 8px}.kill-confirm b{font-size:12px}}
.scope-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
.scope-lens{position:relative;flex:none}
.scope-overlay:not(.optic) .scope-lens{width:66px;height:66px;border:2px solid #1c2a2c;border-radius:12px 12px 18px 18px;background:rgba(169,204,200,.03);box-shadow:0 0 0 2px rgba(180,200,200,.25)}
.scope-overlay:not(.optic) .scope-lens i{position:absolute;left:50%;top:50%;width:3px;height:3px;transform:translate(-50%,-50%);border-radius:50%;background:#fa473b;box-shadow:0 0 4px #ff463a}
.scope-overlay.optic .scope-lens{width:min(78vh,82vw);height:min(78vh,82vw);border:9px solid #111617;border-radius:50%;box-shadow:0 0 0 100vmax rgba(4,8,9,.94),inset 0 0 25px rgba(0,0,0,.45)}
.scope-overlay.optic .scope-lens::before,.scope-overlay.optic .scope-lens::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#131818}
.scope-overlay.optic .scope-lens::before{width:100%;height:1px}.scope-overlay.optic .scope-lens::after{width:1px;height:100%}
.scope-overlay.optic .scope-lens i{position:absolute;left:50%;top:50%;width:3px;height:3px;transform:translate(-50%,-50%);border-radius:50%;background:#bf4031;z-index:1}
#hud[data-phase='plane'] .scope-overlay,#hud[data-phase='drop'] .scope-overlay{display:none!important}
/* Контейнер добычи с погибшего */
.death-loot{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,90vw);max-height:70dvh;overflow:auto;padding:20px;background:linear-gradient(180deg,#0e2228,#081419);border:1px solid var(--c-line-strong);border-top:2px solid var(--c-accent);box-shadow:var(--shadow);color:var(--c-text);pointer-events:auto;font-family:var(--f-ui)}
.death-loot strong{display:block;margin-bottom:12px;font-size:16px;letter-spacing:.06em;overflow-wrap:anywhere}
.death-loot button{display:block;width:100%;min-height:48px;margin-top:8px;padding:10px 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(3,11,14,.5);text-align:left;font-weight:600}
.death-loot button:hover:not(:disabled){border-color:var(--c-accent);background:var(--c-accent-soft)}
.death-loot>button:last-child{background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink);text-align:center;font-weight:800;letter-spacing:.1em}

/* ---------- 9. Сенсорное управление ---------- */
#mobile-controls{position:absolute;inset:0;pointer-events:none;z-index:9;--control-scale:1}
@media (pointer:coarse){
 .minimap-box{top:var(--safe-top);left:var(--safe-left);right:auto;bottom:auto;width:116px;height:116px}
 /* small FPS · ping line on the top edge, between the minimap and the compass */
 .fps-meter{top:var(--safe-top);left:calc(var(--safe-left) + 124px);padding:1px 5px;font-size:10px;line-height:1.25;background:rgba(5,15,19,.45);border:0;pointer-events:none;white-space:pre}
 .hud-compass{width:min(360px,40vw)}#compass{height:40px}
 .hud-zone small{font-size:8px;letter-spacing:.08em}.hud-zone strong{font-size:13px}
 .hud-counter{padding:3px 8px;gap:5px}.hud-counter strong{font-size:18px}.hud-counter small{font-size:8px}
 .hud-icon{width:42px;min-height:42px}
 .kill-feed{max-width:200px;top:calc(var(--safe-top) + 46px)}.feed-line{font-size:10px;padding:3px 8px}
 .phase-banner{top:calc(var(--safe-top) + 80px);font-size:12px;padding:6px 18px}
 .bottom-hud{width:min(300px,34vw);bottom:max(8px,var(--safe-bottom))}
 .ammo-line strong{font-size:26px}.ammo-line span{font-size:12px}#weapon-name{font-size:12px}#weapon-type{font-size:8px}
 .quick-actions,#hud kbd{display:none}
 .interaction{left:50%;top:auto;bottom:calc(var(--safe-bottom) + 96px);transform:translateX(-50%);max-width:46vw;font-size:11px}
 .interaction button{min-height:44px}
 .protection{font-size:10px;padding:3px 9px}
}
@media (pointer:coarse) and (max-height:420px){
 .minimap-box{width:100px;height:100px}.fps-meter{left:calc(var(--safe-left) + 108px)}
}
@media (pointer:coarse) and (orientation:portrait){
 #hud .rotate-hint{display:flex;position:absolute;inset:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(4,10,13,.95);font-size:17px;font-weight:700;letter-spacing:.06em;text-align:center}
 #hud .rotate-hint svg{width:44px;height:44px;color:var(--c-accent);animation:rotate-hint 1.8s ease-in-out infinite}
 #mobile-controls{display:none}
}
@keyframes rotate-hint{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* ---------- 10. Финал, загрузка, ошибки ---------- */
#end{display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:24px var(--safe-right) 24px var(--safe-left);touch-action:pan-y;background:linear-gradient(rgba(130,215,225,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(130,215,225,.035) 1px,transparent 1px) 0 0/56px 56px,radial-gradient(90% 80% at 50% 30%,rgba(14,34,40,.94),rgba(4,9,12,.97))}
.end-panel{width:min(500px,100%);margin:auto;padding:30px;text-align:center;background:linear-gradient(180deg,#0e2228,#081419);border-top:2px solid var(--c-accent)}
#end-kicker{color:var(--c-accent)}
#end h2{margin:14px 0 10px;font-size:clamp(32px,5vw,56px);line-height:1.02;letter-spacing:.02em;text-transform:uppercase}
#end p{margin:0;font-size:14px;line-height:1.5;color:var(--c-muted)}
.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.end-stats span{padding:14px;border:1px solid var(--c-line);background:rgba(3,11,14,.5);font-size:11px;letter-spacing:.16em;color:var(--c-muted)}
.end-stats strong{display:block;margin-top:6px;font-size:34px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0}
.end-panel .cta{width:100%}
.loading{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(ellipse at 50% 45%,#0e2228,var(--c-bg) 70%);font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--c-muted)}
.brand-lg{font-size:52px}
.loader-line{width:220px;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.loader-line span{display:block;width:45%;height:100%;background:var(--c-accent);box-shadow:0 0 10px var(--c-accent);animation:loading 1.4s infinite}
@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(230%)}}
.startup-error{position:absolute;z-index:120;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,90vw);max-height:80dvh;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--c-danger);background:var(--c-panel-solid)}
.startup-error strong{font-size:22px}
.startup-error small{font-size:12px;color:#ffc9a3;overflow-wrap:anywhere}
.startup-error p{margin:0;font-size:13px;color:var(--c-muted)}

/* ---------- Адаптивность лобби и окон ---------- */
@media (max-width:1180px){
 .armory-main{grid-template-columns:1fr;gap:6px}
 .armory-info h1{font-size:clamp(40px,5vw,64px);margin:10px 0 6px}
 .armory-blurb{display:none}
 .weapon-stats{max-width:none;grid-template-columns:1fr 1fr;column-gap:24px}
 .armory-view{min-height:220px;height:30vh}
 .help-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
 .lobby-layout{display:flex;flex-direction:column}
 .match-panel{order:-1}
 .footer-tags{display:none}
 .lobby-topbar{gap:16px}.nav-tab{font-size:13px;padding:0 6px;letter-spacing:.06em}
 .key-groups{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 #menu{padding:0 max(14px,env(safe-area-inset-left)) 10px}
 .lobby-topbar{flex-wrap:wrap;gap:0 12px;min-height:0;padding-top:12px}
 .brand{font-size:24px}
 .lobby-nav{order:3;flex:1 0 100%;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:0;height:46px}
 .nav-tab{font-size:11.5px;padding:0 4px;letter-spacing:.05em}
 .match-panel{padding:18px 16px}
 .match-panel .accent-title{font-size:30px;margin-bottom:20px}
 .match-start .cta{min-height:56px;font-size:15px}
 .quick-tiles{gap:6px}.tile{min-height:72px;font-size:10px;letter-spacing:.08em}
 .armory{padding:16px}.tech-note{display:none}
 .weapon-stats{grid-template-columns:1fr}.weapon-stats>div{grid-template-columns:130px 1fr 40px}
 .armory-view{min-height:170px;height:190px}
 .armory-selector{gap:6px}.weapon-card{padding:10px;min-height:60px}.weapon-card strong{font-size:17px}.weapon-card small{font-size:9px;letter-spacing:.06em}
 .lobby-footer{flex-wrap:wrap;gap:8px;padding:10px 0}
 .lobby-audio-tools{margin-left:0;flex-wrap:wrap}
 .chip-btn span,.menu-volume-label span{display:none}
 .dialog-heading{padding:16px}.dialog-heading h2{font-size:24px}
 .control-tabs,.control-device,.help-steps{padding-left:16px;padding-right:16px}
 .key-groups,.help-steps,.control-settings{grid-template-columns:1fr}
 .control-settings{padding:6px 16px}
 .dialog-actions{padding:12px 16px 16px}.dialog-actions .cta{width:100%}
 .pause-card.show-settings,#pause.menu-mode .pause-card{grid-template-columns:minmax(0,1fr)}
 .pause-card{width:100%}
 .pause-main{border-left:0;border-top:1px solid var(--c-line);padding:12px 16px 18px}
 .pause-rail{padding:18px 16px}
 .settings-tabs button{flex:1;justify-content:center;padding:0 4px;font-size:12px;letter-spacing:.06em}
 .setting{grid-template-columns:minmax(0,1fr) minmax(90px,1fr) 42px;gap:8px;font-size:14px}
 .end-panel{padding:20px 16px}
 #menu input,#menu select{font-size:16px}
}
/* Горизонтальный телефон и низкие экраны */
@media (max-height:600px) and (min-width:641px){
 .lobby-topbar{min-height:54px}.brand{font-size:22px}.nav-tab{font-size:12px}
 .lobby-layout{padding:12px 0}
 .armory-info h1{font-size:40px}.armory-view{min-height:170px;height:180px}
 .weapon-stats{gap:6px}.weapon-card{min-height:52px;padding:8px 12px}.weapon-card strong{font-size:17px}
 .match-panel{padding:16px 18px}.match-top{margin-bottom:8px}.match-panel .accent-title{font-size:28px;margin-bottom:14px}
 .field{height:42px}.segmented>button{min-height:42px}.field-meta{margin-bottom:10px}
 .match-start{padding-top:12px}.match-start .cta{min-height:50px}
 .tile{min-height:56px;flex-direction:row;gap:8px}.tile svg{width:20px;height:20px}
 .lobby-footer{min-height:44px}
 .dialog-heading{padding:12px 20px}.help-steps{padding-top:12px}.help-steps li{padding:10px 12px}
 .pause-rail{gap:12px;padding:16px}.pause-heading h2{font-size:26px}#pause-note{display:none}
 .rail-btn{min-height:42px}.pause-nav .cta{min-height:46px}
 .settings-body{min-height:0}.setting{min-height:46px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (max-height:880px) and (min-width:641px){
 .lobby-topbar{min-height:64px}
 .lobby-layout{padding:14px 0}
 .armory{padding-top:18px;padding-bottom:16px}
 .armory-view{min-height:200px}
 .match-panel{padding-top:18px;padding-bottom:18px}.match-top{margin-bottom:12px}
 .match-panel .accent-title{margin-bottom:18px}.field-meta{margin-bottom:14px}
 .difficulty-row{margin-top:14px}.match-start{padding-top:16px}
 .tile{min-height:74px}
 .lobby-footer{min-height:52px}
}
.help-steps p{line-height:1.75}
.control-settings .setting{grid-template-columns:auto minmax(80px,1fr) 44px;white-space:nowrap}

/* ---------- Цифры урона: всплывают у цели, летят по дуге, складываются по одной цели ---------- */
.dmg-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}
.dmg-pop{position:absolute;left:0;top:0;font:800 19px/1 var(--f-ui);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff;white-space:nowrap;will-change:transform,opacity;
 text-shadow:0 1px 0 rgba(4,12,15,.95),1px 0 0 rgba(4,12,15,.8),-1px 0 0 rgba(4,12,15,.8),0 2px 6px rgba(0,0,0,.45)}
.dmg-pop.armor{color:#8fd3ff}
.dmg-pop.head{color:#ffc53d;font-size:21px}
.dmg-pop.head::before{content:"";display:inline-block;width:.3em;height:.3em;margin-right:.24em;vertical-align:.16em;border:2px solid currentColor;transform:rotate(45deg)}
.dmg-pop.kill{color:#ff7a66;font-size:21px}
@media (pointer:coarse){.dmg-pop{font-size:16px}.dmg-pop.head,.dmg-pop.kill{font-size:18px}}

/* ---------- Итоги матча, наблюдатель, прицел (4.3) ---------- */
#end{opacity:0;transition:opacity .6s ease}
#end.show{opacity:1}
#end .end-panel{transform:translateY(14px) scale(.98);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#end.show .end-panel{transform:none}
/* 5.7 victory: the scene stays visible, the results sit on the right beside the winner */
#end.victory{justify-content:flex-end;background:linear-gradient(90deg,transparent 30%,rgba(4,12,15,.5))}
#end.victory .end-panel{margin:auto max(4vw,var(--safe-right)) auto auto;width:min(460px,54%)}
.end-stats{grid-template-columns:repeat(4,1fr)}
.end-stats strong b{font:inherit}
.end-stats strong small{display:block;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--c-muted)}
.end-actions{display:grid;gap:8px}
.end-actions .btn{min-height:48px}
@media (max-width:640px){.end-stats{grid-template-columns:1fr 1fr}}
.spectator{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 12px);transform:translateX(-50%);z-index:26;display:flex;align-items:center;gap:18px;padding:12px 16px;border-top:2px solid var(--c-accent)}
.spec-info{display:flex;flex-direction:column;min-width:150px}
.spec-info strong{font-size:22px;line-height:1.1;margin:2px 0}
.spec-info small{font-size:11px;letter-spacing:.14em;color:var(--c-muted)}
.spec-actions{display:flex;gap:6px}
.spec-actions .btn{min-height:42px;padding:0 14px}
#hud.spectating .bottom-hud,#hud.spectating .reticle,#hud.spectating .interaction,#hud.spectating .hud-zone,#hud.spectating #settings-btn{display:none!important}
/* Sight hint: a small contextual chip beside the ammo count (only when T can switch something). */
.sight-chip{align-self:center;margin-left:10px;display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 3px;border:1px solid var(--c-line-strong);border-radius:3px;background:rgba(5,15,19,.62);color:var(--c-muted)!important;font-size:10px;font-weight:700;letter-spacing:.1em;text-shadow:none;white-space:nowrap;animation:chip-in .25s ease-out}
.sight-chip b{font:inherit;letter-spacing:inherit}
#hud .sight-chip kbd{position:static;display:inline-block;min-width:0;height:auto;border:0;padding:1px 5px;border-radius:2px;background:var(--c-accent);color:var(--c-accent-ink);font:800 9px/1.3 var(--f-ui);letter-spacing:0}
@keyframes chip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sight-chip.has-optic{border-color:var(--c-accent);color:var(--c-accent-hi)!important}
#vignette{transition:background .6s}
/* Blue zone: storm veil (opacity follows --storm), breathing edge glow, a pulse on each damage tick */
#zone-fx{position:absolute;inset:0;pointer-events:none;opacity:var(--storm,0);
 background:radial-gradient(ellipse at center,transparent 36%,rgba(40,80,230,.16) 68%,rgba(24,50,200,.5) 100%),linear-gradient(180deg,rgba(70,110,255,.14),transparent 28%,transparent 72%,rgba(70,110,255,.16))}
#zone-fx::before,#zone-fx::after{content:'';position:absolute;inset:0}
#zone-fx::before{background:radial-gradient(ellipse at center,transparent 52%,rgba(130,190,255,.32) 100%);animation:zone-breath 1.7s ease-in-out infinite}
#zone-fx::after{opacity:0;background:radial-gradient(ellipse at center,rgba(120,170,255,.1) 20%,rgba(150,205,255,.6) 100%);box-shadow:inset 0 0 60px 8px rgba(150,210,255,.55)}
#zone-fx.tick::after{animation:zone-tick .55s ease-out}
@keyframes zone-breath{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes zone-tick{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#zone-fx::before{animation:none;opacity:.7}}

/* ---------- Сенсорный HUD (4.5): кнопки из раскладки touch-hud.js ---------- */
.th-root{position:absolute;inset:0;pointer-events:none;z-index:9}
.th-ctl{position:absolute;box-sizing:border-box;border-radius:50%;pointer-events:auto;touch-action:none;opacity:var(--o,.85);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.th-btn{display:grid;place-items:center;padding:0;margin:0;border:1.5px solid rgba(255,255,255,.3);background:radial-gradient(circle at 50% 38%,rgba(44,56,62,.4),rgba(6,12,15,.48));color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.28);transition:transform .08s,background-color .08s,border-color .08s}
.th-btn svg{width:44%;height:44%;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.th-btn.fire svg{width:50%;height:50%}
.th-btn.pressed{transform:scale(.92);background:rgba(255,255,255,.3);border-color:#fff}
.th-btn.on{border-color:var(--c-accent-hi);background:rgba(42,216,227,.45)}
.th-btn.off{opacity:calc(var(--o,.85)*.4)}
.th-badge{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);min-width:16px;max-width:190%;padding:1px 6px;border-radius:9px;background:rgba(6,12,15,.88);border:1px solid rgba(255,255,255,.28);font:700 10px/1.3 var(--f-ui);color:var(--c-cta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.th-badge:empty{display:none}
.th-stick{border:0;background:none}
.th-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:radial-gradient(circle,rgba(6,12,15,.06) 40%,rgba(6,12,15,.36))}
.th-knob{position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%;background:rgba(255,255,255,.26);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none}
.th-track{position:absolute;left:50%;bottom:100%;width:2px;height:16%;margin-left:-1px;background:linear-gradient(0deg,rgba(255,255,255,.5),rgba(255,255,255,.08));pointer-events:none}
.th-lock{position:absolute;left:33%;bottom:116%;width:34%;height:34%;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(6,12,15,.45);pointer-events:none;opacity:.55;transition:opacity .12s,background-color .12s}
.th-lock svg{width:48%;height:48%;color:#fff}
.th-stick.armed .th-lock,.th-stick.locked .th-lock{opacity:1;background:rgba(244,197,52,.65);border-color:var(--c-cta)}
.th-stick.armed .th-track,.th-stick.locked .th-track{background:var(--c-cta)}
.th-stick.locked .th-ring{border-color:var(--c-cta)}
.th-autorun{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 84px);transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:5px 12px;border-radius:14px;background:rgba(244,197,52,.92);color:#101418;font:800 11px/1 var(--f-ui);letter-spacing:.12em;pointer-events:none}
.th-autorun svg{width:13px;height:13px}
.weapon-alt{align-self:flex-start;margin-top:3px;padding:1px 6px;border:1px solid var(--c-line);border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--c-muted)}
@media (pointer:coarse){.interaction{bottom:calc(var(--safe-bottom) + 108px)}}

/* ---------- Редактор раскладки ---------- */
.hud-editor{position:fixed;inset:0;z-index:200;background:rgba(4,9,11,.74);touch-action:none;-webkit-user-select:none;user-select:none}
.he-stage{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px}
.hud-editing #pause,.hud-editing #menu>*,.hud-editing #hud{visibility:hidden} /* only the scene stays under the editor */
.hud-editor .th-ctl{cursor:grab}
.hud-editor .th-ctl.selected{outline:2px solid var(--c-cta);outline-offset:3px}
.hud-editor .th-lock{opacity:.7}
.he-bar{position:absolute;left:50%;top:max(6px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(8,16,20,.94);border:1px solid var(--c-line-strong);z-index:3;white-space:nowrap}
.he-bar strong{font:800 12px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:0 4px}
.he-bar button{min-height:34px;padding:0 12px;border-radius:6px;border:1px solid var(--c-line-strong);background:rgba(255,255,255,.06);color:#fff;font:700 12px var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.he-bar .he-save{background:var(--c-cta);color:#15181a;border-color:transparent}
.he-bar .he-save.dirty{box-shadow:0 0 0 3px rgba(244,197,52,.4)}
.he-slots{display:flex;gap:4px;padding:0 4px;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line)}
.he-slots button{min-width:34px;padding:0}
.he-slots button.active{border-color:var(--c-accent);background:rgba(42,216,227,.3)}
.he-panel{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,64vw);display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:8px 12px;border-radius:10px;background:rgba(8,16,20,.94);border:1px solid var(--c-line-strong);z-index:3}
.he-panel.compact{width:min(460px,58vw)}.he-panel.compact .he-ctl-row{display:none}
.he-panel.top{bottom:auto;top:calc(max(6px,env(safe-area-inset-top)) + 52px)}
.he-name{grid-column:1/-1;font:800 12px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.he-panel label{display:grid;grid-template-columns:auto minmax(70px,1fr) 38px;white-space:nowrap;align-items:center;gap:8px;font-size:11px;color:var(--c-muted)}
.he-panel output{font-size:11px;text-align:right;color:#fff}
.he-hint{grid-column:1/-1;font-size:10px;color:var(--c-muted)}
.he-ghost{position:absolute;border:1px dashed rgba(255,255,255,.3);border-radius:6px;display:grid;place-items:center;color:rgba(255,255,255,.42);font:700 9px var(--f-ui);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.he-map{left:var(--safe-left);top:var(--safe-top);width:116px;height:116px}
.he-compass{left:50%;top:var(--safe-top);width:min(360px,40vw);height:74px;transform:translateX(-50%)}
.he-counters{right:var(--safe-right);top:var(--safe-top);width:170px;height:44px}
.he-reticle{left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%}
.he-weapon{left:50%;bottom:var(--safe-bottom);width:min(300px,34vw);height:64px;transform:translateX(-50%)}
@media (max-height:420px){.he-map{width:100px;height:100px}}
.he-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:8px;background:rgba(8,16,20,.96);border:1px solid var(--c-accent);font:700 13px var(--f-ui);z-index:5;pointer-events:none}

/* ---------- Вход с телефона: ориентация и полный экран ---------- */
.mobile-gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 30%,rgba(22,58,68,.96),rgba(4,9,11,.985));overflow:auto}
.gate-card{max-width:460px;text-align:center;display:grid;gap:12px;justify-items:center}
.gate-phone{width:52px;height:52px;color:var(--c-accent);animation:rotate-hint 1.8s ease-in-out infinite}
.mobile-gate:not(.portrait) .gate-phone{animation:none;transform:rotate(-90deg)}
.gate-card h2{margin:0;font:800 21px/1.2 var(--f-ui);letter-spacing:.04em;text-transform:uppercase}
.gate-card p{margin:0;color:var(--c-muted);font-size:13px;line-height:1.5}
.gate-card .cta{min-height:54px;padding:0 26px;gap:12px}
.gate-ios{font-size:12px!important;border:1px solid var(--c-line);border-radius:8px;padding:8px 10px}
@media (max-height:420px){.gate-card{gap:8px}.gate-phone{width:40px;height:40px}.gate-card h2{font-size:18px}}

/* ---------- Телефон горизонтально: лобби и пауза помещаются без прокрутки ---------- */
@media (orientation:landscape) and (max-height:500px) and (min-width:560px){
 #menu{overflow:hidden;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
 .lobby-topbar{min-height:44px;gap:14px}.brand{font-size:20px}.nav-tab{font-size:11.5px;padding:0 6px;letter-spacing:.06em}
 .lobby-tools .icon-btn{width:36px;height:36px}
 .lobby-layout{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);gap:10px;padding:8px 0 max(8px,env(safe-area-inset-bottom))}
 .match-panel{order:0}
 .armory{display:flex;flex-direction:column;min-height:0;padding:10px 12px 10px}
 .armory-top{flex:none}.tech-note{display:none}.armory-top .eyebrow{font-size:9px}
 .armory-main{flex:1 1 0;min-height:0;grid-template-columns:minmax(118px,.62fr) minmax(0,1.38fr);gap:8px;align-items:stretch}
 .armory-info{display:flex;flex-direction:column;justify-content:center;min-width:0}
 .armory-info h1{font-size:26px;margin:2px 0 8px}
 .armory-blurb,.stats-note{display:none}
 .weapon-stats{grid-template-columns:1fr;gap:5px}.weapon-stats>div{grid-template-columns:62px 1fr 28px;gap:6px}
 .weapon-stats dt{font-size:9px;letter-spacing:.08em}.weapon-stats b{font-size:11px}
 .armory-view{height:100%;min-height:0}
 #model-reset span{display:none}
 .armory-selector{flex:none;gap:6px;margin-top:6px}.weapon-card{min-height:36px;padding:4px 8px}.weapon-card strong{font-size:14px}.weapon-card small{display:none}
 .match-panel{min-height:0;overflow:auto;padding:10px 12px}.match-top,#mode-description,.quick-tiles{display:none}
 .match-panel .accent-title{font-size:20px;margin-bottom:8px}
 .field-label{margin-bottom:4px}.field{height:38px}.field-meta{margin:3px 0 6px}.segmented>button{min-height:38px}
 .mode-grid{gap:6px}.mode-card{min-width:0;padding:0 6px;gap:6px;font-size:12px;white-space:nowrap}.mode-card svg{width:16px;height:16px}
 .difficulty-row{margin-top:6px}.match-start{padding-top:8px;margin-top:auto}.match-start .cta{min-height:44px}
 .lobby-footer{display:none}
 #pause{padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));align-items:stretch}
 .pause-card{max-height:100%;margin:0 auto;grid-template-rows:minmax(0,1fr)}
 .pause-card.show-settings,#pause.menu-mode .pause-card{grid-template-columns:200px minmax(0,560px)}
 .pause-rail{gap:8px;padding:12px 14px;overflow:auto}.pause-heading h2{font-size:22px;margin-top:4px}.pause-heading .eyebrow,#pause-note,.pause-saved{display:none}
 .pause-nav{gap:6px}.rail-btn{min-height:38px;font-size:12px}.pause-nav .cta{min-height:42px}
 .pause-main{display:none;min-height:0;overflow:auto;padding:8px 14px 12px}
 .settings-tabs button{min-height:38px}.settings-body{min-height:0}.setting{min-height:40px;font-size:13px}
 .dialog{max-height:calc(100dvh - 12px)}.dialog-heading{padding:8px 16px}.dialog-heading h2{font-size:20px}
}
.help-credits{margin:0;padding:8px 24px 0;font-size:11px;line-height:1.5}.help-credits a{color:var(--c-accent)}

/* 4.7: contextual touch buttons (fade out when the action is not available) and the fist variant */
.th-btn{transition:transform .08s,background-color .08s,border-color .08s,opacity .18s}
.th-btn.ctx-hidden{opacity:0!important;pointer-events:none;transform:scale(.8)}
.th-btn.fist{border-color:rgba(255,214,120,.55)}

/* ---------- Lobby: holiday-maker appearance ---------- */
.look-toggle{position:absolute;left:12px;bottom:12px;z-index:3}
.look-panel{position:absolute;left:12px;top:12px;bottom:58px;width:min(270px,calc(100% - 24px));z-index:3;overflow:auto;padding:10px 10px 8px;display:flex;flex-direction:column;gap:6px;background:rgba(6,16,20,.82);border:1px solid var(--c-line);backdrop-filter:blur(6px)}
.look-panel.hidden{display:none}
.look-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted,#9fb1b6)}
.look-ctl{display:flex;align-items:center;gap:4px}
.look-ctl b{min-width:96px;text-align:center;font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--c-text,#fff);font-weight:600}
.look-step{width:30px;height:30px;border:1px solid var(--c-line);background:rgba(255,255,255,.04);color:var(--c-text,#fff);font-size:17px;line-height:1;cursor:pointer}
.look-step:hover,.look-step:focus-visible{border-color:var(--c-accent,#35d0e8);outline:none}
.look-panel .chip-btn{align-self:flex-start;margin-top:2px}
@media (max-height:460px){.look-panel{top:4px;bottom:46px;left:4px;width:min(470px,calc(100% - 8px));padding:6px 8px;gap:4px}#look-rows{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}.look-row{font-size:9px;letter-spacing:.04em}.look-step{width:22px;height:22px;font-size:14px}.look-ctl b{min-width:62px;font-size:10px}.look-toggle{left:4px;bottom:4px}}

/* 4.9: six weapons in the lobby selector, one row */
.armory-selector{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.weapon-card{padding:10px 12px;min-height:60px}.weapon-card strong{font-size:17px;white-space:nowrap}.weapon-card small{font-size:9px;letter-spacing:.08em}
@media (max-width:760px){.armory-selector{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-height:460px){.armory-selector{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.weapon-card{min-height:30px;padding:3px 5px}.weapon-card strong{font-size:11px}.weapon-card small{display:none}}

/* ============ 4.14 lobby: character stage + a light left column (home / rooms / waiting / look) ============ */
#menu.lobby2{display:block;padding:0;overflow:hidden;touch-action:manipulation}
.lobby2 .lobby-stage{position:absolute;top:0;bottom:0;right:0;left:clamp(340px,33vw,600px);z-index:0}
.lobby2 .lobby-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.lobby2 #model-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--c-muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.lobby2 .stage-weapon{position:absolute;right:clamp(16px,3vw,48px);bottom:clamp(16px,5vh,44px);text-align:right;pointer-events:none}
.lobby2 .stage-weapon small{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted)}
.lobby2 .stage-weapon strong{display:block;font-size:24px;font-weight:800;letter-spacing:.04em;color:#fff}
.lobby2 #model-reset{position:absolute;top:calc(clamp(12px,3vh,28px) + 52px);right:clamp(16px,3.2vw,48px);bottom:auto;left:auto;width:38px;height:38px;margin:0;transform:none}
.lobby2 .lobby-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,3vh,28px) clamp(16px,3.2vw,48px);pointer-events:none}
.lobby2 .lobby-top>*{pointer-events:auto}.lobby2 .lobby-tools{display:flex;gap:8px;margin:0}
.lobby2 .lobby-col{position:absolute;z-index:2;left:clamp(16px,3.2vw,56px);top:clamp(80px,14vh,140px);bottom:clamp(16px,6vh,64px);width:min(400px,calc(100vw - 32px));display:flex;flex-direction:column;justify-content:center;gap:14px}
.lobby2 .nick-box .field{height:46px}
.lobby2 .nick-box .field-label{margin-bottom:6px}
.lobby2 .nickname-hint{display:block;margin-top:5px;font-size:12px;color:var(--c-dim)}
.lobby2 .play-main{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;min-height:76px;padding:12px 22px;text-align:left}
.lobby2 .play-main span{font-size:30px;font-weight:900;letter-spacing:.07em;line-height:1}
.lobby2 .play-main small{grid-row:2;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.lobby2 .play-main svg{grid-column:2;grid-row:1/3;width:28px;height:28px}
.lobby2 .lobby-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lobby2 .lobby-big{min-height:58px;font-size:14px;font-weight:800;letter-spacing:.1em}
.lobby2 .lobby-big svg{width:20px;height:20px}
.lobby2 .lobby-minor{display:flex;gap:8px;flex-wrap:wrap}
.lobby2 .menu-status{margin:0}
.lobby2 .lobby-sheet{justify-content:flex-start;padding:16px;background:rgba(6,18,22,.88);border:1px solid var(--c-line-strong);border-top:2px solid var(--c-accent);border-radius:var(--r-sm);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lobby2 .sheet-head{display:flex;align-items:center;gap:10px;flex:none}
.lobby2 .sheet-head h2{flex:1;min-width:0;margin:0;font-size:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby2 .sheet-head .icon-btn{width:38px;height:38px;flex:none}
.lobby2 .sheet-ping,.lobby2 .sheet-count{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--c-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lobby2 .sheet-count{font-size:16px;color:var(--c-text)}
.lobby2 #rooms-refresh.spin svg{animation:lobby-spin .7s linear infinite}
@keyframes lobby-spin{to{transform:rotate(360deg)}}
.lobby2 .rooms-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;touch-action:pan-y}
.lobby2 .rooms-empty{margin:auto 0;padding:12px 4px;text-align:center;font-size:13px;line-height:1.5;color:var(--c-muted)}
.lobby2 .room-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 10px 9px 12px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:rgba(3,11,14,.55)}
.lobby2 .ri-main b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby2 .ri-main small{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--c-accent-hi)}
.lobby2 .room-item[data-status=starting] .ri-main small{color:var(--c-cta)}
.lobby2 .room-item[data-status=playing] .ri-main small{color:var(--c-dim)}
.lobby2 .ri-count{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.lobby2 .ri-join{min-height:38px;padding:6px 14px;font-weight:800;letter-spacing:.08em}
.lobby2 .room-create{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;flex:none}
.lobby2 .room-create .field{height:44px}
.lobby2 .wait-players{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
.lobby2 .wait-players li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:rgba(3,11,14,.55);font-size:15px}
.lobby2 .wait-players li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby2 .wait-players li small{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-dim)}
.lobby2 .wait-players li.is-ready{border-color:rgba(42,216,227,.45)}.lobby2 .wait-players li.is-ready small{color:var(--c-accent-hi)}
.lobby2 .wait-status{flex:none;margin:0;font-size:14px;color:var(--c-muted)}
.lobby2 .wait-status[data-state=starting]{font-size:26px;font-weight:900;letter-spacing:.08em;color:var(--c-cta)}
.lobby2 .wait-actions{display:grid;grid-template-columns:1fr auto;gap:10px;flex:none}
.lobby2 #wait-ready{justify-content:center}.lobby2 #wait-ready.is-on{background:var(--c-accent);color:var(--c-accent-ink)}
.lobby2 #look-rows{flex:1;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:4px;grid-template-columns:none;touch-action:pan-y}
.lobby2 .look-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--c-line)}
.lobby2 .look-row>span{font-size:13px;color:var(--c-muted)}
.lobby2 .look-row.is-weapon{padding-bottom:10px;margin-bottom:6px;border-bottom-color:var(--c-line-strong)}.lobby2 .look-row.is-weapon>span{color:var(--c-text);font-weight:700}
.lobby2 .look-ctl{display:grid;grid-template-columns:34px minmax(110px,auto) 34px;align-items:center;gap:6px}
.lobby2 .look-ctl b{text-align:center;font-size:14px;white-space:nowrap}
.lobby2 .look-step{height:34px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:rgba(4,14,17,.6);color:var(--c-text);font-size:18px;line-height:1;cursor:pointer}
.lobby2 .look-step:hover{border-color:var(--c-accent)}
.lobby2 #look-random{align-self:flex-start;flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lobby2 .lobby-rotate{display:none}
@media (max-width:900px) and (orientation:landscape){.lobby2 .lobby-stage{left:42vw}.lobby2 .lobby-col{width:calc(42vw - 28px)}}
/* phones in landscape: everything fits the height, no scrolling, the character keeps ~58 % of the width */
@media (max-height:500px) and (orientation:landscape){
 .lobby2 .lobby-top{padding:8px max(12px,env(safe-area-inset-left))}.lobby2 .brand{font-size:18px}.lobby2 .lobby-top .icon-btn{width:34px;height:34px}
 .lobby2 .lobby-stage{left:42vw}
 .lobby2 .lobby-col{left:max(12px,env(safe-area-inset-left));top:46px;bottom:8px;width:calc(42vw - 24px);gap:7px}
 .lobby2 .nick-box .field-label,.lobby2 .nickname-hint{display:none}.lobby2 .nick-box .field{height:38px;font-size:16px}
 .lobby2 .play-main{min-height:50px;padding:6px 14px}.lobby2 .play-main span{font-size:21px}.lobby2 .play-main small{font-size:10px}.lobby2 .play-main svg{width:22px;height:22px}
 .lobby2 .lobby-big{min-height:42px;font-size:12px;padding:4px 8px;gap:6px}.lobby2 .lobby-big svg{width:16px;height:16px}
 .lobby2 .lobby-minor .chip-btn{min-height:32px;padding:4px 10px;font-size:11px}
 .lobby2 .menu-status{font-size:11px;line-height:1.3}
 .lobby2 .lobby-sheet{padding:8px 10px;gap:6px}.lobby2 .sheet-head h2{font-size:15px}.lobby2 .sheet-head .icon-btn{width:32px;height:32px}
 .lobby2 .room-item{padding:5px 8px;gap:8px}.lobby2 .ri-main b{font-size:13px}.lobby2 .ri-join{min-height:32px;padding:4px 10px}
 .lobby2 .room-create .field{height:36px}.lobby2 .room-create .btn{min-height:36px;padding:4px 10px}
 .lobby2 .wait-players li{padding:5px 10px;font-size:13px}.lobby2 .wait-status[data-state=starting]{font-size:20px}
 .lobby2 .wait-actions .cta,.lobby2 .wait-actions .btn{min-height:40px;padding:6px 12px}
 .lobby2 #look-rows{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:3px 10px;overflow-y:auto}
 .lobby2 .look-row{flex-direction:column;align-items:stretch;gap:1px;padding:0;border-bottom:0;min-width:0}.lobby2 .look-row>span{font-size:9px;letter-spacing:.06em}
 .lobby2 .look-row.is-weapon{grid-column:1/-1;flex-direction:row;align-items:center;padding:0 0 4px;margin-bottom:2px}
 .lobby2 .look-ctl{grid-template-columns:24px minmax(0,1fr) 24px;gap:3px}.lobby2 .look-ctl b{font-size:12px;overflow:hidden;text-overflow:ellipsis}.lobby2 .look-step{height:24px;font-size:15px}
 .lobby2 .look-row.is-weapon .look-ctl{grid-template-columns:24px minmax(90px,auto) 24px}
 .lobby2 #look-random{position:absolute;top:8px;right:10px;min-height:30px;padding:2px 10px}
 .lobby2 .stage-weapon strong{font-size:17px}.lobby2 #model-reset{top:48px;right:max(12px,env(safe-area-inset-right));width:34px;height:34px}
}
/* phones held upright: ask to rotate (the lobby is designed for landscape) */
@media (orientation:portrait) and (pointer:coarse){
 .lobby2 .lobby-rotate{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:rgba(6,16,20,.985)}
 .lobby2 .lobby-rotate svg{width:54px;height:54px;color:var(--c-accent);animation:lobby-rot 2.4s ease-in-out infinite}
 .lobby2 .lobby-rotate b{font-size:18px;letter-spacing:.06em}
}
@keyframes lobby-rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* 5.1 modes: picker, arcade HUD, scoreboard, respawn screen */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px}
.mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(10,16,20,.55);color:#dfe8ee;cursor:pointer;text-align:left;font:inherit}
.mode-btn b{font-size:13px;letter-spacing:.04em}.mode-btn small{font-size:11px;opacity:.7}
.mode-btn.is-on{border-color:#ffc34a;background:rgba(255,195,74,.16);color:#fff}
.mode-sub{display:flex;gap:8px;margin:0 0 6px}.mode-sub .chip-btn.is-on{border-color:#ffc34a;color:#ffd77e}
.hud-zone.hot{animation:arcadeHot 1s steps(2) infinite;border-color:#ff5b4a}.hud-zone.hot strong{color:#ff6b5b}
@keyframes arcadeHot{50%{background:rgba(160,30,20,.55)}}
.scoreboard{position:absolute;left:50%;top:14%;transform:translateX(-50%);min-width:min(560px,92vw);background:rgba(8,12,16,.86);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 16px;color:#e8eef2;z-index:30;font-size:13px}
.scoreboard .sb-head{font-weight:700;letter-spacing:.06em;margin-bottom:8px;color:#ffc34a}
.scoreboard table{width:100%;border-collapse:collapse}.scoreboard th{font-size:11px;opacity:.6;text-align:left;padding:3px 6px}.scoreboard td{padding:4px 6px;border-top:1px solid rgba(255,255,255,.06)}
.scoreboard tr.me td{color:#ffd77e}.scoreboard tr.sb-team td{font-weight:700}.scoreboard tr.sb-member td{opacity:.8;font-size:12px}
.respawn-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle,rgba(40,6,6,.35),rgba(0,0,0,.6));color:#fff;z-index:40;pointer-events:none}
.respawn-screen b{font-size:28px;letter-spacing:.12em}.respawn-screen small{opacity:.8}.respawn-screen strong{font-size:64px;line-height:1;color:#ffc34a}.respawn-screen em{font-style:normal;letter-spacing:.2em;font-size:12px;opacity:.75}

/* 5.2 mobile HUD: compact counters (number over a two-line label), the compass sized to the gap between the
   minimap and the counters (it was covered by ОЧКИ / МОИ УБИЙСТВА / МЕСТО), safe areas on every side. */
@media (pointer:coarse){
 .hud-counters{gap:3px}
 .hud-counter{flex-direction:column;justify-content:center;gap:1px;min-width:44px;padding:2px 5px 3px;text-align:center}
 .hud-counter strong{font-size:16px}
 .hud-counter small{max-width:6.2em;font-size:7px;line-height:1.05;letter-spacing:.05em}
 .hud-icon{width:40px;min-height:40px}
 .hud-compass{width:clamp(150px,calc(100vw - 2 * (var(--safe-right) + 238px)),360px)}
 #compass{height:36px}
 .hud-zone{padding:2px 9px}
 .kill-feed{top:calc(var(--safe-top) + 50px);right:var(--safe-right)}
 .sight-chip{min-height:30px;padding:3px 9px 3px 6px;pointer-events:auto}
 .sight-chip svg{width:16px;height:16px;flex:none}
}
/* 5.2 low landscape phones: the scoreboard and the end card fit the screen without scrolling. */
@media (max-height:500px){
 .scoreboard{top:calc(var(--safe-top) + 4px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px);overflow:hidden;padding:6px 12px;font-size:11px}
 .scoreboard .sb-head{margin-bottom:3px}
 .scoreboard th,.scoreboard td{padding:1px 6px}.scoreboard tr.sb-member td{font-size:10px}
 #end{padding-top:max(8px,var(--safe-top));padding-bottom:max(8px,var(--safe-bottom))}
 .end-panel{padding:12px 18px}
 #end h2{margin:4px 0;font-size:30px}
 #end p{font-size:12px;line-height:1.35}
 .end-stats{margin:10px 0;gap:6px}
 .end-stats span{padding:6px 8px;font-size:10px}
 .end-stats strong{margin-top:2px;font-size:24px}
 .end-panel .cta{min-height:44px}
}

/* 5.2 rooms: bot filling switch, host star, bot seats */
.room-bots{display:flex;align-items:center;gap:8px;flex:none;font-size:13px;color:var(--c-muted);cursor:pointer;user-select:none}
.room-bots input{width:18px;height:18px;accent-color:var(--c-accent);margin:0}
.room-create{flex-wrap:wrap}.room-create .room-bots{flex:1 0 100%;grid-column:1/-1;width:100%}
#waiting-view .room-bots{margin:4px 0 2px}
.wait-players li.is-host span{color:#ffd77e}
.wait-players li.is-bots{opacity:.62;border-style:dashed}

/* 5.2 duo teammate: name tag over the head, card with HP and state (above the minimap on PC, under it on phones) */
.ally-tags{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.ally-tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:0;white-space:nowrap;will-change:transform}
.ally-tag b{padding:1px 7px;border-radius:3px;background:rgba(10,40,64,.72);border:1px solid rgba(79,179,255,.75);color:#cfeaff;font-size:12px;font-weight:700;letter-spacing:.03em}
.ally-tag small{font-size:10px;color:#9fd3ff;text-shadow:0 1px 2px #000}
.ally-tag.hurt b{border-color:#ff7a5c;color:#ffe0d6}
.ally-tag::after{content:"";width:0;height:0;border:5px solid transparent;border-top-color:#4fb3ff;margin-top:1px}
.ally-cards{position:absolute;right:var(--safe-right);bottom:calc(var(--safe-bottom) + 222px);width:210px;display:flex;flex-direction:column;gap:4px;z-index:4;pointer-events:none}
.ally-card{padding:5px 8px 6px;background:rgba(5,15,19,.66);border:1px solid var(--c-line);border-left:3px solid #4fb3ff}
.ally-card>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ally-card b{font-size:12px;color:#cfeaff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ally-card small{font-size:9px;letter-spacing:.1em;color:var(--c-muted);white-space:nowrap}
.ally-card[data-state=hurt] small{color:#ffb199}.ally-card[data-state=dead]{border-left-color:#7d8a90;opacity:.8}
.ally-hp{position:relative;display:block;height:6px;margin-top:4px;background:rgba(255,255,255,.12)}
.ally-hp>i{position:absolute;left:0;top:0;bottom:0;background:#4fb3ff;transition:width .2s}
.ally-card[data-state=hurt] .ally-hp>i{background:#ff8a6a}
.ally-hp em{display:none}
#hud.spectating .ally-tags,#hud.spectating .ally-cards{display:none}
@media (pointer:coarse){
 .ally-cards{right:auto;bottom:auto;left:var(--safe-left);top:calc(var(--safe-top) + 122px);width:116px}
 .ally-card{padding:3px 6px 4px}.ally-card>div{flex-direction:column;align-items:flex-start;gap:0}.ally-card b{font-size:10px;max-width:100%}.ally-card small{font-size:8px;letter-spacing:.04em}
 .ally-tag b{font-size:10px;padding:0 5px}
}
@media (pointer:coarse) and (max-height:420px){.ally-cards{top:calc(var(--safe-top) + 106px);width:100px}}

/* 5.3: the teammate card bottom-left on PC (like PUBG squad bars); phones keep it under the minimap */
@media (pointer:fine){.ally-cards{right:auto;left:var(--safe-left);bottom:var(--safe-bottom);width:230px}}

/* 5.4 item icons: pickup prompt and crate rows */
.pickup-icon{width:20px;height:20px;flex:none;color:var(--c-accent-hi);margin-right:2px;align-self:center}
.interaction:has(#pickup-label:empty) .pickup-icon,#pickup-btn.hidden~.pickup-icon{display:none}
.death-loot button svg{width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:6px;color:var(--c-accent-hi)}

/* ===== 5.9.9 LOBBY 3: a real in-game view of the island, the character as the hero, one clear action ===== */
#menu.lobby3::before,#menu.lobby3::after{content:none}
#menu.lobby3{background:#05090c}
.lobby3 .lobby-bg{position:absolute;inset:-3%;z-index:-2;background:#0b1418 url('assets/ui/lobby-island.webp') 62% 46%/cover no-repeat;animation:lobby-drift 80s ease-in-out infinite alternate;will-change:transform}
@media (max-width:1280px),(max-height:760px){.lobby3 .lobby-bg{background-image:url('assets/ui/lobby-island-m.webp')}}
@keyframes lobby-drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.4%,-.8%,0)}}
.lobby3 .lobby-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 linear-gradient(90deg,rgba(4,9,12,.93) 0%,rgba(4,9,12,.82) 24%,rgba(4,9,12,.35) 46%,rgba(4,9,12,0) 64%),
 linear-gradient(0deg,rgba(4,9,12,.88) 0%,rgba(4,9,12,.2) 30%,rgba(4,9,12,0) 45%),
 linear-gradient(180deg,rgba(4,9,12,.6) 0%,rgba(4,9,12,0) 20%),
 radial-gradient(60% 70% at 70% 62%,rgba(255,196,110,.10),rgba(255,196,110,0) 70%)}
@media (prefers-reduced-motion:reduce){.lobby3 .lobby-bg{animation:none}}
/* top bar: the logo */
.lobby3 .lobby-top{padding:clamp(18px,3.6vh,38px) clamp(22px,4.6vw,84px)}
.lobby3 .brand{display:flex;flex-direction:column;gap:7px;font-size:clamp(26px,2.7vw,42px);line-height:.9;letter-spacing:0;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.lobby3 .brand b{font-weight:900;letter-spacing:.16em}
.lobby3 .brand small{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:var(--c-cta)}
.lobby3 .brand small::before{content:"";width:26px;height:2px;background:var(--c-cta)}
.lobby3 .lobby-tools .icon-btn{border-radius:12px;background:rgba(8,14,18,.45);border-color:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .15s}
.lobby3 .lobby-tools .icon-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
/* the character takes the right two thirds */
.lobby3 .lobby-stage{left:30vw}
.lobby3 #model-reset{display:none}
.lobby3 #model-status{font-weight:700;color:rgba(255,255,255,.55)}
/* the weapon under the character: its class, its name, ‹ › */
.lobby3 .stage-weapon{left:50%;right:auto;bottom:clamp(14px,3.6vh,40px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;pointer-events:auto;text-align:center}
.lobby3 .wp-text{min-width:180px}
.lobby3 .wp-text small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.lobby3 .wp-text strong{display:block;margin-top:3px;font-size:clamp(22px,2vw,30px);font-weight:900;letter-spacing:.08em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.lobby3 .wp-step{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(8,14,18,.45);color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .15s}
.lobby3 .wp-step svg{width:18px;height:18px}
.lobby3 #weapon-prev svg{transform:scaleX(-1)}
.lobby3 .wp-step:hover{background:rgba(244,197,52,.18);border-color:rgba(244,197,52,.6)}.lobby3 .wp-step:active{transform:scale(.94)}
/* the left column */
.lobby3 .lobby-col{left:clamp(22px,4.6vw,84px);width:min(430px,34vw);top:clamp(110px,18vh,190px);bottom:clamp(22px,6.5vh,68px);gap:14px;justify-content:flex-end}
.lobby3 .lobby-col:not(.hidden){animation:lobby-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes lobby-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lobby3 .field-label{font-size:10.5px;font-weight:800;letter-spacing:.26em;color:rgba(255,255,255,.55)}
.lobby3 .nick-box .field{height:54px;padding:0 18px;font-size:19px;font-weight:700;letter-spacing:.02em;border-radius:12px;background:rgba(8,14,18,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s}
.lobby3 .nick-box .field:focus{border-color:rgba(244,197,52,.8);box-shadow:0 0 0 4px rgba(244,197,52,.14);outline:0}
.lobby3 .nick-box .field[aria-invalid=true]{border-color:#ff6b5b;box-shadow:0 0 0 4px rgba(255,107,91,.14)}
.lobby3 .nickname-hint{font-size:11.5px;color:rgba(255,255,255,.42)}
/* the mode: one segmented control */
.lobby3 .mode-pick{gap:4px;margin:0;padding:4px;border-radius:14px;background:rgba(8,14,18,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lobby3 .mode-btn{gap:3px;padding:11px 14px;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.62);transition:background .2s,color .2s,box-shadow .2s}
.lobby3 .mode-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.lobby3 .mode-btn b{font-size:12.5px;font-weight:900;letter-spacing:.1em}
.lobby3 .mode-btn small{font-size:11px;opacity:.75}
.lobby3 .mode-btn.is-on{background:linear-gradient(180deg,rgba(244,197,52,.2),rgba(244,197,52,.1));box-shadow:inset 0 0 0 1px rgba(244,197,52,.6);color:#fff}
.lobby3 .mode-sub{gap:6px;margin:-4px 0 0}
.lobby3 .mode-sub .chip-btn{min-height:34px;padding:4px 14px;border-radius:999px;background:rgba(8,14,18,.5);border-color:rgba(255,255,255,.14);font-weight:800;letter-spacing:.08em}
.lobby3 .mode-sub .chip-btn.is-on{background:rgba(244,197,52,.16);border-color:rgba(244,197,52,.7);color:#ffe08a}
/* ИГРАТЬ: the one accent */
.lobby3 .play-main{min-height:92px;padding:16px 28px;border-radius:16px;background:linear-gradient(135deg,#ffdb5c 0%,#f4c534 45%,#e9a91c 100%);color:#1b1608;box-shadow:0 18px 44px rgba(233,169,28,.3),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .16s,box-shadow .2s,filter .2s}
.lobby3 .play-main:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 22px 54px rgba(233,169,28,.42),inset 0 1px 0 rgba(255,255,255,.5);filter:saturate(1.08)}
.lobby3 .play-main:active:not(:disabled){transform:translateY(0) scale(.99)}
.lobby3 .play-main span{font-size:clamp(30px,2.6vw,40px);font-weight:900;letter-spacing:.12em}
.lobby3 .play-main small{font-size:11.5px;letter-spacing:.18em;opacity:.7}
.lobby3 .play-main svg{width:30px;height:30px;transition:transform .2s}.lobby3 .play-main:hover svg{transform:translateX(4px)}
/* secondary: quieter glass buttons */
.lobby3 .lobby-pair{gap:10px}
.lobby3 .lobby-big{min-height:54px;border-radius:12px;background:rgba(8,14,18,.5);border:1px solid rgba(255,255,255,.14);color:#e9f0f2;font-size:13px;letter-spacing:.12em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s,transform .15s}
.lobby3 .lobby-big:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}.lobby3 .lobby-big:active{transform:scale(.98)}
.lobby3 .lobby-big svg{color:var(--c-cta)}
/* tertiary: text links */
.lobby3 .lobby-minor{gap:4px 18px}
.lobby3 .lobby-minor .chip-btn{min-height:32px;padding:4px 2px;border:0;background:none;color:rgba(255,255,255,.6);font-size:12.5px;font-weight:700;letter-spacing:.06em;transition:color .2s}
.lobby3 .lobby-minor .chip-btn:hover{color:#fff}.lobby3 .lobby-minor .chip-btn svg{width:16px;height:16px}
.lobby3 .menu-status{font-size:12.5px}
/* rooms / waiting room / customisation: the same glass panel */
.lobby3 .lobby-sheet{justify-content:flex-start;border-radius:16px;background:rgba(7,13,17,.74);border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--c-cta);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.lobby3 .lobby-sheet .room-item,.lobby3 .wait-players li{border-radius:10px}
.lobby3 .sheet-ping,.lobby3 .sheet-count{flex:none;letter-spacing:.06em}
/* 5.9.10 invite: the link button in the waiting room, the invite card on the home screen */
.lobby3 .wait-tools{display:flex;align-items:center;gap:10px;flex:none;min-height:38px}
.lobby3 .wait-tools .room-bots{flex:1;min-width:0}
.lobby3 .wait-link{margin-left:auto;flex:none;min-height:36px;padding:4px 14px;border-radius:999px;background:rgba(8,14,18,.5);border-color:rgba(255,255,255,.18);font-weight:800;letter-spacing:.1em;transition:background .2s,border-color .2s,color .2s}
.lobby3 .wait-link svg{width:16px;height:16px;color:var(--c-cta)}
.lobby3 .wait-link:hover{background:rgba(244,197,52,.14);border-color:rgba(244,197,52,.6)}
.lobby3 .wait-link.done{background:rgba(42,216,227,.16);border-color:rgba(42,216,227,.7);color:#bff8fb}.lobby3 .wait-link.done svg{color:#6ff0f6}
.lobby3 .invite-card{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;background:rgba(244,197,52,.12);border:1px solid rgba(244,197,52,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:lobby-in .32s cubic-bezier(.2,.8,.2,1)}
.lobby3 .invite-card[hidden]{display:none}
.lobby3 .invite-card>svg{width:18px;height:18px;flex:none;color:var(--c-cta)}
.lobby3 #invite-text{flex:1;min-width:0;font-size:13px;font-weight:800;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby3 .invite-join{min-height:36px;padding:4px 14px;border-radius:9px;background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink);font-weight:900;letter-spacing:.1em}
.lobby3 .invite-close{display:grid;place-items:center;width:28px;height:28px;flex:none;border:0;background:none;color:rgba(255,255,255,.6);cursor:pointer}.lobby3 .invite-close svg{width:16px;height:16px}.lobby3 .invite-close:hover{color:#fff}
@media (max-height:500px) and (orientation:landscape){.lobby3 .wait-link{min-height:28px;padding:2px 10px;font-size:10.5px}.lobby3 .invite-card{padding:5px 6px 5px 10px}.lobby3 #invite-text{font-size:11px}.lobby3 .invite-join{min-height:28px;padding:2px 10px}} /* the ping was squeezed under the refresh button */
/* tablets / small laptops */
@media (max-width:1100px) and (min-height:501px){.lobby3 .lobby-col{width:min(400px,42vw)}.lobby3 .lobby-stage{left:36vw}}
/* phones in landscape: no scrolling, the character keeps the right half and stays big */
@media (max-height:500px) and (orientation:landscape){
 .lobby3 .lobby-top{padding:8px max(14px,env(safe-area-inset-left))}
 .lobby3 .brand{font-size:19px;gap:0}.lobby3 .brand small{display:none}
 .lobby3 .lobby-tools .icon-btn{width:34px;height:34px;border-radius:9px}
 .lobby3 .lobby-stage{left:40vw}
 .lobby3 .lobby-col{left:max(14px,env(safe-area-inset-left));width:calc(44vw - 18px);top:42px;bottom:8px;gap:6px;justify-content:center}
 .lobby3 .nick-box .field{height:38px;padding:0 12px;font-size:16px;border-radius:9px}
 .lobby3 .mode-pick{padding:3px;border-radius:10px}.lobby3 .mode-btn{padding:5px 8px;border-radius:7px}.lobby3 .mode-btn b{font-size:10.5px;letter-spacing:.06em}.lobby3 .mode-btn small{display:none}
 .lobby3 .mode-sub{margin:0}.lobby3 .mode-sub .chip-btn{min-height:26px;padding:2px 10px;font-size:10.5px}
 .lobby3 .play-main{min-height:50px;padding:5px 16px;border-radius:11px}.lobby3 .play-main span{font-size:22px}.lobby3 .play-main small{font-size:9.5px}.lobby3 .play-main svg{width:22px;height:22px}
 .lobby3 .lobby-big{min-height:38px;border-radius:9px;font-size:11px;letter-spacing:.08em}
 .lobby3 .lobby-minor .chip-btn{min-height:24px;font-size:11px}
 .lobby3 .stage-weapon{bottom:6px;gap:8px}.lobby3 .wp-text{min-width:120px}.lobby3 .wp-text small{font-size:8.5px}.lobby3 .wp-text strong{font-size:16px}.lobby3 .wp-step{width:30px;height:30px}.lobby3 .wp-step svg{width:14px;height:14px}
 .lobby3 .lobby-sheet{border-radius:12px}
}
/* ===== 5.9.12 PROFILES: the Telegram sign-in, the profile, friends, the top ===== */
#menu.lbx .acct-chip{display:flex;align-items:center;gap:9px;height:42px;max-width:220px;padding:0 14px 0 5px;border-radius:4px;border:1px solid rgba(255,255,255,.16);background:rgba(8,14,18,.5);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.08em;cursor:pointer;position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
#menu.lbx .acct-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
#menu.lbx .acct-chip:not(.is-in){border-color:rgba(64,168,236,.55);background:rgba(42,140,210,.2)}
#menu.lbx .acct-chip #acct-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu.lbx .acct-ava,#menu.lbx .pf-ava{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2aa3e8,#1c74c4);color:#fff;font-weight:900;font-size:14px}
#menu.lbx .acct-ava svg{width:16px;height:16px}#menu.lbx .acct-ava img,#menu.lbx .pf-ava img{width:100%;height:100%;object-fit:cover}
#menu.lbx .acct-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:6px;background:#ff5b4a;color:#fff;font:800 11px/18px var(--f-ui);font-style:normal;text-align:center}
#menu.lbx .acct-badge[hidden]{display:none}
#menu.lbx .pf-tabs{display:flex;gap:4px;flex:none;padding:4px;border-radius:6px;background:rgba(255,255,255,.05)}
#menu.lbx .pf-tab{position:relative;flex:1;min-height:36px;border:0;border-radius:6px;background:none;color:rgba(255,255,255,.6);font-size:12px;font-weight:900;letter-spacing:.12em;cursor:pointer;transition:background .2s,color .2s}
#menu.lbx .pf-tab:hover{color:#fff}#menu.lbx .pf-tab.is-on{background:rgba(244,197,52,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(244,197,52,.55)}
#menu.lbx .pf-tab .acct-badge{top:2px;right:6px}
#menu.lbx .pf-pane{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;touch-action:pan-y;overscroll-behavior:contain}
#menu.lbx .pf-pane.hidden{display:none}
#menu.lbx .pf-logout{min-height:32px;padding:2px 10px;border-radius:4px;font-size:11.5px;font-weight:800}
#menu.lbx .pf-guest{display:flex;flex-direction:column;gap:12px;margin:auto 0;padding:6px 2px}
#menu.lbx .pf-lead{margin:0;font-size:14.5px;line-height:1.5;color:#e9f0f2}
#menu.lbx .pf-perks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
#menu.lbx .pf-perks li{display:flex;gap:9px;align-items:center;font-size:13px;color:rgba(255,255,255,.75)}
#menu.lbx .pf-perks li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-cta)}
#menu.lbx .pf-note{margin:0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.48)}
#menu.lbx .tg-login{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:6px;background:linear-gradient(135deg,#37aee2,#1e88d0);color:#fff;font-size:14px;font-weight:900;letter-spacing:.1em;cursor:pointer;box-shadow:0 12px 30px rgba(30,136,208,.3);transition:filter .2s,transform .15s}
#menu.lbx .tg-login svg{width:20px;height:20px}#menu.lbx .tg-login:hover:not(:disabled){filter:brightness(1.08)}#menu.lbx .tg-login:active:not(:disabled){transform:scale(.98)}
#menu.lbx .tg-login:disabled{opacity:.6;cursor:progress}
#menu.lbx .tg-login-err{margin:0;font-size:12.5px;color:#ff8c7e}#menu.lbx .tg-login-err[hidden]{display:none}
#menu.lbx .pf-head{display:flex;align-items:center;gap:14px;flex:none;padding:4px 2px}
#menu.lbx .pf-ava-lg{width:58px;height:58px;font-size:24px}
#menu.lbx .pf-who{min-width:0;display:flex;flex-direction:column;gap:4px}
#menu.lbx .pf-who b{font-size:22px;font-weight:900;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu.lbx .pf-who small{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:rgba(255,255,255,.55)}
#menu.lbx .pf-code{padding:2px 8px;border-radius:6px;border:1px solid rgba(244,197,52,.5);background:rgba(244,197,52,.1);color:#ffe08a;font:800 12px/1.4 var(--f-ui);letter-spacing:.1em;cursor:pointer}
#menu.lbx .pf-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;flex:none}
#menu.lbx .pf-stat{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
#menu.lbx .pf-stat small{font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.5)}
#menu.lbx .pf-stat b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
#menu.lbx .pf-stat i{font-style:normal;font-size:11px;color:rgba(255,255,255,.45)}
#menu.lbx .fr-search{display:flex;gap:8px;flex:none}
#menu.lbx .fr-search .field{flex:1;min-width:0;height:42px;border-radius:6px}
#menu.lbx .fr-search .btn{min-height:42px;padding:6px 14px;border-radius:6px;font-weight:800}
#menu.lbx .fr-group{display:flex;flex-direction:column;gap:6px}
#menu.lbx .fr-group h3{display:flex;align-items:center;justify-content:space-between;margin:4px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#menu.lbx .fr-clear{border:0;background:none;color:var(--c-cta);font:700 12px var(--f-ui);letter-spacing:.04em;text-transform:none;cursor:pointer;padding:2px 0}
#menu.lbx .fr-row{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
#menu.lbx .fr-row .pf-ava{position:relative;overflow:visible;width:30px;height:30px;font-size:13px}
#menu.lbx .fr-row .pf-ava img{border-radius:50%}
#menu.lbx .fr-row.is-on .pf-ava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 2px #0b1418}
#menu.lbx .fr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#menu.lbx .fr-main b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu.lbx .fr-main small{font-size:11px;color:rgba(255,255,255,.48)}
#menu.lbx .fr-id{margin-left:7px;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.38)}
#menu.lbx .fr-row.is-on .fr-main small{color:#8ff0b8}
#menu.lbx .fr-btn{flex:none;min-height:32px;padding:3px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(8,14,18,.5);color:#fff;font:800 11px var(--f-ui);letter-spacing:.08em;cursor:pointer;transition:background .2s,border-color .2s}
#menu.lbx .fr-btn:hover:not(:disabled){border-color:rgba(255,255,255,.4)}
#menu.lbx .fr-btn.is-go{background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink)}#menu.lbx .fr-btn.is-go:hover:not(:disabled){background:var(--c-cta-hi)}
#menu.lbx .fr-btn.is-x{color:rgba(255,255,255,.7)}
#menu.lbx .fr-btn:disabled{opacity:.55;cursor:default}
#menu.lbx .pf-seg{display:flex;flex-wrap:wrap;gap:6px;flex:none}
#menu.lbx .pf-seg .chip-btn{min-height:30px;padding:3px 11px;border-radius:4px;background:rgba(8,14,18,.5);border-color:rgba(255,255,255,.14);font-size:11px;font-weight:800;letter-spacing:.08em}
#menu.lbx .pf-seg .chip-btn.is-on{background:rgba(244,197,52,.16);border-color:rgba(244,197,52,.7);color:#ffe08a}
#menu.lbx .top-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#menu.lbx .top-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.04)}
#menu.lbx .top-row:nth-child(-n+3) .top-place{color:var(--c-cta)}
#menu.lbx .top-row.is-me{background:rgba(244,197,52,.12);box-shadow:inset 0 0 0 1px rgba(244,197,52,.45)}
#menu.lbx .top-place{width:26px;flex:none;text-align:right;font-weight:900;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6)}
#menu.lbx .top-row .pf-ava{width:26px;height:26px;font-size:12px}
#menu.lbx .top-nick{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu.lbx .top-val{flex:none;font-weight:900;font-variant-numeric:tabular-nums}
#menu.lbx .top-empty{padding:14px 4px;text-align:center;font-size:13px;color:rgba(255,255,255,.5)}
#menu.lbx .wait-tools{flex-wrap:wrap;row-gap:6px}#menu.lbx .wait-tools .room-bots{flex:1 1 100%}#menu.lbx .wait-tools #wait-friends{margin-left:auto}#menu.lbx .wait-tools #wait-friends:not([hidden])+#wait-link{margin-left:0}
#menu.lbx .wait-invite{display:flex;flex-direction:column;gap:6px;flex:none;max-height:34vh;overflow:auto;padding:8px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#menu.lbx .wait-invite[hidden]{display:none}
@media (max-height:500px) and (orientation:landscape){
 #menu.lbx .acct-chip{height:34px;padding:0 10px 0 3px;font-size:11px}#menu.lbx .acct-ava{width:28px;height:28px}
 #menu.lbx .pf-tab{min-height:28px;font-size:10.5px}#menu.lbx .pf-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#menu.lbx .pf-stat{padding:6px 8px}#menu.lbx .pf-stat b{font-size:16px}
 #menu.lbx .pf-head{gap:10px;padding:0}#menu.lbx .pf-ava-lg{width:40px;height:40px;font-size:18px}#menu.lbx .pf-who b{font-size:17px}
 #menu.lbx .tg-login{min-height:40px;font-size:12px}#menu.lbx .pf-lead{font-size:12.5px}#menu.lbx .pf-perks{display:none}
 #menu.lbx .fr-row{padding:5px 6px 5px 8px}#menu.lbx .fr-btn{min-height:28px}#menu.lbx .wait-invite{max-height:30vh}}
@media (max-width:640px) and (min-height:501px){#menu.lbx #acct-name{display:none}#menu.lbx .acct-chip{padding:0 5px}}
/* ===== 5.9.13 AFTERDROP LOBBY: the character in the middle of the island view; a top bar with the logo, sections, A-coin
   and the profile; the player card on the left; the mode cards and the play buttons on the right; panels on the left ===== */
#menu.lbx{--lb-a:#ffc53d;--lb-b:#ff6b35;--lb-ink:#1c0f04;--lb-txt:#eef3f7;--lb-mut:rgba(238,243,247,.6);--lb-dim:rgba(238,243,247,.4);--lb-line:rgba(255,255,255,.1);--lb-glass:rgba(10,14,20,.88);--lb-glass-hi:rgba(255,255,255,.06);--lb-r:6px;--lb-pad:clamp(16px,2.2vw,32px);--lb-top:76px;
 display:block;padding:0;overflow:hidden;touch-action:manipulation;background:#070b11;color:var(--lb-txt)}
#menu.lbx::before,#menu.lbx::after{content:none}
#menu.lbx .lobby-bg{position:absolute;inset:-3%;z-index:-2;background:#0b1418 url('assets/ui/lobby-island.webp') 56% 44%/cover no-repeat;filter:saturate(1.08);animation:lb-drift 90s ease-in-out infinite alternate;will-change:transform}
@media (max-width:1280px),(max-height:760px){#menu.lbx .lobby-bg{background-image:url('assets/ui/lobby-island-m.webp')}}
@keyframes lb-drift{from{transform:scale(1.04)}to{transform:scale(1.1) translate3d(-1%,-.6%,0)}}
#menu.lbx .lobby-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(42% 58% at 50% 56%,rgba(255,170,90,.12),rgba(255,170,90,0) 70%),
 radial-gradient(120% 90% at 50% 50%,rgba(5,8,12,0) 38%,rgba(5,8,12,.82) 100%),
 linear-gradient(180deg,rgba(5,8,12,.78) 0%,rgba(5,8,12,0) 18%,rgba(5,8,12,0) 66%,rgba(5,8,12,.86) 100%)}
@media (prefers-reduced-motion:reduce){#menu.lbx .lobby-bg{animation:none}}
#menu.lbx .lb-glass{background:var(--lb-glass);border:1px solid var(--lb-line);border-radius:var(--lb-r);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
#menu.lbx .lb-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--lb-dim)}
/* every icon inside a button sits in the middle */
#menu.lbx button svg{display:block;flex:none}
#menu.lbx .icon-btn{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:6px;border:1px solid var(--lb-line);background:rgba(9,14,21,.55);color:var(--lb-txt);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s,transform .15s}
#menu.lbx .icon-btn svg{width:19px;height:19px}
#menu.lbx .icon-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}#menu.lbx .icon-btn:active{transform:scale(.94)}
#menu.lbx .icon-btn[aria-pressed=false]{color:var(--lb-dim)}
/* the character fills the screen; the figure stands in the middle */
#menu.lbx .lobby-stage{position:absolute;inset:0;z-index:0}
#menu.lbx .lobby-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#menu.lbx #model-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lb-dim)}
#menu.lbx #model-reset{display:none}
#menu.lbx .stage-weapon{position:absolute;left:50%;bottom:clamp(14px,3vh,34px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px;border-radius:4px;background:rgba(9,14,21,.5);border:1px solid var(--lb-line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center;pointer-events:auto}
#menu.lbx .wp-text{min-width:170px;padding:0 4px}
#menu.lbx .wp-text small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--lb-dim)}
#menu.lbx .wp-text strong{display:block;font-size:19px;font-weight:900;letter-spacing:.06em;color:#fff}
#menu.lbx .wp-step{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background .2s,transform .15s}
#menu.lbx .wp-step svg{width:17px;height:17px}#menu.lbx #weapon-prev svg{transform:scaleX(-1)}
#menu.lbx .wp-step:hover{background:rgba(255,197,61,.25)}#menu.lbx .wp-step:active{transform:scale(.92)}
/* the top bar */
#menu.lbx .lb-top{position:absolute;top:0;left:0;right:0;z-index:4;height:var(--lb-top);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--lb-pad);pointer-events:none}
#menu.lbx .lb-top>*{pointer-events:auto}
#menu.lbx .lb-logo{display:flex;align-items:center;gap:10px;justify-self:start;color:#fff;text-decoration:none;user-select:none}
#menu.lbx .lb-logo-mark{width:40px;height:40px;filter:drop-shadow(0 6px 16px rgba(255,107,53,.35))}
#menu.lbx .lb-word,.lb-load .lb-word{display:flex;font-size:25px;line-height:1;letter-spacing:.06em}
.lb-word b{font-weight:900;color:#fff}
.lb-word i{font-style:normal;font-weight:900;background:linear-gradient(90deg,#ffd23f,#ff6b35);-webkit-background-clip:text;background-clip:text;color:transparent}
#menu.lbx .lb-nav{display:flex;gap:4px;padding:5px;border-radius:4px;background:rgba(9,14,21,.6);border:1px solid var(--lb-line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#menu.lbx .lb-tab{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:4px;background:none;color:var(--lb-mut);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
#menu.lbx .lb-tab svg{width:17px;height:17px}
#menu.lbx .lb-tab:hover{color:#fff;background:rgba(255,255,255,.06)}
#menu.lbx[data-view=home] [data-nav=home],#menu.lbx[data-view=waiting] [data-nav=home],#menu.lbx[data-view=rooms] #open-rooms,#menu.lbx[data-view=look] #look-toggle,
#menu.lbx[data-view=profile][data-pf=friends] #profile-open,#menu.lbx[data-view=profile][data-pf=top] #top-open{background:linear-gradient(135deg,#ffd23f,#ff8a3d);color:var(--lb-ink)}
#menu.lbx .lobby-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;justify-self:end;margin:0}
#menu.lbx .lb-coins{display:flex;align-items:center;gap:7px;height:42px;padding:0 14px 0 9px;border-radius:4px;border:1px solid rgba(255,197,61,.45);background:rgba(255,197,61,.1);color:#ffe3a1;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#menu.lbx .lb-coins svg{width:24px;height:24px}
#menu.lbx .lb-coins.gain{animation:lb-gain 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes lb-gain{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,197,61,.7)}25%{transform:scale(1.12)}100%{transform:scale(1);box-shadow:0 0 0 18px rgba(255,197,61,0)}}
#menu.lbx .acct-chip{display:flex;align-items:center;gap:9px;height:42px;max-width:200px;padding:0 14px 0 5px;border-radius:4px;border:1px solid var(--lb-line);background:rgba(9,14,21,.55);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.06em;cursor:pointer;position:relative;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
#menu.lbx .acct-chip:hover{background:rgba(255,255,255,.1)}
#menu.lbx .acct-chip:not(.is-in){border-color:rgba(64,168,236,.6);background:rgba(42,140,210,.24)}
#menu.lbx #acct-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu.lbx .acct-ava,#menu.lbx .pf-ava,#menu.lbx .lb-ava{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2aa3e8,#1c74c4);color:#fff;font-weight:900;font-size:14px}
#menu.lbx .acct-ava svg{width:16px;height:16px}#menu.lbx .acct-ava img,#menu.lbx .pf-ava img,#menu.lbx .lb-ava img{width:100%;height:100%;object-fit:cover}
#menu.lbx .acct-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:6px;background:#ff4d4d;color:#fff;font:800 11px/18px var(--f-ui);font-style:normal;text-align:center}
#menu.lbx .acct-badge[hidden]{display:none}
/* home: the player card (left) and the match dock (right) */
#menu.lbx .lb-home{position:absolute;z-index:3;top:calc(var(--lb-top) + 8px);left:var(--lb-pad);right:var(--lb-pad);bottom:var(--lb-pad);display:flex;justify-content:space-between;align-items:stretch;gap:24px;pointer-events:none}
#menu.lbx .lb-home.hidden{display:none}
#menu.lbx .lb-home>*{pointer-events:auto}
#menu.lbx .lb-side{align-self:flex-start;width:min(330px,28vw);max-height:100%;display:flex;flex-direction:column;gap:14px;padding:16px;overflow:auto;animation:lb-in-l .4s cubic-bezier(.2,.8,.2,1)}
#menu.lbx .lb-me{display:flex;align-items:center;gap:12px}
#menu.lbx .lb-ava{width:52px;height:52px;font-size:22px;background:linear-gradient(135deg,#3a4656,#232c38);box-shadow:0 0 0 2px rgba(255,255,255,.08)}
#menu.lbx .lb-ava svg{width:24px;height:24px;color:var(--lb-mut)}
#menu.lbx .lb-ava.is-in{background:linear-gradient(135deg,#ffb627,#ff6b35);box-shadow:0 0 0 2px rgba(255,197,61,.45)}
#menu.lbx .lb-me-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#menu.lbx .lb-nick{width:100%;height:42px;padding:0 12px;border-radius:6px;border:1px solid var(--lb-line);background:rgba(0,0,0,.25);color:#fff;font-size:18px;font-weight:800;letter-spacing:.02em;transition:border-color .2s,box-shadow .2s}
#menu.lbx .lb-nick:focus{outline:0;border-color:rgba(255,197,61,.8);box-shadow:0 0 0 4px rgba(255,197,61,.15)}
#menu.lbx .lb-nick[aria-invalid=true]{border-color:#ff6b5b;box-shadow:0 0 0 4px rgba(255,107,91,.15)}
#menu.lbx .nickname-hint{font-size:11.5px;color:#ff9b8f}#menu.lbx .nickname-hint:empty{display:none}
#menu.lbx .lb-side-body{display:flex;flex-direction:column;gap:12px}
#menu.lbx .lb-idline{display:flex;align-items:center;justify-content:space-between;gap:8px}
#menu.lbx .lb-pid{padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.07);font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--lb-mut)}
#menu.lbx .lb-coinline{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#ffe3a1}#menu.lbx .lb-coinline svg{width:18px;height:18px}
#menu.lbx .lb-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#menu.lbx .lb-mini>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:6px;background:var(--lb-glass-hi)}
#menu.lbx .lb-mini b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
#menu.lbx .lb-mini small{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--lb-dim)}
#menu.lbx .lb-friends{display:flex;flex-direction:column;gap:6px}
#menu.lbx .lb-fr-head{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lb-dim)}
#menu.lbx .lb-guest{display:flex;flex-direction:column;gap:10px;padding:4px 0 0}
#menu.lbx .lb-guest b{font-size:16px;font-weight:900;letter-spacing:.02em}
#menu.lbx .lb-guest p{margin:0;font-size:13px;line-height:1.45;color:var(--lb-mut)}
#menu.lbx .lb-dock{align-self:flex-end;width:min(380px,32vw);display:flex;flex-direction:column;gap:12px;animation:lb-in-r .4s cubic-bezier(.2,.8,.2,1)}
@keyframes lb-in-l{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lb-in-r{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
#menu.lbx .lb-mode-box{display:flex;flex-direction:column;gap:10px;padding:14px}
#menu.lbx .lb-modes{display:flex;flex-direction:column;gap:6px}
#menu.lbx .lb-mode{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:6px;border:1px solid transparent;background:var(--lb-glass-hi);color:var(--lb-txt);text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
#menu.lbx .lb-mode svg{display:grid;width:36px;height:36px;padding:8px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--lb-mut);box-sizing:border-box}
#menu.lbx .lb-mode span{display:flex;flex-direction:column;gap:2px;min-width:0}
#menu.lbx .lb-mode b{font-size:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
#menu.lbx .lb-mode small{font-size:11.5px;color:var(--lb-dim)}
#menu.lbx .lb-mode:hover{background:rgba(255,255,255,.1)}
#menu.lbx .lb-mode.is-on{border-color:rgba(255,197,61,.7);background:linear-gradient(135deg,rgba(255,210,63,.18),rgba(255,107,53,.12))}
#menu.lbx .lb-mode.is-on svg{background:linear-gradient(135deg,#ffd23f,#ff8a3d);color:var(--lb-ink)}
#menu.lbx .lb-play{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:84px;padding:14px 22px 14px 24px;border:0;border-radius:6px;background:linear-gradient(135deg,#ffd23f 0%,#ffae35 48%,#ff6b35 100%);color:var(--lb-ink);text-align:left;cursor:pointer;box-shadow:0 18px 44px rgba(255,120,40,.35),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .16s,box-shadow .2s,filter .2s;position:relative;overflow:hidden}
#menu.lbx .lb-play-txt{display:flex;flex-direction:column;gap:4px}
#menu.lbx .lb-play b{font-size:clamp(24px,2.1vw,32px);font-weight:900;letter-spacing:.08em;line-height:1}
#menu.lbx .lb-play small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
#menu.lbx .lb-play>svg{width:30px;height:30px;transition:transform .2s}
#menu.lbx .lb-play:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 22px 54px rgba(255,120,40,.48),inset 0 1px 0 rgba(255,255,255,.55)}
#menu.lbx .lb-play:hover>svg{transform:translateX(4px)}#menu.lbx .lb-play:active:not(:disabled){transform:scale(.99)}
#menu.lbx .lb-train{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 18px;border-radius:6px;border:1px solid var(--lb-line);background:rgba(9,14,21,.6);color:var(--lb-txt);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
#menu.lbx .lb-train svg{width:19px;height:19px;color:var(--lb-a)}
#menu.lbx .lb-train span{text-align:left;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
#menu.lbx .lb-train small{font-size:11.5px;color:var(--lb-dim)}
#menu.lbx .lb-train:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
#menu.lbx .lb-play:disabled,#menu.lbx .lb-train:disabled{opacity:.6;cursor:progress}
#menu.lbx .menu-status{min-height:18px;margin:0;font-size:12.5px;line-height:1.4;text-align:center;color:var(--lb-mut)}
#menu.lbx .menu-status[data-kind=error]{color:#ff9b8f}
#menu.lbx .invite-card{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:6px;background:rgba(255,197,61,.14);border:1px solid rgba(255,197,61,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:lb-in-r .32s cubic-bezier(.2,.8,.2,1)}
#menu.lbx .invite-card[hidden]{display:none}
#menu.lbx .invite-card>svg{width:18px;height:18px;color:var(--lb-a)}
#menu.lbx #invite-text{flex:1;min-width:0;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu.lbx .invite-join{min-height:34px;padding:4px 14px;border-radius:6px;border:0;background:linear-gradient(135deg,#ffd23f,#ff8a3d);color:var(--lb-ink);font-weight:900;letter-spacing:.1em}
#menu.lbx .invite-close{display:grid;place-items:center;width:28px;height:28px;border:0;background:none;color:var(--lb-mut);cursor:pointer}#menu.lbx .invite-close svg{width:16px;height:16px}
/* panels: rooms, waiting room, look, profile — on the left, the character stays in view */
#menu.lbx .lobby-sheet{position:absolute;z-index:3;top:calc(var(--lb-top) + 8px);left:var(--lb-pad);bottom:var(--lb-pad);width:min(460px,38vw);display:flex;flex-direction:column;gap:12px;padding:18px;animation:lb-in-l .35s cubic-bezier(.2,.8,.2,1)}
#menu.lbx .lobby-sheet.hidden{display:none}
#menu.lbx .sheet-head{display:flex;align-items:center;gap:10px;flex:none}
#menu.lbx .sheet-head h2{flex:1;min-width:0;margin:0;font-size:21px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu.lbx .sheet-head .icon-btn{width:40px;height:40px}
#menu.lbx .sheet-ping,#menu.lbx .sheet-count{flex:none;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--lb-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
#menu.lbx .sheet-count{font-size:14px;color:var(--lb-txt)}
#menu.lbx #rooms-refresh.spin svg{animation:lobby-spin .7s linear infinite}
#menu.lbx .rooms-list,#menu.lbx .wait-players{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;touch-action:pan-y}
#menu.lbx .rooms-empty{margin:auto 0;padding:12px 6px;text-align:center;font-size:13px;line-height:1.5;color:var(--lb-mut)}
#menu.lbx .room-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:6px;background:var(--lb-glass-hi);border:1px solid rgba(255,255,255,.06)}
#menu.lbx .ri-main b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu.lbx .ri-main small{font-size:11px;font-weight:800;letter-spacing:.12em;color:#8ff0b8}
#menu.lbx .room-item[data-status=starting] .ri-main small{color:var(--lb-a)}#menu.lbx .room-item[data-status=playing] .ri-main small{color:var(--lb-dim)}
#menu.lbx .ri-count{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--lb-mut)}
#menu.lbx .ri-join,#menu.lbx .room-create .btn{min-height:38px;padding:4px 16px;border-radius:6px;border:0;background:linear-gradient(135deg,#ffd23f,#ff8a3d);color:var(--lb-ink);font-weight:900;letter-spacing:.08em}
#menu.lbx .ri-join:disabled{background:rgba(255,255,255,.08);color:var(--lb-dim)}
#menu.lbx .room-create{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;flex:none}
#menu.lbx .room-create .room-bots{grid-column:1/-1}
#menu.lbx .field{border-radius:6px;border:1px solid var(--lb-line);background:rgba(0,0,0,.28);color:#fff}
#menu.lbx .room-create .field{height:42px;padding:0 12px}
#menu.lbx .room-bots{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--lb-mut);cursor:pointer}
#menu.lbx .room-bots input{width:18px;height:18px;accent-color:#ffb627}
#menu.lbx .wait-players li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:6px;background:var(--lb-glass-hi);font-size:15px}
#menu.lbx .wait-players li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu.lbx .wait-players li small{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lb-dim)}
#menu.lbx .wait-players li.is-ready{box-shadow:inset 3px 0 0 #3ddc84}#menu.lbx .wait-players li.is-ready small{color:#8ff0b8}
#menu.lbx .wait-players li.is-host small{color:var(--lb-a)}
#menu.lbx .wait-players li.is-bots{background:none;border:1px dashed var(--lb-line);color:var(--lb-mut)}
#menu.lbx .wait-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}
#menu.lbx .wait-tools .room-bots{flex:1 1 100%}
#menu.lbx .wait-link{display:flex;align-items:center;gap:7px;min-height:34px;padding:2px 14px;border-radius:4px;border:1px solid var(--lb-line);background:rgba(255,255,255,.05);color:var(--lb-txt);font-size:12px;font-weight:800;letter-spacing:.1em;cursor:pointer}
#menu.lbx .wait-link svg{width:15px;height:15px;color:var(--lb-a)}
#menu.lbx .wait-link:hover{border-color:rgba(255,197,61,.6)}
#menu.lbx #wait-friends{margin-left:auto}#menu.lbx #wait-friends[hidden]+#wait-link{margin-left:auto}
#menu.lbx .wait-link.done{border-color:#3ddc84;color:#bdf5d3}
#menu.lbx .wait-status{flex:none;margin:0;font-size:14px;color:var(--lb-mut)}
#menu.lbx .wait-status[data-state=starting]{font-size:26px;font-weight:900;letter-spacing:.08em;color:var(--lb-a)}
#menu.lbx .wait-actions{display:grid;grid-template-columns:1fr auto;gap:10px;flex:none}
#menu.lbx #wait-ready{display:flex;align-items:center;justify-content:center;min-height:52px;border:0;border-radius:6px;background:linear-gradient(135deg,#ffd23f,#ff8a3d);color:var(--lb-ink);font-size:16px;font-weight:900;letter-spacing:.14em}
#menu.lbx #wait-ready.is-on{background:#3ddc84}
#menu.lbx #wait-ready:disabled{background:rgba(255,255,255,.1);color:var(--lb-dim)}
#menu.lbx #wait-leave{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:6px;border:1px solid var(--lb-line);background:rgba(255,255,255,.05);color:var(--lb-txt);font-weight:800}
#menu.lbx #wait-leave svg{width:17px;height:17px}
#menu.lbx .wait-invite{display:flex;flex-direction:column;gap:6px;flex:none;max-height:30vh;overflow:auto;padding:8px;border-radius:6px;background:rgba(255,255,255,.04)}
#menu.lbx .wait-invite[hidden]{display:none}
#menu.lbx .look-rows{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;touch-action:pan-y}
#menu.lbx .look-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
#menu.lbx .look-row>span{font-size:13px;color:var(--lb-mut)}
#menu.lbx .look-row.is-weapon>span{color:var(--lb-txt);font-weight:800}
#menu.lbx .look-ctl{display:grid;grid-template-columns:34px minmax(110px,auto) 34px;align-items:center;gap:6px}
#menu.lbx .look-ctl b{text-align:center;font-size:14px;white-space:nowrap}
#menu.lbx .look-step{height:34px;border-radius:6px;border:1px solid var(--lb-line);background:rgba(255,255,255,.05);color:#fff;font-size:18px;line-height:1;cursor:pointer}
#menu.lbx .look-step:hover{border-color:rgba(255,197,61,.6)}
#menu.lbx #look-random{min-height:34px;padding:2px 14px;border-radius:4px;border:1px solid var(--lb-line);background:rgba(255,255,255,.05);color:var(--lb-txt);font-weight:800;cursor:pointer}
#menu.lbx .lb-soon{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:6px;background:rgba(255,197,61,.08);border:1px dashed rgba(255,197,61,.35);font-size:12.5px;font-weight:700;color:#ffe3a1;flex:none}
#menu.lbx .lb-soon svg{width:20px;height:20px}
/* narrower windows */
@media (max-width:1180px){#menu.lbx .lb-tab span{display:none}#menu.lbx .lb-tab{padding:0 13px}}
@media (max-width:980px) and (min-height:501px){#menu.lbx .lb-side{width:min(300px,34vw)}#menu.lbx .lb-dock{width:min(340px,40vw)}#menu.lbx .stage-weapon{display:none}#menu.lbx .lobby-sheet{width:min(440px,52vw)}}
/* phones in landscape */
@media (max-height:500px) and (orientation:landscape){
 #menu.lbx{--lb-top:50px;--lb-pad:max(10px,env(safe-area-inset-left));--lb-r:6px}
 #menu.lbx .lb-top{gap:8px}
 #menu.lbx .lb-logo-mark{width:28px;height:28px}#menu.lbx .lb-word{font-size:16px}
 #menu.lbx .lb-nav{padding:3px}#menu.lbx .lb-tab{height:32px;padding:0 10px}#menu.lbx .lb-tab span{display:none}
 #menu.lbx .icon-btn,#menu.lbx .acct-chip,#menu.lbx .lb-coins{height:34px}#menu.lbx .icon-btn{width:34px;border-radius:6px}#menu.lbx #menu-music{display:none}
 #menu.lbx #acct-name{display:none}#menu.lbx .acct-chip{padding:0 3px}#menu.lbx .acct-ava{width:28px;height:28px}
 #menu.lbx .lb-coins{padding:0 10px 0 6px;font-size:12px}#menu.lbx .lb-coins svg{width:20px;height:20px}
 #menu.lbx .lb-home{top:calc(var(--lb-top) + 4px);gap:10px}
 #menu.lbx .lb-side{width:30vw;padding:10px;gap:8px}
 #menu.lbx .lb-ava{width:38px;height:38px;font-size:16px}#menu.lbx .lb-label{display:none}#menu.lbx .lb-nick{height:36px;font-size:15px}
 #menu.lbx .lb-mini{display:none}#menu.lbx .lb-friends{display:none}#menu.lbx .lb-guest p{display:none}#menu.lbx .lb-guest b{font-size:13px}
 #menu.lbx .lb-dock{width:38vw;gap:6px}
 #menu.lbx .lb-mode-box{padding:6px;gap:4px}#menu.lbx .lb-modes{flex-direction:row}
 #menu.lbx .lb-mode{flex:1;flex-direction:column;gap:3px;padding:6px 4px;text-align:center}#menu.lbx .lb-mode svg{width:26px;height:26px;padding:5px}#menu.lbx .lb-mode b{font-size:10px;letter-spacing:.02em}#menu.lbx .lb-mode small{display:none}
 #menu.lbx .lb-play{min-height:54px;padding:8px 14px;border-radius:6px}#menu.lbx .lb-play b{font-size:19px}#menu.lbx .lb-play small{font-size:9px;letter-spacing:.08em}#menu.lbx .lb-play>svg{width:22px;height:22px}
 #menu.lbx .lb-train{min-height:38px;padding:0 12px;border-radius:6px}#menu.lbx .lb-train small{display:none}
 #menu.lbx .menu-status{font-size:11px;min-height:0}
 #menu.lbx .stage-weapon{left:44%;bottom:6px;padding:3px;gap:4px}#menu.lbx .wp-text{min-width:92px}#menu.lbx .wp-text small{display:none}#menu.lbx .wp-text strong{font-size:14px}#menu.lbx .wp-step{width:30px;height:30px}
 #menu.lbx .lobby-sheet{top:calc(var(--lb-top) + 4px);width:52vw;padding:10px 12px;gap:7px}
 #menu.lbx .sheet-head h2{font-size:15px}#menu.lbx .sheet-head .icon-btn{width:32px;height:32px}
 #menu.lbx .room-item{padding:5px 8px 5px 10px}#menu.lbx .ri-join,#menu.lbx .room-create .btn{min-height:32px}
 #menu.lbx .room-create .field{height:34px}
 #menu.lbx .wait-players li{padding:6px 10px;font-size:13px}#menu.lbx .wait-status[data-state=starting]{font-size:19px}
 #menu.lbx #wait-ready,#menu.lbx #wait-leave{min-height:40px}
 #menu.lbx .look-rows{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:2px 10px}
 #menu.lbx .look-row{flex-direction:column;align-items:stretch;gap:1px;padding:0;border-bottom:0;min-width:0}#menu.lbx .look-row>span{font-size:9px;letter-spacing:.06em}
 #menu.lbx .look-ctl{grid-template-columns:26px minmax(0,1fr) 26px;gap:3px}#menu.lbx .look-ctl b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis}#menu.lbx .look-step{height:26px;font-size:15px}
 #menu.lbx .lb-soon{display:none}
}
/* phones held upright: rotate */
#menu.lbx .lobby-rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){
 #menu.lbx .lobby-rotate{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:rgba(7,11,17,.985)}
 #menu.lbx .lobby-rotate svg{width:54px;height:54px;color:var(--lb-a);animation:lobby-rot 2.4s ease-in-out infinite}
 #menu.lbx .lobby-rotate b{font-size:18px;letter-spacing:.06em}
}

/* ===== 5.9.13 the match loading screen ===== */
.lb-load{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);grid-template-rows:auto 1fr auto;gap:clamp(14px,3vh,28px) clamp(18px,4vw,64px);align-items:end;justify-content:stretch;padding:clamp(18px,4vh,40px) clamp(18px,4vw,64px);background:#070b11;color:#eef3f7;overflow:hidden}
.lb-load .ld-bg{position:absolute;inset:-4%;z-index:-1;background:#0b1418 url('assets/ui/lobby-island-m.webp') 50% 45%/cover no-repeat;filter:blur(6px) saturate(1.1) brightness(.55);transform:scale(1.06);animation:lb-drift 40s ease-in-out infinite alternate}
.lb-load::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 30% 60%,rgba(7,11,17,.2),rgba(7,11,17,.85)),linear-gradient(0deg,rgba(7,11,17,.95),rgba(7,11,17,0) 45%)}
.lb-load .ld-top{grid-column:1/-1;align-self:start;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lb-load .lb-logo{display:flex;align-items:center;gap:10px}
.lb-load .lb-logo-mark{width:42px;height:42px;filter:drop-shadow(0 6px 16px rgba(255,107,53,.4))}
.lb-load .ld-chip{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:800;letter-spacing:.08em}
.lb-load .ld-main{align-self:center;display:flex;flex-direction:column;gap:12px;max-width:720px}
.lb-load .ld-eyebrow{font-size:12px;font-weight:800;letter-spacing:.3em;color:#ffc53d}
.lb-load #ld-mode{margin:0;font-size:clamp(34px,5.4vw,72px);font-weight:900;letter-spacing:.04em;line-height:.95;text-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb-load #ld-desc{margin:0;max-width:560px;font-size:clamp(14px,1.4vw,18px);line-height:1.5;color:rgba(238,243,247,.75)}
.lb-load .ld-facts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.lb-load .ld-facts li{padding:7px 13px;border-radius:999px;background:rgba(255,197,61,.12);border:1px solid rgba(255,197,61,.4);font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#ffe3a1}
.lb-load .ld-side{align-self:center;display:flex;flex-direction:column;gap:12px}
.lb-load .ld-card{padding:14px 16px;border-radius:16px;background:rgba(9,14,21,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb-load .ld-card>b{display:block;margin-bottom:8px;font-size:10.5px;font-weight:800;letter-spacing:.24em;color:#ffc53d}
.lb-load .ld-tip p{margin:0;font-size:14px;line-height:1.5}
.lb-load .ld-keys ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:0;padding:0;list-style:none}
.lb-load .ld-keys li{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(238,243,247,.7)}
.lb-load .ld-keys li span{display:flex;gap:3px}
.lb-load kbd{min-width:22px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;font:800 11px/1.4 var(--f-ui);color:#fff;text-align:center}
.lb-load .ld-progress{grid-column:1/-1;display:flex;flex-direction:column;gap:9px}
.lb-load .ld-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lb-load #ld-pct{font-variant-numeric:tabular-nums;color:#ffc53d}
.lb-load .ld-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.lb-load .ld-bar span{display:block;width:4%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffd23f,#ff6b35);box-shadow:0 0 18px rgba(255,140,60,.6);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.lb-load .ld-steps{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.lb-load .ld-steps li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(238,243,247,.4)}
.lb-load .ld-steps li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.lb-load .ld-steps li.done{color:#8ff0b8}.lb-load .ld-steps li.done::before{background:currentColor}
.lb-load .ld-steps li.now{color:#fff}.lb-load .ld-steps li.now::before{border-color:#ffc53d;background:#ffc53d;box-shadow:0 0 10px #ffc53d;animation:lb-pulse 1s ease-in-out infinite}
@keyframes lb-pulse{50%{opacity:.4}}
.lb-load .ld-steps:empty{display:none}
@media (max-width:860px),(max-height:520px){.lb-load{grid-template-columns:1fr}.lb-load .ld-side{display:none}.lb-load #ld-mode{font-size:clamp(28px,7vw,44px)}.lb-load .ld-steps{display:none}}
/* ===== 5.9.15 lobby, plainer: no icon tiles, no subtitles, text tabs, square-cut buttons, no green bars ===== */
#menu.lbx .lb-tab{height:38px;padding:0 16px;font-size:12.5px;letter-spacing:.12em}
#menu.lbx .lb-nav{padding:3px;gap:2px}
#menu.lbx .lb-modes{gap:4px}
#menu.lbx .lb-mode{position:relative;display:flex;align-items:center;min-height:46px;padding:0 16px;border:0;border-left:3px solid transparent;border-radius:3px;background:rgba(255,255,255,.04)}
#menu.lbx .lb-mode b{font-size:14px;letter-spacing:.08em}
#menu.lbx .lb-mode:hover{background:rgba(255,255,255,.08)}
#menu.lbx .lb-mode.is-on{border-left-color:var(--lb-a);background:rgba(255,197,61,.1);color:#fff}
#menu.lbx .lb-mode.is-on::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--lb-a);transform:rotate(45deg)}
#menu.lbx .lb-mode-box{padding:12px;gap:8px}
#menu.lbx .lb-play{min-height:72px;padding:0 22px 0 24px;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);box-shadow:none}
#menu.lbx .lb-play b{font-size:clamp(24px,2vw,30px);letter-spacing:.1em}
#menu.lbx .lb-play:hover:not(:disabled){transform:none;filter:brightness(1.07);box-shadow:none}
#menu.lbx .lb-train{display:flex;justify-content:center;min-height:46px;border-radius:3px}
#menu.lbx .lb-train span{text-align:center;font-size:12.5px}
#menu.lbx .wait-players li{border-radius:3px}
#menu.lbx .wait-players li.is-ready{box-shadow:none}
#menu.lbx .wait-players li.is-host{background:rgba(255,197,61,.08)}
#menu.lbx .lb-side,#menu.lbx .lb-mode-box,#menu.lbx .lobby-sheet{border-radius:4px}
#menu.lbx .lb-mini>div{border-radius:3px}
#menu.lbx .fr-row,#menu.lbx .top-row,#menu.lbx .pf-stat,#menu.lbx .room-item{border-radius:3px}
@media (max-height:500px) and (orientation:landscape){
 #menu.lbx .lb-tab{height:30px;padding:0 9px;font-size:10.5px;letter-spacing:.06em}#menu.lbx .lb-tab span{display:inline}
 #menu.lbx .lb-mode{min-height:34px;padding:0 6px;justify-content:center;text-align:center}#menu.lbx .lb-mode b{font-size:10.5px;letter-spacing:.03em}#menu.lbx .lb-mode.is-on::after{display:none}
 #menu.lbx .lb-play{min-height:50px}#menu.lbx .lb-play b{font-size:18px}#menu.lbx .lb-train{min-height:34px}}
@media (max-width:1180px){#menu.lbx .lb-tab span{display:inline}#menu.lbx .lb-tab{padding:0 11px}}
@media (max-width:1180px) and (min-height:501px){#menu.lbx #acct-name{display:none}#menu.lbx .acct-chip{padding:0 5px}#menu.lbx .lb-word{font-size:20px}}
/* 5.9.16 grenade quick button: dim when none */
.quick-actions #nade-btn.empty{opacity:.45}
#nade-count{position:absolute;left:4px;bottom:1px;font-size:11px;font-weight:700;color:var(--c-cta)}