/* =========================================================
   CF FACEIT — "Crimson Arena" design system
   Dark ember-red surfaces, italic display type, pill controls,
   smooth spring motion. One accent: crimson. Levels use FACEIT colors.
   ========================================================= */
:root{
  --h:350; --sat:1;
  --tt:hsl(var(--h) calc(58% * var(--sat)) 87%); --tl:hsl(var(--h) calc(66% * var(--sat)) 83%); --tp:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 85%); --tr:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 76%);
  --bg:hsl(calc(var(--h) - 14) calc(33% * var(--sat)) 3%); --bg2:hsl(calc(var(--h) - 6) calc(44% * var(--sat)) 5%); --card:hsl(calc(var(--h) - 6) calc(41% * var(--sat)) 7%); --card2:#22101500; --raise:hsl(calc(var(--h) - 17) calc(33% * var(--sat)) 11%);
  --line:hsl(calc(var(--h) + 3) calc(100% * var(--sat)) 68% / .14); --line2:hsl(calc(var(--h) + 3) calc(100% * var(--sat)) 68% / .26); --line-soft:rgba(255,255,255,.07);
  --text:hsl(calc(var(--h) - 5) calc(31% * var(--sat)) 95%); --muted:hsl(calc(var(--h) - 3) calc(16% * var(--sat)) 60%); --dim:#7A5F66;
  --red:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59%); --red2:hsl(calc(var(--h) - 2) calc(85% * var(--sat)) 46%); --red-hi:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66%); --pink:hsl(var(--h) calc(100% * var(--sat)) 91%); --pink-dim:hsl(var(--h) calc(100% * var(--sat)) 91% / .16);
  --ok:#2EE59D; --warn:#FFC53D; --ice:#5AB4FF; --gold:#F5C542;
  --ct:#5AB4FF; --t:#FF8A3D;
  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:13px;
  --font:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --spring:cubic-bezier(.2,.9,.25,1.15); --ease:cubic-bezier(.22,.8,.25,1);
  --nav-h:76px; --safe-b:env(safe-area-inset-bottom); --safe-t:env(safe-area-inset-top);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;color-scheme:dark}
body{min-height:100dvh;background:
  radial-gradient(900px 520px at 50% -180px,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .22),transparent 70%),
  radial-gradient(700px 600px at 110% 40%,hsl(calc(var(--h) - 2) calc(88% * var(--sat)) 33% / .12),transparent 70%),
  var(--bg);background-attachment:fixed;color:var(--text);font:600 15px/1.45 var(--font);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .4)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}.dim{color:var(--dim)}.red{color:var(--red-hi)}.ok{color:var(--ok)}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.grow{flex:1;min-width:0}.row{display:flex;align-items:center;gap:10px}.col{display:flex;flex-direction:column;gap:10px}
.small{font-size:13px}.tiny{font-size:11.5px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}

/* ---------- Display type ---------- */
.display{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.h-page{font-size:clamp(38px,11vw,58px);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.95;letter-spacing:-.015em}
.h-page::after{content:"";display:block;width:68px;height:5px;border-radius:5px;margin-top:12px;background:linear-gradient(90deg,var(--red),hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / 0))}
.h-sub{color:var(--muted);margin-top:10px;font-size:15px}
.h-card{font-size:24px;font-weight:900;font-style:italic;text-transform:uppercase;line-height:1}
.label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.num{font-weight:900;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- Shell ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-t)) 16px 10px;
  background:linear-gradient(180deg,hsl(calc(var(--h) - 14) calc(33% * var(--sat)) 3% / .96),hsl(calc(var(--h) - 14) calc(33% * var(--sat)) 3% / .82));border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:40px;height:40px}
.brand .wm{display:flex;flex-direction:column;line-height:.9}
.brand .wm b{font-weight:900;font-size:19px;letter-spacing:.12em}
.brand .wm i{font-style:normal;font-weight:800;font-size:11px;letter-spacing:.42em;color:var(--red)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill-stat{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-weight:800}
.pill-stat .ic{width:17px;height:17px;color:var(--red-hi)}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);transition:transform .2s var(--spring),background .2s}
.icon-btn:active{transform:scale(.9)}.icon-btn:hover{background:rgba(255,255,255,.08)}
.badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid var(--bg);animation:pop .35s var(--spring)}
.badge[data-n="0"]{display:none}

#view{position:relative;max-width:720px;margin:0 auto;padding:18px 16px calc(var(--nav-h) + 40px + var(--safe-b))}
.page{animation:pageIn .42s var(--ease) both}
.page.out{animation:pageOut .16s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pageOut{to{opacity:0;transform:translateY(-6px)}}
.rise{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Bottom nav (floating pill) ---------- */
.nav{position:fixed;z-index:50;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);width:min(560px,calc(100% - 22px));
  display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border-radius:999px;background:hsl(calc(var(--h) - 8) calc(42% * var(--sat)) 6% / .94);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)}
.nav-ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/5);border-radius:999px;border:2px solid var(--red);
  background:radial-gradient(120% 120% at 50% 100%,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .35),hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .06));box-shadow:0 0 22px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .45),inset 0 0 18px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .2);
  transition:transform .45s var(--spring);pointer-events:none}
.nav a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:62px;border-radius:999px;color:var(--muted);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:color .25s,transform .2s var(--spring)}
.nav a .ic{width:25px;height:25px;stroke-width:1.9;transition:transform .35s var(--spring)}
.nav a.on{color:#fff}.nav a.on .ic{transform:translateY(-1px) scale(1.06)}
.nav a:active{transform:scale(.93)}
.nav .badge{top:6px;right:calc(50% - 22px)}

@media (min-width:1000px){
  .nav{left:24px;top:96px;bottom:auto;transform:none;width:96px;grid-template-columns:1fr;grid-auto-rows:84px;border-radius:34px;padding:8px}
  .nav-ind{top:8px;left:8px;right:8px;bottom:auto;width:auto;height:76px;border-radius:26px}
  .nav a{height:76px;border-radius:26px}
  #view{padding-bottom:60px}
  .topbar{padding-left:28px;padding-right:28px}
}

/* ---------- Cards ---------- */
.card{position:relative;border-radius:var(--r-xl);padding:20px;background:linear-gradient(160deg,hsl(calc(var(--h) - 3) calc(54% * var(--sat)) 10% / .72),hsl(calc(var(--h) - 5) calc(43% * var(--sat)) 5% / .82));border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);margin-bottom:14px;overflow:hidden}
.card.hot{background:radial-gradient(130% 90% at 0% 0%,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .35),transparent 60%),linear-gradient(160deg,hsl(calc(var(--h) - 2) calc(68% * var(--sat)) 17%),hsl(calc(var(--h) - 5) calc(56% * var(--sat)) 7%) 70%);border-color:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .35)}
.card.flat{background:rgba(255,255,255,.025);border-color:var(--line-soft);box-shadow:none}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-head h3{font-size:18px;font-weight:900;font-style:italic;text-transform:uppercase}
.card-head .more{margin-left:auto;color:var(--red-hi);font-size:13px;font-weight:800}
.section-title{display:flex;align-items:center;gap:10px;margin:26px 2px 12px;font-size:20px;font-weight:900;font-style:italic;text-transform:uppercase}
.section-title .count{font-style:normal;font-size:13px;color:var(--muted);font-weight:700}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
.empty .ic{width:42px;height:42px;margin:0 auto 10px;color:var(--dim)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:900;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);color:var(--text);transition:transform .22s var(--spring),filter .2s,background .2s,box-shadow .25s;user-select:none;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn:hover{background:rgba(255,255,255,.08)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.primary{background:linear-gradient(135deg,var(--red-hi),var(--red2));border-color:transparent;color:#fff;box-shadow:0 10px 30px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .35),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:var(--line2)}
.btn.danger{background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .1);border-color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .35);color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 76%)}
.btn.ice{background:rgba(90,180,255,.08);border-color:rgba(90,180,255,.45);color:#A9D6FF}
.btn.ok{background:linear-gradient(135deg,#34F0A6,#12B978);color:#06150F;border-color:transparent}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:40px;padding:0 16px;font-size:12.5px}
.btn.xl{min-height:64px;font-size:18px}
.btn .sub{display:block;font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:700;opacity:.8}
.btn.busy{pointer-events:none}.btn.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}.btn-row>.btn{flex:1}
.link{color:var(--red-hi);font-weight:800}

/* ---------- Chips, pills, segmented ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);white-space:nowrap}
.chip .ic{width:15px;height:15px}
.chip.red{background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .12);border-color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .4);color:hsl(var(--h) calc(100% * var(--sat)) 78%)}
.chip.gold{background:rgba(245,197,66,.1);border-color:rgba(245,197,66,.45);color:var(--gold)}
.chip.ice{background:rgba(90,180,255,.1);border-color:rgba(90,180,255,.4);color:#A9D6FF}
.chip.ok{background:rgba(46,229,157,.1);border-color:rgba(46,229,157,.4);color:var(--ok)}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.seg button{position:relative;z-index:1;height:44px;padding:0 20px;border-radius:999px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--muted);transition:color .25s}
.seg button.on{color:hsl(calc(var(--h) - 3) calc(54% * var(--sat)) 5%)}
.seg .seg-ind{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(180deg,#fff,hsl(calc(var(--h) - 2) calc(25% * var(--sat)) 88%));box-shadow:0 6px 20px rgba(255,255,255,.18);transition:transform .45s var(--spring),width .3s}
.seg.full{display:grid;width:100%}

/* ---------- Roles ---------- */
.role{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.role .ic{width:16px;height:16px}
.role.founder{background:linear-gradient(135deg,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 64%),hsl(var(--h) calc(86% * var(--sat)) 45%));color:#fff;box-shadow:0 6px 22px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .4)}
.role.admin{border:1.5px solid hsl(calc(var(--h) + 3) calc(100% * var(--sat)) 66% / .55);color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 88%);background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .12)}
.role.guard{border:1.5px solid rgba(90,180,255,.55);color:#BFE2FF;background:rgba(90,180,255,.1)}
.role.tester{border:1.5px solid rgba(46,229,157,.5);color:#9FF5D1;background:rgba(46,229,157,.08)}
.role.cooperation{border:1.5px solid rgba(245,197,66,.55);color:#FFE19A;background:rgba(245,197,66,.08)}
.role.sponsor{border:1.5px solid rgba(255,138,61,.55);color:#FFC59E;background:rgba(255,138,61,.08)}
.role.sm{height:26px;padding:0 11px;font-size:10.5px}

/* ---------- Names ---------- */
.nick{display:inline-flex;align-items:center;gap:5px;min-width:0;font-weight:800}
.nick .tag{color:var(--red-hi);font-weight:900;white-space:nowrap}
.nick .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick .vf{width:17px;height:17px;flex:none;color:var(--gold)}
.nick .vf.blue{color:var(--ice)}
.nick-blue .n{color:#7CC4FF}
.nick-gradient .n{background:linear-gradient(90deg,hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66%),#FFB15C);-webkit-background-clip:text;background-clip:text;color:transparent}
.nick-rainbow .n{background:linear-gradient(90deg,hsl(calc(var(--h) + 10) calc(100% * var(--sat)) 65%),#ffb84d,#f5ff4d,#4dff88,#4dd2ff,#a64dff,hsl(calc(var(--h) + 10) calc(100% * var(--sat)) 65%));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 4s linear infinite}
@keyframes rainbow{to{background-position:200% 0}}

/* ---------- Avatar + level hex ---------- */
.av{position:relative;display:inline-block;flex:none;width:var(--s,44px);height:var(--s,44px)}
.av>.img{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:900;font-style:italic;color:#fff;font-size:calc(var(--s,44px)*.42);
  background:linear-gradient(135deg,hsl(calc(var(--h) - 1) calc(72% * var(--sat)) 28%),hsl(calc(var(--h) - 2) calc(71% * var(--sat)) 13%));box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.av>.img img{width:100%;height:100%;object-fit:cover}
.av.halo>.img{box-shadow:0 0 0 3px var(--bg),0 0 0 5px hsl(var(--h) calc(100% * var(--sat)) 91% / .85),0 0 24px hsl(var(--h) calc(100% * var(--sat)) 91% / .35)}
.av .lvl{position:absolute;right:calc(var(--s,44px)*-.08);bottom:calc(var(--s,44px)*-.08);width:calc(var(--s,44px)*.46);height:calc(var(--s,44px)*.46);min-width:18px;min-height:18px}
.av .online{position:absolute;right:1px;top:1px;width:calc(var(--s,44px)*.22);height:calc(var(--s,44px)*.22);min-width:9px;min-height:9px;border-radius:50%;background:var(--ok);border:2px solid var(--bg)}
.av .crown{position:absolute;left:50%;top:calc(var(--s)*-.3);transform:translateX(-50%);width:calc(var(--s)*.42);height:calc(var(--s)*.42);color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 71%);filter:drop-shadow(0 2px 6px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .6))}
.lvl-hex{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.lvl-hex text{font-family:var(--font);font-weight:900;font-style:italic}
/* Frames */
.av[class*="fr-"]>.img{box-shadow:0 0 0 2px var(--bg);transform:scale(.86)}
.av[class*="fr-"]::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;animation:spin 6s linear infinite}
.av{isolation:isolate}
.fr-violet::before{background:conic-gradient(#7B2CFF,#C77DFF,#3A0CA3,#7B2CFF);box-shadow:0 0 16px rgba(160,90,255,.55)}
.fr-collab::before{background:conic-gradient(#8A2BE2,#FF6A00,#1a0b25,#8A2BE2);box-shadow:0 0 16px rgba(255,106,0,.45)}
.fr-arctic::before{background:conic-gradient(#BDF3FF,#47B9FF,#E8FBFF,#1E6FD9,#BDF3FF);box-shadow:0 0 16px rgba(71,185,255,.55)}
.fr-crimson::before{background:conic-gradient(hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59%),hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 80%),hsl(var(--h) calc(100% * var(--sat)) 27%),hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59%));box-shadow:0 0 18px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .6)}
.fr-iris::before{background:conic-gradient(#000,#3a3a3a,#000,#6b6b6b,#000);box-shadow:0 0 14px rgba(0,0,0,.9),0 0 0 1px #444}

/* ---------- Player rows ---------- */
.prow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);background:rgba(255,255,255,.025);border:1px solid var(--line-soft);transition:transform .2s var(--spring),background .2s;width:100%;text-align:left}
.prow:hover{background:rgba(255,255,255,.05)}.prow:active{transform:scale(.985)}
.prow+.prow{margin-top:8px}
.prow .meta{font-size:12.5px;color:var(--muted);font-weight:700}

/* ---------- Forms ---------- */
.field{display:block;margin-bottom:14px}
.field>span{display:block;margin:0 0 7px 6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.input,select.input,textarea.input{width:100%;min-height:54px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.04);border:1.5px solid var(--line-soft);outline:0;font-weight:700;transition:border-color .2s,box-shadow .2s,background .2s}
textarea.input{border-radius:var(--r-md);padding:15px 18px;min-height:110px;resize:vertical;line-height:1.45}
.input:focus{border-color:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .65);box-shadow:0 0 0 4px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .15);background:rgba(255,255,255,.06)}
.input::placeholder{color:var(--dim)}
.field .err{display:block;color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 76%);font-size:12.5px;margin:6px 0 0 8px;min-height:0}
.check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--red);margin-top:1px;flex:none}
.file-drop{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-md);border:1.5px dashed var(--line2);background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .04);cursor:pointer;transition:background .2s}
.file-drop:hover{background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .08)}
.file-drop input{display:none}
.file-drop .ic{width:26px;height:26px;color:var(--red-hi)}
.preview-img{margin-top:10px;border-radius:var(--r-md);max-height:240px;object-fit:contain;width:100%;background:#000}

/* ---------- Sheets (bottom modal) ---------- */
.sheet-root{position:fixed;inset:0;z-index:200;display:grid;align-items:end;justify-items:center}
.sheet-backdrop{position:absolute;inset:0;background:hsl(calc(var(--h) - 10) calc(43% * var(--sat)) 1% / .72);animation:fade .25s ease both}
.sheet{position:relative;width:min(640px,100%);max-height:92dvh;overflow:auto;padding:22px 18px calc(22px + var(--safe-b));border-radius:34px 34px 0 0;
  background:linear-gradient(180deg,hsl(calc(var(--h) - 6) calc(46% * var(--sat)) 8%),hsl(calc(var(--h) - 5) calc(50% * var(--sat)) 5%));border:1px solid var(--line);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sheetIn .45s var(--spring) both;overscroll-behavior:contain}
.sheet::before{content:"";display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.18);margin:-8px auto 16px}
.sheet.closing{animation:sheetOut .22s ease both}.sheet-root.closing .sheet-backdrop{animation:fadeOut .22s ease both}
.sheet h2{font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase;margin-bottom:6px}
.sheet .x{position:absolute;right:14px;top:14px}
@media (min-width:700px){.sheet-root{align-items:center}.sheet{border-radius:32px;border-bottom:1px solid var(--line);animation:modalIn .35s var(--spring) both}.sheet::before{display:none}}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%)}}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}

/* ---------- Toasts ---------- */
.toasts{position:fixed;z-index:400;top:calc(10px + var(--safe-t));left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 20px));display:grid;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:24px;background:hsl(calc(var(--h) - 9) calc(40% * var(--sat)) 8% / .97);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.6);animation:toastIn .5s var(--spring) both;cursor:default}
.toast.out{animation:toastOut .3s ease both}
.toast .ti{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .15);color:var(--red-hi)}
.toast.ok .ti{background:rgba(46,229,157,.14);color:var(--ok)}
.toast .tk{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:6px}
.toast .tt{font-weight:900;font-size:15px}.toast .tb{color:var(--muted);font-size:13.5px}
.toast .when{margin-left:auto;align-self:flex-start;color:var(--dim);font-size:12px}
.toast.click{cursor:pointer}
@keyframes toastIn{from{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-20px) scale(.97)}}

/* ---------- Banners ---------- */
.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-lg);margin-bottom:14px;background:linear-gradient(135deg,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .32),hsl(calc(var(--h) - 1) calc(85% * var(--sat)) 25% / .4));border:1px solid hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .4);width:100%;text-align:left;animation:rise .45s var(--ease) both}
.banner .bi{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(0,0,0,.25);flex:none}
.banner b{display:block;font-size:15px}.banner small{color:hsl(var(--h) calc(49% * var(--sat)) 82%);font-weight:700}
.banner .chev{margin-left:auto}
.banner.ice{background:linear-gradient(135deg,rgba(90,180,255,.22),rgba(20,60,110,.3));border-color:rgba(90,180,255,.4)}
.banner.ok{background:linear-gradient(135deg,rgba(46,229,157,.18),rgba(10,70,50,.3));border-color:rgba(46,229,157,.4)}

/* ---------- Lobby ---------- */
.room-big .rb-top{display:flex;align-items:flex-start;gap:12px}
.room-big .rb-count{margin-left:auto;font-size:46px;line-height:1}
.room-big .rb-count small{font-size:24px;opacity:.55}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 8px;margin:22px 0 18px}
.slots.duo{grid-template-columns:repeat(4,1fr)}
.slot{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center}
.slot .nm{font-weight:800;font-size:13.5px;max-width:100%}
.slot .sub{font-size:11.5px;color:hsl(calc(var(--h) - 1) calc(39% * var(--sat)) 75%);font-weight:700;margin-top:-5px}
.slot.empty .circle{width:var(--s);height:var(--s);border-radius:50%;border:2px dashed hsl(var(--h) calc(100% * var(--sat)) 91% / .28);display:grid;place-items:center;color:hsl(var(--h) calc(100% * var(--sat)) 91% / .4)}
.slot.empty .nm{color:hsl(var(--h) calc(100% * var(--sat)) 91% / .45);font-weight:700}
.slot.filled{animation:slotIn .55s var(--spring) both}
@keyframes slotIn{from{opacity:0;transform:scale(.5) translateY(8px)}to{opacity:1;transform:none}}
.progress{height:10px;border-radius:10px;background:rgba(0,0,0,.35);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--red),hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 85%));box-shadow:0 0 14px hsl(calc(var(--h) + 3) calc(100% * var(--sat)) 68% / .7);transition:width .6s var(--spring)}
.room-row .avs{display:flex;margin-top:12px}
.room-row .avs .av{margin-right:-10px}
.room-row .avs .av>.img{box-shadow:0 0 0 3px hsl(calc(var(--h) - 6) calc(41% * var(--sat)) 7%)}

/* ---------- Chat (lobby/match) ---------- */
.chat{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;padding:4px 2px;scroll-behavior:smooth}
.chat .cm{display:flex;gap:9px;align-items:flex-end;animation:rise .35s var(--ease) both}
.chat .cm .bub{padding:9px 13px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.06);max-width:80%}
.chat .cm .bub b{display:block;font-size:12px;color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 85%)}
.chat .cm.me{flex-direction:row-reverse}.chat .cm.me .bub{border-radius:18px 18px 6px 18px;background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .22)}
.chat-form{display:flex;gap:8px;margin-top:10px}
.chat-form .input{min-height:48px}

/* ---------- Match found overlay ---------- */
.overlay{position:fixed;inset:0;z-index:300;overflow:auto;background:radial-gradient(120% 70% at 50% 0%,hsl(calc(var(--h) + 2) calc(89% * var(--sat)) 22%),hsl(calc(var(--h) + 1) calc(87% * var(--sat)) 9%) 45%,hsl(calc(var(--h) + 1) calc(54% * var(--sat)) 3%) 80%);animation:fade .3s ease both}
.overlay.closing{animation:fadeOut .3s ease both}
.mf{max-width:560px;margin:0 auto;min-height:100dvh;padding:calc(24px + var(--safe-t)) 18px calc(26px + var(--safe-b));display:flex;flex-direction:column;align-items:center;text-align:center}
.mf h1{font-size:clamp(44px,13vw,70px);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.95;text-shadow:0 0 30px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 74% / .35);animation:mfTitle .7s var(--spring) both}
.mf .mf-sub{color:hsl(calc(var(--h) - 2) calc(39% * var(--sat)) 74%);font-size:17px;margin-top:10px;animation:fade .6s .2s both}
@keyframes mfTitle{from{opacity:0;transform:scale(1.4);letter-spacing:.1em}to{opacity:1;transform:none}}
.ring{position:relative;width:min(56vw,270px);aspect-ratio:1;margin:30px auto 26px;animation:mfRing .8s .1s var(--spring) both}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring .track{stroke:hsl(var(--h) calc(100% * var(--sat)) 91% / .12)}
.ring .bar{stroke:var(--pink);filter:drop-shadow(0 0 10px hsl(var(--h) calc(100% * var(--sat)) 91% / .8));transition:stroke-dashoffset 1s linear,stroke .3s}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(64px,19vw,96px);font-weight:900;font-style:italic;text-shadow:0 0 30px hsl(var(--h) calc(100% * var(--sat)) 91% / .5)}
.ring .val small{position:absolute;bottom:26%;font-size:13px;font-style:normal;letter-spacing:.2em;color:hsl(calc(var(--h) - 1) calc(40% * var(--sat)) 80%)}
.ring::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .35),transparent 70%);animation:pulse 1.6s ease-in-out infinite}
.ring.danger .bar{stroke:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66%)}
@keyframes mfRing{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes pulse{50%{transform:scale(1.12);opacity:.55}}
.mf-players{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 10px;width:100%}
.mf-players.duo{grid-template-columns:repeat(4,1fr)}
.mf-p{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;animation:slotIn .5s var(--spring) both;animation-delay:calc(.35s + var(--i) * 60ms)}
.mf-p .nm{font-size:14px;font-weight:800;max-width:100%}
.mf-p .av>.img{box-shadow:0 0 0 3px hsl(calc(var(--h) + 1) calc(87% * var(--sat)) 9%),0 0 0 4px rgba(255,255,255,.12);transition:box-shadow .4s}
.mf-p.acc .av>.img{box-shadow:0 0 0 3px hsl(calc(var(--h) + 1) calc(87% * var(--sat)) 9%),0 0 0 6px var(--pink),0 0 26px hsl(var(--h) calc(100% * var(--sat)) 91% / .55)}
.mf-p .tick{position:absolute;right:-6px;top:-6px;width:38%;aspect-ratio:1;border-radius:50%;background:var(--pink);color:hsl(calc(var(--h) + 1) calc(87% * var(--sat)) 9%);display:grid;place-items:center;border:3px solid hsl(calc(var(--h) + 1) calc(87% * var(--sat)) 9%);transform:scale(0);transition:transform .45s var(--spring)}
.mf-p .tick .ic{width:60%;height:60%;stroke-width:3.2}
.mf-p.acc .tick{transform:scale(1)}
.mf-warn{color:hsl(calc(var(--h) - 1) calc(42% * var(--sat)) 75%);margin:28px 0 18px;font-size:15px}
.mf-actions{margin-top:auto;width:100%;display:grid;gap:10px;padding-top:14px}
.mf-accept{min-height:72px;font-size:22px;border-radius:999px;animation:acceptPulse 1.4s ease-in-out infinite}
@keyframes acceptPulse{50%{box-shadow:0 10px 50px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .75),0 0 0 8px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .12)}}
.mf-wait{min-height:72px;font-size:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55)}

/* ---------- Match room ---------- */
.map-hero{position:relative;height:190px;border-radius:var(--r-xl);overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}
.map-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.15) translate(-2%,-2%)}}
.map-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(calc(var(--h) - 10) calc(43% * var(--sat)) 3% / .1),hsl(calc(var(--h) - 10) calc(43% * var(--sat)) 3% / .92))}
.map-hero .mh{position:absolute;z-index:1;left:20px;right:20px;bottom:18px}
.map-hero .mh h2{font-size:42px;font-weight:900;font-style:italic;text-transform:uppercase;line-height:.95}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:4px 0 16px}
.steps i{height:6px;border-radius:6px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.steps i.done{background:var(--red)}
.steps i.cur{background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .25)}.steps i.cur::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--red-hi),transparent);animation:sweep 1.4s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.teams{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.teams{grid-template-columns:1fr 1fr}}
.team{border-radius:var(--r-lg);padding:14px;border:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.team.ct{background:linear-gradient(160deg,rgba(90,180,255,.12),transparent 60%);border-color:rgba(90,180,255,.25)}
.team.t{background:linear-gradient(160deg,rgba(255,138,61,.12),transparent 60%);border-color:rgba(255,138,61,.25)}
.team h4{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;font-style:italic;text-transform:uppercase;margin-bottom:10px}
.team.ct h4{color:#A9D6FF}.team.t h4{color:#FFC59E}
.team .avg{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.team .prow{background:rgba(0,0,0,.18)}
.team .prow .delta{margin-left:auto;font-weight:900;font-style:italic;font-size:17px}
.code-box{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-lg);background:rgba(0,0,0,.3);border:1.5px dashed hsl(var(--h) calc(100% * var(--sat)) 91% / .35)}
.code-box .code{font-size:30px;font-weight:900;font-style:italic;letter-spacing:.08em;word-break:break-all}
.live-clock{font-size:52px;line-height:1}
.confirm-avs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.confirm-avs .av{opacity:.35;transition:opacity .3s}.confirm-avs .av.yes{opacity:1}
.result-hero{text-align:center;padding:26px 10px}
.result-hero .big{font-size:56px}
.delta.up{color:var(--ok)}.delta.down{color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 72%)}

/* ---------- Rating ---------- */
.grid-bg{position:relative}
.grid-bg::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:10px;margin:26px 0 22px}
.pod{position:relative;border-radius:30px;padding:22px 10px 20px;text-align:center;background:hsl(calc(var(--h) - 8) calc(38% * var(--sat)) 5% / .9);border:1px solid rgba(255,255,255,.12);overflow:hidden;animation:rise .6s var(--spring) both;transition:transform .25s var(--spring)}
.pod:active{transform:scale(.97)}
.pod .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35;filter:saturate(.8)}
.pod .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(calc(var(--h) - 10) calc(43% * var(--sat)) 3% / .2),hsl(calc(var(--h) - 10) calc(43% * var(--sat)) 3% / .92))}
.pod>*:not(.bgimg){position:relative}
.pod .place{font-size:44px;line-height:1;margin-top:10px}
.pod .pn{font-size:14px;margin:6px 0 4px;display:flex;justify-content:center}
.pod .pe{font-size:30px;line-height:1}
.pod.p1{padding-top:34px;background:hsl(calc(var(--h) - 8) calc(42% * var(--sat)) 6% / .95);border-color:rgba(255,255,255,.22);box-shadow:0 0 40px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .18);animation-delay:.05s}
.pod.p1 .crown-top{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30px;height:30px;color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}
.pod.p2{animation-delay:.15s}.pod.p3{animation-delay:.25s}
.pod.p1 .place{color:#fff}.pod.p2 .place{color:#E6E6EA}.pod.p3 .place{color:#C9B9BC}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:24px;background:hsl(calc(var(--h) - 6) calc(38% * var(--sat)) 6% / .88);border:1px solid rgba(255,255,255,.08);margin-bottom:10px;position:relative;overflow:hidden;width:100%;text-align:left;transition:transform .2s var(--spring)}
.lb-row:active{transform:scale(.985)}
.lb-row .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18}
.lb-row>*:not(.bgimg){position:relative}
.lb-row .rk{width:30px;text-align:center;font-size:22px;color:var(--dim)}
.lb-row .elo{margin-left:auto;font-size:26px}
.lb-row.me{border-color:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .55);box-shadow:0 0 0 1px hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .25) inset}

/* ---------- Profile ---------- */
.prof{position:relative;border-radius:34px;overflow:hidden;border:1px solid var(--line);background:hsl(calc(var(--h) - 5) calc(43% * var(--sat)) 5%);margin-bottom:14px}
.prof .cover{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 0%,hsl(calc(var(--h) - 1) calc(73% * var(--sat)) 20%),hsl(calc(var(--h) - 5) calc(43% * var(--sat)) 5%) 70%)}
.prof .cover img,.prof .cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prof .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(calc(var(--h) - 12) calc(40% * var(--sat)) 4% / .35),hsl(calc(var(--h) - 12) calc(40% * var(--sat)) 4% / .65) 45%,hsl(calc(var(--h) - 12) calc(40% * var(--sat)) 4% / .97))}
.prof .inner{position:relative;padding:22px 18px 18px}
.prof .top{display:flex;gap:18px;align-items:center}
.prof .place{font-size:14px;font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.55);text-transform:none}
.prof .pname{font-size:clamp(28px,8vw,40px);font-weight:900;font-style:italic;text-transform:uppercase;line-height:1;margin:4px 0 10px;display:flex;flex-wrap:wrap;gap:0 10px}
.prof .pname .tag{color:var(--red-hi)}
.prof .roles{display:flex;flex-wrap:wrap;gap:8px}
.calib{display:flex;align-items:center;gap:16px;margin-top:18px;padding:22px;border-radius:var(--r-lg);background:linear-gradient(160deg,hsl(var(--h) calc(62% * var(--sat)) 15% / .85),hsl(calc(var(--h) - 1) calc(54% * var(--sat)) 8% / .85));border:1px solid var(--line)}
.calib h3{font-size:24px;line-height:1.15;font-weight:900}
.calib .lock{width:96px;height:96px;flex:none;margin-left:auto}
.calib .prog{color:var(--muted);margin-top:8px;font-size:17px;font-weight:800}
.calib .prog b{color:var(--red-hi)}
.lvl-card{display:flex;align-items:center;gap:18px;margin-top:18px;padding:20px;border-radius:var(--r-lg);background:linear-gradient(160deg,hsl(var(--h) calc(62% * var(--sat)) 15% / .85),hsl(calc(var(--h) - 1) calc(54% * var(--sat)) 8% / .85));border:1px solid var(--line)}
.lvl-card .hex{width:88px;height:88px;flex:none}
.lvl-card .elo{font-size:44px;line-height:1}
.lvl-card .progress{margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:16px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line-soft);animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.stat b{display:block;font-size:26px;font-weight:900;font-style:italic;line-height:1.1}
.stat span{font-size:12px;color:var(--muted);font-weight:700}
.chart{width:100%;height:150px;display:block}
.chart .area{fill:url(#eloFill)}.chart .line{fill:none;stroke:var(--red-hi);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.4s .2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hist{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.025);border-left:4px solid var(--dim);margin-bottom:8px}
.hist.W{border-left-color:var(--ok)}.hist.L{border-left-color:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66%)}
.hist .res{font-weight:900;font-style:italic;text-transform:uppercase;width:84px}
.hist.W .res{color:var(--ok)}.hist.L .res{color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 72%)}
.hist .delta{margin-left:auto;font-weight:900;font-style:italic;font-size:18px}
.form-dots{display:flex;gap:6px}
.form-dots i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:900;font-style:normal}
.form-dots i.W{background:rgba(46,229,157,.16);color:var(--ok)}.form-dots i.L{background:hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .16);color:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 72%)}
.bio{white-space:pre-wrap;color:hsl(calc(var(--h) - 3) calc(28% * var(--sat)) 86%);font-size:16px}

/* ---------- Messages ---------- */
.conv{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-lg);width:100%;text-align:left;transition:background .2s,transform .2s var(--spring)}
.conv:hover{background:rgba(255,255,255,.04)}.conv:active{transform:scale(.985)}
.conv .last{color:var(--muted);font-size:13.5px;font-weight:600}
.conv .unread{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center}
.conv .when{font-size:12px;color:var(--dim);align-self:flex-start;margin-top:3px}
.dm-page{display:flex;flex-direction:column;min-height:calc(100dvh - 180px)}
.dm-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dm-head .sub{font-size:13px;color:var(--muted);font-weight:700}
.dm-list{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px 0 90px}
.dm-day{align-self:center;margin:14px 0 8px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.07);font-size:13px;font-weight:800;color:hsl(calc(var(--h) - 3) calc(19% * var(--sat)) 76%)}
.msg{max-width:80%;padding:10px 14px 8px;border-radius:22px 22px 22px 8px;background:rgba(255,255,255,.07);align-self:flex-start;animation:msgIn .35s var(--spring) both;word-wrap:break-word;white-space:pre-wrap}
.msg.me{align-self:flex-end;border-radius:22px 22px 8px 22px;background:linear-gradient(160deg,hsl(calc(var(--h) + 1) calc(77% * var(--sat)) 39%),hsl(calc(var(--h) - 1) calc(79% * var(--sat)) 27%));border:1px solid hsl(calc(var(--h) + 3) calc(100% * var(--sat)) 68% / .45);box-shadow:0 6px 20px hsl(var(--h) calc(83% * var(--sat)) 34% / .3)}
.msg .tm{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;font-size:12px;font-weight:700;color:rgba(255,255,255,.6)}
.msg .tm .ic{width:15px;height:15px;stroke-width:2.6}
.msg .tm .ic.read{color:#9FE8FF}
.msg img{border-radius:14px;max-height:320px;margin:2px 0 4px;cursor:zoom-in}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.composer{position:fixed;z-index:45;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 22px + var(--safe-b));width:min(700px,calc(100% - 22px));display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;
  background:hsl(calc(var(--h) - 5) calc(44% * var(--sat)) 7% / .97);border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.composer textarea{flex:1;min-height:46px;max-height:120px;resize:none;background:transparent;border:0;outline:0;padding:12px 6px;font-weight:700;line-height:1.35}
.composer .icon-btn{width:46px;height:46px}
.send-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red-hi),var(--red2));color:#fff;box-shadow:0 8px 24px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .45);transition:transform .2s var(--spring)}
.send-btn:active{transform:scale(.88) rotate(-8deg)}
.send-btn .ic{width:24px;height:24px}
@media (min-width:1000px){.composer{bottom:22px}}

/* ---------- More grid ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-lg);background:linear-gradient(160deg,hsl(calc(var(--h) - 3) calc(54% * var(--sat)) 10% / .7),hsl(calc(var(--h) - 5) calc(43% * var(--sat)) 5% / .8));border:1px solid var(--line);text-align:left;min-height:118px;transition:transform .25s var(--spring),border-color .2s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
.tile:hover{border-color:var(--line2)}.tile:active{transform:scale(.96)}
.tile .ti{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .14);color:var(--red-hi)}
.tile b{font-size:16px}.tile small{color:var(--muted);font-weight:600;font-size:12.5px}
.tile .badge{top:12px;right:12px}

/* ---------- Ban / mute / check screens ---------- */
.gate{position:fixed;inset:0;z-index:250;overflow:auto;background:radial-gradient(100% 60% at 50% 0%,hsl(calc(var(--h) - 3) calc(81% * var(--sat)) 13%),hsl(var(--h) calc(43% * var(--sat)) 3%) 70%);display:grid;place-items:center;padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));animation:fade .3s ease both}
.gate-card{width:min(520px,100%);padding:30px 20px 22px;border-radius:36px;text-align:center;background:linear-gradient(180deg,hsl(calc(var(--h) - 4) calc(52% * var(--sat)) 8% / .96),hsl(calc(var(--h) - 6) calc(44% * var(--sat)) 5% / .96));border:1px solid hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .28);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:modalIn .5s var(--spring) both}
.gate-ico{width:96px;height:96px;margin:0 auto 18px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 64%),hsl(var(--h) calc(86% * var(--sat)) 42%));box-shadow:0 14px 40px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .5);color:#fff}
.gate-ico .ic{width:48px;height:48px}
.gate h1{font-size:36px;font-weight:900;line-height:1.05}
.gate .gsub{color:hsl(calc(var(--h) - 2) calc(26% * var(--sat)) 71%);margin:10px 0 20px;font-size:16px}
.info-row{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);margin-bottom:10px}
.info-row .ic{width:26px;height:26px;color:var(--red-hi)}
.info-row small{display:block;color:var(--muted);font-weight:700;font-size:14px}
.info-row b{font-size:18px}
.note{padding:16px 18px;border-radius:22px;border:1.5px dashed hsl(calc(var(--h) + 2) calc(100% * var(--sat)) 66% / .4);background:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .06);color:hsl(calc(var(--h) - 1) calc(36% * var(--sat)) 75%);text-align:left;margin:12px 0 18px;font-size:15px}
.note b{color:#fff}
.check-card{position:relative;text-align:center}
.check-card .ring{width:min(62vw,280px);margin:24px auto}
.check-card .ring .bar{stroke:hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 64%);filter:drop-shadow(0 0 12px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 64% / .8))}
.check-card .ring .val{font-size:clamp(56px,16vw,78px)}
.check-card.frozen .ring .bar{stroke:var(--ice);filter:drop-shadow(0 0 12px rgba(90,180,255,.7))}
.collapse-btn{position:absolute;right:16px;top:16px}

/* ---------- Auth ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b))}
.auth-card{width:min(460px,100%);animation:modalIn .55s var(--spring) both}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px}
.auth-logo svg{width:92px;height:92px;filter:drop-shadow(0 10px 40px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .55));animation:logoFloat 4s ease-in-out infinite}
@keyframes logoFloat{50%{transform:translateY(-6px)}}
.auth-logo .wm{font-size:40px;font-weight:900;font-style:italic;letter-spacing:.02em}
.auth-logo .wm b{color:var(--red)}
.auth .seg{width:100%;margin-bottom:18px}
.or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--dim);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.btn.tg{background:#2AABEE;border-color:transparent;color:#fff}

/* ---------- Staff ---------- */
.tabs-scroll{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin:14px 0;scrollbar-width:none}
.tabs-scroll::-webkit-scrollbar{display:none}
.tabs-scroll button{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:all .25s}
.tabs-scroll button.on{background:#fff;color:hsl(calc(var(--h) - 3) calc(54% * var(--sat)) 5%);border-color:#fff}
.tabs-scroll .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;display:grid;place-items:center}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:10px 0}
.proof-grid img{width:100%;height:110px;object-fit:cover;border-radius:14px;cursor:zoom-in;border:1px solid var(--line-soft)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.kv dt{color:var(--muted)}

/* ---------- Misc ---------- */
.skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px;animation:fade .2s both;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px;animation:modalIn .3s var(--spring) both}
.news-card{border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);margin-bottom:12px;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*50ms)}
.news-card img,.news-card video{width:100%;max-height:300px;object-fit:cover}
.news-card .nb{padding:16px}
.news-card h3{font-size:20px;font-weight:900;margin-bottom:6px}
.shop-card{display:flex;align-items:center;gap:16px;padding:18px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid var(--line-soft);margin-bottom:10px}
.shop-card .price{font-size:22px}
.kbd-hint{font-size:12px;color:var(--dim)}
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:999;transition:opacity .4s}
.boot svg{width:84px;height:84px;animation:logoFloat 1.6s ease-in-out infinite;filter:drop-shadow(0 10px 40px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .6))}
.boot.gone{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Pickers (profile edit) ---------- */
.pick-row{display:flex;flex-wrap:wrap;gap:10px}
.pick{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid transparent;background:rgba(255,255,255,.04) center/cover no-repeat;cursor:pointer;transition:transform .2s var(--spring),border-color .2s}
.pick:active{transform:scale(.92)}
.pick.on{border-color:var(--red);box-shadow:0 0 0 4px hsl(calc(var(--h) + 1) calc(100% * var(--sat)) 59% / .18)}
.pick.bn{width:96px;height:56px;border-radius:16px;background-size:cover;background-position:center}
.pick.up{border:1.5px dashed var(--line2);color:var(--red-hi)}
.pick.up.on{border-style:solid}
.pick.busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.nav a span:not(.badge){font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tile.on{border-color:var(--red)}
.slot .nm,.slot .sub{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .sub{font-size:10.5px}
.slots{gap:18px 6px}
.calib h3{font-size:clamp(18px,5vw,22px)}
[data-mine] .banner,[data-mine] .lb-row{background-color:hsl(calc(var(--h) - 20) calc(33% * var(--sat)) 5% / .97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gate{grid-template-columns:minmax(0,1fr)}.gate-card{justify-self:center}

/* ---------- Themes (Настройки → Тема) ---------- */
:root[data-theme="ice"]{--h:212}
:root[data-theme="emerald"]{--h:152}
:root[data-theme="violet"]{--h:268}
:root[data-theme="gold"]{--h:40}
:root[data-theme="orange"]{--h:18}
:root[data-theme="pink"]{--h:322}
:root[data-theme="graphite"]{--h:350;--sat:.08}
:root[data-bg="oled"]{--bg:#000}
:root[data-bg="oled"] body{background:#000}
:root[data-bg="oled"] .topbar{background:rgba(0,0,0,.94)}
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.theme-sw{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border-radius:var(--r-md);border:1.5px solid var(--line-soft);background:rgba(255,255,255,.03);font-size:12px;font-weight:800;min-width:0;transition:transform .2s var(--spring),border-color .2s}
.theme-sw i{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.theme-sw.on{border-color:#fff;background:rgba(255,255,255,.07)}
.theme-sw:active{transform:scale(.94)}

/* ---------- Screenshot gallery ---------- */
.gallery{position:fixed;inset:0;z-index:520;background:rgba(0,0,0,.94);display:flex;flex-direction:column;animation:fade .2s both;touch-action:pan-y}
.gallery .g-top{display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-t)) 14px 10px}
.gallery .g-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery .g-stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 10px;position:relative}
.gallery .g-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;animation:modalIn .25s var(--spring) both}
.gallery .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.gallery .g-nav.prev{left:10px}.gallery .g-nav.next{right:10px}
.gallery .g-nav .ic{width:26px;height:26px}
.gallery .g-thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 14px calc(14px + var(--safe-b));scrollbar-width:none}
.gallery .g-thumbs img{width:64px;height:48px;object-fit:cover;border-radius:8px;opacity:.45;flex:none;cursor:pointer;border:2px solid transparent}
.gallery .g-thumbs img.on{opacity:1;border-color:#fff}
.proof-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.proof-strip button{position:relative;flex:none;width:118px;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line-soft)}
.proof-strip img{width:100%;height:76px;object-fit:cover;display:block}
.proof-strip span{display:block;font-size:11px;font-weight:800;padding:5px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* ---------- Responsive hardening: nothing may push the page sideways ---------- */
html,body{max-width:100%;overflow-x:hidden}
.page,.card,.prof,.team,.room-big{min-width:0}
.row>*,.btn-row>*{min-width:0}
.icon-btn,.send-btn,.av,.lvl-hex,.chip,.badge{flex-shrink:0}
.nick{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.nick .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .grow>.row,.conv .grow>.row{flex-wrap:nowrap;overflow:hidden}
p,.bio,.msg,.note,.info-row b,.kv dd,.news-card,.tb,.code-box .code,.h-card,.pname{overflow-wrap:anywhere;word-break:break-word}
.seg{max-width:100%}
.seg button{padding:0 clamp(10px,3.5vw,20px)}
.pod{min-width:0}.pod .pn{overflow:hidden}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.slots{grid-template-columns:repeat(5,minmax(0,1fr))}.slots.duo{grid-template-columns:repeat(4,minmax(0,1fr))}
.mf-players{grid-template-columns:repeat(5,minmax(0,1fr))}.mf-players.duo{grid-template-columns:repeat(4,minmax(0,1fr))}
.podium{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr)}
.toasts{max-width:calc(100vw - 20px)}
.toast{max-width:100%}
.lb-row .elo{flex-shrink:0;font-size:clamp(18px,6vw,26px)}
.room-big .rb-count{font-size:clamp(32px,11vw,46px)}
.btn{max-width:100%}
.btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){
  .brand .wm{display:none}
  .pill-stat{padding:0 10px}
  .card{padding:16px}
  .slots{gap:14px 4px}
  .slot .nm{font-size:12px}
  .nav a span:not(.badge){font-size:9.5px;letter-spacing:.02em}
  .stat b{font-size:22px}
  .btn.xl{font-size:16px;min-height:58px}
  .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mf-p .nm{font-size:12px}
  .h-card{font-size:21px}
}
@media (min-width:700px){
  .stats{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px) and (max-width:1199px){ #view{margin-left:140px;margin-right:auto} }
.calib>div:first-child{min-width:0}.calib .lock{width:clamp(60px,22vw,96px);height:clamp(60px,22vw,96px)}.calib{padding:clamp(14px,4vw,22px);gap:12px}
.pod .pe{font-size:clamp(17px,6.2vw,30px);white-space:nowrap}
.pod .place{font-size:clamp(30px,10vw,44px)}
.pod{padding-left:6px;padding-right:6px}
.btn-row>.btn{flex:1 1 130px}
.hist{flex-wrap:wrap;row-gap:4px}
.hist .res{width:auto;min-width:clamp(70px,22vw,84px);font-size:clamp(12px,3.6vw,15px)}
.hist .grow{flex:1 1 120px}
@media (max-width:380px){.btn{padding:0 14px;letter-spacing:.03em}.prof .top{gap:12px}.prof .top .av{--s:84px!important}}

/* ---------- Play hero & choice sheet ---------- */
.play-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line2);margin-bottom:14px;text-align:center}
.play-hero .ph-bg{position:absolute;inset:0;background:url(../images/platform.jpg) center/cover;opacity:.28;transform:scale(1.08);animation:kenburns 20s ease-in-out infinite alternate}
.play-hero .ph-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,hsl(var(--h) calc(80% * var(--sat)) 30% / .55),hsl(calc(var(--h) - 8) calc(45% * var(--sat)) 4% / .96) 75%)}
.play-hero .ph-in{position:relative;padding:30px 18px 22px}
.play-btn{min-height:76px;font-size:24px;letter-spacing:.14em;animation:acceptPulse 1.8s ease-in-out infinite}
.play-btn .ic{width:28px;height:28px}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(46,229,157,.6);animation:pulseDot 1.6s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 10px rgba(46,229,157,0)}100%{box-shadow:0 0 0 0 rgba(46,229,157,0)}}
.code-join .input{min-height:50px}
.choice{display:flex;align-items:center;gap:14px;width:100%;padding:18px;margin-bottom:10px;border-radius:var(--r-lg);text-align:left;background:linear-gradient(160deg,hsl(var(--h) calc(55% * var(--sat)) 12% / .8),hsl(var(--h) calc(40% * var(--sat)) 6% / .9));border:1px solid var(--line2);transition:transform .2s var(--spring),border-color .2s}
.choice:hover{border-color:var(--red)}.choice:active{transform:scale(.97)}
.choice .ci{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red-hi),var(--red2));color:#fff;flex:none}
.choice .ci .ic{width:26px;height:26px}
.choice b{display:block;font-size:17px}.choice small{color:var(--muted);font-weight:600}
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 10px;border-radius:var(--r-lg);border:1.5px solid var(--line2);background:linear-gradient(160deg,hsl(var(--h) calc(60% * var(--sat)) 16% / .9),hsl(var(--h) calc(40% * var(--sat)) 6% / .9));transition:transform .2s var(--spring),border-color .2s;min-width:0}
.mode-card .num{font-size:clamp(36px,11vw,52px);line-height:1}
.mode-card small{color:var(--muted);font-weight:700;text-align:center}
.mode-card:hover{border-color:var(--red)}.mode-card:active{transform:scale(.95)}

/* ---------- Map vote ---------- */
.vote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.vote-map{position:relative;height:118px;border-radius:18px;overflow:hidden;border:2px solid transparent;text-align:left;transition:transform .2s var(--spring),border-color .2s,box-shadow .2s}
.vote-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vote-map:hover img{transform:scale(1.06)}
.vote-map .vm-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.78))}
.vote-map .vm-top{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.vote-map .vm-top b{font-size:clamp(16px,4.6vw,20px);font-weight:900;font-style:italic;text-transform:uppercase}
.vote-map .vm-n{font-size:26px;line-height:1}
.vote-map .vm-avs{position:absolute;left:10px;top:10px;display:flex}
.vote-map .vm-avs .av{margin-right:-8px}
.vote-map .vm-check{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff}
.vote-map .vm-check .ic{width:16px;height:16px;stroke-width:3}
.vote-map.on{border-color:var(--red);box-shadow:0 0 0 4px hsl(var(--h) 100% 59% / .25),0 10px 30px hsl(var(--h) 100% 59% / .3)}
.vote-map:active{transform:scale(.96)}
@media (min-width:640px){.vote-map{height:140px}}

/* ---------- Host checklist & copy ---------- */
.host-steps{display:grid;gap:8px}
.host-steps>div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);color:var(--tt)}
.host-steps>div b{color:#fff}
.host-steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:900;font-size:13px;flex:none}
.copy-big{cursor:pointer;transition:transform .2s var(--spring),border-color .2s;gap:12px}
.copy-big:hover{border-color:var(--pink)}.copy-big:active{transform:scale(.98)}
.copy-big .btn{flex:none;pointer-events:none}
.copy-big .code{font-size:clamp(24px,8vw,34px)}
@media (max-width:380px){.copy-big{flex-wrap:wrap}.copy-big .btn{width:100%}}
.mf-n{font-style:normal;opacity:.7;margin-left:2px}
[data-mfilter] button{padding:0 6px;font-size:12px;letter-spacing:.04em}
.copy-big{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "c b";align-items:center;gap:6px 12px}
.copy-big .cb-l{grid-area:l}
.copy-big .code{grid-area:c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;overflow-wrap:normal;font-size:clamp(24px,8vw,34px)}
.copy-big .btn{grid-area:b}
@media (max-width:380px){.copy-big{grid-template-areas:"l l" "c c" "b b"}.copy-big .btn{width:100%}}
.copy-big{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"l" "c" "b"!important;gap:8px!important}
.copy-big .btn{width:100%;min-height:48px}
.copy-big .code{white-space:normal;overflow:visible;overflow-wrap:anywhere;letter-spacing:.1em}
/* v3.4 party search */
.party-search{display:flex;gap:14px;align-items:center;margin:14px 0;padding:14px 16px;border-radius:20px;background:hsla(var(--h),var(--sat),50%,.10);border:1px solid hsla(var(--h),var(--sat),60%,.28)}
.party-search b{display:block;color:#fff}.party-search small{display:block;margin-top:4px;line-height:1.35}
.party-search .ps-ring{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--red);animation:psSpin 1.6s linear infinite;border-top-color:transparent}
@keyframes psSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.party-search .ps-ring{animation:none}}
/* v3.4 animated avatars / banners */
.av .img video{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.bgimg video,.cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick.up{position:relative;overflow:hidden;background-size:cover;background-position:center}
.pick.up .pick-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* v3.5 phones: DM input pinned to the very bottom, bottom menu hidden inside a chat */
@media (max-width:999px){
  html.in-dm .nav{display:none}
  html.in-dm #view{padding-bottom:calc(96px + var(--safe-b))}
  html.in-dm .dm-page{min-height:calc(100dvh - 110px)}
  html.in-dm .dm-list{padding-bottom:16px}
  html.in-dm .composer{left:0;right:0;transform:none;width:100%;bottom:var(--kb,0px);border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:8px 10px calc(8px + var(--safe-b));box-shadow:0 -10px 30px rgba(0,0,0,.45)}
  html.in-dm.kb-open .composer{padding-bottom:8px}
}
/* fixed composer must not live inside a transformed element (it would follow the page instead of the screen) */
.page.dm-page{animation:dmFade .3s ease both}
@keyframes dmFade{from{opacity:0}to{opacity:1}}
/* v3.6 kick from party */
.slot.filled{position:relative}
.slot .kick{position:absolute;top:-4px;right:2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#2a0b12;border:1px solid rgba(255,90,110,.6);color:#ff6b7d;box-shadow:0 4px 12px rgba(0,0,0,.5);z-index:3}
.slot .kick .ic{width:14px;height:14px}
.slot .kick:active{transform:scale(.9)}
/* v3.6 green verification check next to the nickname */
.vf-ok{width:1.05em;height:1.05em;min-width:15px;min-height:15px;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(34,197,94,.45))}
/* v3.6 shop frames */
.fr-emerald::before{background:conic-gradient(#0f5132,#3fe08a,#b8ffd9,#198754,#0f5132);box-shadow:0 0 16px rgba(63,224,138,.5)}
.fr-gold::before{background:conic-gradient(#7a5200,#ffd54a,#fff4c2,#e3a008,#7a5200);box-shadow:0 0 18px rgba(255,200,60,.6)}
.fr-toxic::before{background:conic-gradient(#1a2e05,#a3ff12,#3d6b00,#d9ff6b,#1a2e05);box-shadow:0 0 18px rgba(163,255,18,.55)}
.fr-neon::before{background:conic-gradient(#ff2bd6,#00e5ff,#ff2bd6,#7c4dff,#ff2bd6);box-shadow:0 0 20px rgba(255,43,214,.6),0 0 30px rgba(0,229,255,.35);animation-duration:2.6s}
.fr-galaxy::before{background:conic-gradient(#0b0033,#5b2cff,#ff7ad9,#00d4ff,#120046,#5b2cff,#0b0033);box-shadow:0 0 22px rgba(91,44,255,.65);animation-duration:3.5s}
.fr-fire::before{background:conic-gradient(#ff2a00,#ffb300,#fff1a8,#ff5a00,#8a0f00,#ff2a00);box-shadow:0 0 22px rgba(255,90,0,.7),0 -4px 18px rgba(255,180,0,.45);animation-duration:1.8s}
.fr-rainbow::before{background:conic-gradient(#ff3b3b,#ffb13b,#fff23b,#3bff6b,#3bd8ff,#6b3bff,#ff3bd8,#ff3b3b);box-shadow:0 0 22px rgba(255,255,255,.35);animation-duration:2.2s}
/* shop */
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shop-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:38px 12px 14px;border-radius:22px;background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line-soft);overflow:hidden}
.shop-item .tier{position:absolute;top:10px;left:10px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.07);color:var(--tt)}
.shop-item .tier.t-Редкая{color:#7cc7ff}.shop-item .tier.t-Эпическая{color:#c69bff}.shop-item .tier.t-Легендарная{color:#ffc21a}.shop-item .tier.t-Мифическая{color:#ff6b9e}
.shop-item b{font-size:16px}
.shop-item .price{display:inline-flex;align-items:center;gap:5px;font-weight:900;color:#ffd54a}
.shop-item .btn{width:100%;margin-top:4px}
.shop-item.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.sponsor-card{position:relative;overflow:hidden;border-radius:24px;padding:20px;background:linear-gradient(135deg,#3b2400,#1a0d00 55%,#0b0306);border:1px solid rgba(255,194,26,.45);box-shadow:0 18px 50px rgba(255,170,0,.15)}
.sponsor-card h3{font-size:24px;font-weight:900;font-style:italic;color:#ffd54a}
.sponsor-card ul{margin:10px 0 14px 18px;color:#f2d9a8;line-height:1.6}
.star{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.clan-chip{gap:6px;padding-left:4px}
.track-edit{display:flex;gap:8px;flex-wrap:wrap}
.track-edit .btn .ic{margin-right:6px}
.track-empty{margin-top:14px}
/* v3.7 clans */
.clan-logo{width:var(--s);height:var(--s);flex:0 0 var(--s);border-radius:calc(var(--s) * .28);overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,hsl(calc(var(--h) - 1) calc(72% * var(--sat)) 30%),hsl(calc(var(--h) - 2) calc(71% * var(--sat)) 12%));border:1px solid var(--line2);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.clan-logo img{width:100%;height:100%;object-fit:cover}
.clan-logo b{font-weight:900;font-style:italic;color:#fff;font-size:calc(var(--s) * .32);letter-spacing:-.02em}
.clan-logo-up{width:92px;height:92px;flex:0 0 92px;border-radius:26px;display:grid;place-items:center;border:2px dashed var(--line2);background-size:cover;background-position:center;cursor:pointer;color:var(--tt)}
.clan-logo-up.has{border-style:solid}.clan-logo-up.has .ic{opacity:0}
.clan-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.025);border:1px solid var(--line-soft);margin-bottom:8px}
.clan-row .rk{width:28px;text-align:center;font-weight:900;color:var(--tt)}
.clan-row .elo{font-weight:900;font-size:18px}
.clan-row .tag,.clan-hero .tag{color:var(--red-hi)}
.clan-hero{display:flex;gap:16px;align-items:center;padding:20px;border-radius:26px;background:radial-gradient(120% 120% at 0% 0%,hsl(calc(var(--h) - 1) calc(73% * var(--sat)) 20%),hsl(calc(var(--h) - 5) calc(43% * var(--sat)) 6%) 70%);border:1px solid var(--line2)}
.clan-hero h1{font-size:clamp(22px,6vw,30px);font-weight:900;font-style:italic;margin-top:4px}
.war-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:14px 0 6px}
.war-side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.war .vs{font-weight:900;font-style:italic;font-size:22px;color:var(--red-hi)}
.sq-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.sq.empty{width:34px;height:34px;border-radius:50%;border:2px dashed var(--line2)}
/* v3.7 languages */
.lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lang-btn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);font-weight:800;text-align:left}
.lang-btn .fl{font-size:20px;line-height:1}
.lang-btn.on{border-color:var(--red);background:hsl(var(--h) calc(80% * var(--sat)) 50% / .12)}
/* v3.8 premium frames: artwork inside the avatar box (the photo shrinks a bit), nothing sticks out */
.av.fr-frost::before,.av.fr-cyber::before,.av.fr-inferno::before,.av.fr-thorns::before,.av.fr-laurel::before,.av.fr-wings::before{display:none}
.av.fr-frost>.img,.av.fr-cyber>.img,.av.fr-inferno>.img,.av.fr-thorns>.img,.av.fr-laurel>.img,.av.fr-wings>.img{transform:scale(.74);box-shadow:none}
.av.fr-frost::after,.av.fr-cyber::after,.av.fr-inferno::after,.av.fr-thorns::after,.av.fr-laurel::after,.av.fr-wings::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:50%;background:center/100% 100% no-repeat}
.av.fr-frost::after{background-image:url(../frames/frost.svg)}
.av.fr-cyber::after{background-image:url(../frames/cyber.svg);animation:spin 30s linear infinite}
.av.fr-inferno::after{background-image:url(../frames/inferno.svg);animation:flick 1.6s ease-in-out infinite alternate}
.av.fr-thorns::after{background-image:url(../frames/thorns.svg)}
.av.fr-laurel::after{background-image:url(../frames/laurel.svg)}
.av.fr-wings::after{background-image:url(../frames/wings.svg)}
.av .lvl,.av .online,.av .crown{z-index:3}
@keyframes flick{from{filter:brightness(.92)}to{filter:brightness(1.18)}}
@media (prefers-reduced-motion:reduce){.av[class*="fr-"]::after{animation:none}}
.shop-item .tier.t-Премиум{color:#fff;background:linear-gradient(90deg,#ff3b5c,#ffb13b)}
.shop-item.premium{background:linear-gradient(170deg,rgba(255,80,110,.12),rgba(255,180,60,.05));border-color:rgba(255,120,90,.35)}
/* admin frame grant grid */
.frame-admin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:640px){.frame-admin{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fa-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);text-align:center;min-width:0}
.fa-item b{font-size:12px;line-height:1.15}
.fa-item small{font-size:10px;font-weight:800;color:var(--tt)}
.fa-item.own{border-color:#3fd17a;background:rgba(63,209,122,.08)}
.fa-item.own small{color:#58f29a}

/* v4.0 result pick + vote summary */
.res-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.res-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:16px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--tt);font:inherit;cursor:pointer;transition:.18s}
.res-btn svg{width:26px;height:26px}
.res-btn.win.on{border-color:#58f29a;background:rgba(88,242,154,.12);color:#fff;box-shadow:0 0 0 3px rgba(88,242,154,.15)}
.res-btn.loss.on{border-color:#ff4d5f;background:rgba(255,77,95,.12);color:#fff;box-shadow:0 0 0 3px rgba(255,77,95,.15)}
.vote-sum{display:grid;gap:6px;font-size:13px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04)}

/* v4.3 — duels 1×1 (beta) + side pick */
.chip.beta{background:linear-gradient(135deg,#FFB547,#FF6A3D);border-color:transparent;color:#1a0a05;font-weight:900;letter-spacing:.08em}
.mode-pick.three{grid-template-columns:1fr 1fr}
.mode-pick.three .mode-card.is-beta{grid-column:1 / -1}
.mode-card{position:relative}
.mode-card.is-beta{border-color:rgba(255,181,71,.5)}
.mode-card .beta-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:99px;background:linear-gradient(135deg,#FFB547,#FF6A3D);color:#1a0a05;font-size:11px;font-weight:900;letter-spacing:.12em;box-shadow:0 4px 14px rgba(255,120,60,.35)}
.mode-card.is-beta .num{margin-top:12px}
.slots.duel{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px;margin-left:auto;margin-right:auto}
.mf-players.duel{grid-template-columns:repeat(2,minmax(0,1fr));max-width:300px;margin-left:auto;margin-right:auto}
.vote-map:disabled{cursor:default;opacity:.75}.vote-map:disabled:active{transform:none}
.side-opt .side-tint{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.9}
.side-opt.ct .side-tint{background:linear-gradient(180deg,rgba(70,140,255,.0),rgba(70,140,255,.55))}
.side-opt.t .side-tint{background:linear-gradient(180deg,rgba(255,170,60,.0),rgba(255,170,60,.55))}
.side-opt .vm-top b{display:block;font-size:clamp(26px,7vw,34px);line-height:1}
.side-opt .side-sub{display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.side-opt.ct .side-sub{color:#9cc4ff}.side-opt.t .side-sub{color:#ffd08a}

/* v4.3.3 — buttons in a row never cut their text: they keep their natural width and wrap to the next line */
.btn-row>.btn{flex:1 0 auto;min-width:auto;max-width:100%}
.btn{white-space:nowrap}
@media (max-width:360px){.btn-row>.btn{flex-basis:100%}}