/* ═══════════════════════════════════════════════════════════════
   ZooMMer-Gaming — neon shooter UI
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#04060c;
  --bg-2:#070b14;
  --panel:rgba(11,16,27,.86);
  --panel-solid:#0b1019;
  --panel-2:rgba(16,23,38,.9);
  --line:rgba(0,240,255,.16);
  --line-strong:rgba(0,240,255,.42);
  --cyan:#00f0ff;
  --cyan-dim:#0a9fb0;
  --magenta:#ff2fd0;
  --lime:#b6ff00;
  --purple:#9b5cff;
  --amber:#ffb020;
  --danger:#ff2d55;
  --ok:#2bff88;
  --text:#dbe9f7;
  --dim:#7d93ad;
  --dim-2:#4d6076;
  --radius:0px;
  --clip:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --clip-sm:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  --font:'Segoe UI',system-ui,-apple-system,'Inter',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--cyan);text-decoration:none}
::selection{background:rgba(0,240,255,.28);color:#fff}

/* скроллбар */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cyan-dim),#123);border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--cyan);background-clip:padding-box}

.hidden{display:none !important}
[hidden]{display:none !important}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico.big{width:44px;height:44px;stroke-width:1.3}

/* ─────────── ФОН ─────────── */
.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(1200px 700px at 15% -10%, #071324 0%, transparent 60%),
  radial-gradient(900px 600px at 95% 5%, #1a0726 0%, transparent 55%),
  linear-gradient(180deg,#04060c,#03050a 60%,#04060c)}
.bg-grid{position:absolute;inset:-40% -10% -10%;background-image:
  linear-gradient(rgba(0,240,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,240,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  transform:perspective(700px) rotateX(64deg) translateY(6%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
  animation:gridmove 18s linear infinite}
@keyframes gridmove{to{background-position:0 56px,56px 0}}
.bg-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bg-glow.g1{width:520px;height:520px;background:#0077ff33;top:-160px;left:-100px;animation:float1 16s ease-in-out infinite}
.bg-glow.g2{width:460px;height:460px;background:#ff2fd033;bottom:-180px;right:-80px;animation:float2 20s ease-in-out infinite}
.bg-glow.g3{width:380px;height:380px;background:#9b5cff22;top:35%;left:45%;animation:float1 24s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate(60px,40px) scale(1.12)}}
@keyframes float2{50%{transform:translate(-50px,-30px) scale(1.08)}}
.bg-scan{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}

.screen{position:relative;z-index:1;height:100%}

/* ─────────── АВТОРИЗАЦИЯ ─────────── */
.auth-screen{display:flex;align-items:center;justify-content:center;padding:28px;overflow:auto}
.auth-shell{
  display:grid;grid-template-columns:minmax(320px,1fr) 460px;gap:54px;
  width:min(1180px,100%);align-items:center;
}
.auth-hero{animation:slideIn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}}
.logo-lockup{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.logo-mark{width:66px;height:66px;display:grid;place-items:center;color:var(--cyan);
  background:linear-gradient(145deg,rgba(0,240,255,.14),rgba(255,47,208,.1));
  border:1px solid var(--line-strong);clip-path:var(--clip);
  box-shadow:0 0 24px rgba(0,240,255,.35),inset 0 0 22px rgba(0,240,255,.12)}
.logo-mark svg{width:40px;height:40px;filter:drop-shadow(0 0 8px var(--cyan))}
.brand{margin:0;font-size:clamp(30px,4vw,46px);letter-spacing:.06em;font-weight:900;line-height:.95;
  background:linear-gradient(96deg,#fff 10%,var(--cyan) 45%,var(--magenta) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,240,255,.35))}
.brand-2{color:var(--magenta)}
.brand-tag{display:block;font-size:.34em;letter-spacing:.62em;color:var(--cyan);margin-top:8px;
  -webkit-text-fill-color:var(--cyan);font-weight:700;text-shadow:0 0 14px rgba(0,240,255,.7)}
.brand-sub{margin:10px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--dim-2)}
.hero-text{color:var(--dim);line-height:1.7;max-width:46ch;font-size:15px}
.hero-feats{list-style:none;padding:0;margin:26px 0;display:grid;gap:12px}
.hero-feats li{display:flex;align-items:center;gap:12px;font-size:14px;color:#a9bccf}
.dot{width:8px;height:8px;transform:rotate(45deg);box-shadow:0 0 10px currentColor;flex:0 0 auto}
.dot.c{background:var(--cyan);color:var(--cyan)}
.dot.m{background:var(--magenta);color:var(--magenta)}
.dot.l{background:var(--lime);color:var(--lime)}
.hero-stats{display:flex;gap:14px}
.hero-stats>div{flex:1;padding:14px 16px;background:var(--panel);border:1px solid var(--line);
  clip-path:var(--clip-sm);text-align:center}
.hero-stats b{display:block;font-size:24px;font-family:var(--mono);color:var(--cyan);
  text-shadow:0 0 18px rgba(0,240,255,.6)}
.hero-stats span{font-size:10px;letter-spacing:.22em;color:var(--dim-2);text-transform:uppercase}

.auth-card{position:relative;background:var(--panel);border:1px solid var(--line-strong);
  clip-path:var(--clip);padding:26px 26px 22px;backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 26px 80px rgba(0,0,0,.7),0 0 60px rgba(0,240,255,.06) inset;
  animation:slideUp .6s cubic-bezier(.2,.8,.2,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(26px)}}
.auth-card:before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);
  animation:scanline 4s linear infinite}
@keyframes scanline{0%,100%{opacity:.4}50%{opacity:1}}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:20px;
  background:rgba(0,0,0,.4);padding:5px;border:1px solid rgba(0,240,255,.1)}
.auth-tabs .tab{padding:11px;font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--dim);
  clip-path:var(--clip-sm);transition:.22s}
.auth-tabs .tab.active{color:#04121a;background:linear-gradient(135deg,var(--cyan),#48c8ff);
  box-shadow:0 0 22px rgba(0,240,255,.45)}
.auth-form{display:grid;gap:13px;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field{display:grid;gap:6px}
.field>span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:700}
.field>span em{font-style:normal;color:var(--dim-2);letter-spacing:.04em;text-transform:none;font-size:10px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;background:rgba(0,0,0,.45);border:1px solid rgba(0,240,255,.16);
  color:var(--text);font-size:14px;outline:none;transition:.18s;
  clip-path:var(--clip-sm);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);background:rgba(0,240,255,.05);box-shadow:0 0 0 1px var(--cyan),0 0 22px rgba(0,240,255,.2)
}
.field input::placeholder{color:#3f5266}
.field textarea{resize:vertical;min-height:80px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6)}
.auth-error{min-height:16px;font-size:12.5px;color:var(--danger);font-weight:600}
.auth-error:empty{min-height:0}

/* кнопки */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 18px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);background:rgba(0,240,255,.07);border:1px solid var(--line-strong);
  clip-path:var(--clip-sm);transition:.18s;overflow:hidden;white-space:nowrap}
.btn:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-120%);transition:.5s}
.btn:hover:not(:disabled):before{transform:translateX(120%)}
.btn:hover:not(:disabled){border-color:var(--cyan);box-shadow:0 0 20px rgba(0,240,255,.32);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-block{width:100%;padding:14px}
.btn-primary{color:#02121a;background:linear-gradient(135deg,var(--cyan) 0%,#37c6ff 55%,#7ee8ff 100%);
  border-color:transparent;box-shadow:0 0 26px rgba(0,240,255,.45),inset 0 -2px 0 rgba(0,0,0,.25)}
.btn-primary:hover:not(:disabled){box-shadow:0 0 40px rgba(0,240,255,.7);color:#000}
.btn-ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:#b9cbdc}
.btn-ghost:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.btn-danger{background:linear-gradient(135deg,var(--danger),#ff5b7a);color:#fff;border-color:transparent;
  box-shadow:0 0 24px rgba(255,45,85,.45)}
.btn-danger:hover:not(:disabled){box-shadow:0 0 38px rgba(255,45,85,.75)}
.btn-lime{background:linear-gradient(135deg,var(--lime),#7ee000);color:#12200a;border-color:transparent;
  box-shadow:0 0 22px rgba(182,255,0,.35)}
.btn-sm{padding:8px 12px;font-size:10.5px}
.btn-voice{background:linear-gradient(135deg,rgba(182,255,0,.16),rgba(0,240,255,.12));border-color:var(--lime);
  color:var(--lime);box-shadow:0 0 18px rgba(182,255,0,.18)}
.btn-voice:hover:not(:disabled){box-shadow:0 0 30px rgba(182,255,0,.4)}
.btn-voice.on{background:linear-gradient(135deg,var(--lime),#7ee000);color:#0d1a05;border-color:transparent}
.btn-voice.on:hover{box-shadow:0 0 34px rgba(182,255,0,.6)}
.btn-mic-on{background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(0,240,255,.06))}
.btn-send{width:46px;height:44px;padding:0;background:linear-gradient(135deg,var(--cyan),#2b9dff);color:#02121a;
  border:none;clip-path:var(--clip-sm);box-shadow:0 0 18px rgba(0,240,255,.35)}
.btn-send:hover{box-shadow:0 0 30px rgba(0,240,255,.7)}

.divider{position:relative;text-align:center;margin:18px 0 14px}
.divider:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.divider span{position:relative;padding:0 12px;background:transparent;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim-2)}
.social-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.social-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);clip-path:var(--clip-sm);
  font-size:9.5px;letter-spacing:.08em;font-weight:700;color:#9fb3c7;text-transform:uppercase;transition:.18s}
.social-btn:hover{border-color:var(--cyan);color:#fff;background:rgba(0,240,255,.09);
  box-shadow:0 0 18px rgba(0,240,255,.28);transform:translateY(-2px)}
.social-btn.off{opacity:.4}
.social-btn.off:hover{border-color:rgba(255,255,255,.14);box-shadow:none;transform:none;color:#9fb3c7;background:rgba(255,255,255,.03)}
.social-btn svg{width:20px;height:20px}
.hint-admin{margin:12px 0 0;font-size:11px;color:var(--dim-2);text-align:center;letter-spacing:.05em}
.hint-admin b{color:var(--cyan)}
.oauth-note{font-size:12.5px;color:var(--amber);margin:0 0 4px;line-height:1.5}

/* ─────────── ТОПБАР ─────────── */
#app-screen{display:flex;flex-direction:column;height:100%;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;
  background:linear-gradient(180deg,rgba(9,13,23,.96),rgba(9,13,23,.74));
  border-bottom:1px solid var(--line);backdrop-filter:blur(14px);z-index:20;flex:0 0 auto}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px;min-width:0}
.logo-mini{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.16em;font-size:15px}
.logo-mini svg{width:22px;height:22px;color:var(--cyan);filter:drop-shadow(0 0 8px var(--cyan))}
.status-pill{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:5px 10px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.35);
  clip-path:var(--clip-sm)}
.status-pill.ok{color:var(--ok);border-color:rgba(43,255,136,.4)}
.status-pill.bad{color:var(--danger);border-color:rgba(255,45,85,.4)}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;
  animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.topbar-mid{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;min-width:0}
.np-label{color:var(--dim-2);letter-spacing:.24em;font-size:10px}
.np-value{font-family:var(--font);font-size:21px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(92deg,#7dfcff 0%,#00f0ff 40%,#b6ff00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,240,255,.5)) drop-shadow(0 0 30px rgba(0,240,255,.25));
  animation:roomNamePulse 4.5s ease-in-out infinite}
@keyframes roomNamePulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(0,240,255,.45)) drop-shadow(0 0 26px rgba(0,240,255,.2))}
  50%{filter:drop-shadow(0 0 16px rgba(182,255,0,.5)) drop-shadow(0 0 34px rgba(0,240,255,.32))}
}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);clip-path:var(--clip-sm);color:#a8bccf;transition:.18s}
.icon-btn:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(0,240,255,.3);background:rgba(0,240,255,.08)}
.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger);box-shadow:0 0 18px rgba(255,45,85,.35);background:rgba(255,45,85,.08)}
.icon-btn.muted{color:var(--danger);border-color:rgba(255,45,85,.4)}
.burger{display:none}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border:1px solid var(--line);
  background:rgba(0,240,255,.05);clip-path:var(--clip-sm);transition:.18s;max-width:220px}
.user-chip:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,240,255,.25)}
.chip-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.chip-meta b{font-size:12.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.chip-meta small{font-family:var(--mono);font-size:9px;color:var(--cyan);letter-spacing:.02em}

/* ─────────── РАСКЛАДКА ─────────── */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr) 306px;gap:14px;padding:14px;flex:1 1 auto;
  min-height:0;overflow:hidden}
.sidebar,.rightbar{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}
.rightbar{overflow-y:auto;padding-right:2px;padding-bottom:4px}
.rightbar>.panel{flex:0 0 auto}
.rightbar>.members-panel{flex:1 1 auto;min-height:140px;max-height:54%;overflow:hidden}
.stage{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}

.panel{position:relative;background:var(--panel);border:1px solid var(--line);clip-path:var(--clip);
  backdrop-filter:blur(12px);box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.03)}
.panel:before{content:'';position:absolute;left:0;top:0;width:46px;height:1px;background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);opacity:.85}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px 9px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.panel-head h3{margin:0;font-size:10.5px;letter-spacing:.22em;color:var(--dim);font-weight:800;text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.count{font-family:var(--mono);font-size:9.5px;padding:2px 6px;background:rgba(0,240,255,.12);
  color:var(--cyan);letter-spacing:0;clip-path:var(--clip-sm)}
.mini-btn{width:24px;height:24px;display:grid;place-items:center;color:var(--dim);border:1px solid rgba(255,255,255,.1);
  transition:.18s;clip-path:var(--clip-sm)}
.mini-btn:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(0,240,255,.1)}
.mini-btn .ico{width:14px;height:14px}

/* ─────────── КОМНАТЫ ─────────── */
.rooms-panel{flex:0 0 auto;max-height:44%}
.room-list{overflow-y:auto;padding:8px;display:grid;gap:6px;max-height:340px}
.room-item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;
  border:1px solid transparent;background:rgba(255,255,255,.024);clip-path:var(--clip-sm);
  transition:.18s;text-align:left;width:100%}
.room-item:hover{background:rgba(0,240,255,.07);border-color:rgba(0,240,255,.3);transform:translateX(2px)}
.room-item.active{background:linear-gradient(90deg,rgba(0,240,255,.16),rgba(0,240,255,.03));
  border-color:var(--cyan);box-shadow:inset 2px 0 0 var(--cyan),0 0 20px rgba(0,240,255,.15)}
.room-emoji{width:30px;height:30px;display:grid;place-items:center;font-size:15px;flex:0 0 auto;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);clip-path:var(--clip-sm)}
.room-meta{min-width:0;flex:1}
.room-meta b{display:block;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-weight:700}
.room-meta small{font-size:9.5px;color:var(--dim-2);font-family:var(--mono)}
.room-count{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.voice-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.room-item.locked .room-emoji{filter:grayscale(.5);opacity:.85}
.room-lock{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  vertical-align:-2px;margin-left:3px;color:var(--amber);opacity:.95}
.room-lock svg{width:13px;height:13px}
.room-item.locked{border-color:rgba(255,176,32,.28);background:linear-gradient(90deg,rgba(255,176,32,.09),rgba(255,255,255,.02))}
.room-item.locked:hover{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.55)}
.room-item.locked.active{background:linear-gradient(90deg,rgba(255,176,32,.2),rgba(255,176,32,.04));border-color:var(--amber)}
.room-del{opacity:0;color:var(--danger);font-size:14px;line-height:1;padding:2px 4px;transition:.18s}
.room-item:hover .room-del{opacity:.8}

/* ─────────── ИГРОКИ ─────────── */
.players-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.search-box{display:flex;align-items:center;gap:8px;margin:8px 10px;padding:7px 10px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.07)}
.search-box .ico{width:14px;height:14px;color:var(--dim-2)}
.search-box input{flex:1;background:none;border:none;outline:none;font-size:12px;min-width:0}
.search-box input::placeholder{color:#465a70}
.player-list{overflow-y:auto;padding:0 8px 8px;display:grid;gap:4px;min-height:0}
.player-row{display:flex;align-items:center;gap:9px;padding:6px 8px;transition:.16s;
  border:1px solid transparent;clip-path:var(--clip-sm);background:rgba(255,255,255,.018);width:100%;text-align:left}
.player-row:hover{background:rgba(0,240,255,.07);border-color:rgba(0,240,255,.22)}
.p-meta{min-width:0;flex:1}
.p-meta b{display:block;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta small{font-family:var(--mono);font-size:8.5px;color:var(--dim-2);letter-spacing:.02em}
.p-badge{font-size:8px;font-weight:800;letter-spacing:.1em;padding:2px 5px;text-transform:uppercase;
  border:1px solid currentColor;opacity:.9;flex:0 0 auto}
.call-btn{width:24px;height:24px;display:grid;place-items:center;color:var(--lime);border:1px solid rgba(182,255,0,.3);
  background:rgba(182,255,0,.08);transition:.16s;flex:0 0 auto;clip-path:var(--clip-sm)}
.call-btn:hover{background:var(--lime);color:#0d1a05;box-shadow:0 0 14px rgba(182,255,0,.6)}
.call-btn .ico{width:12px;height:12px}
.empty-note{padding:16px 12px;text-align:center;font-size:11.5px;color:var(--dim-2);line-height:1.6}

/* ─────────── АВАТАРЫ ─────────── */
.avatar{display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;position:relative;
  width:34px;height:34px;font-weight:800;font-size:13px;color:#04121a;
  border-radius:4px;                 /* квадратные аватары */
  background:linear-gradient(145deg,var(--cyan),var(--purple));text-shadow:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.sm{width:26px;height:26px;font-size:10px}
.avatar.lg{width:52px;height:52px;font-size:18px}
.avatar.xl{width:88px;height:88px;font-size:30px}
.avatar.online:after{content:'';position:absolute;right:2px;bottom:2px;width:7px;height:7px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 8px var(--ok);border:1px solid #04060c}

.role-badge{font-size:8px;font-weight:900;letter-spacing:.1em;padding:2px 5px;text-transform:uppercase;
  border:1px solid currentColor;background:rgba(0,0,0,.4);white-space:nowrap}

/* ─────────── КОМНАТА / СЦЕНА ─────────── */
.room-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;flex:0 0 auto;
  flex-wrap:wrap}
.room-title{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 300px}
.room-title>div{min-width:0}
.room-title .room-emoji{width:42px;height:42px;font-size:20px;border-color:var(--line-strong);
  box-shadow:0 0 18px rgba(0,240,255,.16) inset}
.room-title h2{margin:0;font-size:20px;font-weight:900;letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 18px rgba(0,240,255,.35)}
.room-title p{margin:3px 0 0;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;border:1px solid currentColor;color:var(--lime);background:rgba(182,255,0,.08);
  white-space:nowrap;flex:0 0 auto}
.badge.live{animation:livePulse 2.4s infinite}
@keyframes livePulse{50%{box-shadow:0 0 22px rgba(182,255,0,.35)}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.eq i{width:2px;background:currentColor;animation:eq 1s infinite ease-in-out}
.eq i:nth-child(1){height:4px;animation-delay:0s}
.eq i:nth-child(2){height:9px;animation-delay:.2s}
.eq i:nth-child(3){height:6px;animation-delay:.4s}
@keyframes eq{50%{height:2px}}

.voice-stage{flex:1 1 auto;min-height:120px;overflow:auto;padding:14px;display:flex}
.stage-empty{margin:auto;text-align:center;max-width:340px;display:grid;gap:10px;justify-items:center}
.stage-empty-art{position:relative;width:96px;height:96px;display:grid;place-items:center;color:var(--cyan);
  margin-bottom:4px}
.stage-empty-art .ring{position:absolute;inset:0;border:1px solid rgba(0,240,255,.3);border-radius:50%;
  animation:ringPulse 3s infinite}
.stage-empty-art .ring.r2{animation-delay:1s}
.stage-empty-art .ring.r3{animation-delay:2s}
@keyframes ringPulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.3);opacity:0}}
.stage-empty h4{margin:0;font-size:14px;letter-spacing:.06em}
.stage-empty p{margin:0;font-size:12px;color:var(--dim);line-height:1.6}
.stage-empty.hide{display:none}
.voice-grid:empty{display:none}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;
  align-content:start;width:100%}
.voice-tile{position:relative;display:grid;justify-items:center;gap:8px;padding:16px 10px 12px;
  background:linear-gradient(180deg,rgba(0,240,255,.05),rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.08);clip-path:var(--clip);transition:.22s;min-width:0}
.voice-tile.speaking{border-color:var(--lime);
  box-shadow:0 0 0 1px rgba(182,255,0,.5),0 0 30px rgba(182,255,0,.28),inset 0 0 30px rgba(182,255,0,.08)}
.voice-tile.mic-off{opacity:.72}
.voice-tile .avatar{width:52px;height:52px;font-size:19px;
  box-shadow:0 0 0 1px rgba(0,240,255,.4),0 0 22px rgba(0,240,255,.2)}
.voice-tile.speaking .avatar{box-shadow:0 0 0 2px var(--lime),0 0 26px rgba(182,255,0,.55)}
.vt-name{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-id{font-family:var(--mono);font-size:8.5px;color:var(--dim-2)}
.vt-icons{position:absolute;top:7px;right:7px;display:flex;gap:4px}
.vt-icons .ico{width:13px;height:13px;color:var(--dim)}
.vt-icons .ico.off{color:var(--danger)}
.vt-tag{position:absolute;top:7px;left:7px;font-size:7.5px;letter-spacing:.1em;color:var(--purple);
  border:1px solid currentColor;padding:1px 4px;text-transform:uppercase;font-weight:800}

/* ─────────── ЧАТ ─────────── */
.chat-panel{flex:0 0 auto;height:38%;min-height:210px;display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.chat-tabs{display:flex;gap:4px}
.chat-tab{position:relative;padding:11px 13px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  color:var(--dim-2);text-transform:uppercase;transition:.18s;border-bottom:2px solid transparent}
.chat-tab:hover{color:var(--text)}
.chat-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);text-shadow:0 0 14px rgba(0,240,255,.6)}
.unread{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;margin-left:5px;
  background:var(--magenta);color:#fff;font-size:9px;font-weight:800;border-radius:9px;
  box-shadow:0 0 12px rgba(255,47,208,.7);letter-spacing:0}
.typing{font-size:10px;color:var(--dim-2);font-style:italic;font-family:var(--mono)}
.messages{flex:1 1 auto;min-height:70px;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px;min-height:0}
.msg{display:flex;gap:9px;align-items:flex-start;animation:msgIn .22s ease-out;max-width:100%}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}}
.msg .avatar{width:28px;height:28px;font-size:11px;margin-top:2px}
.msg-body{min-width:0;flex:1}
.msg-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px}
.msg-nick{font-size:12px;font-weight:800;letter-spacing:.02em}
.msg-time{font-family:var(--mono);font-size:9px;color:var(--dim-2)}
.msg-text{font-size:13px;line-height:1.5;color:#c9d9e8;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.own .msg-text{color:#eaf7ff}
.msg.system{align-items:center;justify-content:center;padding:2px 0}
.msg.system .msg-text{font-size:11px;color:var(--amber);text-align:center;font-family:var(--mono);
  background:rgba(255,176,32,.07);border:1px dashed rgba(255,176,32,.25);padding:5px 10px;width:100%}
.chat-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25);flex:0 0 auto}
.chat-input input{flex:1;padding:11px 13px;background:rgba(0,0,0,.45);border:1px solid rgba(0,240,255,.14);
  outline:none;font-size:13px;clip-path:var(--clip-sm);min-width:0}
.chat-input input:focus{border-color:var(--cyan);box-shadow:0 0 18px rgba(0,240,255,.18)}
.chat-input input:disabled{opacity:.5}
.chat-input input::placeholder{color:#41556b}
.chat-lock{position:absolute;left:0;right:0;bottom:0;padding:13px;text-align:center;font-size:11.5px;
  color:var(--danger);background:rgba(28,4,10,.94);border-top:1px solid rgba(255,45,85,.35);font-weight:600}

/* ─────────── ПРАВАЯ КОЛОНКА ─────────── */
.members-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.member-list{overflow-y:auto;padding:8px;display:grid;gap:5px;min-height:0}
.member-row{display:flex;align-items:center;gap:9px;padding:7px 8px;background:rgba(255,255,255,.022);
  border:1px solid transparent;clip-path:var(--clip-sm);transition:.16s}
.member-row:hover{background:rgba(0,240,255,.06);border-color:rgba(0,240,255,.2)}
.member-row.speaking .avatar{box-shadow:0 0 0 2px var(--lime),0 0 16px rgba(182,255,0,.5)}
.m-row-actions{display:flex;gap:3px;opacity:0;transition:.16s}
.member-row:hover .m-row-actions{opacity:1}
.mod-btn{width:22px;height:22px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);
  color:var(--dim);transition:.16s;clip-path:var(--clip-sm)}
.mod-btn .ico{width:11px;height:11px}
.mod-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.mod-btn.ban:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.mod-btn.kick:hover{color:#fff;background:var(--amber);border-color:var(--amber)}
.mod-btn.mute:hover{color:#04121a;background:var(--cyan);border-color:var(--cyan)}
.self-panel{flex:0 0 auto}
.self-card{display:flex;align-items:center;gap:11px;padding:12px 14px}
.self-card .avatar{width:44px;height:44px;font-size:16px}
.self-meta{min-width:0;flex:1}
.self-meta b{display:block;font-size:13.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.self-meta small{display:block;font-family:var(--mono);font-size:9px;color:var(--cyan);margin-top:2px}
.self-meta em{display:block;font-size:10.5px;color:var(--dim);font-style:normal;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.self-quick{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px 12px}
.powers-panel{flex:0 0 auto}
.powers{list-style:none;margin:0;padding:10px 14px 12px;display:grid;gap:6px;max-height:150px;overflow:auto}
.powers li{font-size:11px;color:#a3b7ca;display:flex;align-items:center;gap:7px}
.powers li:before{content:'▸';color:var(--lime)}
.powers li.no{color:var(--dim-2)}
.powers li.no:before{content:'✕';color:var(--danger)}

/* ─────────── МОДАЛКИ ─────────── */
.modal-root{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,4,9,.82);backdrop-filter:blur(7px);
  animation:fadeIn .2s}
.modal{position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;background:var(--panel-2);
  border:1px solid var(--line-strong);clip-path:var(--clip);padding:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 60px rgba(0,240,255,.08);animation:modalIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.98)}}
.modal.wide{width:min(940px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;
  padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.07)}
.modal-head h2{margin:0;font-size:16px;letter-spacing:.1em;text-transform:uppercase;display:flex;
  align-items:center;gap:10px}
.modal-head h2 .ico{color:var(--cyan);width:20px;height:20px}
.modal-close{width:30px;height:30px;display:grid;place-items:center;color:var(--dim);
  border:1px solid rgba(255,255,255,.1);transition:.18s;clip-path:var(--clip-sm)}
.modal-close:hover{color:var(--danger);border-color:var(--danger);background:rgba(255,45,85,.1)}
.modal-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.modal-tab{padding:8px 13px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid rgba(255,255,255,.09);clip-path:var(--clip-sm);transition:.18s}
.modal-tab.active{color:#04121a;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(0,240,255,.4)}
.modal-tab:hover:not(.active){color:var(--cyan);border-color:var(--cyan)}
.modal-section{display:grid;gap:13px}
.form-row{display:grid;gap:11px;grid-template-columns:1fr 1fr}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.profile-top{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.profile-top .avatar{width:92px;height:92px;font-size:32px;
  box-shadow:0 0 0 1px var(--line-strong),0 0 34px rgba(0,240,255,.28)}
.profile-id{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.06em}
.profile-name{font-size:20px;font-weight:900;letter-spacing:.02em;margin:2px 0 6px}
.profile-sub{font-size:11.5px;color:var(--dim)}
.avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:9px;margin-top:4px}
.avatar-opt{position:relative;padding:0;border:1px solid rgba(255,255,255,.1);transition:.18s;
  clip-path:var(--clip-sm);background:rgba(0,0,0,.3);aspect-ratio:1;display:grid;place-items:center}
.avatar-opt .avatar{width:38px;height:38px;font-size:14px}
.avatar-opt:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 0 16px rgba(0,240,255,.3)}
.avatar-opt.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 20px rgba(182,255,0,.35)}
.upload-zone{display:flex;align-items:center;gap:10px;padding:11px;border:1px dashed rgba(0,240,255,.3);
  background:rgba(0,240,255,.04);clip-path:var(--clip-sm);font-size:11.5px;color:var(--dim)}
.upload-zone label{cursor:pointer;color:var(--cyan);font-weight:700;text-decoration:underline}

/* таблица игроков в админке */
.admin-toolbar{display:flex;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.admin-toolbar input,.admin-toolbar select{flex:1;min-width:130px;padding:9px 11px;background:rgba(0,0,0,.45);
  border:1px solid rgba(0,240,255,.16);font-size:12.5px;outline:none;clip-path:var(--clip-sm)}
.user-table{display:grid;gap:7px;max-height:420px;overflow-y:auto;padding-right:4px}
.u-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:rgba(255,255,255,.024);
  border:1px solid rgba(255,255,255,.06);clip-path:var(--clip-sm);flex-wrap:wrap}
.u-row.protected{border-color:rgba(255,45,85,.3);background:rgba(255,45,85,.05)}
.u-info{min-width:0;flex:1}
.u-info b{font-size:12.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.u-info small{display:block;font-family:var(--mono);font-size:9px;color:var(--dim-2);margin-top:2px}
.u-actions{display:flex;gap:5px;flex-wrap:wrap}
.u-actions .btn{padding:6px 8px;font-size:9px;letter-spacing:.06em}
.audit-list{display:grid;gap:6px;max-height:420px;overflow-y:auto;font-size:11.5px}
.audit-row{display:flex;gap:10px;padding:7px 10px;background:rgba(255,255,255,.022);
  border-left:2px solid var(--cyan);align-items:baseline;flex-wrap:wrap}
.audit-row .a-time{font-family:var(--mono);font-size:9px;color:var(--dim-2)}
.audit-row b{color:var(--cyan);font-weight:700}
.audit-row .a-act{color:var(--amber);font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.08em}

/* ─────────── ЗВОНОК ─────────── */
.call-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(10,20,40,.94),rgba(2,4,9,.97));backdrop-filter:blur(12px)}
.call-card{width:min(380px,92vw);padding:30px 24px 22px;text-align:center;background:var(--panel-2);
  border:1px solid var(--line-strong);clip-path:var(--clip);
  box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 70px rgba(0,240,255,.12);animation:modalIn .3s}
.call-visual{position:relative;width:130px;height:130px;margin:0 auto 18px;display:grid;place-items:center}
.call-rings{position:absolute;inset:0}
.call-rings span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,240,255,.45);
  animation:callRing 2.4s ease-out infinite}
.call-rings span:nth-child(2){animation-delay:.8s}
.call-rings span:nth-child(3){animation-delay:1.6s}
@keyframes callRing{0%{transform:scale(.62);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.call-overlay.incoming .call-rings span{border-color:rgba(182,255,0,.5)}
.call-avatar .avatar{width:96px;height:96px;font-size:34px;
  box-shadow:0 0 0 2px rgba(0,240,255,.5),0 0 40px rgba(0,240,255,.4)}
.call-overlay.incoming .call-avatar .avatar{box-shadow:0 0 0 2px rgba(182,255,0,.6),0 0 40px rgba(182,255,0,.45)}
.call-card h3{margin:0;font-size:20px;letter-spacing:.03em}
#call-status{margin:6px 0 0;font-size:12px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.call-timer{font-family:var(--mono);font-size:24px;color:var(--lime);margin-top:8px;
  text-shadow:0 0 20px rgba(182,255,0,.6)}
.call-actions{display:flex;gap:12px;justify-content:center;margin:22px 0 14px}
.call-btn-big{position:relative;min-width:78px;height:64px;display:flex;flex-direction:column;gap:3px;
  align-items:center;justify-content:center;border-radius:0;padding:0 10px;
  clip-path:var(--clip);transition:.18s;border:1px solid transparent}
.call-btn-big .ico{width:22px;height:22px}
.call-btn-big .cb-label{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.call-btn-big.accept{background:linear-gradient(135deg,var(--lime),#66cc00);color:#0d1a05;
  box-shadow:0 0 26px rgba(182,255,0,.5)}
.call-btn-big.accept:hover{box-shadow:0 0 40px rgba(182,255,0,.85);transform:translateY(-2px)}
.call-btn-big.decline{background:linear-gradient(135deg,var(--danger),#c40030);color:#fff;
  box-shadow:0 0 26px rgba(255,45,85,.5)}
.call-btn-big.decline:hover{box-shadow:0 0 40px rgba(255,45,85,.85);transform:translateY(-2px)}
.call-btn-big.neutral{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:var(--text)}
.call-btn-big.neutral:hover{border-color:var(--cyan);color:var(--cyan)}
.call-btn-big.muted{background:linear-gradient(135deg,var(--danger),#a10026);color:#fff}
.call-hint{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}

/* состояние звука в звонке: P2P/TURN, «тапни по экрану», переподключение */
.call-net{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:3px 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim);
  border:1px solid var(--line);background:rgba(255,255,255,.03);clip-path:var(--clip-sm)}
.call-net::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.call-net[data-tone="ok"]{color:#b6ff00;border-color:rgba(182,255,0,.35)}
.call-net[data-tone="ok"]::before{background:#b6ff00;box-shadow:0 0 8px #b6ff00}
.call-net[data-tone="warn"]{color:var(--amber,#ffb020);border-color:rgba(255,176,32,.4)}
.call-net[data-tone="warn"]::before{background:#ffb020;box-shadow:0 0 8px #ffb020}
.call-net[data-tone="bad"]{color:#ff2d55;border-color:rgba(255,45,85,.4)}
.call-net[data-tone="bad"]::before{background:#ff2d55;box-shadow:0 0 8px #ff2d55}


/* ─────────── ЗВОНОК: панель действий, громкость, участники, мини-режим ─────────── */
.call-min-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line-strong);color:var(--dim);clip-path:var(--clip-sm);
  transition:.16s}
.call-min-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.call-min-btn .ico{width:15px;height:15px}
.call-card{position:relative}
.call-actions{flex-wrap:wrap}
.call-row{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;margin-bottom:10px;flex:1 1 100%}
.call-row .call-btn-big{flex:1 1 0;min-width:0;height:60px;padding:0 4px}
.call-btn-big.wide{width:100%;max-width:100%;height:54px;margin:0 auto;flex:1 1 100%}
.call-members{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
.call-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;max-width:140px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:var(--clip-sm)}
.call-chip i{font-style:normal;font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.call-sound{margin:14px 0 4px;padding:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  clip-path:var(--clip-sm);text-align:left}

/* ползунки громкости (профиль и звонок) */
.vol-block{display:grid;gap:12px}
.vol-row{display:flex;align-items:center;gap:11px;cursor:pointer}
.vol-ico{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;color:var(--cyan);
  background:rgba(0,240,255,.07);border:1px solid rgba(0,240,255,.22);clip-path:var(--clip-sm)}
.vol-ico .ico{width:16px;height:16px}
.vol-main{flex:1;min-width:0;display:grid;gap:5px}
.vol-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.vol-val{color:var(--cyan);font-family:var(--mono);letter-spacing:0}
.vol-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
.vol-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan) var(--p,100%),rgba(255,255,255,.13) var(--p,100%))}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;
  border-radius:50%;background:var(--cyan);border:2px solid #04121a;box-shadow:0 0 14px rgba(0,240,255,.75)}
.vol-range::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.13)}
.vol-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--cyan)}
.vol-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cyan);
  border:2px solid #04121a;box-shadow:0 0 14px rgba(0,240,255,.75)}
.vol-meter{height:6px;background:rgba(255,255,255,.08);overflow:hidden;clip-path:var(--clip-sm)}
.vol-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),var(--cyan));
  transition:width .09s linear}
.vol-hint{font-size:10px;line-height:1.5;color:var(--dim-2)}

/* мини-панель звонка */
.call-mini{position:fixed;right:16px;bottom:78px;z-index:130;
  display:flex;align-items:center;gap:8px;padding:7px 9px;max-width:min(94vw,430px);
  background:rgba(8,13,22,.97);border:1px solid var(--line-strong);clip-path:var(--clip);
  box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 40px rgba(0,240,255,.16);
  animation:miniIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes miniIn{from{transform:translateY(16px);opacity:0}}
.call-mini[hidden]{display:none}
.cm-body{display:flex;align-items:center;gap:9px;min-width:0;flex:1;background:none;border:none;
  color:var(--text);text-align:left;padding:2px}
.cm-avatar{flex:0 0 auto}
.cm-avatar .avatar{width:34px;height:34px;font-size:13px}
.cm-meta{min-width:0;display:grid}
.cm-meta b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.cm-meta small{font-family:var(--mono);font-size:10px;color:var(--lime)}
.cm-btn{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;color:var(--text);
  background:rgba(255,255,255,.07);border:1px solid var(--line-strong);clip-path:var(--clip-sm);transition:.16s}
.cm-btn .ico{width:17px;height:17px}
.cm-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.cm-btn.muted{color:#fff;background:linear-gradient(135deg,var(--danger),#a10026);border-color:transparent}
#cm-hang{color:var(--danger);border-color:rgba(255,45,85,.5)}
#cm-hang:hover{background:rgba(255,45,85,.16)}

/* список «добавить в звонок» */
.add-call-list{display:grid;gap:6px;max-height:min(52vh,340px);overflow-y:auto}
.add-call-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;text-align:left;
  background:rgba(255,255,255,.022);border:1px solid transparent;clip-path:var(--clip-sm);transition:.16s;color:var(--text)}
.add-call-row:hover{background:rgba(0,240,255,.07);border-color:rgba(0,240,255,.25)}
.add-call-row .ico{width:15px;height:15px;color:var(--cyan)}
.add-call-row[disabled]{opacity:.45}

/* ─────────── ТОСТЫ ─────────── */
.toasts{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column-reverse;
  gap:9px;max-width:340px;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:11px 14px;
  background:rgba(11,18,30,.96);border:1px solid var(--line-strong);border-left:3px solid var(--cyan);
  clip-path:var(--clip-sm);font-size:12.5px;line-height:1.45;
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(0,240,255,.1);animation:toastIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}}
.toast.out{animation:toastOut .25s forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(16px)}}
.toast.ok{border-left-color:var(--ok)}
.toast.warn{border-left-color:var(--amber)}
.toast.err{border-left-color:var(--danger)}
.toast b{color:#fff}
.toast .t-close{color:var(--dim-2);font-size:14px;line-height:1;margin-left:auto}
.toast .t-close:hover{color:var(--danger)}

.remote-audio{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-10px;top:-10px}

/* ─────────── АДАПТИВ ─────────── */
@media (max-width:1180px){
  .layout{grid-template-columns:250px minmax(0,1fr)}
  .rightbar{display:none}
}
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr;gap:26px}
  .auth-hero{text-align:center}
  .logo-lockup{justify-content:center}
  .hero-feats{display:none}
  .hero-stats{max-width:420px;margin:0 auto}
  .layout{grid-template-columns:1fr;padding:10px}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:284px;z-index:60;padding:12px;
    background:rgba(6,9,16,.99);border-right:1px solid var(--line);
    transform:translateX(-102%);transition:transform .28s;overflow-y:auto}
  .sidebar.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.7)}
  .burger{display:grid}
  .topbar-mid{display:none}
  .chat-panel{height:44%}
  .room-actions .btn span{display:none}
  .room-actions .btn{padding:11px 13px}
  .grid2,.form-row{grid-template-columns:1fr}
  .chip-meta{display:none}
  .user-chip{padding:4px}
}
@media (max-width:640px){
  #conn-status span:last-child{display:none}
  #conn-status{padding:6px 8px}
  .logo-mini span{display:none}
  .room-title h2{font-size:15px}
  .room-title .room-emoji{width:34px;height:34px;font-size:17px}
  .badge{font-size:8.5px;padding:4px 6px;letter-spacing:.08em}
  .room-actions .btn{padding:10px 12px;font-size:10.5px}
}
@media (max-width:520px){
  .auth-screen{padding:14px}
  .auth-card{padding:18px}
  .hero-stats>div{padding:10px}
  .social-row{grid-template-columns:repeat(2,1fr)}
  .voice-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .toasts{right:8px;left:8px;max-width:none;bottom:8px}
}

/* ═══════════  ЗВАНИЯ НАД АВАТАРКОЙ  ═══════════ */
.rank-tag{display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;padding:1px 6px;border:1px solid currentColor;
  background:rgba(0,0,0,.55);line-height:1.5;white-space:nowrap;
  box-shadow:0 0 10px -2px currentColor,inset 0 0 8px -4px currentColor}
.rank-tag.big{font-size:10px;letter-spacing:.18em;padding:3px 10px}
.voice-tile .rank-tag{margin-bottom:-2px}

/* ═══════════  ОБВОДКА ПРОФИЛЯ (цвет игрока)  ═══════════ */
.ring-wrap{position:relative;display:inline-grid;place-items:center;border-radius:6px;padding:0;
  transition:box-shadow .22s ease, transform .22s ease}
.ring-wrap .avatar{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ring-wrap.vt-ring{padding:3px;border-radius:8px}
.voice-tile.speaking .ring-wrap{box-shadow:0 0 0 2px var(--ring,#b6ff00),0 0 26px var(--ring,#b6ff00),
  inset 0 0 18px -6px var(--ring,#b6ff00);transform:translateY(-1px)}
.voice-tile.speaking{border-color:var(--ring,#b6ff00);
  box-shadow:0 0 0 1px var(--ring,#b6ff00),0 0 30px -6px var(--ring,#b6ff00)}
.voice-tile.speaking .avatar{box-shadow:0 0 0 1px var(--ring,#b6ff00),0 0 22px -4px var(--ring,#b6ff00)}
.member-row.speaking .avatar{box-shadow:0 0 0 2px var(--ring,#b6ff00),0 0 16px -2px var(--ring,#b6ff00)}
.member-row.speaking{background:linear-gradient(90deg,color-mix(in srgb,var(--ring,#b6ff00) 14%,transparent),transparent)}

/* ═══════════  ШТОРКА ПРОФИЛЯ (как в Steam)  ═══════════ */
.profile-hero{position:relative;overflow:hidden;margin:-2px -2px 16px;padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.1);min-height:128px;display:flex;align-items:flex-end;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.profile-hero:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,12,.24) 0%,rgba(4,6,12,.72) 62%,rgba(4,6,12,.92) 100%)}
.hero-shine{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 78% 12%,rgba(255,255,255,.35),transparent 42%),
             repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px);
  mix-blend-mode:screen}
.profile-hero .profile-top{position:relative;z-index:2;margin:0;align-items:flex-end}
.hero-meta{min-width:0}
.profile-hero .profile-name{font-size:24px;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.profile-hero .profile-sub{color:#c9dcee;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.profile-hero .profile-id{color:#dff1ff;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.mini-ring{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;
  box-shadow:0 0 8px currentColor}

/* выбор шторки */
.curtain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px}
.curtain-opt{position:relative;height:62px;border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:flex-end;padding:6px 8px;transition:.18s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.curtain-opt span{font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
.curtain-opt:hover{transform:translateY(-2px);border-color:rgba(0,240,255,.6);
  box-shadow:0 8px 22px -8px rgba(0,240,255,.7)}
.curtain-opt.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 22px -4px rgba(182,255,0,.8)}
.curtain-opt.active:after{content:'✓';position:absolute;top:4px;right:7px;font-size:12px;font-weight:900;
  color:var(--lime);text-shadow:0 0 10px rgba(0,0,0,.9)}
.curtain-none{background:linear-gradient(120deg,#0a1220,#101a2e 60%,#13243c)}

/* выбор цвета обводки */
.ring-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:9px;margin-bottom:14px}
.ring-opt{height:38px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;transition:.18s;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.ring-opt span{width:20px;height:20px;background:var(--c);border-radius:3px;box-shadow:0 0 14px var(--c)}
.ring-opt:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.ring-opt.active{border-color:#fff;box-shadow:0 0 0 1px #fff,0 0 18px -4px var(--c)}
.ring-custom{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.ring-custom input[type=color]{width:56px;height:34px;padding:0;border:1px solid rgba(255,255,255,.16);
  background:transparent;cursor:pointer}

/* железо */
.hw-grid{display:grid;gap:6px}
.hw-row{display:flex;gap:10px;align-items:baseline;font-size:11.5px;
  padding:6px 9px;background:rgba(0,0,0,.32);border-left:2px solid rgba(0,240,255,.4)}
.hw-label{flex:0 0 96px;color:var(--dim-2);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.hw-row b{color:#d7ecff;font-weight:700}
.uc-section-title{margin:14px 0 8px;font-size:10px;letter-spacing:.22em;color:var(--dim-2);font-weight:900}
.uc-lines{display:grid;gap:4px;margin-bottom:6px}

/* ═══════════  ЗВОНОК: звание + цветная обводка при речи  ═══════════ */
.call-role{display:flex;justify-content:center;min-height:18px;margin-bottom:8px}
.call-ring{padding:4px;border-radius:10px;transition:box-shadow .2s ease}
.call-overlay.peer-speaking .call-ring{box-shadow:0 0 0 3px var(--peer-ring,#00f0ff),
  0 0 48px -4px var(--peer-ring,#00f0ff),inset 0 0 26px -10px var(--peer-ring,#00f0ff)}
.call-overlay.me-speaking .call-card{box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 0 1px var(--me-ring,#b6ff00),
  0 0 70px -10px var(--me-ring,#b6ff00)}
.call-overlay.peer-speaking .call-avatar .avatar{box-shadow:0 0 0 1px var(--peer-ring,#00f0ff),
  0 0 40px -6px var(--peer-ring,#00f0ff)}
@keyframes speakRingPulse{
  0%,100%{box-shadow:0 0 0 2px var(--ring,#b6ff00),0 0 18px -6px var(--ring,#b6ff00)}
  50%{box-shadow:0 0 0 3px var(--ring,#b6ff00),0 0 34px -2px var(--ring,#b6ff00)}
}
.voice-tile.speaking .ring-wrap{animation:speakRingPulse 1.5s ease-in-out infinite}
@keyframes callRingPulse{
  0%,100%{box-shadow:0 0 0 2px var(--peer-ring,#00f0ff),0 0 30px -8px var(--peer-ring,#00f0ff)}
  50%{box-shadow:0 0 0 4px var(--peer-ring,#00f0ff),0 0 60px 0 var(--peer-ring,#00f0ff)}
}
.call-overlay.peer-speaking .call-ring{animation:callRingPulse 1.2s ease-in-out infinite}
/* ═══════════  ШАПКА: ZOOMMER-GAMING  ═══════════ */
.brand-dash{color:var(--cyan);opacity:.95;font-size:.78em;letter-spacing:.02em;margin-left:1px;
  text-shadow:0 0 14px rgba(0,240,255,.55)}

/* ═══════════  ЧАТ: ИНСТРУМЕНТЫ  ═══════════ */
.chat-input{position:relative;align-items:center}
.chat-tool{flex:0 0 auto;width:36px;height:38px;display:grid;place-items:center;color:var(--dim);
  border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.35);transition:.16s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.chat-tool .ico{width:17px;height:17px}
.chat-tool:hover{color:var(--cyan);border-color:rgba(0,240,255,.45);
  box-shadow:0 0 16px -4px rgba(0,240,255,.6)}
.chat-tool.recording{color:#fff;background:linear-gradient(135deg,#ff2d55,#ff6b00);border-color:#ff2d55;
  animation:recPulse 1.1s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,45,85,.55)}50%{box-shadow:0 0 0 7px rgba(255,45,85,0)}}

.chat-panel{position:relative}
.emoji-panel{position:absolute;left:0;right:0;bottom:64px;z-index:22;display:grid;grid-template-columns:repeat(10,1fr);
  gap:3px;max-height:200px;overflow-y:auto;padding:9px 10px;border-top:1px solid rgba(255,255,255,.09);
  background:rgba(4,8,16,.98);box-shadow:0 -24px 60px rgba(0,0,0,.75),0 -1px 0 rgba(0,240,255,.25)}
.emoji-panel[hidden]{display:none}
.emoji-item{font-size:19px;line-height:1;padding:4px 0;border-radius:4px;transition:.12s;filter:grayscale(.15)}
.emoji-item:hover{background:rgba(0,240,255,.14);transform:scale(1.16);filter:none}

.chat-attach-bar{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:7px 12px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25)}
.chat-attach-bar[hidden]{display:none}
.attach-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--dim);
  padding:4px 9px;background:rgba(0,240,255,.08);border:1px solid rgba(0,240,255,.25)}
.ac-spin{width:11px;height:11px;border:2px solid rgba(0,240,255,.3);border-top-color:var(--cyan);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.voice-rec{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:8px 14px;border-top:1px solid rgba(255,45,85,.28);
  background:linear-gradient(90deg,rgba(255,45,85,.14),rgba(255,45,85,.03));font-size:11.5px;color:#ffd9e0;
  font-family:var(--mono);letter-spacing:.06em}
.voice-rec[hidden]{display:none}
.voice-rec b{color:#fff}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#ff2d55;box-shadow:0 0 10px #ff2d55;
  animation:recBlink 1s steps(2,end) infinite}
@keyframes recBlink{50%{opacity:.15}}
.rec-cancel{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#ff8fa2;
  border:1px solid rgba(255,45,85,.4);padding:3px 8px}
.rec-cancel:hover{color:#fff;background:rgba(255,45,85,.25)}

/* ═══════════  ЧАТ: ВЛОЖЕНИЯ В СООБЩЕНИЯХ  ═══════════ */
.msg.with-att .msg-body{max-width:min(420px,78%)}
.msg-img-link{display:inline-block;margin-top:5px;line-height:0}
.msg-img{max-width:min(230px,100%);max-height:160px;object-fit:cover;border:1px solid rgba(0,240,255,.25);
  border-radius:4px;cursor:zoom-in;transition:.16s;box-shadow:0 6px 24px -12px rgba(0,0,0,.9)}
.msg-img:hover{border-color:var(--cyan);box-shadow:0 0 26px -8px rgba(0,240,255,.7)}
.msg-video{display:block;margin-top:5px;width:min(280px,100%);max-height:150px;border:1px solid rgba(0,240,255,.25);
  border-radius:4px;background:#000}
.msg-voice{display:flex;align-items:center;gap:9px;margin-top:5px;padding:7px 10px;
  background:rgba(0,240,255,.07);border:1px solid rgba(0,240,255,.22);max-width:320px}
.msg-voice .voice-ico{color:var(--cyan);display:inline-flex}
.msg-voice .voice-ico .ico{width:15px;height:15px}
.msg-voice audio{height:32px;flex:1;min-width:0;filter:saturate(.9);color-scheme:dark}
.msg-video{color-scheme:dark}
.voice-dur{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.msg-file{display:flex;align-items:center;gap:10px;margin-top:5px;padding:9px 11px;max-width:340px;
  background:rgba(0,0,0,.4);border:1px solid rgba(0,240,255,.2);transition:.16s}
.msg-file:hover{border-color:var(--cyan);box-shadow:0 0 20px -8px rgba(0,240,255,.6)}
.mf-ico .ico{width:19px;height:19px;color:var(--cyan)}
.mf-meta{display:grid;min-width:0;flex:1}
.mf-meta b{font-size:12px;color:#dbeaff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-meta small{font-size:10px;color:var(--dim-2)}
.mf-get .ico{width:15px;height:15px;color:var(--dim)}
.messages.drop-hint{outline:2px dashed rgba(0,240,255,.55);outline-offset:-8px;
  background:rgba(0,240,255,.05)}
.lightbox-img{display:block;max-width:100%;max-height:70vh;margin:0 auto;border:1px solid rgba(0,240,255,.25)}
.modal.wide{width:min(860px,94vw)}
@media (max-width: 760px){
  .emoji-panel{grid-template-columns:repeat(8,1fr);max-height:150px}
  .emoji-item{font-size:17px}
  .chat-tool{width:32px;height:36px}
  .msg-img{max-height:200px}
  .msg-video{max-height:200px}
}
/* ═══════════  АВАТАР: РЕШЁТКА ТЮРЬМЫ И ТАЙМЕР НАКАЗАНИЯ  ═══════════ */
.avatar .av-face{display:grid;place-items:center;width:100%;height:100%}
.avatar{position:relative}
.avatar.is-jailed{border:1px solid rgba(255,45,85,.65);box-shadow:0 0 0 1px rgba(255,45,85,.5),0 0 14px -3px rgba(255,45,85,.8)}
.av-jail{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,45,85,.85) 0 1.5px,transparent 1.5px 7px),
             linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.12))}
.av-jail i{position:absolute;left:0;right:0;height:2px;background:rgba(255,45,85,.92)}
.av-jail i:nth-child(1){top:0}
.av-jail i:nth-child(2){top:33%}
.av-jail i:nth-child(3){top:66%}
.av-jail i:nth-child(4){bottom:0}
.av-timer{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:var(--mono);font-size:8px;line-height:1.2;font-weight:900;letter-spacing:.02em;
  color:#fff;background:linear-gradient(180deg,rgba(255,45,85,.96),rgba(150,0,26,.98));
  padding:1px 0 2px;text-shadow:0 1px 2px rgba(0,0,0,.65);
  box-shadow:0 -3px 10px -3px rgba(255,45,85,.9);white-space:nowrap;pointer-events:none}
.avatar.sm .av-timer{font-size:6.5px;letter-spacing:0;padding:0 0 1px}
.avatar.lg .av-timer{font-size:10px;padding:2px 0 3px}
.avatar.xl .av-timer{font-size:12px;padding:3px 0 5px}

/* плашка «отбываю наказание» */
.jail-tag{display:inline-flex;align-items:center;font-size:8.5px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:#ff8fa2;border:1px solid rgba(255,45,85,.55);background:rgba(255,45,85,.14);
  padding:1px 5px;margin-left:4px;white-space:nowrap;text-shadow:0 0 10px rgba(255,45,85,.5)}
.jail-tag.sm{font-size:7.5px;margin-left:0;margin-top:1px}
.jail-note{margin:0 0 10px;padding:8px 11px;font-size:11.5px;color:#ffd0d8;
  background:rgba(255,45,85,.12);border-left:2px solid var(--danger)}

/* комната-тюрьма в списке */
.room-item.jail-room{border-color:rgba(255,45,85,.35)}
.room-item.jail-room:hover{background:rgba(255,45,85,.1);border-color:rgba(255,45,85,.6)}
.room-item.jail-room.active{background:linear-gradient(90deg,rgba(255,45,85,.18),rgba(255,45,85,.04));
  border-color:var(--danger)}
.room-item.jail-room .room-emoji{box-shadow:0 0 16px -4px rgba(255,45,85,.7)}

/* ═══════════  УДАЛЕНИЕ СООБЩЕНИЙ  ═══════════ */
.msg{position:relative}
.msg-del{position:absolute;top:4px;right:4px;width:20px;height:20px;display:grid;place-items:center;
  color:#ff8fa2;background:rgba(0,0,0,.6);border:1px solid rgba(255,45,85,.45);opacity:0;
  transition:.16s;border-radius:3px;z-index:2}
.msg-del .ico{width:11px;height:11px}
.msg:hover .msg-del{opacity:1}
.msg-del:hover{background:var(--danger);color:#fff;box-shadow:0 0 14px -2px var(--danger)}
.msg-removing{opacity:0;transform:translateX(8px);transition:.18s}
.chat-clear{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:900;letter-spacing:.1em;
  color:#ff8fa2;border:1px solid rgba(255,45,85,.4);padding:5px 9px;background:rgba(255,45,85,.08);
  transition:.16s;white-space:nowrap}
.chat-clear .ico{width:12px;height:12px}
.chat-clear:hover{color:#fff;background:rgba(255,45,85,.3);box-shadow:0 0 16px -4px rgba(255,45,85,.8)}
.btn-warn{background:linear-gradient(135deg,#ff8a00,#ff2d55);color:#1a0407;border:none}
.btn-warn:hover{box-shadow:0 0 26px rgba(255,45,85,.65)}

/* ═══════════  ИГРОКИ ПО ЗВАНИЯМ, ОФЛАЙН, СТАТИСТИКА, ПРИГЛАШЕНИЯ  ═══════════ */

/* группы в списке игроков */
.role-group{margin-bottom:10px}
.role-group:last-child{margin-bottom:0}
.role-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 8px;margin:0 0 5px;font-size:8.5px;font-weight:900;letter-spacing:.14em;
  color:var(--g);border-left:2px solid var(--g);background:linear-gradient(90deg,rgba(255,255,255,.05),transparent);
  text-shadow:0 0 12px rgba(255,255,255,.25)}
.rg-count{font-family:var(--mono);font-size:9px;color:rgba(220,235,250,.65);letter-spacing:.04em}
.player-row.offline{opacity:.5}
.player-row.offline .avatar{filter:grayscale(.65)}
.player-row.offline:hover{opacity:.85}
.player-row.offline small{color:rgba(180,196,215,.55)}

/* переключатель «все / только онлайн» */
#btn-toggle-offline.active{color:var(--lime);border-color:rgba(182,255,0,.45);
  box-shadow:0 0 12px -4px rgba(182,255,0,.8)}

/* статистика сайта */
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:6px}
@media (max-width:720px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat-card{position:relative;padding:12px 12px 10px;border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(6,10,18,.78));
  clip-path:var(--clip-sm);overflow:hidden}
.stat-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sc);
  box-shadow:0 0 14px var(--sc)}
.stat-card b{display:block;font-family:var(--mono);font-size:26px;line-height:1.1;color:#fff;
  text-shadow:0 0 18px var(--sc)}
.stat-card span{display:block;margin-top:2px;font-size:9px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sc)}
.stat-card small{display:block;margin-top:4px;font-size:9.5px;color:rgba(190,205,225,.6)}

.st-recent{display:flex;flex-direction:column;gap:4px}
.st-recent-row{display:flex;align-items:center;gap:9px;padding:6px 8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);transition:.15s}
.st-recent-row:hover{background:rgba(0,240,255,.07);border-color:rgba(0,240,255,.3)}
.st-recent-row .p-meta{flex:1;min-width:0}
.st-recent-row .p-meta b{font-size:12px}
.st-recent-row .p-meta small{display:block;font-size:9.5px;color:rgba(180,196,215,.6);font-family:var(--mono)}
.st-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);flex:0 0 auto}
.st-dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}

/* приглашения */
.invite-link-box{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.invite-link-box input{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;
  padding:9px 11px;background:rgba(0,0,0,.45);border:1px solid rgba(0,240,255,.35);
  color:var(--cyan);letter-spacing:.02em}
.invite-link-box input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 16px -4px var(--cyan)}
.pf-invite{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:10px 0 4px;padding:8px 11px;border:1px solid rgba(182,255,0,.25);
  background:linear-gradient(90deg,rgba(182,255,0,.1),rgba(0,240,255,.04))}
.pf-invite-count{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#d7e6f5}
.pf-invite-count .ico{width:13px;height:13px;color:var(--lime)}
.pf-invite-count b{font-family:var(--mono);font-size:14px;color:var(--lime);
  text-shadow:0 0 14px rgba(182,255,0,.6)}

/* плашка «тебя пригласил…» на экране регистрации */
.invite-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 12px;border:1px solid rgba(182,255,0,.4);
  background:linear-gradient(90deg,rgba(182,255,0,.14),rgba(0,240,255,.06));
  clip-path:var(--clip-sm);animation:inviteGlow 2.6s ease-in-out infinite}
.invite-banner .ib-icon{display:grid;place-items:center;width:22px;height:22px;color:var(--lime)}
.invite-banner .ib-icon .ico{width:16px;height:16px}
.invite-banner .ib-text{font-size:12px;color:#e7f4ff}
.invite-banner .ib-text b{color:var(--lime)}
.invite-banner .ib-sub{font-size:9.5px;font-family:var(--mono);letter-spacing:.06em;
  color:rgba(200,220,240,.6);margin-left:auto}
@keyframes inviteGlow{
  0%,100%{box-shadow:0 0 0 rgba(182,255,0,0)}
  50%{box-shadow:0 0 22px -8px rgba(182,255,0,.8)}
}

/* ══════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ (телефоны и планшеты)
   Порог: 900px и меньше — одноколоночная раскладка + шторки.
   ══════════════════════════════════════════════════════════════════ */

.only-mobile{display:none !important}

/* подложка под шторки */
.drawer-scrim{position:fixed;inset:0;z-index:110;background:rgba(2,4,9,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:scrimIn .2s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}

/* ── тач-устройства: всё, что появлялось по наведению, показываем сразу ── */
@media (hover:none){
  .msg-del{opacity:.85 !important}
  .msg-del .ico{width:13px;height:13px}
  .room-del{opacity:.8 !important}
  button,a,.player-row,.member-row,.room-item,.u-row{touch-action:manipulation}
  .btn:hover,.icon-btn:hover{transform:none}
}

@media (max-width:900px){
  /* ── каркас ── */
  html,body{overscroll-behavior:none}
  #app-screen{height:100dvh;height:100vh}
  .topbar{
    padding:6px 8px;
    padding-top:calc(6px + env(safe-area-inset-top));
    gap:6px;
  }
  .topbar-left{gap:6px;flex:1 1 auto;min-width:0;overflow:hidden}
  .topbar-right{gap:6px;flex:0 0 auto}
  .topbar-mid{display:none}
  #conn-status{display:none}
  .logo-mini{font-size:13px;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
  .logo-mini svg{width:17px;height:17px}
  .icon-btn{width:38px;height:38px;min-width:38px}
  .icon-btn .ico{width:17px;height:17px}
  .user-chip{padding:3px;gap:0}
  .user-chip .avatar.sm{width:30px;height:30px}
  .only-mobile{display:inline-flex !important}
  .icon-btn.only-mobile{display:grid !important}

  .layout{
    display:flex;flex-direction:column;
    gap:8px;padding:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    flex:1 1 auto;min-height:0;overflow:hidden;
  }

  /* ── сцена ── */
  .stage{flex:1 1 auto;min-height:0;gap:8px;overflow:hidden}
  .room-header{flex:0 0 auto;flex-direction:column;align-items:stretch;gap:9px;padding:10px 12px}
  .room-title{gap:9px;flex:0 0 auto;min-height:0}
  .room-title h2{font-size:16px}
  .room-title p{font-size:10.5px;line-height:1.45;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .room-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .room-actions .btn{width:100%;min-height:44px;padding:10px 8px;font-size:10.5px}
  .room-actions .btn span{display:inline}
  .voice-stage{flex:0 1 auto;min-height:0;max-height:32vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px}
  .voice-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .voice-tile{padding:12px 8px 10px;gap:6px}
  .voice-tile .avatar{width:46px;height:46px;font-size:17px}
  .voice-tile .vt-name{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .voice-tile .vt-id{font-size:8.5px}
  .stage-empty{padding:12px 6px}
  .stage-empty-art{width:56px;height:56px;margin-bottom:0}
  .stage-empty h4{font-size:12.5px}
  .stage-empty p{font-size:11px}

  /* ── чат ── */
  .chat-panel{flex:1 1 auto;height:auto;min-height:34vh;display:flex;flex-direction:column}
  .chat-head{padding:6px 8px;gap:6px;flex-wrap:nowrap}
  .chat-tab{padding:8px 10px;font-size:10px;min-height:38px}
  .chat-tools{gap:4px}
  .chat-clear{padding:6px 8px;font-size:9px;min-height:34px}
  .chat-clear span{display:none}          /* на телефоне — только иконка */
  .messages{padding:10px;gap:8px;min-height:0}
  .msg{gap:7px}
  .msg-body{min-width:0}
  .msg .avatar.sm{width:26px;height:26px;font-size:10px}
  .msg-text{font-size:13px;line-height:1.45}
  .msg-img,.msg-video{max-height:38vh}
  .msg-file{padding:8px}
  .chat-input{
    padding:8px;gap:6px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    flex-wrap:nowrap;
  }
  .chat-input input{font-size:16px;padding:11px 10px;min-width:0} /* 16px — iOS не зумит */
  .chat-tool{width:38px;height:44px}
  .self-quick{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .self-quick .btn{min-height:44px;padding:10px 8px;font-size:10.5px}
  .chat-tool .ico{width:18px;height:18px}
  .btn-send{width:46px;height:44px}
  .emoji-panel{left:6px;right:6px;bottom:calc(60px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(7,1fr);max-height:calc(100% - 68px)}
  .emoji-item{font-size:19px;padding:6px}
  .voice-rec{padding:10px 12px;font-size:11.5px;flex-wrap:wrap;gap:8px}
  .voice-rec button{min-height:34px}

  /* ── шторки ── */
  .sidebar{
    display:flex !important;
    position:fixed;top:0;bottom:0;left:0;width:min(88vw,330px);z-index:120;
    padding:12px;padding-top:calc(12px + env(safe-area-inset-top));
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    background:rgba(6,9,16,.995);border-right:1px solid var(--line);
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.22,.7,.3,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:none;gap:10px;
  }
  .sidebar.open{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.8)}
  .rightbar{
    display:flex !important;
    position:fixed;top:0;bottom:0;right:0;width:min(88vw,340px);z-index:120;
    padding:12px;padding-top:calc(12px + env(safe-area-inset-top));
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    background:rgba(6,9,16,.995);border-left:1px solid var(--line);
    transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.7,.3,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:none;gap:10px;
  }
  .rightbar.open{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.8)}
  .rightbar>.members-panel{max-height:none;flex:0 0 auto;min-height:0}
  body.drawer-open{overflow:hidden}

  /* шторка прокручивается целиком: списки не обрезаются */
  .sidebar>.panel,.rightbar>.panel{flex:0 0 auto;max-height:none;height:auto}
  .room-list{max-height:none;overflow:visible}
  .player-list{max-height:none;overflow:visible}
  .member-list{max-height:none;overflow:visible}
  .rightbar>.members-panel{max-height:none}
  .sidebar,.rightbar{overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(88px + env(safe-area-inset-bottom))}

  /* звонок: крупные кнопки, всё влезает на телефон */
  .call-card{width:100%;max-width:420px;padding:22px 16px 18px}
  .call-row .call-btn-big{min-width:0;height:56px;padding:0 4px}
  .call-btn-big .cb-label{font-size:7.5px}
  .call-mini{left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));max-width:none}
  @keyframes miniIn{from{transform:translateY(20px);opacity:0}}
  .cm-meta b{max-width:42vw}
  .cm-btn{width:42px;height:42px}

  /* крупные касания в списках */
  .room-item{min-height:54px;padding:10px}
  .player-row{min-height:50px;padding:8px}
  .member-row{min-height:48px;padding:9px 8px}
  .call-btn,.mod-btn{width:34px;height:34px}
  .role-group-head{padding:5px 8px;font-size:9px}
  .search-box input{font-size:16px;min-height:42px}
  .panel-head h3{font-size:10.5px}

  /* ── модалки: нижний лист на всю ширину ── */
  .modal-root{padding:0;align-items:flex-end;display:flex;justify-content:center}
  .modal{
    width:100%;max-width:100%;max-height:calc(100dvh - 18px);
    padding:14px 13px calc(16px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;
    animation:sheetUp .24s cubic-bezier(.22,.7,.3,1);
  }
  .modal.wide{width:100%}
  @keyframes sheetUp{from{transform:translateY(22%);opacity:.5}to{transform:none;opacity:1}}
  .modal-head{position:sticky;top:0;z-index:3;
    margin:-14px -13px 12px;padding:12px 13px 10px;
    background:var(--panel-2);border-bottom:1px solid var(--line)}
  .modal-head h2{font-size:13.5px;letter-spacing:.06em}
  .modal-head h2 .ico{width:17px;height:17px}
  .modal-close{width:40px;height:40px;min-width:40px}
  .modal-tabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .modal-tab{padding:9px 12px;font-size:10px;min-height:38px;white-space:nowrap}
  .modal-actions{justify-content:stretch;gap:7px}
  .modal-actions .btn{flex:1 1 46%;min-height:44px;font-size:11px}
  .field input,.field select,.field textarea{font-size:16px;min-height:44px}
  .profile-hero{padding:12px}
  .profile-top{gap:11px}
  .profile-top .avatar.xl{width:66px;height:66px;font-size:23px}
  .profile-name{font-size:17px}
  .pf-invite{flex-direction:column;align-items:stretch;gap:8px}
  .pf-invite .btn{min-height:40px}
  .invite-link-box{flex-direction:column;gap:7px}
  .invite-link-box input{font-size:14px}
  .invite-link-box .btn{min-height:44px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-card b{font-size:21px}
  .u-row{min-height:52px}
  .user-table{max-height:60vh}
  .hw-grid{gap:8px}
  .lightbox-img{max-height:76vh}

  /* ── звонок ── */
  .call-overlay{padding:0}
  .call-card{width:100%;max-width:100%;height:100dvh;max-height:none;border-radius:0;
    display:flex;flex-direction:column;justify-content:center;gap:12px;
    padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
  .call-card h3{font-size:22px}
  .call-avatar .avatar{width:104px;height:104px;font-size:36px}
  .call-actions{gap:14px}
  .call-actions .btn{min-width:0;flex:1 1 40%;min-height:52px;font-size:11.5px}

  /* ── уведомления ── */
  .toasts{left:8px;right:8px;bottom:auto;top:calc(56px + env(safe-area-inset-top));
    max-width:none;gap:7px;flex-direction:column}
  .toast{padding:11px 12px;font-size:12px}

  /* ── экран входа ── */
  /* flex-центрирование обрезало верх при длинном контенте — прижимаем к верху */
  .auth-screen{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    align-items:flex-start;justify-content:flex-start;
    padding:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .auth-shell{margin:auto 0;gap:14px}
  .auth-shell{grid-template-columns:1fr;gap:18px;padding:0}
  .auth-hero{padding:6px 0 0}
  /* лого-блок компактнее: форма входа должна быть видна сразу */
  .logo-lockup{gap:11px;margin-bottom:12px}
  .logo-mark{width:46px;height:46px}
  .logo-mark svg{width:27px;height:27px}
  .brand{font-size:clamp(23px,7vw,30px)}
  .brand-tag{letter-spacing:.36em;margin-top:4px}
  .brand-sub{font-size:8.5px;letter-spacing:.2em;margin-top:6px}
  .hero-text{font-size:11.5px;line-height:1.55;max-width:none}
  .hero-feats{display:none}
  .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:none}
  .hero-stats>div{padding:7px 4px;min-width:0}
  .hero-stats b{font-size:17px}
  .hero-stats span{font-size:7px;letter-spacing:.05em;line-height:1.3}
  .auth-card{padding:16px;border-radius:14px}
  .auth-form .field input{font-size:16px;min-height:46px}
  .btn-block,.auth-form .btn{min-height:48px;font-size:12px}
  .social-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .social-btn{min-height:46px}
  .invite-banner{flex-wrap:wrap;gap:6px;padding:9px 10px}
  .invite-banner .ib-sub{margin-left:0;width:100%}
}

/* очень узкие телефоны */
@media (max-width:420px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stats span{font-size:8px;letter-spacing:.12em}
  .logo-mini span{display:none}
  .logo-mini{min-width:auto}
  #btn-sound{display:none}
  .chat-tool{width:34px}
  .room-actions .btn span{font-size:9.5px}
  .voice-grid{grid-template-columns:repeat(2,1fr)}
}

/* телефон в горизонтали — компактнее по высоте */
@media (max-height:560px) and (max-width:900px){
  .voice-stage{max-height:26vh}
  .chat-panel{min-height:40vh}
  .stage-empty-art{display:none}
  .room-title p{display:none}
  .topbar{padding-top:calc(4px + env(safe-area-inset-top))}
}

/* планшет: две колонки, но без правой панели-шторки включённой */
@media (min-width:901px) and (max-width:1180px){
  .rightbar{display:flex}
  .layout{grid-template-columns:250px minmax(0,1fr) 300px;gap:10px;padding:10px}
  .rightbar>.members-panel{max-height:46%}
}