/* BTL2 — интерфейс «боевой компьютер»: графитово-синяя тема, электрический циан и маджента как RGB-подсветка,
   панели со срезанными углами.
   Все размеры в rem: масштаб задаёт JS (font-size у html). */
:root {
  --bg0: #05070d; --bg1: #0a0e17; --bg2: #0f1522; --bg3: #151d2e; --bg4: #1e2940;
  --line: rgba(110, 200, 255, 0.13); --line2: rgba(110, 200, 255, 0.28);
  --acc: #29d8ff; --acc2: #8cf0ff; --accd: #0e6f8a; --acc-glow: rgba(41, 216, 255, 0.45);
  --mint: #3da7dc; --amber: #ffb23e; --red: #ff4d4d; --blue: #3d8bff; --gem: #b47cff; --mag: #ff4fa8;
  --text: #e4ecf7; --muted: #8a97ad; --dim: #5b6780;
  --fh: 'Oswald', 'Arial Narrow', sans-serif; --fb: 'Exo 2', system-ui, sans-serif;
  --cut: 0.9rem;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); color: var(--text); font-family: var(--fb); font-weight: 500; user-select: none; -webkit-font-smoothing: antialiased; }
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.warn { color: #ffb3a0; font-size: 0.9rem; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; font-family: var(--fh); letter-spacing: 0.04em; text-transform: uppercase; }
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: middle; }
kbd { display: inline-block; min-width: 1.9rem; text-align: center; font-family: var(--fh); font-size: 0.8rem; color: var(--acc2); background: var(--bg3); border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 0.3rem; padding: 0.15rem 0.45rem; margin-right: 0.25rem; }
::-webkit-scrollbar { width: 0.45rem; height: 0.45rem; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 0.3rem; }
::-webkit-scrollbar-thumb:hover { background: var(--accd); }

/* ─────────── панели ─────────── */
.panel {
  position: relative; padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, rgba(18, 25, 40, 0.94) 0%, rgba(8, 12, 20, 0.95) 100%);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px var(--line);
}
.panel::before, .panel::after { content: ''; position: absolute; width: 1.6rem; height: 1.6rem; pointer-events: none; }
.panel::before { left: 0.25rem; top: 0.25rem; border-left: 2px solid var(--acc); border-top: 2px solid var(--acc); clip-path: polygon(0 0, 100% 0, 100% 2px, 2px 100%, 0 100%); }
.panel::after { right: 0.25rem; bottom: 0.25rem; border-right: 2px solid var(--mag); border-bottom: 2px solid var(--mag); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.panel-head h3 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.15rem; color: var(--text); }
.panel-head h3 .ic { color: var(--acc); }

/* ─────────── кнопки и поля ─────────── */
.btn {
  --c1: #55d6f0; --c2: #2aa7c2; --tc: #03141d;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--fh); font-weight: 600; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--tc); padding: 0.7rem 1.35rem; border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  clip-path: polygon(0.55rem 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.55rem) 100%, 0 100%, 0 0.55rem);
  transition: filter 0.15s, transform 0.08s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); filter: brightness(0.95); }
.btn:disabled { filter: grayscale(0.9) brightness(0.55); cursor: not-allowed; transform: none; }
.btn.alt { --c1: #1d262a; --c2: #141a1d; --tc: var(--acc2); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.alt:hover { --c1: #263338; }
.btn.ghost { --c1: rgba(255, 255, 255, 0.05); --c2: rgba(255, 255, 255, 0.02); --tc: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { --tc: var(--acc2); }
.btn.gem { --c1: #7ff0ff; --c2: #22b8d6; --tc: #1d0b33; }
.btn.danger { --c1: #ff7a6e; --c2: #d6382e; --tc: #fff; }
.btn.amber { --c1: #ffd27a; --c2: #f0a020; --tc: #2a1700; }
.btn.xl { width: 100%; font-size: 1.6rem; padding: 0.95rem 1.4rem; letter-spacing: 0.12em; box-shadow: 0 0 2rem var(--acc-glow); }
.btn.sm { font-size: 0.8rem; padding: 0.42rem 0.75rem; clip-path: polygon(0.35rem 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%, 0 0.35rem); }
.btn.block { width: 100%; }
.link { font: inherit; font-size: 0.9rem; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2rem; }
.link:hover { color: var(--acc2); }
.x-btn { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, 0.05); color: var(--muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.x-btn:hover { background: var(--red); color: #fff; }
.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--fh); }
.field output { color: var(--acc2); }
input, select, textarea { font: inherit; font-family: var(--fb); font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--bg1); border: 1px solid var(--line2); padding: 0.62rem 0.8rem; outline: none; user-select: text; }
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(41, 216, 255, 0.15); }
select option { background: var(--bg1); }
input[type=range] { -webkit-appearance: none; appearance: none; padding: 0; height: 0.35rem; background: var(--bg4); border: 0; box-shadow: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1.25rem; background: var(--acc); clip-path: polygon(50% 0, 100% 25%, 100% 100%, 0 100%, 0 25%); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 1rem; height: 1.2rem; background: var(--acc); border: 0; border-radius: 0; }
.chk { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; cursor: pointer; }
.chk input { display: none; }
.chk span { width: 1.25rem; height: 1.25rem; border: 1px solid var(--line2); background: var(--bg1); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chk input:checked + span { background: var(--acc); border-color: var(--acc); }
.chk input:checked + span::after { content: ''; width: 0.38rem; height: 0.7rem; border: solid #03141d; border-width: 0 0.16rem 0.16rem 0; transform: rotate(45deg) translate(-0.04rem, -0.06rem); }
.seg { display: flex; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--line); padding: 0.2rem; gap: 0.2rem; }
.seg button { flex: 1; min-width: 0; white-space: nowrap; font-family: var(--fh); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 0.45rem 0.6rem; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--acc); color: #03141d; }
.seg.small button { font-size: 0.78rem; padding: 0.32rem 0.7rem; }
.err-line { min-height: 1.2rem; margin: 0; color: #ff8a7a; font-size: 0.88rem; }

/* ─────────── логотип и загрузка ─────────── */
.logo { display: flex; align-items: center; gap: 0.6rem; }
.logo .emblem { width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 0 0.5rem rgba(41, 216, 255, 0.35)); }
.logo b { display: block; font-family: var(--fh); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: 0.14em; color: var(--text); }
.logo span { display: block; font-family: var(--fh); font-size: 0.66rem; letter-spacing: 0.42em; color: var(--acc); text-transform: uppercase; margin-top: 0.15rem; }
.logo.big .emblem { width: 5.5rem; height: 5.5rem; }
.logo.big b { font-size: 4.2rem; letter-spacing: 0.16em; }
.logo.big span { font-size: 1rem; letter-spacing: 0.7em; margin-top: 0.4rem; }
#loading { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
  background: radial-gradient(ellipse at 50% 40%, #161f23 0%, #0a0e17 55%, #05070d 100%); }
#loading::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(41, 216, 255, 0.03) 0 1px, transparent 1px 4px); pointer-events: none; }
.ld-bar { width: min(28rem, 80vw); height: 0.4rem; background: var(--bg3); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, var(--accd), var(--acc)); box-shadow: 0 0 1rem var(--acc); transition: width 0.3s; }
#ld-text { margin: 0; color: var(--muted); font-family: var(--fh); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; }
.ld-tip { margin: 0; max-width: 32rem; text-align: center; font-size: 0.92rem; color: #b9c4d8; min-height: 1.2rem; }

/* ─────────── верхняя панель ─────────── */
#topbar { position: fixed; left: 0; right: 0; top: 0; height: 4rem; z-index: 20; display: flex; align-items: stretch; gap: 1.2rem; padding: 0 1rem 0 1.2rem;
  background: linear-gradient(180deg, rgba(12, 17, 28, 0.97), rgba(7, 10, 18, 0.95)); border-bottom: 1px solid var(--line2); box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.5); }
#topbar .logo { align-self: center; margin-right: 0.4rem; }
.tb-nav { display: flex; align-items: stretch; }
.tb-nav button { position: relative; display: flex; align-items: center; padding: 0 1.1rem; border: 0; background: none; color: var(--muted); font-family: var(--fh); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.tb-nav button:hover { color: var(--text); }
.tb-nav button.on { color: var(--acc2); background: linear-gradient(180deg, transparent 40%, rgba(41, 216, 255, 0.1)); }
.tb-nav button.on::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0; height: 3px; background: var(--acc); box-shadow: 0 0 0.8rem var(--acc); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.tb-player { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.8rem 0.3rem 0.3rem; cursor: pointer; }
.tb-player:hover .tb-nm b { color: var(--acc2); }
.tb-pinfo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 9rem; }
.tb-nm { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.95rem; }
.ctag { font-family: var(--fh); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--amber); padding: 0 0.3rem; box-shadow: inset 0 0 0 1px rgba(255, 178, 62, 0.45); margin-right: 0.35rem; }
.xp-bar { height: 0.3rem; background: var(--bg4); overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accd), var(--acc)); transition: width 0.4s; }
.lvl { flex: none; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 700; font-size: 1.1rem; color: #03141d;
  background: linear-gradient(180deg, var(--acc2), var(--acc)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cur { display: flex; align-items: center; gap: 0.4rem; height: 2.4rem; padding: 0 0.85rem; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--fh); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.04em; }
.cur.clip { color: #d8e7ea; } .cur.clip .ic { color: #c0cdd0; }
.cur.gem { color: var(--gem); padding-right: 0.3rem; } .cur.gem .ic { color: var(--gem); filter: drop-shadow(0 0 0.3rem rgba(180, 124, 255, 0.6)); }
.cur.gem button { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--gem); color: #1d0b33; cursor: pointer; margin-left: 0.2rem; }
.cur.gem button .ic { color: #1d0b33; filter: none; width: 0.95rem; height: 0.95rem; }
.tb-btn { position: relative; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, 0.04); color: #c3cdd1; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.tb-btn:hover { color: var(--acc2); box-shadow: inset 0 0 0 1px var(--line2); }
.tb-btn.off { color: var(--red); }
.tb-btn.wide { width: auto; gap: 0.45rem; padding: 0 0.8rem; font-family: var(--fh); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.88rem; }
.badge { position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; background: var(--red); color: #fff; font-style: normal; font-family: var(--fh); font-size: 0.72rem; display: inline-flex; align-items: center; justify-content: center; }
.dot { position: absolute; top: 0.3rem; right: 0.3rem; width: 0.5rem; height: 0.5rem; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0.4rem var(--amber); }

/* ─────────── экраны ─────────── */
.screen { position: fixed; left: 0; right: 0; bottom: 0; top: 4rem; pointer-events: none; z-index: 10; }
.screen > * { pointer-events: auto; }
.play-col, .side-col { position: absolute; top: 1.6rem; bottom: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.play-col { left: 1.6rem; width: 27rem; }
.side-col { right: 1.6rem; width: 26rem; }
/* быстрый бой: выбор режима */
.qmodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; margin: 0.9rem 0 0.8rem; }
.qm { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.2rem 0.4rem; border: 0; cursor: pointer; font: inherit; color: var(--muted); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.12s, background 0.12s; }
.qm .ic { width: 1.35rem; height: 1.35rem; }
.qm span { font-family: var(--fh); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.qm:hover { color: var(--text); background: rgba(41, 216, 255, 0.06); }
.qm.on { color: var(--acc2); background: rgba(41, 216, 255, 0.12); box-shadow: inset 0 0 0 1px var(--acc); }
.q-hint { margin: 0.55rem 0 0 !important; font-size: 0.85rem; color: var(--muted) !important; min-height: 2.4em; }
/* карточка пилота */
.pilot { display: flex; flex-direction: column; gap: 0.7rem; }
.pilot-top { display: flex; align-items: center; gap: 0.9rem; }
.pilot-nm { display: flex; flex-direction: column; min-width: 0; }
.pilot-nm b { display: flex; align-items: center; font-family: var(--fh); font-size: 1.35rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-bar.big { height: 0.45rem; }
.pilot-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.pilot-stats div { display: flex; flex-direction: column; align-items: center; padding: 0.45rem 0.2rem; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.pilot-stats b { font-family: var(--fh); font-size: 1.25rem; color: var(--acc2); }
.pilot-stats span { font-size: 0.7rem; color: var(--muted); text-align: center; }
.pilot .hero-row { margin-top: 0; }
/* друзья на главном экране */
.fmini { flex: 0 1 auto; max-height: 40%; display: flex; flex-direction: column; min-height: 0; }
#fmini-list { overflow: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.fm-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0.4rem; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.fm-row .ava { width: 2.1rem !important; height: 2.1rem !important; }
.fm-row .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fm-row .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-row .st { font-size: 0.75rem; color: #7fe0a0; }
.fm-row .st.inroom { color: var(--amber); }
.empty.sm { padding: 0.8rem 0.5rem; }
.empty.sm p { margin: 0.4rem 0 0.7rem; font-size: 0.88rem; }
.hero { padding: 1.4rem 1.5rem 1.5rem; }
.hero-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fh); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acc); }
.pulse { width: 0.55rem; height: 0.55rem; background: var(--acc); border-radius: 50%; box-shadow: 0 0 0 0 var(--acc-glow); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--acc-glow); } 100% { box-shadow: 0 0 0 0.6rem rgba(41, 216, 255, 0); } }
.hero h1 { font-size: 3.6rem; line-height: 1; margin: 0.35rem 0 0.2rem; letter-spacing: 0.08em; color: #eef4fb; text-shadow: 0 0 1.4rem rgba(41, 216, 255, 0.25); }
.hero p { color: #b3c3b5; margin: 0.4rem 0 1.1rem; }
.hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.7rem; }
.rooms { flex: 1; min-height: 12rem; display: flex; flex-direction: column; }
#room-list { flex: 1; overflow: auto; padding-right: 0.2rem; }
.room { width: 100%; display: grid; grid-template-columns: 6.4rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.4rem; margin-bottom: 0.45rem; border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.12s, box-shadow 0.12s; }
.room:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--acc); background: rgba(41, 216, 255, 0.06); }
.room:disabled { opacity: 0.55; cursor: not-allowed; }
.room.fr { box-shadow: inset 0 0 0 1px rgba(255, 178, 62, 0.55); }
.rimg { position: relative; display: block; width: 6.4rem; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b2330, #0d1118); overflow: hidden; }
.rimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rimg img:not([src]) { visibility: hidden; }
.rimg .mi { position: absolute; left: 0.2rem; bottom: 0.2rem; width: 1.6rem; height: 1.6rem; backdrop-filter: blur(3px); }
.rimg .mi .ic { width: 1rem; height: 1rem; }
.rfill { display: block; height: 0.22rem; margin: 0.3rem 0 0.2rem; background: var(--bg4); }
.rfill i { display: block; height: 100%; background: linear-gradient(90deg, var(--accd), var(--acc)); }
.room .rfr { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; padding-right: 0.3rem; }
.room .rt small { font-family: var(--fb); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.room:hover:not(:disabled) .rt small { color: var(--acc); }
.mi { width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; clip-path: polygon(0.4rem 0, 100% 0, 100% calc(100% - 0.4rem), calc(100% - 0.4rem) 100%, 0 100%, 0 0.4rem); }
.mi .ic { width: 1.4rem; height: 1.4rem; }
.room .rn { display: flex; flex-direction: column; min-width: 0; }
.room .rn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .rn span { font-size: 0.8rem; color: var(--muted); }
.room .rp { font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; }
.room .rt { font-family: var(--fh); color: var(--acc2); font-size: 0.95rem; }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty .ic { width: 2.4rem; height: 2.4rem; color: var(--dim); }
.m-dm { background: rgba(255, 77, 77, 0.18); color: #ff8a80; } .m-tdm { background: rgba(61, 139, 255, 0.18); color: #8ab8ff; }
.m-ctc { background: rgba(255, 110, 190, 0.18); color: #ff9ad2; } .m-koth { background: rgba(255, 178, 62, 0.2); color: var(--amber); }
.robot-hint { position: absolute; left: 2rem; bottom: 1.4rem; max-width: 26rem; color: rgba(215, 228, 245, 0.6); font-size: 0.85rem; margin: 0; }
/* ангар: слоты деталей по бокам от робота, гранаты под ним */
.loadout { position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.4rem; right: calc(min(58rem, 62vw) + 3.2rem); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; pointer-events: none; z-index: 1; }
.loadout.hidden { display: none; }
.loadout:not(.hidden) ~ .robot-hint { display: none; }
.loadout .col { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; pointer-events: auto; }
.loadout .col.r { grid-column: 3; }
.slot { position: relative; width: clamp(5rem, 6.4vw, 6.6rem); padding: 0.35rem 0.35rem 0.3rem; background: linear-gradient(180deg, rgba(12, 18, 30, 0.78), rgba(6, 9, 16, 0.7)); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; clip-path: polygon(0.55rem 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.55rem) 100%, 0 100%, 0 0.55rem); transition: box-shadow 0.15s, background 0.15s; }
.slot:hover { box-shadow: inset 0 0 0 1px var(--line2); background: linear-gradient(180deg, rgba(24, 38, 60, 0.82), rgba(7, 12, 20, 0.72)); }
.slot.on { box-shadow: inset 0 0 0 1px var(--acc), 0 0 0.8rem rgba(41, 216, 255, 0.25); }
.slot.mk::after { content: 'Мк II'; position: absolute; left: 0.35rem; top: 1.25rem; font-family: var(--fh); font-size: 0.55rem; color: #2a1700; background: linear-gradient(180deg, #ffd27a, #f0a020); padding: 0 0.25rem; }
.slot .sl-name { display: block; text-align: center; font-family: var(--fh); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.slot .sl-tier { position: absolute; top: 0.32rem; right: 0.45rem; font-family: var(--fh); font-size: 0.62rem; color: var(--acc2); }
.slot .sl-art { height: clamp(3.2rem, 4.2vw, 4.4rem); display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 60%, rgba(41, 216, 255, 0.14), transparent 70%); }
.slot .sl-art img.th, .gslot img.th { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.25s; filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.6)); }
.slot .sl-art img.th.ok, .gslot img.th.ok { opacity: 1; }
.sl-arrows { display: flex; align-items: center; justify-content: space-between; margin-top: 0.2rem; }
.sl-arrows b { font-family: var(--fh); font-weight: 500; font-size: 0.62rem; color: var(--muted); }
.sl-arrows button { width: 1.5rem; height: 1.1rem; border: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, #ffe066, #e9a516); filter: drop-shadow(0 0 0.25rem rgba(255, 196, 40, 0.45)); }
.sl-arrows button:first-child { clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%); }
.sl-arrows button:last-of-type { clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); }
.sl-arrows button:hover { background: linear-gradient(180deg, #fff2a8, #ffc22e); }
.sl-arrows.one button { opacity: 0.3; }
.gslots { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; gap: 0.5rem; pointer-events: auto; }
.gslot { position: relative; width: 4.4rem; height: 4.4rem; padding: 0.25rem; background: linear-gradient(180deg, rgba(12, 18, 30, 0.78), rgba(6, 9, 16, 0.7)); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0.45rem 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%, 0 0.45rem); }
.gslot.off { opacity: 0.45; filter: grayscale(0.7); }
.gslot .key { position: absolute; left: 0.35rem; top: 0.2rem; font-family: var(--fh); font-size: 0.65rem; color: var(--muted); }
.gslot .cnt { position: absolute; right: 0.35rem; bottom: 0.2rem; font-family: var(--fh); font-size: 0.85rem; color: var(--text); }
.gslot .cnt .ic { width: 0.8rem; height: 0.8rem; }
@media (max-width: 1100px), (max-aspect-ratio: 4/3) { .loadout { display: none; } .loadout:not(.hidden) ~ .robot-hint { display: block; } }

/* ангар / магазин */
.shop { position: absolute; right: 1.6rem; top: 1.6rem; bottom: 1.4rem; width: min(58rem, 62vw); display: flex; padding: 0; }
.cats { width: 8.4rem; flex: none; padding: 0.9rem 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; overflow: auto; background: rgba(0, 0, 0, 0.25); box-shadow: inset -1px 0 0 var(--line); }
.cats button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 0.3rem; border: 0; background: none; color: var(--muted); font-family: var(--fh); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.cats button .ic { width: 1.7rem; height: 1.7rem; }
.cats button:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.cats button.on { color: var(--acc2); background: linear-gradient(90deg, rgba(41, 216, 255, 0.14), transparent); }
.cats button.on::before { content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; background: var(--acc); box-shadow: 0 0 0.6rem var(--acc); }
.cats .sep { height: 1px; background: var(--line); margin: 0.3rem 0.4rem; }
.shop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1.1rem 1.1rem 1rem; }
.shop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.8rem; }
.shop-head h2 { font-size: 1.7rem; letter-spacing: 0.08em; }
.shop-head p { margin: 0.25rem 0 0; font-size: 0.88rem; max-width: 28rem; }
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: 0.3rem; }
.stats div { display: flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.5rem; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--fh); font-size: 0.85rem; letter-spacing: 0.03em; white-space: nowrap; }
.stats div .ic { color: var(--acc); width: 1rem; height: 1rem; }
.subtabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.subtabs:empty { display: none; }
.subtabs button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border: 0; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); cursor: pointer; font-family: var(--fh); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.subtabs button .wic { width: 3.6rem; height: 1.1rem; }
.subtabs button.on { color: var(--acc2); box-shadow: inset 0 0 0 1px var(--acc); background: rgba(41, 216, 255, 0.1); }
.items { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; align-content: start; padding: 0.2rem 0.3rem 0.4rem 0.1rem; }
.item { --rc: #6f8172; position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.65rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0.6rem 0, 100% 0, 100% calc(100% - 0.6rem), calc(100% - 0.6rem) 100%, 0 100%, 0 0.6rem); }
.item::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rc); box-shadow: 0 0 0.8rem var(--rc); }
.item:hover { box-shadow: inset 0 0 0 1px var(--line2); background: linear-gradient(180deg, rgba(41, 216, 255, 0.07), rgba(255, 255, 255, 0.015)); }
.item.r-common { --rc: #8a9a8c; } .item.r-rare { --rc: #4aa8ff; } .item.r-epic { --rc: #b06bff; } .item.r-legendary { --rc: #ff9a2e; }
.item.eq { box-shadow: inset 0 0 0 1px var(--acc); background: linear-gradient(180deg, rgba(41, 216, 255, 0.12), rgba(41, 216, 255, 0.03)); }
.item.locked .art { filter: grayscale(0.8) brightness(0.6); }
.item .num { position: absolute; top: 0.5rem; left: 0.6rem; font-family: var(--fh); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--muted); z-index: 1; }
.item .mk { position: absolute; top: 0.45rem; right: 0.55rem; font-family: var(--fh); font-size: 0.68rem; letter-spacing: 0.06em; color: #2a1700; background: linear-gradient(180deg, #ffd27a, #f0a020); padding: 0.05rem 0.35rem; z-index: 1; }
.item .rar { font-family: var(--fh); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc); text-align: center; }
.item .art { position: relative; height: 6.6rem; display: flex; align-items: center; justify-content: center; margin-top: 0.7rem; background: radial-gradient(ellipse at 50% 62%, rgba(41, 216, 255, 0.16), transparent 70%); }
.item .art img.th { width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.96); transition: opacity 0.25s, transform 0.25s; filter: drop-shadow(0 0.35rem 0.45rem rgba(0, 0, 0, 0.55)); }
.item .art img.th.ok { opacity: 1; transform: none; }
.item:hover .art img.th.ok { transform: scale(1.05); }
.item .art img.sw.mini { position: absolute; right: 0.2rem; bottom: 0.1rem; width: 1.6rem; height: 1.6rem; box-shadow: 0 0 0.5rem var(--rc); }
.item .art .ic { width: 3rem; height: 3rem; color: #9adae8; }
.item .art .wic { width: 9.6rem; height: 3rem; color: #d9e6e9; filter: drop-shadow(0 0.15rem 0.2rem rgba(0, 0, 0, 0.6)); }
.item .art .gic { width: 3.2rem; height: 3.2rem; }
.item .art .emj { font-size: 2.7rem; }
.item .art img.sw { width: 4.6rem; height: 4.6rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 1rem var(--rc); }
.item .stars { color: var(--acc); font-size: 0.72rem; letter-spacing: 0.1rem; text-align: center; }
.item > b { font-family: var(--fh); font-weight: 600; font-size: 1rem; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
.item .st { font-size: 0.76rem; color: var(--muted); text-align: center; flex: 1; }
.item .bars { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.5rem; align-items: center; font-size: 0.7rem; color: var(--muted); }
.item .bars i { height: 0.3rem; background: var(--bg4); overflow: hidden; display: block; }
.item .bars i b { display: block; height: 100%; background: linear-gradient(90deg, var(--accd), var(--acc)); }
.item .act { margin-top: 0.2rem; }
.item .act .btn { width: 100%; }
.tag { display: flex; align-items: center; justify-content: center; gap: 0.35rem; font-family: var(--fh); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.45rem; background: rgba(255, 255, 255, 0.04); }
.tag.ok { color: var(--acc); }
.tag.lock { color: #ff9a8a; }
.keytag { font-family: var(--fh); font-size: 0.72rem; color: #03141d; background: var(--acc); padding: 0 0.32rem; margin-right: 0.3rem; }
.price-gem .ic { color: #1d0b33; }

/* клан */
.clan { position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.4rem; width: 40rem; display: flex; flex-direction: column; }
.clan-hero { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.9rem; }
.clan-badge { width: 4.4rem; height: 4.8rem; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; color: #03141d; background: linear-gradient(180deg, var(--acc2), var(--acc)); clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); padding-bottom: 0.8rem; }
.clan-hero h2 { font-size: 1.8rem; letter-spacing: 0.06em; }
.clan-hero p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
.clan-nums { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.clan-nums span { font-family: var(--fh); font-size: 0.85rem; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.clan-body { flex: 1; min-height: 0; overflow: auto; }
.mrow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.7rem; padding: 0.45rem 0.6rem; margin-bottom: 0.35rem; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.mrow .lvl { width: 2rem; height: 2rem; font-size: 0.9rem; }
.mrow .who { display: flex; flex-direction: column; min-width: 0; }
.mrow .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .who span { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }
.mrow .who span::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dim); }
.mrow.on .who span::before { background: var(--acc); box-shadow: 0 0 0.4rem var(--acc); }
.role { font-family: var(--fh); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1rem 0.4rem; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.role.owner { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, 0.5); }
.role.officer { color: var(--gem); box-shadow: inset 0 0 0 1px rgba(180, 124, 255, 0.45); }
.mrow .acts { display: flex; gap: 0.3rem; }
.clan-chat { display: flex; flex-direction: column; height: 100%; }
.clan-chat .log { flex: 1; min-height: 10rem; overflow: auto; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px var(--line); }
.clan-chat .log div { font-size: 0.92rem; }
.clan-chat .log b { color: var(--acc2); }
.clan-chat .log .sys { color: var(--muted); font-style: italic; }
.clan-chat .row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.clan-chat input { flex: 1; }
.clan-form { display: grid; grid-template-columns: 1fr 7rem; gap: 0.8rem; margin-bottom: 0.6rem; }
.clan-list .crow { display: grid; grid-template-columns: 3rem 1fr auto auto; gap: 0.7rem; align-items: center; padding: 0.5rem 0.6rem; margin-bottom: 0.35rem; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.crow .tg { font-family: var(--fh); font-weight: 700; color: var(--amber); text-align: center; }
.crow .nm { display: flex; flex-direction: column; min-width: 0; }
.crow .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .nm span { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .pts { font-family: var(--fh); color: var(--acc2); white-space: nowrap; }
.search { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.search input { flex: 1; }

/* рейтинг */
.rating { position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.4rem; width: 40rem; display: flex; flex-direction: column; }
#top { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--fh); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.1em; color: var(--muted); padding: 0.4rem 0.6rem; text-transform: uppercase; }
td { padding: 0.5rem 0.6rem; border-top: 1px solid var(--line); }
tr.me td { background: rgba(41, 216, 255, 0.1); color: var(--acc2); }
.rank { font-family: var(--fh); font-weight: 700; width: 2.2rem; text-align: center; }
.rank.r1 { color: #ffd84a; } .rank.r2 { color: #d8e1e6; } .rank.r3 { color: #ffa86a; }
.lv { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.45rem; font-family: var(--fh); font-weight: 600; font-size: 0.78rem; color: #03141d; background: var(--acc); padding: 0 0.3rem; }

/* ─────────── окна ─────────── */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(3, 5, 10, 0.72); backdrop-filter: blur(0.2rem); }
.dialog { width: min(38rem, 94vw); max-height: 92vh; display: flex; flex-direction: column; }
.dialog.wide { width: min(66rem, 96vw); }
.dialog.small { width: min(26rem, 94vw); }
.dialog.mid { width: min(56rem, 96vw); }
.dlg-body { overflow-y: auto; overflow-x: hidden; padding-right: 0.2rem; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 0.7rem; margin-top: 1rem; }
.lbl { font-family: var(--fh); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin: 1rem 0 0.5rem; }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.mode { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem; border: 0; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.mode b { font-family: var(--fh); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; display: block; text-transform: uppercase; }
.mode small { color: var(--muted); font-size: 0.75rem; }
.mode.on { box-shadow: inset 0 0 0 1px var(--acc); background: rgba(41, 216, 255, 0.1); }
.maps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55rem; }
.map { padding: 0 0 0.45rem; overflow: hidden; border: 0; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.map img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, #1b2326, #0d1113); }
.map b { display: block; font-family: var(--fh); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.05em; padding: 0.35rem 0.5rem 0; text-transform: uppercase; }
.map.on { box-shadow: inset 0 0 0 2px var(--acc), 0 0 1rem rgba(41, 216, 255, 0.25); }
.dialog.create { width: min(74rem, 96vw); }
.cr-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.3rem; }
.cr-map { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.cr-big { position: relative; aspect-ratio: 2 / 1; background: linear-gradient(135deg, #1b2330, #0d1118); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line2); }
.cr-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-big img:not([src]) { visibility: hidden; }
.cr-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.9rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; background: linear-gradient(180deg, transparent, rgba(4, 7, 13, 0.92)); }
.cr-cap b { font-family: var(--fh); font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cr-cap span { font-size: 0.85rem; color: #c3d0e2; }
.cr-map .maps { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.cr-map .map b { font-size: 0.72rem; padding: 0.3rem 0.4rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-set { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.cr-set .lbl { margin: 0.3rem 0 -0.2rem; }
.cr-set .lbl.first { margin-top: 0; }
.cr-set .modes { grid-template-columns: 1fr 1fr; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.preset { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 0; cursor: pointer; font: inherit; font-size: 0.85rem; text-align: left; color: var(--text); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.preset .ic { color: var(--acc); }
.preset:hover { background: rgba(41, 216, 255, 0.06); }
.preset.on { box-shadow: inset 0 0 0 1px var(--acc); background: rgba(41, 216, 255, 0.12); }
.cr-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.stepper { display: flex; align-items: stretch; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--line); }
.stepper button { width: 2.4rem; border: 0; background: rgba(255, 255, 255, 0.04); color: var(--acc2); font-size: 1.3rem; cursor: pointer; }
.stepper button:hover { background: rgba(41, 216, 255, 0.15); }
.stepper b { flex: 1; text-align: center; font-family: var(--fh); font-size: 1.3rem; color: var(--text); padding: 0.3rem 0; }
.cr-foot { align-items: center; }
.cr-foot #c-sum { flex: 1; text-transform: none; }
#name { width: 100%; font-size: 1.2rem; }
.help p { line-height: 1.55; color: #c8d3e3; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.2rem; margin: 0.8rem 0 1rem; }
.keys div { display: flex; align-items: center; gap: 0.2rem; }
.keys span { margin-left: 0.4rem; color: #c8d3e3; font-size: 0.92rem; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.set-sec { min-width: 0; padding: 0.8rem 0.9rem; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.set-sec h4 { font-size: 0.88rem; letter-spacing: 0.12em; color: var(--acc); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; }
.set-row { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(7rem, 11rem) 3rem; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; font-size: 0.92rem; }
.set-row output { font-family: var(--fh); color: var(--acc2); font-size: 0.88rem; text-align: right; }
.set-row .seg { grid-column: 2 / 4; }
.set-row.stack { grid-template-columns: 1fr; gap: 0.4rem; }
.set-row.stack .seg { grid-column: 1; }
.set-note { font-size: 0.78rem; color: var(--muted); margin: -0.2rem 0 0.6rem; }

/* вход */
.auth { width: min(27rem, 94vw); padding: 1.6rem 1.7rem 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; }
.auth-head { display: flex; justify-content: center; margin-bottom: 0.3rem; }
.auth-head .logo .emblem { width: 3.2rem; height: 3.2rem; }
.auth-head .logo b { font-size: 2rem; }
.auth form { display: flex; flex-direction: column; gap: 0.75rem; }
.auth .link { align-self: center; }
.acc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.acc-row b { font-family: var(--fh); letter-spacing: 0.05em; }
.acc-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }

/* аватарки и значки кланов */
.ava { --ah: 120; flex: none; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--ah) 45% 32%), hsl(calc(var(--ah) + 40) 50% 20%)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  clip-path: polygon(0.35rem 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%, 0 0.35rem); }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava b { font-family: var(--fh); font-size: 0.85rem; letter-spacing: 0.04em; color: #fff; }
.ava.sm { width: 1.7rem; height: 1.7rem; } .ava.sm b { font-size: 0.68rem; }
.ava.lg { width: 6rem; height: 6rem; } .ava.lg b { font-size: 2.2rem; }
.ava-wrap { position: relative; flex: none; display: inline-flex; }
.ava-wrap .ava { width: 2.6rem; height: 2.6rem; }
.lvl.sm { position: absolute; right: -0.45rem; bottom: -0.35rem; width: 1.35rem; height: 1.35rem; font-size: 0.68rem; }
.cbadge { flex: none; width: 2.2rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--c2); background: var(--c1); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c2) 45%, transparent); padding-bottom: 0.3rem; }
.cbadge .ic { width: 62%; height: 62%; }
.cbadge img { width: 100%; height: 100%; object-fit: cover; }
.cbadge.sm { width: 1.5rem; height: 1.65rem; padding-bottom: 0.2rem; }
.cbadge.lg { width: 4.6rem; height: 5rem; padding-bottom: 0.7rem; }
.cbadge.xl { width: 6rem; height: 6.6rem; padding-bottom: 0.9rem; }
.clan-hero .cbadge-col { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.clan-hero .cbadge-col span { font-family: var(--fh); font-weight: 700; letter-spacing: 0.08em; }
.style-grid { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: start; }
.emblems { display: grid; grid-template-columns: repeat(8, 2.4rem); gap: 0.35rem; }
.emblems button { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.emblems button .ic { width: 1.4rem; height: 1.4rem; }
.emblems button.on { color: var(--acc2); box-shadow: inset 0 0 0 2px var(--acc); background: rgba(41, 216, 255, 0.12); }
.swrow { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.swrow button { width: 1.7rem; height: 1.7rem; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.swrow button.on { outline: 2px solid var(--acc); outline-offset: 2px; }
.acc-ava { display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0 0.8rem; border-bottom: 1px solid var(--line); }
.acc-ava .btns { display: flex; flex-direction: column; gap: 0.4rem; }

.who-cell { display: inline-flex; align-items: center; gap: 0.45rem; }

/* личные сообщения */
.dm-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.dm-who { display: flex; align-items: center; gap: 0.6rem; font-family: var(--fh); font-size: 1.1rem; letter-spacing: 0.04em; }
.dm-who small { display: block; font-family: var(--fb); font-size: 0.78rem; color: var(--muted); letter-spacing: 0; }
.dm-log { height: min(52vh, 26rem); overflow: auto; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.7rem; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line); }
.dm-msg { max-width: 75%; padding: 0.45rem 0.7rem; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line); align-self: flex-start; user-select: text; overflow-wrap: anywhere; }
.dm-msg.me { align-self: flex-end; background: rgba(41, 216, 255, 0.14); box-shadow: inset 0 0 0 1px var(--line2); }
.dm-msg small { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; text-align: right; }
.dm-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.dm-row input { flex: 1; }
.unread { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; margin-left: 0.3rem; background: var(--red); color: #fff; font-family: var(--fh); font-size: 0.72rem; font-style: normal; }

/* админка */
.tb-btn.admin { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, 0.45); }
.ad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 0.8rem; }
.ad-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 0.7rem; align-items: center; padding: 0.4rem 0.6rem; margin-bottom: 0.3rem; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; }
.ad-row .who { display: flex; flex-direction: column; min-width: 0; }
.ad-row .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-row .who span { font-size: 0.75rem; color: var(--muted); }
.ad-row .v { font-family: var(--fh); white-space: nowrap; }
.ad-row .v.g { color: var(--gem); }

/* кристаллы */
.gems-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.6rem 0 1rem; }
.gems-how div { padding: 0.8rem; text-align: center; background: rgba(180, 124, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(180, 124, 255, 0.25); }
.gems-how b { display: block; font-family: var(--fh); font-size: 1.6rem; color: var(--gem); }
.gems-how span { font-size: 0.82rem; color: var(--muted); }
.gem-big { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--fh); font-size: 2.6rem; color: var(--gem); margin: 0.4rem 0; }
.gem-big .ic { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 0 0.6rem rgba(180, 124, 255, 0.6)); }

#toast { position: fixed; left: 50%; bottom: 2.5rem; z-index: 90; transform: translate(-50%, 2rem); opacity: 0; pointer-events: none; transition: all 0.25s;
  font-family: var(--fh); font-size: 1rem; letter-spacing: 0.04em; padding: 0.75rem 1.4rem; background: rgba(10, 15, 26, 0.96); box-shadow: inset 0 0 0 1px var(--line2), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5); border-left: 3px solid var(--acc); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { border-left-color: var(--red); color: #ffc2b8; }
#conn { position: fixed; right: 0.7rem; bottom: 0.7rem; z-index: 90; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0.6rem var(--acc); }
#conn.bad { background: var(--red); box-shadow: 0 0 0.6rem var(--red); }

/* ─────────── друзья ─────────── */
.friends .fr-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.6rem; }
.fr-code, .fr-add { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem 0.9rem; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.fr-code b { font-family: var(--fh); font-size: 2rem; letter-spacing: 0.4rem; color: var(--acc2); user-select: text; }
.fr-code .btn { align-self: flex-start; }
.fr-add .row { display: flex; gap: 0.5rem; }
.fr-add input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.25rem; font-family: var(--fh); }
.fr-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.5rem 0.65rem; margin-bottom: 0.4rem; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.fr-row.req { background: rgba(41, 216, 255, 0.08); }
.fr-row .who { display: flex; flex-direction: column; min-width: 0; }
.fr-row .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row .st { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }
.fr-row .st::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dim); }
.fr-row.on .st::before { background: var(--acc); box-shadow: 0 0 0.4rem var(--acc); }
.fr-row.inroom .st::before { background: var(--amber); box-shadow: 0 0 0.4rem var(--amber); }
.fr-row .acts { display: flex; gap: 0.4rem; }
#invites { position: fixed; right: 1rem; top: 5rem; z-index: 80; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.inv { pointer-events: auto; width: 22rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; animation: pop 0.25s; }
.inv b { color: var(--acc2); }
.inv .row { display: flex; gap: 0.5rem; }
.inv .btn { flex: 1; }
.addfr { font: inherit; font-size: 0.72rem; color: var(--acc); background: none; border: 1px solid var(--accd); padding: 0.05rem 0.4rem; margin-left: 0.4rem; cursor: pointer; }
.addfr:disabled { opacity: 0.5; cursor: default; }

/* ─────────── HUD ─────────── */
#hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; text-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.8); font-family: var(--fb); }
#hud .hud-box { background: linear-gradient(180deg, rgba(12, 17, 28, 0.84), rgba(6, 9, 16, 0.84)); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0.5rem 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%, 0 0.5rem); }
/* прицел: форма и параметры задаются переменными из настроек */
.ch { --cl: 0.55rem; --cg: 0.45rem; --ct: 0.14rem; --cc: #ffffff; --ol: 0.06rem; position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ch i { position: absolute; background: var(--cc); box-shadow: 0 0 0 var(--ol) rgba(0, 0, 0, 0.85); }
.ch i:nth-child(1) { width: var(--ct); height: var(--cl); left: calc(var(--ct) / -2); top: calc(-1 * (var(--cl) + var(--cg))); }
.ch i:nth-child(2) { width: var(--ct); height: var(--cl); left: calc(var(--ct) / -2); top: var(--cg); }
.ch i:nth-child(3) { width: var(--cl); height: var(--ct); top: calc(var(--ct) / -2); left: calc(-1 * (var(--cl) + var(--cg))); }
.ch i:nth-child(4) { width: var(--cl); height: var(--ct); top: calc(var(--ct) / -2); left: var(--cg); }
.ch b { position: absolute; width: calc(var(--ct) * 1.7); height: calc(var(--ct) * 1.7); left: calc(var(--ct) * -0.85); top: calc(var(--ct) * -0.85); background: var(--cc); border-radius: 50%; box-shadow: 0 0 0 var(--ol) rgba(0, 0, 0, 0.85); }
.ch u { display: none; position: absolute; width: calc((var(--cg) + var(--cl)) * 2); height: calc((var(--cg) + var(--cl)) * 2); left: calc(-1 * (var(--cg) + var(--cl))); top: calc(-1 * (var(--cg) + var(--cl))); box-sizing: border-box; border: var(--ct) solid var(--cc); border-radius: 50%; box-shadow: 0 0 0 var(--ol) rgba(0, 0, 0, 0.7), inset 0 0 0 var(--ol) rgba(0, 0, 0, 0.7); }
.ch.st-dot i, .ch.st-circle i { display: none; }
.ch.st-circle u { display: block; }
.ch.st-t i:nth-child(1) { display: none; }
.ch.nodot b { display: none; }
.ch-prev { position: relative; height: 7rem; margin-bottom: 0.8rem; background: linear-gradient(135deg, #5f737a, #2a363a 55%, #12181a); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ch-cols { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ch-cols button { width: 1.7rem; height: 1.7rem; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.ch-cols button.on { outline: 2px solid var(--acc); outline-offset: 2px; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 1.7rem; height: 1.7rem; margin: -0.85rem; opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; left: 0.78rem; top: -0.15rem; width: 0.14rem; height: 2rem; background: #fff; transform: rotate(45deg); box-shadow: 0 0 0.2rem #000; }
#hitmarker::after { transform: rotate(-45deg); }
#hitmarker.on { animation: hm 0.25s ease-out; }
#hitmarker.head::before, #hitmarker.head::after { background: var(--amber); }
#hitmarker.kill::before, #hitmarker.kill::after { background: var(--red); height: 2.4rem; top: -0.35rem; }
@keyframes hm { from { opacity: 1; transform: scale(1.35); } to { opacity: 0; transform: scale(1); } }
#scope { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, transparent 0 32vh, rgba(0, 0, 0, 0.93) 32.3vh); transition: opacity 0.1s; }
#scope.on { opacity: 1; }
#scope::before, #scope::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.75); }
#scope::before { left: 50%; top: 18vh; bottom: 18vh; width: 0.12rem; margin-left: -0.06rem; }
#scope::after { top: 50%; left: calc(50% - 32vh); right: calc(50% - 32vh); height: 0.12rem; margin-top: -0.06rem; }
#dmg-vignette { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; background: radial-gradient(circle, transparent 45%, rgba(255, 0, 0, 0.55)); }
#flashbang { position: absolute; inset: 0; background: #fff; opacity: 0; }
#dmg-dirs { position: absolute; left: 50%; top: 50%; }
.dmgdir { position: absolute; left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem; animation: fadeout 0.9s forwards; }
.dmgdir::before { content: ''; position: absolute; left: 50%; top: -7rem; margin-left: -1.4rem; border: 1.4rem solid transparent; border-bottom: 1.9rem solid rgba(255, 60, 60, 0.85); }
@keyframes fadeout { to { opacity: 0; } }

#minimap-wrap { position: absolute; left: 1.2rem; top: 1.2rem; width: 11.5rem; height: 11.5rem; border-radius: 50%; overflow: hidden; background: rgba(6, 9, 16, 0.85); box-shadow: 0 0 0 1px var(--line2), 0 0 0 0.3rem rgba(6, 9, 16, 0.7), 0 0.5rem 1rem rgba(0, 0, 0, 0.5); }
#minimap { width: 100%; height: 100%; display: block; }
.mm-n { display: none; }

#hud-top { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
#score-plate { display: flex; align-items: stretch; gap: 0.35rem; }
.sp-team { min-width: 4.4rem; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 700; font-size: 2rem; padding: 0.05rem 1rem; clip-path: polygon(0.5rem 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%, 0 0.5rem); }
.sp-team.red { background: linear-gradient(180deg, rgba(255, 90, 80, 0.9), rgba(170, 30, 30, 0.9)); }
.sp-team.blue { background: linear-gradient(180deg, rgba(80, 150, 255, 0.9), rgba(30, 80, 190, 0.9)); }
.sp-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.25rem 1rem; }
.sp-mid b { font-family: var(--fh); font-weight: 600; font-size: 1.55rem; line-height: 1; letter-spacing: 0.04em; }
.sp-mid span { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sp-dm { display: flex; align-items: center; gap: 0.9rem; padding: 0.4rem 1rem; font-size: 0.95rem; }
.sp-dm b { font-family: var(--fh); color: var(--acc2); font-size: 1.3rem; }
#hud-obj { display: flex; gap: 0.5rem; }
.obj { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; padding: 0.3rem 0.8rem; }
.obj.t0 { box-shadow: inset 0.25rem 0 0 var(--red), inset 0 0 0 1px var(--line) !important; } .obj.t1 { box-shadow: inset 0.25rem 0 0 var(--blue), inset 0 0 0 1px var(--line) !important; }
.obj.alert { background: rgba(255, 140, 42, 0.75) !important; animation: blink 0.5s infinite alternate; }
.obj.own0 { background: rgba(200, 50, 50, 0.75) !important; } .obj.own1 { background: rgba(42, 98, 207, 0.75) !important; }
@keyframes blink { from { opacity: 0.55; } to { opacity: 1; } }
#boost { position: absolute; top: 8.5rem; left: 50%; transform: translateX(-50%); font-family: var(--fh); letter-spacing: 0.1em; color: #e2b8ff; font-size: 1.2rem; }
#killfeed { position: absolute; top: 1rem; right: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.kf { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.92rem; font-weight: 600; transition: opacity 0.6s; }
.kf .wic { width: 3.6rem; height: 1.15rem; color: #fff; }
.kf .ic { width: 1rem; height: 1rem; color: var(--amber); }
.kf.mine { box-shadow: inset 0 0 0 1px var(--acc) !important; }
.kf .me { color: var(--acc2); } .kf .t0 { color: #ff9a90; } .kf .t1 { color: #8fbaff; }
.kf.fade, .note.fade, .cl.fade { opacity: 0; }
#notify { position: absolute; top: 9.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.note { font-family: var(--fh); font-weight: 600; letter-spacing: 0.05em; font-size: 1.2rem; transition: opacity 0.5s; animation: pop 0.25s; white-space: nowrap; }
.note.big { font-size: 2rem; letter-spacing: 0.1em; color: var(--acc2); text-shadow: 0 0 1rem rgba(41, 216, 255, 0.6), 0 0.15rem 0.3rem #000; }
@keyframes pop { from { transform: scale(1.4); opacity: 0; } }

#vitals { position: absolute; left: 1.2rem; bottom: 1.2rem; padding: 0.75rem 0.95rem; display: flex; flex-direction: column; gap: 0.4rem; }
.vit { display: grid; grid-template-columns: 1.8rem 3.4rem 12.5rem; align-items: center; gap: 0.5rem; }
.vit .ic { width: 1.6rem; height: 1.6rem; }
.vit b { font-family: var(--fh); font-weight: 600; font-size: 1.75rem; line-height: 1; }
.vit .bar { height: 0.6rem; overflow: hidden; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); position: relative; }
.vit .bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 0.95rem, rgba(0, 0, 0, 0.45) 0.95rem 1.05rem); }
.vit .bar i { display: block; height: 100%; transition: width 0.15s; }
.vit.hp .ic, .vit.hp b { color: #29d8ff; } .vit.hp .bar i { background: linear-gradient(180deg, #8cf0ff, #1f8ca4); }
.vit.ar .ic, .vit.ar b { color: #f0c24a; } .vit.ar .bar i { background: linear-gradient(180deg, #ffe08a, #c99316); }
.vit.sh .ic, .vit.sh b { color: #6fe8ff; } .vit.sh .bar i { background: linear-gradient(180deg, #c6f7ff, #8a4fe0); }
.vit.en { grid-template-columns: 1.8rem 16.4rem auto; }
.vit.en .ic { color: #9fdcff; width: 1.35rem; height: 1.35rem; }
.vit.en .bar { height: 0.4rem; }
.vit.en .bar i { background: linear-gradient(90deg, #8a4fe0, #9fe8ff); }
.emp-tag { display: none; font-family: var(--fh); font-size: 0.8rem; color: #7fe8ff; animation: blink 0.4s infinite alternate; }
#vitals.emp .emp-tag { display: inline; }
#vitals.emp .vit.en .bar i { background: #3a4a5a; }
#vitals.low .vit.hp b, #vitals.low .vit.hp .ic { color: var(--red); animation: blink 0.35s infinite alternate; }
#vitals.low .vit.hp .bar i { background: linear-gradient(180deg, #ff8a80, #c62828); }

#hotbar { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 0.3rem; }
.hb { position: relative; width: 4.8rem; height: 3.3rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(12, 17, 28, 0.85), rgba(6, 9, 16, 0.85)); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.12s; clip-path: polygon(0.4rem 0, 100% 0, 100% calc(100% - 0.4rem), calc(100% - 0.4rem) 100%, 0 100%, 0 0.4rem); }
.hb .wic { width: 4.2rem; height: 1.35rem; color: #c9d3e2; }
.hb .gic { width: 1.6rem; height: 1.6rem; }
.hb .k { position: absolute; top: 0.1rem; left: 0.35rem; font-family: var(--fh); font-size: 0.72rem; color: var(--acc); }
.hb .a { position: absolute; bottom: 0.05rem; right: 0.35rem; font-family: var(--fh); font-size: 0.7rem; color: #dce5e8; }
.hb.on { transform: translateY(-0.3rem); box-shadow: inset 0 0 0 1px var(--acc), 0 0 1rem rgba(41, 216, 255, 0.25); background: linear-gradient(180deg, rgba(41, 216, 255, 0.25), rgba(6, 9, 16, 0.88)); }
.hb.on .wic { color: #fff; }
.hb.empty { opacity: 0.4; }
.hb.g { width: 3.2rem; }
.hb-sep { width: 0.6rem; }
#weapon-box { position: absolute; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.1rem; }
#wb-icon .wic { width: 8.5rem; height: 2.65rem; color: #fff; filter: drop-shadow(0 0.15rem 0.2rem rgba(0, 0, 0, 0.6)); }
.wb-txt { display: flex; flex-direction: column; align-items: flex-end; }
#wp-name { font-family: var(--fh); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c9d3e2; }
#wp-ammo { font-family: var(--fh); font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--acc2); }
#emotes { position: absolute; left: 50%; bottom: 6.5rem; transform: translateX(-50%); display: flex; gap: 0.5rem; align-items: center; padding: 0.7rem 1rem; flex-wrap: wrap; justify-content: center; max-width: 90vw; text-shadow: none; }
#emotes .et { width: 100%; text-align: center; color: var(--muted); font-size: 0.8rem; }
#emotes .em { font-size: 2rem; display: inline-flex; flex-direction: column; align-items: center; }
#emotes .em b { font-size: 0.72rem; font-family: var(--fh); color: var(--acc); }
#chat { position: absolute; left: 1.2rem; bottom: 12.5rem; width: 27rem; }
#chat-log { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.92rem; }
.cl { transition: opacity 1s; background: rgba(6, 9, 16, 0.6); padding: 0.18rem 0.55rem; align-self: flex-start; }
.cl i { color: #b9c4d8; }
#chat.open { pointer-events: auto; }
#chat.open .cl { opacity: 1 !important; }
#chat-input { display: none; width: 100%; margin-top: 0.4rem; }
#chat.open #chat-input { display: block; }
#fps { position: absolute; right: 1rem; bottom: 6rem; font-family: var(--fh); font-size: 0.8rem; color: var(--acc); }

#scoreboard, #endscreen, #death, #pause, #clicktoplay, #teampick { pointer-events: auto; }
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(52rem, 94vw); text-shadow: none; }
#scoreboard h3 { color: var(--acc2); margin-bottom: 0.7rem; font-size: 1.15rem; }
.sb-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sb-team h4 { padding: 0.4rem 0.7rem; margin-bottom: 0.3rem; }
.sb-team.t0 h4 { background: rgba(200, 50, 50, 0.6); }
.sb-team.t1 h4 { background: rgba(42, 98, 207, 0.6); }
#scoreboard td, #endscreen td { font-size: 0.92rem; }
#scoreboard small, #endscreen small { color: var(--muted); font-size: 0.72rem; }
#death { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); width: min(24rem, 90vw); text-align: center; text-shadow: none; }
#death .dt { font-family: var(--fh); font-weight: 700; letter-spacing: 0.12em; font-size: 2.1rem; color: var(--red); text-transform: uppercase; }
.killer { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 0.8rem 0 0.4rem; padding: 0.6rem; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.killer b { font-family: var(--fh); font-size: 1.15rem; color: var(--acc2); }
.killer .wic { width: 5rem; height: 1.6rem; color: #fff; }
.respawn { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 0.6rem; color: #c8d3e3; }
.ring { width: 2.8rem; height: 2.8rem; }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: rgba(255, 255, 255, 0.12); }
.ring .fg { stroke: var(--acc); transform: rotate(-90deg); transform-origin: 50% 50%; }
#endscreen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(50rem, 94vw); max-height: 90vh; overflow: auto; text-shadow: none; }
.banner { text-align: center; margin: -0.2rem 0 0.8rem; }
.banner h2 { font-size: 2.8rem; letter-spacing: 0.16em; color: var(--acc2); text-shadow: 0 0 1.5rem rgba(41, 216, 255, 0.45); }
.banner.lose h2 { color: #ff8a80; text-shadow: 0 0 1.5rem rgba(255, 77, 77, 0.4); }
.banner span { display: block; margin-top: 0.4rem; color: #c8d3e3; }
.rewards { display: flex; justify-content: center; gap: 1rem; margin: 1rem 0 0.4rem; }
.reward { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--fh); font-size: 1.2rem; color: var(--acc2); }
.reward .ic { width: 1.3rem; height: 1.3rem; color: var(--acc); }
#end-timer { text-align: center; margin-top: 0.6rem; color: var(--muted); }
#pause { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 5, 10, 0.6); text-shadow: none; }
.pause-menu { width: min(24rem, 92vw); display: flex; flex-direction: column; gap: 0.65rem; }
.pause-menu h2 { text-align: center; color: var(--acc2); font-size: 2rem; letter-spacing: 0.2em; margin-bottom: 0.3rem; }
.pause-menu .btn { width: 100%; }
/* выбор команды */
#teampick { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(ellipse at center, rgba(3, 5, 10, 0.3), rgba(3, 5, 10, 0.8)); text-shadow: none; }
.tp { width: min(48rem, 100%); display: flex; flex-direction: column; gap: 1rem; }
.tp-head { text-align: center; display: flex; flex-direction: column; gap: 0.3rem; }
.tp-head h2 { font-size: 2.2rem; letter-spacing: 0.16em; color: var(--acc2); }
.tp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tp-card { --tc: var(--red); display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem 1.1rem; text-align: left; color: var(--text); font: inherit; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 24%, rgba(10, 14, 23, 0.9)), rgba(8, 12, 20, 0.92) 60%);
  border: 2px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 0.9rem; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.tp-card.t1 { --tc: var(--blue); }
.tp-card:hover, .tp-card:focus-visible { transform: translateY(-3px); border-color: var(--tc); box-shadow: 0 0.6rem 2rem color-mix(in srgb, var(--tc) 35%, transparent); outline: none; }
.tp-card.cur { border-style: dashed; }
.tp-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; color: var(--tc); font-size: 1.7rem; letter-spacing: 0.1em; }
.tp-card h3 small { font-family: var(--fb); font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; min-height: 10rem; }
.tp-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.tp-list li small { color: var(--muted); }
.tp-list li.bot { opacity: 0.6; }
.tp-list li.me, .tp-list li.fr { color: var(--acc2); }
.tp-go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem; border-radius: 0.6rem; background: var(--tc); color: #050912; font-family: var(--fh); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tp-go kbd { color: #050912; background: rgba(255, 255, 255, 0.35); border-color: rgba(0, 0, 0, 0.25); }
.tp-foot { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) { .tp-cards { grid-template-columns: 1fr; } .tp-list { min-height: 0; } .tp-head h2 { font-size: 1.6rem; } }
#clicktoplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 5, 10, 0.35); cursor: pointer; text-shadow: none; }
.ctp { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.ctp b { font-family: var(--fh); font-size: 1.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc2); }

/* цифры урона и серии */
#dmgnums { position: absolute; inset: 0; overflow: hidden; }
.dn { position: absolute; transform: translate(-50%, -50%); font-family: var(--fh); font-weight: 700; font-size: 1.2rem; color: #fff; white-space: nowrap; text-shadow: 0 0.1rem 0 #000, 0 0 0.35rem rgba(0, 0, 0, 0.9); }
.dn.hd { color: var(--amber); font-size: 1.5rem; }
.dn.k { color: #ff6b5e; font-size: 1.55rem; }
.dn.sh { color: #8fefff; }
#streak { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); font-family: var(--fh); font-weight: 700; font-size: 2.2rem; letter-spacing: 0.14em; color: var(--acc2); white-space: nowrap; text-shadow: 0 0 1.2rem rgba(41, 216, 255, 0.6), 0 0.15rem 0.3rem #000; opacity: 0; pointer-events: none; }
#streak.on { animation: streak 2.2s ease-out forwards; }
#streak.l3 { color: #ffd84a; }
#streak.l4 { color: #ff9a2e; }
#streak.l5 { color: #ff5ce1; }
@keyframes streak { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.96); } }

@media (max-aspect-ratio: 4/3) {
  .shop { width: calc(100vw - 3.2rem); top: 45vh; }
  .clan, .rating { width: calc(100vw - 3.2rem); }
  .modes { grid-template-columns: 1fr 1fr; }
  .maps { grid-template-columns: repeat(3, 1fr); }
  .cr-grid { grid-template-columns: 1fr; }
  .side-col { display: none; }
  .tb-nav button { padding: 0 0.6rem; }
}

/* подготовка шейдеров перед первым кадром боя */
#gfx-loading { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: radial-gradient(ellipse at center, rgba(10, 16, 28, 0.92), rgba(3, 5, 9, 0.98)); color: var(--acc2); font-family: var(--fh); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; }
#gfx-loading.on { display: flex; }
#gfx-loading .spin { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid rgba(41, 216, 255, 0.18); border-top-color: var(--acc); animation: gfxspin 0.8s linear infinite; }
@keyframes gfxspin { to { transform: rotate(360deg); } }