/* ============================================================
   NetherSword — интерфейс в языке игрового лаунчера.
   Форма: углы режутся уступом (clip-path), рамка и грани —
   фоновыми слоями внутри силуэта, объём — светлая грань
   сверху и тёмная подошва снизу. border-radius не используется.
   ============================================================ */
:root{
  --bg:#0C0608; --bg-2:#120A0C; --surface:#1A1014; --surface-2:#241519; --raised:#2E1A20; --inset:#0A0406;
  --text:#F6EEE9; --muted:#AC9C97; --dim:#73635F;
  --red:#E00213; --red-2:#910707; --ember:#FF7A2A; --gold:#F5AA38; --online:#7BE07B; --blue:#2E6BE0;
  --grad:linear-gradient(135deg,var(--red),var(--red-2));
  --font:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Dela Gothic One',system-ui,sans-serif;
  --mono:'Martian Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(.85rem,1.6vw,1.4rem);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* уступы: 4px — мелкое, 6px — кнопки, 12px — плиты */
  --px-4:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px);
  --px-6:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px),0 6px,6px 6px);
  --px-12:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px),0 12px,12px 12px);

  --bev:linear-gradient(180deg,rgba(255,255,255,.2) 0 3px,#0000 3px calc(100% - 5px),rgba(0,0,0,.4) calc(100% - 5px) 100%);
  --bev-soft:linear-gradient(180deg,rgba(255,255,255,.08) 0 2px,#0000 2px calc(100% - 3px),rgba(0,0,0,.3) calc(100% - 3px) 100%);
  --bev-press:linear-gradient(180deg,rgba(0,0,0,.34) 0 4px,#0000 4px);
  --bev-well:linear-gradient(180deg,rgba(0,0,0,.45) 0 3px,#0000 3px);
  --dots:
    radial-gradient(circle at 13% 24%,rgba(255,255,255,.06) 0 1.5px,#0000 2px),
    radial-gradient(circle at 58% 20%,rgba(255,255,255,.045) 0 1.5px,#0000 2px),
    radial-gradient(circle at 79% 66%,rgba(255,255,255,.04) 0 1.5px,#0000 2px),
    radial-gradient(circle at 26% 77%,rgba(0,0,0,.13) 0 1.5px,#0000 2px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
html.is-loading{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:.98rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  -webkit-user-select:none;user-select:none;                 /* это интерфейс, а не статья */
}
input,textarea,p,li,dd,.selectable{-webkit-user-select:text;user-select:text}
img,svg{display:block;max-width:100%}
img{-webkit-user-drag:none}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.08}
p{margin:0}
button{font:inherit;color:inherit;border:0;background:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--inset)}
::-webkit-scrollbar-thumb{background:#3A2429;border:2px solid var(--inset)}
::-webkit-scrollbar-thumb:hover{background:#4E3139}

/* ---------- базовые формы ---------- */
.plate{
  --fw:3px;--in:calc(100% - var(--fw) * 2);
  position:relative;clip-path:var(--px-12);
  background-color:rgba(255,226,220,.17);
  background-image:var(--bev-soft),var(--dots),linear-gradient(180deg,var(--surface-2),var(--surface));
  background-size:var(--in) var(--in),160px 160px,var(--in) var(--in);
  background-position:50% 50%;background-repeat:no-repeat,repeat,no-repeat;
}
.btn{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.7rem;padding:.55rem 1.1rem;clip-path:var(--px-6);cursor:pointer;
  font-weight:600;font-size:.94rem;line-height:1.2;color:var(--text);
  background-color:rgba(0,0,0,.5);
  background-image:var(--bev),linear-gradient(180deg,#352026,#241519);
  background-size:var(--in) var(--in),var(--in) var(--in);
  background-position:50% 50%;background-repeat:no-repeat;
  transition:filter .15s ease,transform .07s ease;
}
.btn:hover{filter:brightness(1.2)}
.btn:active{transform:translateY(2px);background-image:var(--bev-press),linear-gradient(180deg,#352026,#241519)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--primary{background-image:var(--bev),var(--grad);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.btn--primary:active{background-image:var(--bev-press),var(--grad)}
.btn--gold{background-image:var(--bev),linear-gradient(135deg,#F7B74E,#B86B06);color:#2B1700;text-shadow:none}
.btn--gold:active{background-image:var(--bev-press),linear-gradient(135deg,#F7B74E,#B86B06)}
.btn--big{min-height:3.4rem;padding:.8rem 1.6rem;font-family:var(--display);font-size:1.05rem;font-weight:400}
.btn--sm{min-height:2.2rem;padding:.35rem .8rem;font-size:.85rem;clip-path:var(--px-4)}
.sq{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;clip-path:var(--px-6);cursor:pointer;
  color:var(--muted);
  background-color:rgba(0,0,0,.5);
  background-image:var(--bev),linear-gradient(180deg,#2C1A1F,#1C1114);
  background-size:var(--in) var(--in),var(--in) var(--in);
  background-position:50% 50%;background-repeat:no-repeat;
  transition:filter .15s ease,transform .07s ease,color .15s ease;
}
.sq svg{width:1.2rem;height:1.2rem}
.sq:hover{color:var(--text);filter:brightness(1.25)}
.sq:active{transform:translateY(2px);background-image:var(--bev-press),linear-gradient(180deg,#2C1A1F,#1C1114)}
.sq.is-on{color:var(--text);background-image:var(--bev),var(--grad)}
.well{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  display:inline-flex;align-items:center;gap:.6rem;min-height:2.7rem;padding:.45rem .8rem;clip-path:var(--px-6);
  font-family:var(--mono);font-size:.84rem;color:var(--text);cursor:pointer;
  background-color:rgba(255,226,220,.13);
  background-image:var(--bev-well),linear-gradient(var(--inset) 0 0);
  background-size:var(--in) var(--in),var(--in) var(--in);
  background-position:50% 50%;background-repeat:no-repeat;
  transition:filter .15s ease;
}
.well:hover{filter:brightness(1.35)}
.chip{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;clip-path:var(--px-4);
  font-size:.8rem;color:var(--muted);
  background-color:rgba(255,226,220,.14);
  background-image:var(--bev-soft),linear-gradient(#241519 0 0);
  background-size:var(--in) var(--in),var(--in) var(--in);
  background-position:50% 50%;background-repeat:no-repeat;
}
.chip b{color:var(--text);font-weight:600}
.dot{width:.5rem;height:.5rem;flex:none;background:var(--dim);transition:background .3s ease,box-shadow .3s ease}
.dot[data-state="online"]{background:var(--online);box-shadow:0 0 0 3px rgba(123,224,123,.16);animation:breathe 2.4s ease-in-out infinite}
.dot[data-state="offline"]{background:var(--red)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 3px rgba(123,224,123,.16)}50%{box-shadow:0 0 0 6px rgba(123,224,123,.04)}}

/* ---------- заставка ---------- */
.loader{position:fixed;inset:0;z-index:300;background:#0c0608;display:flex;align-items:flex-end;justify-content:center;padding-bottom:11vh;transition:opacity .8s ease}
.loader.is-done{opacity:0;pointer-events:none}
html.is-direct-figure .loader{display:none!important}
.loader canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.loader__veil{position:absolute;inset:-12%;opacity:0;background:var(--veil,none) center 0/64px 2048px repeat;image-rendering:pixelated;
  animation:veil 1.6s steps(32) infinite,wob 2.4s ease-in-out infinite;transition:opacity .35s ease}
@keyframes veil{from{background-position:center 0}to{background-position:center -2048px}}
@keyframes wob{0%,100%{transform:scale(1.03)}50%{transform:scale(1.09) skew(1.6deg,1.1deg)}}
.loader__flash{position:absolute;inset:0;background:#efe0ff;opacity:0;transition:opacity .18s ease}
.loader__text{position:relative;font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;color:#dcc6ff;text-shadow:0 0 14px rgba(199,125,255,.7)}
.loader__text i{font-style:normal;animation:dots 1.2s infinite}
.loader__text i:nth-child(2){animation-delay:.2s}.loader__text i:nth-child(3){animation-delay:.4s}
@keyframes dots{0%,60%,100%{opacity:.2}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ---------- окно лобби ---------- */
.lobby{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;padding:var(--gut);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--gut);
  grid-template-areas:"hud hud hud" "rail stage promo" "deck deck deck";
  background:radial-gradient(120% 100% at 50% 42%,#3A0B14 0%,#1A070D 48%,var(--bg) 78%);
}
/* лучи из центра, как на фоне лобби */
.lobby__rays{
  position:absolute;left:50%;top:40%;z-index:-2;width:200vmax;height:200vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.055) 0deg 2.6deg,transparent 2.6deg 9deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 10%,transparent 72%);mask-image:radial-gradient(closest-side,#000 10%,transparent 72%);
  animation:spin 190s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lobby__vig{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,transparent 36%,rgba(10,4,6,.72) 100%)}
/* летящие пиксели */
.dust{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.dust i{position:absolute;width:3px;height:3px;background:var(--ember);opacity:.6;animation:rise linear infinite}
@keyframes rise{from{transform:translateY(12vh);opacity:0}10%{opacity:.7}to{transform:translateY(-86vh);opacity:0}}

/* верхний ряд */
.hud{grid-area:hud;display:flex;align-items:center;gap:.5rem;z-index:5}
.hud__brand{display:flex;align-items:center;gap:.55rem;margin-right:auto;padding-right:.5rem}
.hud__logo{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  width:2.6rem;height:2.6rem;display:grid;place-items:center;clip-path:var(--px-6);
  background-color:rgba(0,0,0,.55);
  background-image:var(--bev),linear-gradient(150deg,#3A1118,#19090D);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.hud__logo svg{width:1.5rem;height:1.5rem}
.hud__name{font-family:var(--display);font-size:1rem;letter-spacing:.01em}
.hud__sub{display:block;font-family:var(--mono);font-size:.64rem;color:var(--dim);letter-spacing:.04em;margin-top:.1rem}
.pill{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  display:flex;align-items:center;gap:.5rem;height:2.6rem;padding:0 .7rem;clip-path:var(--px-6);
  background-color:rgba(0,0,0,.5);
  background-image:var(--bev-soft),linear-gradient(180deg,#241519,#180E12);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.pill__faces{display:flex}
.pill__faces img{width:20px;height:20px;image-rendering:pixelated;background:#140b0e;margin-left:-6px;outline:2px solid #140b0e}
.pill__faces img:first-child{margin-left:0}
.pill__n{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--text)}
.pill__cap{font-size:.68rem;line-height:1.1;color:var(--dim)}
@media (max-width:860px){.hud__name{display:none}.pill__cap{display:none}}
@media (max-width:620px){.pill__faces{display:none}}

/* левые плитки — как в лаунчере Millida: сверху арт с лучами и персонажем, голова выходит
   за верх плитки; снизу тёмная полоса с подписью. Промежутки — под голову следующей плитки */
.rail{grid-area:rail;display:flex;flex-direction:column;gap:26px;width:190px;margin-top:14px;align-self:start;z-index:4}
.tile{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  --ah:60px;                                  /* высота арта над полосой; картинка на 22/60 выше */
  --sh:46px;                                  /* высота полосы с подписью */
  --rx:calc(100% - var(--ah) * 1.27);         /* центр лучей — за персонажем (он на 60% ширины картинки) */
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(var(--ah) + var(--sh));padding:0 .75rem calc((var(--sh) - 2.15rem) / 2);color:#fff;
  transition:transform .16s var(--ease),filter .16s ease;
}
/* фон плитки отдельным слоем: пиксельные углы режут его, а не персонажа */
.tile::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--px-12);
  background-color:rgba(0,0,0,.55);
  background-image:var(--bev),
    linear-gradient(0deg,var(--strip) 0 calc(var(--sh) - 2px),rgba(0,0,0,.4) calc(var(--sh) - 2px) var(--sh),#0000 var(--sh)),
    radial-gradient(70% 90% at var(--rx) 62%,rgba(255,240,220,.3),#0000 72%),
    repeating-conic-gradient(from 4deg at var(--rx) 66%,rgba(255,255,255,.12) 0 8deg,#0000 8deg 22deg),
    var(--art);
  background-size:var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.tile__art{position:absolute;left:0;right:0;bottom:var(--sh);height:var(--ah);pointer-events:none}
.tile__img{position:absolute;right:0;bottom:0;width:calc(var(--ah) * 19 / 6);max-width:100%;height:auto;
  transition:transform .2s var(--ease)}
.tile:hover{transform:translateX(5px);filter:brightness(1.12)}
.tile:hover .tile__img{transform:translateY(-3px)}
.tile:active{transform:translateX(5px) translateY(2px)}
.tile__cap{font-family:var(--display);font-size:1rem;line-height:1.2;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.tile__sub{font-size:.72rem;line-height:1.3;color:var(--sub);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__badge{position:absolute;left:.55rem;top:.5rem;z-index:1;padding:.08rem .35rem;clip-path:var(--px-4);
  background:#0A0406;font-family:var(--mono);font-size:.6rem;color:var(--gold)}
.tile--a{--art:linear-gradient(140deg,#D8304F,#7A0C22);--strip:#4E0918;--sub:#FFB8B0}
.tile--b{--art:linear-gradient(140deg,#E08A26,#7A3C0A);--strip:#4F2606;--sub:#FFD27A}
.tile--c{--art:linear-gradient(140deg,#5B49B4,#241A58);--strip:#1B1442;--sub:#C9BEFF}

/* центр */
.stage{grid-area:stage;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:0;z-index:3;position:relative}
.stage__art{position:relative;display:grid;place-items:center;flex:0 1 auto;min-height:0}
.stage__sword{
  width:clamp(140px,23vh,240px);height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 26px rgba(224,2,19,.75)) drop-shadow(0 14px 18px rgba(0,0,0,.6));
  animation:float 5.5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.stage__halo{position:absolute;z-index:-1;width:150%;aspect-ratio:1;background:radial-gradient(circle,rgba(224,2,19,.5),transparent 62%);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.stage__title{font-size:clamp(1.8rem,4vw,3rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.005em}
.stage__title.is-split{background:none;color:var(--text)}
.char{display:inline-block;white-space:pre}
.stage__tag{font-size:clamp(.88rem,1.6vw,1.05rem);font-weight:500;color:#EBC7C4}
.stats{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:.2rem}
.stat{
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;clip-path:var(--px-6);
  font-size:.82rem;color:var(--muted);
  background-color:rgba(0,0,0,.55);
  background-image:var(--bev),linear-gradient(180deg,#2A1A1E,#1A1014);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.stat b{font-family:var(--mono);color:var(--text)}
.stat svg{width:1rem;height:1rem;color:var(--gold)}

/* промо справа */
.promo{grid-area:promo;align-self:center;width:264px;z-index:4;clip-path:var(--px-12);overflow:hidden;
  --fw:3px;--in:calc(100% - var(--fw) * 2);
  background-color:rgba(255,226,220,.24);
  background-image:linear-gradient(180deg,#1E1317,#140C0F);
  background-size:var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.promo__art{position:relative;height:96px;margin:3px 3px 0;display:flex;flex-direction:column;justify-content:flex-end;padding:.6rem .75rem;
  background-image:var(--dots),var(--grad);background-size:110px 110px,100% 100%;background-repeat:repeat,no-repeat}
.promo__tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:rgba(255,255,255,.82)}
.promo__name{font-family:var(--display);font-size:1.12rem;line-height:1.1;margin-top:.15rem;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.promo__body{display:flex;flex-direction:column;gap:.45rem;padding:.65rem .75rem .8rem}
.promo__body .btn{width:100%}
.promo__count{font-family:var(--mono);font-size:.72rem;color:var(--dim);text-align:center}
.promo__count b{color:var(--online)}
.promo__foot{display:block;height:6px;margin:0 3px 3px;background:repeating-linear-gradient(90deg,var(--gold) 0 12px,#B86B06 12px 24px);opacity:.75}

/* нижняя палуба */
.deck{grid-area:deck;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:stretch;z-index:5;padding-right:3.9rem}
.deck__card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center;padding:.8rem 1rem;
  --fw:3px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-12);
  background-color:rgba(255,255,255,.22);
  background-image:var(--bev-soft),var(--dots),linear-gradient(180deg,#1E3A7A,#10224C);
  background-size:var(--in) var(--in),150px 150px,var(--in) var(--in);
  background-position:50% 50%;background-repeat:no-repeat,repeat,no-repeat}
.deck__icon{width:58px;height:58px;flex:none;display:grid;place-items:center;clip-path:var(--px-6);
  background:#0D1B3C;background-image:var(--dots);image-rendering:pixelated}
.deck__icon img{width:42px;height:42px;image-rendering:pixelated}
.deck__cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:rgba(255,255,255,.72)}
.deck__name{font-family:var(--display);font-size:clamp(1.05rem,2.2vw,1.5rem);line-height:1.1;margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck__meta{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.6);margin-top:.15rem}
.deck__side{display:flex;flex-direction:column;gap:.4rem;min-width:min(300px,38vw)}
.deck__side .btn{width:100%}
.deck__note{display:flex;align-items:center;gap:.5rem;padding:.4rem .7rem;font-family:var(--mono);font-size:.7rem;color:var(--muted);
  --fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-4);
  background-color:rgba(255,226,220,.12);
  background-image:var(--bev-well),linear-gradient(var(--inset) 0 0);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.bars{display:flex;gap:2px;margin-left:auto}
.bars i{width:7px;height:9px;background:#3B2F31}
.bars i.on{background:var(--online)}

.fab{position:fixed;right:var(--gut);bottom:var(--gut);z-index:40;width:3rem;height:3rem;
  --fw:2px;--in:calc(100% - var(--fw) * 2);display:grid;place-items:center;clip-path:var(--px-6);cursor:pointer;color:#fff;
  background-color:rgba(0,0,0,.5);background-image:var(--bev),linear-gradient(135deg,#E8405A,#9B1026);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  transition:filter .15s ease,transform .07s ease}
.fab svg{width:1.3rem;height:1.3rem}
.fab:hover{filter:brightness(1.18)}
.fab:active{transform:translateY(2px)}

@media (max-width:1180px){.promo{width:232px}.rail{width:168px}.tile{--ah:53px}}
@media (max-width:980px){
  .lobby{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"hud hud" "rail stage" "promo promo" "deck deck"}
  .promo{width:auto;display:grid;grid-template-columns:1fr auto;align-items:center}
  .promo__art{height:72px}
  .promo__body{flex-direction:row;align-items:center;padding:.6rem .75rem}
  .promo__body .btn{width:auto}
  .promo__foot{display:none}
}
@media (max-width:760px){
  .lobby{grid-template-columns:minmax(0,1fr);grid-template-areas:"hud" "stage" "rail" "promo" "deck";min-height:auto;padding-bottom:calc(var(--gut) + 3.6rem)}
  .rail{flex-direction:row;width:auto;flex-wrap:wrap;gap:24px .55rem}
  .tile{flex:1 1 44%;--ah:56px;--sh:36px;padding-bottom:calc((var(--sh) - 1.2rem) / 2)}
  .tile__sub{display:none}
  .stage{padding:1.4rem 0 .4rem}
  .deck{grid-template-columns:1fr;padding-right:0}
  .deck__side{min-width:0}
  .deck__card{grid-template-columns:auto minmax(0,1fr)}
  .fab{width:2.7rem;height:2.7rem}
}

/* ---------- экраны ---------- */
.screen{--glow:224,2,19;position:relative;isolation:isolate;padding:clamp(2.2rem,4.5vw,3.6rem) 0}
/* свечение в цвет раздела за заголовком — как свет за персонажем в лобби */
.screen::before{content:"";position:absolute;left:0;right:0;top:-120px;bottom:-120px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.16),transparent) 0 0/min(1100px,110%) 620px no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),.08),transparent) 100% 100%/min(900px,90%) 560px no-repeat}
#about{--glow:67,163,74}
#server{--glow:59,120,224}
#join{--glow:224,138,38}
#faq{--glow:107,87,214}
.wrap{width:min(100% - calc(var(--gut) * 2),1200px);margin-inline:auto}
.screen__head{max-width:44rem;margin-bottom:1.3rem}
.screen__head .h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
/* метка раздела — как вкладка лаунчера */
.screen__tag{display:inline-block;margin-bottom:.75rem;padding:.28rem .62rem .24rem;clip-path:var(--px-4);
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgb(var(--glow));box-shadow:inset 0 -3px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.25)}
.screen__sub{margin-top:.7rem;color:var(--muted);max-width:40em;font-size:.95rem}

/* карточки-правила */
/* карточки с артом, как плитки лобби: сверху лучи и персонаж (голова выходит за верх), ниже тёмная часть с текстом */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 1rem;list-style:none;margin:44px 0 0;padding:0}
@media (max-width:1060px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{
  --ah:124px;                                 /* высота арта; картинка 300×160 выходит над ним */
  --fw:3px;--in:calc(100% - var(--fw) * 2);
  position:relative;isolation:isolate;display:flex;flex-direction:column;padding-top:var(--ah);color:#fff;
  transition:filter .22s ease}
.card::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--px-12);
  background-color:rgba(0,0,0,.6);
  background-image:var(--bev),
    linear-gradient(180deg,#0000 var(--ah),rgba(0,0,0,.45) var(--ah) calc(var(--ah) + 3px),var(--strip) calc(var(--ah) + 3px)),
    radial-gradient(55% 60% at 50% 46%,rgba(255,240,220,.32),#0000 72%),
    repeating-conic-gradient(from 4deg at 50% 58%,rgba(255,255,255,.12) 0 8deg,#0000 8deg 22deg),
    var(--art);
  background-size:var(--in) var(--in),var(--in) var(--in),100% calc(var(--ah) * 1.6),100% calc(var(--ah) * 1.6),var(--in) var(--in);
  background-position:50% 50%,50% 50%,50% 0,50% 0,50% 50%;background-repeat:no-repeat}
.card__art{position:absolute;left:0;right:0;top:0;height:var(--ah);pointer-events:none}
.card__img{position:absolute;left:50%;bottom:0;width:min(300px,100%);max-width:none;height:auto;transform:translateX(-50%);
  transition:transform .25s var(--ease)}
.card:hover{filter:brightness(1.08)}
.card:hover .card__img{transform:translateX(-50%) translateY(-4px)}
.card__body{flex:1;display:flex;flex-direction:column;gap:.35rem;padding:.85rem 1.1rem 1.15rem}
.card h3{font-family:var(--display);font-size:1.06rem;line-height:1.2;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.card p{color:var(--sub);font-size:.9rem;line-height:1.5}
.card__act{margin-top:auto;padding-top:.65rem}
.card--red{--art:linear-gradient(140deg,#D8304F,#7A0C22);--strip:#3A0814;--sub:#FFC9C2}
.card--orange{--art:linear-gradient(140deg,#E08A26,#7A3C0A);--strip:#371D07;--sub:#FFE0B3}
.card--green{--art:linear-gradient(140deg,#45A84D,#1B5A26);--strip:#112C17;--sub:#CBEFC8}
.card--blue{--art:linear-gradient(140deg,#3B78E0,#163A86);--strip:#0E1C42;--sub:#C9D9FF}
.card--purple{--art:linear-gradient(140deg,#5D4BB8,#241A58);--strip:#18113D;--sub:#D6CDFF}

/* строка сервера */
.srv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.9rem 1.1rem 1.3rem}
.srv__icon{position:relative;width:76px;height:76px;flex:none;display:grid;place-items:center;clip-path:var(--px-6);overflow:hidden;
  background:linear-gradient(135deg,#2E1317,#0F0709);font-family:var(--display);font-size:1.3rem;color:var(--red)}
.srv__icon img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.srv__icon .srv__def{inset:12%;width:76%;height:76%}
.srv__motd{font-family:var(--mono);font-weight:600;font-size:clamp(.8rem,2.2vw,.95rem);line-height:1.55}
.srv__right{display:flex;align-items:center;gap:.8rem}
.srv__n{font-family:var(--mono);font-size:1.05rem;color:var(--muted)}
.srv__n b{color:var(--text)}
.signal{display:flex;align-items:flex-end;gap:2px;height:16px}
.signal i{display:block;width:3px;background:#3B2F31;transition:background .3s ease}
.signal i:nth-child(1){height:4px}.signal i:nth-child(2){height:7px}.signal i:nth-child(3){height:10px}.signal i:nth-child(4){height:13px}.signal i:nth-child(5){height:16px}
.srv[data-state="online"] .signal i{background:var(--online)}
.srv[data-state="online"] .signal i:nth-child(5){background:#3B2F31}
.srv[data-state="offline"] .signal i{background:var(--red)}
.srv[data-state="loading"] .signal i{animation:sig 1.2s ease-in-out infinite}
.srv[data-state="loading"] .signal i:nth-child(2){animation-delay:.1s}.srv[data-state="loading"] .signal i:nth-child(3){animation-delay:.2s}
.srv[data-state="loading"] .signal i:nth-child(4){animation-delay:.3s}.srv[data-state="loading"] .signal i:nth-child(5){animation-delay:.4s}
@keyframes sig{0%,100%{opacity:.35}50%{opacity:1}}
.srv__foot{position:absolute;left:3px;right:3px;bottom:3px;height:6px;opacity:.6;
  background:repeating-linear-gradient(90deg,var(--red) 0 12px,var(--red-2) 12px 24px)}
.srv[data-state="offline"] .srv__foot{background:repeating-linear-gradient(90deg,#4a3a3c 0 12px,#2d2224 12px 24px)}
@media (max-width:620px){.srv{grid-template-columns:auto minmax(0,1fr)}.srv__right{grid-column:1/-1;justify-content:space-between}.srv__icon{width:56px;height:56px}}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem;margin:.6rem 0 0;padding:0}
.fact{display:flex;flex-direction:column;gap:.1rem;padding:.5rem .75rem;
  --fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-4);
  background-color:rgba(255,226,220,.13);
  background-image:var(--bev-soft),linear-gradient(#1C1216 0 0);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.fact{box-shadow:inset 0 3px 0 var(--c,#3B78E0)}
.fact:nth-child(6n+1){--c:#E8405A}.fact:nth-child(6n+2){--c:#E08A26}.fact:nth-child(6n+3){--c:#45A84D}
.fact:nth-child(6n+4){--c:#3B78E0}.fact:nth-child(6n+5){--c:#7A63D8}.fact:nth-child(6n+6){--c:#F5AA38}
.fact dt{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.fact dd{margin:0;font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--text)}

.roster{margin-top:1rem}
.roster__title{font-size:.88rem;color:var(--muted);margin-bottom:.5rem}
.roster__row{display:flex;flex-wrap:wrap;gap:.4rem}
.pchip{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .6rem .25rem .3rem;cursor:pointer;
  --fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-4);font-family:var(--mono);font-size:.78rem;
  background-color:rgba(255,226,220,.14);
  background-image:var(--bev-soft),linear-gradient(#241519 0 0);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  transition:filter .2s ease,transform .2s var(--ease)}
.pchip:hover{filter:brightness(1.25);transform:translateY(-2px)}
.pchip img{width:20px;height:20px;image-rendering:pixelated}

/* Discord сейчас: свой виджет — шапка с онлайном, аватарки со статусом, голосовые каналы */
.dsc{margin-top:2.2rem;padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.dsc__head{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.dsc__logo{width:48px;height:48px;flex:none;display:grid;place-items:center;clip-path:var(--px-6);background:#5865F2;color:#fff;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 4px 0 rgba(255,255,255,.18)}
.dsc__logo svg{width:28px;height:28px}
.dsc__title{display:flex;flex-direction:column;gap:.15rem;min-width:0;margin-right:auto}
.dsc__title b{font-family:var(--display);font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsc__on{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.dsc__on i,.hud__dc i{width:8px;height:8px;background:var(--online);box-shadow:0 0 8px rgba(123,224,123,.7);animation:pulse 2s ease-in-out infinite}
.dsc__cap{margin-top:.35rem;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.dsc__people{display:flex;flex-wrap:wrap;gap:.45rem}
.dsc__ava{position:relative;width:38px;height:38px;flex:none;--st:var(--online)}
.dsc__ava img,.dsc__ava b{display:block;width:100%;height:100%;clip-path:var(--px-4);object-fit:cover;background:#2a1d21}
.dsc__ava b{display:grid;place-items:center;font-family:var(--mono);font-size:.95rem;color:#fff;background:hsl(var(--h,0) 45% 38%)}
.dsc__ava::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;background:var(--st);box-shadow:0 0 0 3px #1c1215}
.dsc__ava[data-st="idle"]{--st:var(--gold)}.dsc__ava[data-st="dnd"]{--st:#E8405A}
.dsc__more{height:38px;min-width:38px;padding:0 .55rem;display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;color:var(--muted);
  clip-path:var(--px-4);background:rgba(255,226,220,.08)}
.dsc__voice{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.dsc__vc{padding:.55rem .7rem .65rem;clip-path:var(--px-4);background:rgba(255,226,220,.07);display:flex;flex-direction:column;gap:.45rem;min-width:0}
.dsc__vcn{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.8rem;font-weight:600;min-width:0}
.dsc__vcn svg{width:15px;height:15px;flex:none;color:var(--online)}
.dsc__vcn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsc__vm{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted);min-width:0}
.dsc__vm .dsc__ava{width:22px;height:22px}.dsc__vm .dsc__ava::after{display:none}
.dsc__vm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsc__vm svg{width:13px;height:13px;flex:none;color:#E8405A;margin-left:auto}
.dsc__empty{margin:0;font-size:.85rem;color:var(--muted)}
.hud__dc{display:inline-flex;align-items:center;gap:.3rem;margin-left:.15rem;font-family:var(--mono);font-size:.78rem}
@media (max-width:560px){.dsc__go{width:100%}.dsc__ava{width:34px;height:34px}}
@media (max-width:440px){.hud__dc{gap:0;margin-left:-.1rem;font-size:.72rem}.hud__dc i{display:none}}   /* в шапке телефона тесно: число без точки */
@media (prefers-reduced-motion:reduce){.dsc__on i,.hud__dc i{animation:none}}

/* шаги */
/* три шага — карточки с артом в ряд; номер — пиксельная бирка в углу, загорается при прокрутке */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 1rem;list-style:none;margin:44px 0 0;padding:0}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.step__n{position:absolute;left:.7rem;top:.7rem;z-index:2;width:2.3rem;height:2.3rem;display:grid;place-items:center;
  --fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-4);
  font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--gold);
  background-color:rgba(0,0,0,.6);
  background-image:linear-gradient(#0A0406 0 0);
  background-size:var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  transition:color .4s ease,background-color .4s ease}
.step.is-lit .step__n{color:#fff;background-color:var(--red);background-image:linear-gradient(#B3000F 0 0)}

/* вопросы */
.faq-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:1.1rem;align-items:start;margin-top:44px}
.faq__help{--ah:350px;position:sticky;top:5.5rem}
.faq__help .card__img{width:min(330px,100%)}
@media (max-width:900px){
  .faq-grid{grid-template-columns:minmax(0,1fr);margin-top:0}
  .faq__help{--ah:0px;position:relative;top:auto;order:2}
  .faq__help .card__art{display:none}
}
.faq{display:flex;flex-direction:column;gap:.45rem}
.faq__item{padding:0 1.1rem;transition:filter .22s ease;box-shadow:inset 4px 0 0 #6B57D6}
.faq__item:hover{filter:brightness(1.12)}
.faq__item.is-open{background-color:rgba(122,99,216,.7)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0;text-align:left;cursor:pointer;
  font-weight:600;font-size:.98rem}
.faq__icon{position:relative;flex:none;width:1.6rem;height:1.6rem;
  --fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-4);
  background-color:rgba(255,226,220,.2);background-image:linear-gradient(var(--bg) 0 0);
  background-size:var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  transition:transform .4s var(--ease),background-color .3s ease}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:.65rem;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg);background-color:#6B57D6}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{overflow:hidden}
.faq__a p{color:var(--muted);max-width:66ch;padding-bottom:1rem;font-size:.93rem}

/* подвал */
.footer{position:relative;padding:2.5rem 0 2rem;background:linear-gradient(180deg,var(--bg),#060203)}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr auto;gap:1.5rem 2rem;align-items:start;padding:1.4rem 1.6rem}
.footer__brand{font-family:var(--display);font-size:1.25rem}
.footer__tag{margin-top:.35rem;color:#C8A8A5;font-weight:500;font-size:.92rem}
.footer__meta{margin-top:.25rem;color:var(--dim);font-family:var(--mono);font-size:.76rem}
.footer__links{display:flex;flex-direction:column;gap:.4rem}
.footer__links a{color:var(--muted);font-size:.92rem;width:fit-content;transition:color .2s ease}
.footer__links a:hover{color:var(--text)}
.footer__col--ip{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.footer__hint{color:var(--dim);font-size:.78rem}
.footer__legal{margin-top:1.2rem;color:var(--dim);font-size:.76rem;max-width:72ch;line-height:1.5}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}.footer__col--ip{grid-column:1/-1}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* служебное */
.progress{position:fixed;left:0;top:0;z-index:60;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.toast{position:fixed;left:50%;bottom:1.2rem;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:.6rem .9rem;--fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-6);
  background-color:var(--red);background-image:linear-gradient(#1E1214 0 0);
  background-size:var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  font-family:var(--mono);font-size:.78rem;white-space:nowrap;transition:opacity .3s ease,transform .45s var(--ease)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.spark{position:fixed;z-index:70;width:5px;height:5px;margin:-2px 0 0 -2px;background:var(--c);box-shadow:0 0 6px var(--c);pointer-events:none;
  animation:spark .85s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(var(--s))}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
.float{position:fixed;z-index:70;font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--online);pointer-events:none;text-shadow:0 0 10px rgba(123,224,123,.7)}
.prefs{position:relative}
/* подсказка как у предмета в Minecraft: тёмный фон, фиолетовая рамка, срезанные углы */
.tip{position:fixed;left:0;top:0;z-index:400;pointer-events:none;max-width:min(260px,calc(100vw - 12px));
  padding:6px 12px 10px;font-size:.78rem;font-weight:600;line-height:1.25;color:#fff;text-shadow:2px 2px 0 #3c3c3c;white-space:nowrap;
  clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px);
  background:linear-gradient(rgba(16,0,16,.95),rgba(16,0,16,.95)) 50% 50%/calc(100% - 8px) calc(100% - 8px) no-repeat,
    linear-gradient(180deg,#5a1aff,#2a0a7f) 50% 50%/calc(100% - 4px) calc(100% - 4px) no-repeat,rgba(16,0,16,.95);
  opacity:0;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease}
.tip.is-on{opacity:1;transform:none}
.prefs__panel{position:absolute;right:0;top:calc(100% + .45rem);z-index:60;min-width:16rem;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.6rem}
.prefs__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--muted)}
.seg{display:inline-flex;--fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-4);
  background-color:rgba(255,226,220,.16);background-image:var(--bev-well),linear-gradient(var(--inset) 0 0);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.seg button{padding:.3rem .6rem;color:var(--muted);font-size:.8rem;cursor:pointer;transition:color .15s ease}
.seg button + button{border-left:2px solid rgba(0,0,0,.5)}
.seg button:hover{color:var(--text)}
.seg button.is-on{color:#fff;background:var(--grad);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.3)}
.prefs__hint{font-family:var(--mono);font-size:.68rem;color:var(--dim);min-height:1em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .lobby__rays,.dust{display:none}
  .step .step__n{color:var(--text);background-color:var(--red)}
}

/* меч читается на тёмном фоне */
.stage__sword{filter:brightness(1.45) saturate(1.15) drop-shadow(0 0 30px rgba(224,2,19,.8)) drop-shadow(0 16px 20px rgba(0,0,0,.65))}
.stage__title{text-shadow:0 0 34px rgba(224,2,19,.45)}

/* мобильная раскладка лобби */
@media (max-width:760px){
  .stage__sword{width:min(58vw,clamp(170px,30vh,330px))}
  .promo{display:block}
  .promo__art{height:84px}
  .promo__body{flex-direction:column;align-items:stretch}
  .promo__body .btn{width:100%}
  .promo__foot{display:block}
  .stats{margin-top:.1rem}
  .stat{font-size:.76rem;padding:.3rem .55rem}
  .deck__name{font-size:1.05rem}
  .hud__sub{font-size:.58rem}
}
@media (max-width:420px){
  .tile{flex:1 1 100%}
}

/* ---------- изюминки: ротатор, блоки, стрелки, таббар ---------- */
:root{
  --tex-obsidian:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMVEU7J1QnHj0QDBwGAwsAAAFbDTSxAAAAaUlEQVR42gVAARGAMAj8mUA3AzhYAOUJoED/TB68Ut/xNLiFb9wVhfPpaybePs3KHJ+sqmRCVpCNBbG9+ekJvySq3hPVZI7qgl56aBihTmPph+Cyu4ng3kJ2vRSHMoQ+8FGHLU9o5FwkfyEoFb7iY82bAAAAAElFTkSuQmCC");
}
/* строка «NetherSword — значит …» */
.rotator{display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap;
  margin-top:.55rem;font-family:var(--display);font-size:clamp(.92rem,1.9vw,1.3rem);color:var(--muted)}
.rot{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  height:1.95em;padding:0 .7em;color:#fff;white-space:nowrap;
  --fw:2px;--in:calc(100% - var(--fw) * 2);clip-path:var(--px-6);
  background-color:rgba(0,0,0,.45);
  background-image:var(--bev),var(--grad);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  text-shadow:0 1px 0 rgba(0,0,0,.45)}
.rot__w{display:block}

/* стрелка «перейти» — в полосе подписи справа */
.tile__go{position:absolute;right:.55rem;bottom:calc((var(--sh) - 1.05rem) / 2);width:1.05rem;height:1.05rem;color:rgba(255,255,255,.6);
  transition:transform .2s var(--ease),color .2s ease}
.tile:hover .tile__go{color:#fff;transform:translate(2px,-2px)}
.tile__cap,.tile__sub{position:relative;z-index:1;max-width:calc(100% - 1.5rem)}

/* крупные пиксельные квадраты фона */
.blocks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blocks i{position:absolute;display:block;background:rgba(255,226,220,.05);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.25);
  animation:blockFloat linear infinite}
@keyframes blockFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}

/* компактное пиксельное меню — спокойная панель без ярких плашек */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    background:#140C0F;border-top:2px solid #37262D;box-shadow:0 -2px 0 #0A0508}
  .tabbar a{position:relative;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;padding:4px 0 6px;clip-path:var(--px-4);color:#AE9D98;
    background:transparent;font-size:11px;line-height:1.2;font-weight:500;
    touch-action:manipulation;transition:color .12s steps(2),background-color .12s steps(2)}
  .tabbar a svg{width:14px;height:14px;flex:none;shape-rendering:crispEdges}
  .tabbar a span{white-space:nowrap}
  .tabbar a.is-active{color:#F0E1DB;background:#26151C}
  .tabbar a.is-active svg{color:#D85B6A}
  .tabbar a.is-active::after{content:"";position:absolute;bottom:2px;width:12px;height:2px;background:#98505D}
  .tabbar a:hover{color:#F0E1DB;background:#24171D}
  .tabbar a:active{background:#301D25}
  .tabbar a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #B99883;color:#F0E1DB}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .fab{bottom:calc(66px + env(safe-area-inset-bottom))}
  .rotator{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){.blocks i{animation:none}}


/* фоновые блоки — объёмные, с настоящими текстурами */
:root{
  --tex-netherrack:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEWFQkJyMjJlKChXISFQGxtRFRVBFhZSHStNAAAAe0lEQVR42g3JsRGDMBAEwIMK9A8UcNKrABgPud6IHIzJ7VH/NdibLl6XSfwyYUm7j3esUF2vVI3oaDOH0xHUQy8l4UgHxKLiHD/Uyg7D7fpWB4xWo2TCgzZyujBTW5C9wYrdJbcHTi15O5j/FaZtCRNc+udORmwcubrEH0CdFhUpwFc0AAAAAElFTkSuQmCC");
  --tex-blackstone:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAElBMVEUnIhxOS1Q8OUcxLDYgExwWDxDdBuRhAAAAc0lEQVR42gXBwQ3EIAwEwFW8+V+UBi5OCuAw/C2B/0gH/beSGSRGGTk1SLJu+Z6YoJt+A26p6cUdkpW/T9+heqI/YyEfldz/DuOSJI/D6LlMd6DTw41oFnNTrRBNIccNmN6k0aFXHWy94TpjDu8bUNYIQF7r+RTVfvaRaAAAAABJRU5ErkJggg==");
  --tex-soul:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMVEVqUkRbRThJNyw9LiU1KSJX5z2oAAAAZUlEQVR42gXBARHDQAgEwKMKgKmAwCl4QEF4/5qyC2dxy4CcmDmh4LXZfALdfivNMe8/04LY42HhRFsYPAeRFpJd4FFJVqINzjZCVbKDDQh5/B6os437QHJem1chdcunBD9uckM/6sERLwvdTWkAAAAASUVORK5CYII=");
  --tex-basalt-side:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMVEVcXFxPS086O0gyMz0bJjJg13CmAAAAZ0lEQVR42h3HwRWDMAxEwa/QwEqmAGRSAMJpAJL+a4oftxnWlJAXn/Gg8y2Bwvk5SKfz1mz3m/2wrmg349iSaMlo3W1pQSmM5XbKDThhTMiuCRnJteCyKMudapkV6lS+aLE5qxtmaX9RWgsu2U1pqQAAAABJRU5ErkJggg==");
  --tex-gilded:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEUnIhwgExxFGwMWDxB+RQ7akQ/87ktOS1Q8OUcxLDaWsahWAAAAeklEQVR42gXBgQHAIAzDMKeFEf//8CSEZM1inRG8Z0zU1gl7gQTv15LloBLb8xEWtC3xPU4Y2vYJSTPsYN9zGcKOASU7R8EmoCRYc88QgISETFCGgOdubNt6wFa+1fcqF23rDVFyoO1z95CYGel7ZneWkFDA7C5ZGPAHPoAEHAEwpBMAAAAASUVORK5CYII=");
}
.blocks{perspective:800px}
.blocks i.bk{
  position:absolute;width:var(--s);height:var(--s);background:none;box-shadow:none;
  transform-style:preserve-3d;transform:rotateX(-26deg) rotateY(-38deg);
  animation:bkFloat linear infinite;will-change:transform}
.blocks i.bk b{position:absolute;inset:0;background-size:100% 100%;image-rendering:pixelated;backface-visibility:hidden}
.blocks i.bk .t{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));filter:brightness(1.35)}
.blocks i.bk .f{transform:translateZ(calc(var(--s) / 2))}
.blocks i.bk .r{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));filter:brightness(.62)}
@keyframes bkFloat{
  0%{transform:rotateX(-26deg) rotateY(-38deg) translateY(0)}
  50%{transform:rotateX(-26deg) rotateY(-12deg) translateY(-26px)}
  100%{transform:rotateX(-26deg) rotateY(-38deg) translateY(0)}
}
.bk--netherrack b{background-image:var(--tex-netherrack)}
.bk--blackstone b{background-image:var(--tex-blackstone)}
.bk--basalt b{background-image:var(--tex-basalt-side)}
.bk--soul b{background-image:var(--tex-soul)}
.bk--obsidian b{background-image:var(--tex-obsidian)}
.bk--gilded b{background-image:var(--tex-gilded)}

/* ---- объём блоков: ничего, что схлопывает preserve-3d ----
   filter, opacity < 1, clip-path и overflow на элементе с preserve-3d
   заставляют браузер «сплющить» потомков — грани ложатся друг на друга.
   Поэтому прозрачность и тень живут на обёртке, 3D — внутри неё. */
.blocks i.bk{opacity:var(--a,.35);animation:none;transform:none;transform-style:flat;perspective:620px}
.blocks .bk__in{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(-36deg);animation:bkFloat linear infinite;will-change:transform}
.blocks i.bk b{position:absolute;inset:0;background-size:100% 100%;image-rendering:pixelated;backface-visibility:hidden}
.blocks i.bk .t{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));filter:brightness(1.5)}
.blocks i.bk .f{transform:translateZ(calc(var(--s) / 2));filter:brightness(1)}
.blocks i.bk .r{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));filter:brightness(.5)}
@keyframes bkFloat{
  0%{transform:rotateX(-24deg) rotateY(-36deg) translateY(0)}
  50%{transform:rotateX(-24deg) rotateY(14deg) translateY(-26px)}
  100%{transform:rotateX(-24deg) rotateY(-36deg) translateY(0)}
}


/* ---------- фон лобби: сцена без повтора текстуры ----------
   Свет за героем, тёмные углы и низ, под ними — кадр мира, если задан в CONFIG.backdrop. */
.lobby{background:
  radial-gradient(40% 44% at 50% 42%,rgba(255,140,110,.42),transparent 72%),
  radial-gradient(80% 60% at 50% 115%,rgba(150,14,26,.55),transparent 70%),
  linear-gradient(180deg,#2a0a10 0%,#16060a 62%,#0c0406 100%)}
.lobby__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;pointer-events:none;
  filter:saturate(.85) brightness(.8)}
.lobby__rays{opacity:.5}

/* ---------- свой персонаж вместо меча: крупная модель, ничего не мешает ---------- */
.figure{position:absolute;left:50%;bottom:0;z-index:4;
  height:clamp(260px,50vh,480px);width:calc(clamp(260px,50vh,480px) * .62);
  transform:translateX(-50%);cursor:grab;touch-action:none}
.figure:active{cursor:grabbing}
/* холст больше фигуры: меч и руки в эмоциях не обрезаются; модель того же размера (камера — по высоте фигуры) */
.figure__cv{position:absolute;left:-45%;top:-12%;width:190%;height:124%;display:block;pointer-events:none}
.is-figure .stage__sword{display:none}
.is-figure .stage__art{height:clamp(260px,50vh,480px);margin-bottom:1.6rem;opacity:1!important}
.is-figure .stage__title,.is-figure .stage__tag,.is-figure .rotator,.is-figure .stats{display:none}
.figure__name{position:absolute;left:50%;bottom:-1.6rem;transform:translateX(-50%);white-space:nowrap;translate:var(--fx,0px) 0;
  font-family:var(--mono);font-size:.8rem;padding:.2rem .6rem;color:var(--text);
  background:rgba(10,4,6,.78);clip-path:var(--px-4)}

/* режим показа: светлое пятно за персонажем, без лучей и блоков — как фон Милиды */
.lobby.is-figure-mode{background:radial-gradient(34% 52% at 50% 46%,#e4dadd 0%,#8d7b80 36%,#2a1b20 72%,#120809 100%)}
.lobby.is-figure-mode .lobby__rays,
.lobby.is-figure-mode .blocks,
.lobby.is-figure-mode .dust{display:none}

/* пузырь эмоции — справа от головы, не поверх лица и текста */
.emote{position:absolute;left:84%;top:4%;width:52px;height:52px;display:grid;place-items:center;padding:8px;
  transform-origin:0 100%;translate:var(--fx,0px) 0;isolation:isolate;
  background:#10080C;clip-path:var(--px-6);
  animation:emIn .3s steps(3) both,emOut .35s steps(2) 1.4s forwards}
.emote::before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:var(--px-4);
  background:linear-gradient(180deg,#3D2B33,#23161C);border:2px solid #59414A;
  box-shadow:inset 0 2px 0 #70545D,inset 2px 0 0 #44313A,inset 0 -3px 0 #130B10}
.emote::after{content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:12px;height:2px;background:var(--emote-color,#AC9C97);opacity:.65}
.emote svg{position:relative;display:block;width:var(--emote-size,28px);height:var(--emote-size,28px);
  margin-top:-2px;filter:drop-shadow(0 2px 0 #10080C)}
@keyframes emIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes emOut{to{opacity:0;transform:translateY(-8px)}}

/* ---------- поле ника ---------- */
.nick{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:min(100%,430px);margin-top:.4rem}
/* цвет фона за персонажем: пиксельные квадраты, только в режиме показа */
.bgpick{display:none;gap:.45rem;padding:.38rem .5rem;clip-path:var(--px-6);background:rgba(12,14,22,.74);z-index:5}
.is-figure .bgpick{display:flex}
.bgpick button{width:26px;height:22px;clip-path:var(--px-4);cursor:pointer;background:var(--c);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -4px 0 rgba(0,0,0,.28);transition:transform .12s ease,filter .12s ease}
.bgpick button:hover{filter:brightness(1.15);transform:translateY(-1px)}
.bgpick button[aria-checked="true"]{box-shadow:inset 0 0 0 2px #fff,inset 0 4px 0 rgba(255,255,255,.3),inset 0 -5px 0 rgba(0,0,0,.25);transform:scale(1.1)}
.bgpick button:focus-visible{outline:none;filter:brightness(1.25)}
/* тёмный фон сцены — луна после цветов */
.bgpick__sep{width:2px;align-self:stretch;margin:0 .1rem;background:rgba(255,255,255,.14)}
.bgpick .bgpick__dark{display:grid;place-items:center;background:#2a2433;color:#c9c2d6}
.bgpick .bgpick__dark svg{width:12px;height:12px}
.bgpick .bgpick__dark[aria-pressed="true"]{background:#14101c;color:#ffe27a;transform:scale(1.1);
  box-shadow:inset 0 0 0 2px #fff,inset 0 4px 0 rgba(255,255,255,.18),inset 0 -5px 0 rgba(0,0,0,.25)}
@media (max-height:820px){.nick__label{display:none}}
.nick__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.nick__row{display:flex;gap:.4rem;width:100%;align-items:stretch}
.nick__in{flex:1;min-width:0;height:2.6rem;padding:0 .8rem;border:0;clip-path:var(--px-6);color:var(--text);
  font-family:var(--mono);font-size:.9rem;outline:none;
  background-color:rgba(255,226,220,.14);
  background-image:var(--bev-well),linear-gradient(var(--inset) 0 0);
  background-size:calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px);
  background-position:50% 50%;background-repeat:no-repeat}
.nick__in::placeholder{color:var(--dim)}
.nick__in:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.nick .btn{min-height:2.6rem;white-space:nowrap}
.nick__up{padding:.35rem .65rem}
.nick__up svg{width:1.05rem;height:1.05rem;display:block}
.nick.is-drop .nick__in{outline:2px dashed var(--gold);outline-offset:2px}
.nick__note{font-size:.76rem;line-height:1.45;color:var(--muted);text-align:center;min-height:2.9em;max-width:46ch;text-wrap:balance}
.nick__note.is-err{color:#FF9A8F}
.nick__note.is-ok{color:var(--online)}

@media (prefers-reduced-motion:reduce){.emote{animation:none!important}}
@media (prefers-reduced-motion:reduce){.figure,.fp,.emote,.figure.is-jump,.figure.is-spin{animation:none!important}}

/* контраст текста на кирпичном фоне */
:root:root .rotator{color:#FFF1EC;text-shadow:0 2px 0 rgba(0,0,0,.5)}
:root:root .stage__tag{color:#FFF1EC;text-shadow:0 2px 0 rgba(0,0,0,.5)}
:root:root .hud__sub{color:rgba(255,241,236,.9);text-shadow:0 1px 0 rgba(0,0,0,.55)}
:root:root .hud__name{text-shadow:0 2px 0 rgba(0,0,0,.45)}
:root:root .nick__note{color:#FFF1EC;text-shadow:0 1px 0 rgba(0,0,0,.6);min-height:2.3em}
:root:root .nick__label{color:#FFE3DC;text-shadow:0 1px 0 rgba(0,0,0,.6)}
:root:root .nick{margin-top:.45rem}

/* ---- фон при фигуре: нетерский свет снизу, тёмные края ---- */
.lobby.is-figure-mode{background:radial-gradient(42% 48% at 50% 46%,#c6c1c3 0%,#8a8487 40%,#555153 72%,#3a3739 100%)}
.figure::after{content:"";position:absolute;left:50%;bottom:-4px;width:70%;height:16px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);pointer-events:none}

/* ---- панель эмоций справа (только в режиме показа) ---- */
.emotes{grid-area:promo;align-self:center;width:264px;z-index:4;padding:.7rem .75rem .8rem;display:none;
  clip-path:var(--px-12);--fw:3px;--in:calc(100% - var(--fw) * 2);
  background-color:rgba(255,226,220,.24);background-image:linear-gradient(180deg,#1E1317,#140C0F);
  background-size:var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat}
.lobby.is-figure-mode .emotes{display:block}
.lobby.is-figure-mode .promo{display:none}
.emotes__head{display:flex;align-items:center;gap:.3rem;margin-bottom:.5rem}
.emotes__cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--dim);margin-right:auto}
.emo-tool{display:grid;place-items:center;min-width:1.9rem;height:1.7rem;padding:0 .45rem;clip-path:var(--px-4);cursor:pointer;
  font-size:.66rem;font-weight:600;color:var(--muted);background:#2A1A1F;box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.35);
  transition:filter .15s ease,color .15s ease}
.emo-tool svg{width:12px;height:12px}
.emo-tool:hover{filter:brightness(1.3);color:var(--text)}
.emo-tool.is-busy{opacity:.5;pointer-events:none}
/* ---- достижения: всплывашка как в Minecraft и список ---- */
.adv{position:fixed;top:max(1rem,env(safe-area-inset-top));right:1rem;z-index:300;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.adv__t{display:flex;align-items:center;gap:.85rem;width:min(340px,calc(100vw - 2rem));padding:.65rem .9rem .65rem .75rem;background:#1d1d1f;
  box-shadow:inset 0 0 0 3px #0d0d0e,inset 0 0 0 5px #4a4a50,0 10px 30px rgba(0,0,0,.5);clip-path:var(--px-4);
  transform:translateX(calc(100% + 2rem));transition:transform .45s cubic-bezier(.2,.9,.25,1.1)}
.adv__t.is-in{transform:none}
.adv__t.is-out{transform:translateX(calc(100% + 2rem));transition-duration:.35s;transition-timing-function:ease-in}
.adv__i{flex:none;width:36px;height:36px;image-rendering:pixelated}
.adv__k{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:#FFFF55}
.adv__t--gold .adv__k{color:#FF55FF}
.adv__n{display:block;font-family:var(--mono);font-size:.8rem;font-weight:600;color:#fff;margin-top:.15rem}
@media (prefers-reduced-motion:reduce){.adv__t{transition:opacity .2s;transform:none;opacity:0}.adv__t.is-in{opacity:1}.adv__t.is-out{opacity:0}}
.ach-open{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-family:var(--mono);font-size:.72rem;color:var(--text);background:var(--raised);border:0;padding:.35rem .6rem;cursor:pointer;clip-path:var(--px-4)}
.ach-open:hover{filter:brightness(1.25)}
.ach-open b{color:#FFFF55;font-weight:600}
.achl{display:grid;gap:4px;overflow-y:auto;min-height:0;max-height:min(62dvh,560px);padding-right:2px;scrollbar-width:thin}
.achl__i{display:flex;align-items:center;gap:.8rem;padding:.6rem .7rem;background:var(--inset);clip-path:var(--px-4)}
.achl__i img{flex:none;width:32px;height:32px;image-rendering:pixelated}
.achl__i b{display:block;font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--text)}
.achl__i small{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.achl__i.is-off img{filter:grayscale(1) brightness(.35)}
.achl__i.is-off b{color:var(--dim)}
.achl__i.is-on{box-shadow:inset 3px 0 0 #FFFF55}
.achl__i.is-gold.is-on{box-shadow:inset 3px 0 0 #FF55FF}
.achl__bar{height:8px;background:var(--inset);clip-path:var(--px-4);overflow:hidden}
.achl__bar i{display:block;height:100%;background:linear-gradient(90deg,#7BE07B,#3fae3f);transition:width .4s var(--ease)}
/* ---- окно скриншота: превью → скачать / копировать / поделиться ---- */
.shotm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem;background:rgba(6,2,4,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .2s var(--ease)}
.shotm.is-on{opacity:1}
.shotm[hidden]{display:none}
.shotm__box{width:min(460px,100%);max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;gap:.8rem;padding:1rem;background:linear-gradient(180deg,var(--surface-2),var(--surface));clip-path:var(--px-12);transform:translateY(14px) scale(.97);transition:transform .28s var(--ease)}
.shotm.is-on .shotm__box{transform:none}
.shotm__head{display:flex;align-items:center;gap:.6rem}
.shotm__title{font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;margin-right:auto}
.shotm__x{display:grid;place-items:center;width:2rem;height:2rem;border:0;cursor:pointer;color:var(--muted);background:var(--raised);clip-path:var(--px-4)}
.shotm__x:hover{color:var(--text);filter:brightness(1.25)}
.shotm__view{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;aspect-ratio:4/5;background:var(--inset);clip-path:var(--px-6);overflow:hidden}
.shotm__view.is-clear{background:repeating-conic-gradient(#2b1c20 0 25%,#170d10 0 50%) 0 0/22px 22px}
.shotm__view img{display:block;max-width:100%;max-height:100%;object-fit:contain;transition:opacity .2s}
.shotm__view.is-busy img{opacity:.25}
.shotm__wait{position:absolute;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted);display:none}
.shotm__view.is-busy .shotm__wait{display:block;animation:shotPulse 1s steps(2) infinite}
@keyframes shotPulse{50%{opacity:.35}}
.shotm__seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--inset);clip-path:var(--px-4)}
.shotm__seg button{font:inherit;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;padding:.55rem .4rem;border:0;cursor:pointer;color:var(--muted);background:transparent;clip-path:var(--px-4)}
.shotm__seg button.is-on{color:#fff;background:var(--grad)}
.shotm__seg button:not(.is-on):hover{color:var(--text);background:var(--raised)}
.shotm__acts{display:flex;flex-wrap:wrap;gap:.5rem}
.shotm__acts .btn{flex:1 1 auto;justify-content:center}
.shotm__acts .btn--primary{flex-basis:100%}
.shotm__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--dim);text-align:center}
.emo-tool--auto[aria-pressed="true"]{color:#0F2A12;background:#7BE07B}
.emotes__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem}
.lobby.is-figure-mode .emotes{width:300px}
@media (max-width:1180px){.lobby.is-figure-mode .emotes{width:272px}}
/* плитка эмоции: значок, название, снизу полоска цвета группы; играет — светлая рамка и полоска бежит */
.emo-btn{--g:#7BE07B;--dur:2s;position:relative;display:flex;flex-direction:column;align-items:center;gap:.18rem;min-width:0;padding:.36rem .1rem .46rem;
  clip-path:var(--px-6);color:var(--text);font-size:.56rem;line-height:1.1;cursor:pointer;
  --fw:2px;--in:calc(100% - var(--fw) * 2);
  background-color:rgba(0,0,0,.5);background-image:var(--bev),linear-gradient(180deg,#2C1A1F,#1C1114);
  background-size:var(--in) var(--in),var(--in) var(--in);background-position:50% 50%;background-repeat:no-repeat;
  transition:filter .15s ease,transform .07s ease}
.emo-btn svg{width:22px;height:22px}
.emo-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.emo-btn:hover{filter:brightness(1.3)}
.emo-btn:active{transform:translateY(2px)}
.emo-bar{position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:var(--g);opacity:.35}
.emo-btn.is-on{background-color:#fff;background-image:var(--bev),linear-gradient(180deg,#3A2329,#24161A)}
.emo-btn.is-on .emo-bar{opacity:1;transform-origin:left;animation:emoBar var(--dur) linear forwards}
.emo-btn.is-loop .emo-bar{animation:emoPulse .7s ease-in-out infinite alternate}
@keyframes emoBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes emoPulse{from{opacity:.4}to{opacity:1}}


/* узкое окно: статус колоды не вылезает */
@media (max-width:1180px){
  :root:root .deck__note{font-size:.62rem;padding:.3rem .55rem}
}
@media (max-height:720px){
  :root:root .deck__card{padding:.55rem .75rem}
  :root:root .deck__name{font-size:clamp(.95rem,1.8vw,1.25rem)}
}


/* ---- сцена под персонажем: canvas вместо CSS-градиента ---- */
.stage-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:none;pointer-events:none}
.lobby.is-figure-mode .stage-bg{display:block}
.lobby.is-figure-mode .lobby__vig,.lobby.is-figure-mode .figure::after{display:none}

/* панель эмоций: группы «Милида» и «Наши», длинный список прокручивается */
.emotes{max-height:min(66vh,560px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#765764 #150D12}
.emotes::-webkit-scrollbar{width:10px;height:10px}
.emotes::-webkit-scrollbar-track{background:#150D12;border-left:2px solid #24171D}
.emotes::-webkit-scrollbar-thumb{background:#765764;border:2px solid #150D12;border-radius:0;
  box-shadow:inset 0 2px 0 #A17D8C,inset 0 -2px 0 #49313D}
.emotes::-webkit-scrollbar-thumb:hover{background:#916C7D}
.emotes::-webkit-scrollbar-thumb:active{background:#B18A9A}
.emotes::-webkit-scrollbar-button{display:none}
@supports selector(::-webkit-scrollbar){.emotes{scrollbar-width:auto;scrollbar-color:auto}}

.emo-cap{grid-column:1/-1;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--dim);margin:.3rem 0 0}
.emo-cap--recent{color:var(--gold)}
/* телефон: панель сразу под персонажем, плитки — лентой вбок; «недавние» не дублируем */
@media (max-width:760px){
  .lobby.is-figure-mode{grid-template-areas:"hud" "stage" "promo" "rail" "deck"}
  :root .emotes{width:auto;max-height:none;overflow:visible;align-self:stretch}
  .emotes__grid{display:flex;gap:.35rem;overflow-x:auto;overscroll-behavior:contain;scroll-snap-type:x proximity;padding-bottom:.35rem;
    scrollbar-width:thin;scrollbar-color:#765764 #150D12}
  .emotes__grid::-webkit-scrollbar{height:8px}
  .emotes__grid::-webkit-scrollbar-track{background:#150D12}
  .emotes__grid::-webkit-scrollbar-thumb{background:#765764;border:2px solid #150D12;border-radius:0}
  @supports selector(::-webkit-scrollbar){.emotes__grid{scrollbar-width:auto;scrollbar-color:auto}}
  .emo-btn{flex:0 0 64px;scroll-snap-align:start}
  .emo-cap,.emo-btn--recent{display:none}
}

/* ---------- праздники: Хэллоуин и зима ----------
   Класс is-halloween / is-winter на html ставит скрипт по дате; пиксель-арт он же кладёт в переменные --hol-*.
   Без праздника ни одно правило не срабатывает. Всё декоративное — pointer-events:none */
.hol-fx,.hol-snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hol-fx{z-index:1;overflow:hidden}
.hol-snow{z-index:5;display:block;image-rendering:pixelated}
/* мышь: спрайт из двух кадров, машет крыльями; путь задаёт скрипт */
.hol-bat{position:absolute;left:0;top:0;width:calc(var(--p) * 15);height:calc(var(--p) * 7);margin:calc(var(--p) * -3.5) 0 0 calc(var(--p) * -7.5);
  background:var(--hol-bat) 0 0/200% 100% no-repeat;image-rendering:pixelated;animation:holFlap .28s infinite;will-change:transform;
  filter:drop-shadow(0 0 2px rgba(255,150,100,.5))}                        /* тёплый контур — мышь видна и на тёмном */
@keyframes holFlap{0%,49.9%{background-position:0 0}50%,100%{background-position:100% 0}}

/* тыквы у меча: кубы с текстурой блока, лицо светится */
.hol-pks{position:absolute;inset:0;z-index:1;pointer-events:none}
.is-figure .hol-pks,.is-figure .hol-hat{display:none}
/* парят у меча, как блоки фона: большая слева, две справа; качаются не в такт */
.hol-pk{position:absolute;width:var(--s);height:var(--s);perspective:520px;animation:holBob 5.2s ease-in-out infinite}
.hol-pk--a{--s:clamp(42px,7.4vh,64px);--ry:30deg;left:-60%;bottom:12%;animation-delay:-1.4s}
.hol-pk--b{--s:clamp(32px,5.4vh,48px);--ry:-30deg;right:-50%;bottom:40%;animation-duration:6.1s}
.hol-pk--c{--s:clamp(24px,3.8vh,34px);--ry:-18deg;right:-30%;bottom:2%;animation-delay:-3s;animation-duration:4.6s}
@keyframes holBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
html.is-still .hol-pk{animation:none}
/* телефон: по бокам места нет — тыквы в пустых углах квадрата меча, над гардой и под клинком */
@media (max-width:760px){
  .hol-pk--a{--s:clamp(40px,12vw,52px);left:2%;top:4%;bottom:auto}
  .hol-pk--b{--s:clamp(32px,10vw,42px);right:0;bottom:8%}
  .hol-pk--c{--s:clamp(24px,7vw,30px);right:28%;bottom:3%}
}
.hol-pk__in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(var(--ry))}
.hol-pk__in b{position:absolute;inset:0;background:0 0/100% 100% no-repeat;image-rendering:pixelated;backface-visibility:hidden}
.hol-pk .f{background-image:var(--hol-pk-face);transform:translateZ(calc(var(--s) / 2))}
.hol-pk .r{background-image:var(--hol-pk-side);transform:rotateY(90deg) translateZ(calc(var(--s) / 2));filter:brightness(.6)}
.hol-pk .l{background-image:var(--hol-pk-side);transform:rotateY(-90deg) translateZ(calc(var(--s) / 2));filter:brightness(.6)}
.hol-pk .t{background-image:var(--hol-pk-top);transform:rotateX(90deg) translateZ(calc(var(--s) / 2));filter:brightness(1.18)}
.hol-pk__glow{position:absolute;left:-70%;top:-55%;width:240%;height:210%;
  background:radial-gradient(closest-side,rgba(255,176,64,.5),rgba(255,112,24,.16) 55%,transparent);animation:holFlicker 3.4s linear infinite}
@keyframes holFlicker{0%,100%{opacity:1}18%{opacity:.82}24%{opacity:.95}46%{opacity:.76}52%{opacity:.92}74%{opacity:.86}80%{opacity:1}}
html.is-still .hol-pk__glow{animation:none}

/* тыква у логотипа */
html.is-halloween .hud__brand{position:relative}
html.is-halloween .hud__brand::before{content:"";position:absolute;left:calc(2.6rem - 19px);top:-10px;width:26px;height:22px;z-index:1;pointer-events:none;
  background:var(--hol-pk2d) 0 0/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 0 5px rgba(255,150,40,.6)) drop-shadow(0 2px 0 rgba(0,0,0,.45))}

/* паутина в некоторых углах: под картинкой и текстом, режется уступами вместе с плитой */
html.is-halloween :where(.tile--a,.promo,.deck__card,.cards .card:nth-child(1),.cards .card:nth-child(4),.steps .step:nth-child(3),.faq__help)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:var(--px-12);
  background:var(--hol-web) 0 0/48px 48px no-repeat;image-rendering:pixelated}
html.is-halloween :where(.promo,.deck__card,.cards .card:nth-child(4),.steps .step:nth-child(3),.faq__help)::after{background-image:var(--hol-web-r);background-position:100% 0}
html.is-halloween :is(.promo,.deck__card){position:relative}
html.is-halloween :is(.promo,.deck__card)::after{z-index:1}                 /* у промо картинка шапки — над ней */

/* снежные шапки по верхнему краю плит; у плит со срезом по самой плите снег лежит внутри края */
html.is-winter :is(.tile,.card,.promo,.deck__card)::after{content:"";position:absolute;left:12px;right:12px;top:-4px;height:14px;z-index:-1;pointer-events:none;
  background:var(--hol-snow) 0 0/96px 14px repeat-x;image-rendering:pixelated}
html.is-winter :is(.promo,.deck__card){position:relative}
html.is-winter :is(.promo,.deck__card)::after{top:0;z-index:1}
/* шапка Санты на острие меча: качается вместе с ним */
.hol-hat{position:absolute;inset:0;z-index:1;pointer-events:none;animation:float 5.5s ease-in-out infinite}
.hol-hat i{position:absolute;right:-12%;top:-13%;width:36%;aspect-ratio:12/8;transform:rotate(42deg);
  background:var(--hol-hat) 0 0/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}


.profile-scene-bio{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:min(280px,75vw);margin:0;text-align:center;color:#E3D7DB;font:12px/1.5 var(--font);overflow-wrap:anywhere;pointer-events:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.is-figure-mode .figure__name{border-bottom:2px solid var(--profile-accent,transparent)}

/* Render budget: static giant rays avoid a constantly rotating multi-megapixel layer. */
.lobby__rays{animation:none}
html.is-render-paused .lobby,html.is-render-paused .lobby *,html.is-render-paused .lobby *::before,html.is-render-paused .lobby *::after,
html.is-lobby-offscreen .lobby *,html.is-lobby-offscreen .lobby *::before,html.is-lobby-offscreen .lobby *::after,
html.is-page-hidden *,html.is-page-hidden *::before,html.is-page-hidden *::after{animation-play-state:paused!important}