/* =========================================================
   WoW Prime — стеклянная «кристальная» тема
   Брейкпоинты: ≤1180 — герои-вырезки скрыты, карточки 2×2;
   ≤1040 — бенто в 2 колонки; ≤900 — мобильная раскладка.
   ========================================================= */

/* ---------- Шрифты (self-hosted, OFL) ---------- */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cinzel-600-latin.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/cinzel-800-latin.woff2) format('woff2')}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/forum-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/forum-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/golos-text-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/golos-text-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Токены ---------- */
:root{
  --bg:#060914;
  --bg2:#0B1230;
  --cy:#5AD8FF;           /* арканный циан */
  --cy-soft:#A9EBFF;
  --vi:#A77BFF;           /* фиолет */
  --vi-soft:#CDB8FF;
  --mg:#E05CFF;           /* маджента */
  --gd:#F2C46D;           /* золото */
  --gd-soft:#FFE2A3;
  --v:#B08CFF;            /* CRAZY FUN */
  --v-soft:#D2C0FF;
  --e:#FF8A4C;            /* HARDMODE */
  --e-soft:#FFB48A;
  --ok:#46E08A;
  --ok-soft:#9EF0C0;
  /* качество предметов WoW */
  --q-common:#FFFFFF;
  --q-uncommon:#1EFF00;
  --q-rare:#3FA0FF;
  --q-epic:#B04DFF;
  --q-legendary:#FF8000;
  --q-artifact:#E6CC80;
  --head:#F2F5FF;
  --text:#E4E9FA;
  --body:#C3CBE8;
  --muted:#8F9BC4;
  --muted2:#6F7AA3;
  --line:rgba(140,180,255,.1);
  --line2:rgba(140,180,255,.16);
  --line3:rgba(150,190,255,.26);
  --glass:linear-gradient(180deg,rgba(30,44,96,.52),rgba(12,18,44,.62));
  --glass-solid:rgba(10,15,36,.86);
  --edge:linear-gradient(135deg,rgba(130,225,255,.7),rgba(167,123,255,.22) 35%,rgba(120,150,255,.08) 60%,rgba(224,92,255,.55));
  --crystal:linear-gradient(135deg,#8BE8FF 0%,#8F86FF 52%,#D877FF 100%);
  --display:'Cinzel','Forum',Georgia,serif;
  --serif:'Forum',Georgia,serif;
  --sans:'Golos Text','Segoe UI',Tahoma,sans-serif;
  --gutter:clamp(16px,3.5vw,48px);
  --nav-h:76px;
  --tabbar-h:0px;
  color-scheme:dark;
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:radial-gradient(120% 60% at 50% 120%,#101A44 0%,transparent 60%),var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%}
a{color:var(--cy-soft)}
a:hover{color:#fff}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.ico,.icon-btn svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--cy);color:#06122A;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;color:#06122A}
body.menu-open{overflow:hidden}
/* мягкие арканные свечения под секциями */
/* затемнённый пейзаж под всеми секциями (assets/art/page-bg*.webp) + мягкие арканные свечения */
:root{--page-bg:url(../art/page-bg.webp)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(38% 32% at 4% 30%,rgba(167,123,255,.10),transparent 70%),
  radial-gradient(34% 30% at 98% 64%,rgba(90,216,255,.08),transparent 70%),
  radial-gradient(80% 70% at 50% 45%,rgba(6,9,20,.6),rgba(6,9,20,.25) 75%),
  linear-gradient(180deg,rgba(6,9,20,.58),rgba(6,9,20,.5) 50%,rgba(6,9,20,.72)),
  var(--page-bg) 50% 50%/cover no-repeat,#060914}

/* видимость по раскладке: .d-only — только десктоп, .m-only — только мобильный (≤900px) */
@media (min-width:901px){.m-only{display:none!important}}

/* утилиты */
.c-v{color:var(--v)}
.c-v-soft{color:var(--v-soft)}
.c-e{color:var(--e-soft)}
.c-e-strong{color:var(--e)}
.c-ok{color:var(--ok)}
.c-neutral{color:var(--body)}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.fs-12{font-size:12px}
.fs-13{font-size:13px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---------- Кнопки ---------- */
/* Кнопки — рамки из игрового интерфейса (assets/ui/btn-frame.webp, btn-prime.webp), 9-slice:
   торцы с кристаллами масштабируются вместе с высотой --bh, середина тянется по ширине.
   --cap/--bt/--bb — доли высоты, которые занимают торец, верх и низ рамки. */
.btn-prime,.btn-glass,.nl{
  --bh:54px;--cap:.711;--bt:.125;--bb:.086;--pad:14px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  height:var(--bh);padding:0 calc(var(--bh) * var(--cap) + var(--pad));
  border:0 solid transparent;border-image-source:url(../ui/btn-frame.webp);border-image-slice:16 91 11 fill;
  border-image-width:calc(var(--bh) * var(--bt)) calc(var(--bh) * var(--cap)) calc(var(--bh) * var(--bb));border-image-repeat:stretch;
  background:none;cursor:pointer;color:#E6ECFF;
  font-family:var(--serif);font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:filter .2s,transform .2s,color .2s
}
.btn-prime,.nl.is-on{--cap:.64;--bt:.203;--bb:.133;border-image-source:url(../ui/btn-prime.webp);border-image-slice:26 82 17 fill;color:#0A1033;text-shadow:0 1px 0 rgba(255,255,255,.35);padding-top:2px}
.btn-glass{text-shadow:0 0 12px rgba(90,216,255,.35)}
.btn-prime:hover,.btn-glass:hover,.nl:hover{filter:brightness(1.14) drop-shadow(0 0 12px rgba(120,200,255,.55));transform:translateY(-1px)}
.btn-prime:hover{color:#0A1033}
.btn-glass:hover,.nl:hover{color:#fff}
.btn-prime:active,.btn-glass:active,.nl:active{filter:brightness(.94);transform:none}
.btn-glass[aria-pressed="true"]{color:var(--cy-soft)}
/* блик пробегает по стеклу кнопки, кристаллы на торцах вспыхивают */
.btn-prime,.btn-glass,.nl{--gem:.12}
.btn-prime,.nl.is-on{--gem:.21}
.btn-prime::after,.btn-glass::after,.nl::after{content:"";position:absolute;pointer-events:none;
  inset:calc(var(--bh) * var(--bt)) calc(var(--bh) * var(--cap) * .8) calc(var(--bh) * var(--bb));border-radius:3px;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%) 100% 0/300% 100% no-repeat;opacity:0}
.btn-prime::before,.btn-glass::before,.nl::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at calc(var(--bh) * var(--gem)) 50%,#fff 0,rgba(170,240,255,.85) 2px,rgba(90,216,255,.3) 6px,transparent 13px),
             radial-gradient(circle at calc(100% - var(--bh) * var(--gem)) 50%,#fff 0,rgba(170,240,255,.85) 2px,rgba(90,216,255,.3) 6px,transparent 13px)}
.btn-prime:hover::after,.btn-glass:hover::after,.nl:hover::after,.btn-prime:focus-visible::after,.btn-glass:focus-visible::after,.nl:focus-visible::after{animation:btn-shine .85s ease-out}
.btn-prime:hover::before,.btn-glass:hover::before,.nl:hover::before{animation:gem-glint 1.1s ease-out}
.nl.is-on::after{animation:btn-shine 1.2s ease-out 2s infinite;animation-duration:7s}
@keyframes btn-shine{0%{opacity:1;background-position:100% 0}14%,100%{opacity:1;background-position:0 0}}
@keyframes gem-glint{0%{opacity:0;transform:scale(.9)}25%{opacity:1;transform:scale(1.05)}100%{opacity:0}}
.hero-actions .btn-prime{animation:cta-pulse 2.8s ease-in-out infinite}
.hero-actions .btn-prime:hover{animation:none}
@keyframes cta-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(160,140,255,0))}50%{filter:drop-shadow(0 0 14px rgba(160,140,255,.8)) brightness(1.06)}}
.btn-md{--bh:48px;font-size:15px}
.btn-sm{--bh:42px;--pad:12px;font-size:14px;letter-spacing:.12em}
.btn-xs{--bh:36px;--pad:10px;font-size:13px;letter-spacing:.1em}
.btn-block{width:100%}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;background:rgba(40,56,120,.25);border:1px solid var(--line3);border-radius:12px;color:var(--text);cursor:pointer}
.icon-btn:hover{background:rgba(70,100,200,.3)}

.round-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;color:var(--body);background:rgba(30,44,96,.35);border:1px solid var(--line3);transition:color .2s,border-color .2s,box-shadow .2s}
.round-btn:hover{color:#fff;border-color:rgba(90,216,255,.6);box-shadow:0 0 20px -4px rgba(90,216,255,.6)}
.round-btn-prime{color:#081230;background:var(--crystal);border:0}
.round-btn-prime:hover{color:#081230}
.round-btn:disabled{opacity:.35;cursor:default;box-shadow:none}

/* ---------- Стекло ---------- */
.card,.glass{position:relative;background:var(--glass);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -24px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
.card::before,.glass::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;background:var(--edge);opacity:.55;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;transition:opacity .25s}
.card>*,.glass>*{position:relative;z-index:1}
a.card{text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s}
a.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 40px -12px rgba(90,216,255,.55)}
a.card:hover::before{opacity:1}

/* ---------- Типографика ---------- */
/* надзаголовок — плашка-значок: кристалл слева, рамка-переливы, по плашке время от времени проходит блик */
.eyebrow{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.75em;padding:.55em 1em .55em .85em;border-radius:999px;
  font-family:var(--serif);font-size:13px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--cy-soft);text-shadow:0 0 12px rgba(90,216,255,.45);
  background:linear-gradient(180deg,rgba(30,44,96,.6),rgba(8,12,30,.75)) padding-box,linear-gradient(120deg,rgba(130,225,255,.8),rgba(167,123,255,.35) 45%,rgba(242,196,109,.65)) border-box;
  border:1px solid transparent;box-shadow:0 0 20px -8px rgba(90,216,255,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.eyebrow::before{content:"";flex:none;width:.6em;height:.6em;transform:rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#D9F8FF,#5AD8FF 45%,#8F86FF);box-shadow:0 0 8px rgba(90,216,255,.95),0 0 2px #fff}
.eyebrow::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(190,240,255,.16) 50%,transparent 65%);transform:translateX(-120%);animation:eyebrow-shine 7s ease-in-out infinite}
@keyframes eyebrow-shine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.eyebrow::after{animation:none}}
.h2{font-family:var(--serif);font-size:clamp(36px,3.8vw,54px);line-height:1.02;letter-spacing:.02em;text-transform:uppercase;color:var(--head);text-shadow:0 2px 24px rgba(90,140,255,.25)}
.h2 em{font-style:normal;background:linear-gradient(90deg,var(--cy-soft),var(--vi) 60%,var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(167,123,255,.45))}
.h2-sm{font-size:clamp(32px,3vw,44px)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lbl-g{color:var(--cy-soft)}
.lbl.c-v-soft{color:var(--v-soft)}
.lbl.c-e{color:var(--e-soft)}
.num{font-family:var(--display);font-weight:600;line-height:.95;color:var(--head);font-variant-numeric:lining-nums}
.num.c-v-soft{color:var(--v-soft)}
.num.c-e{color:var(--e-soft)}
.text{font-size:15px;line-height:1.7;color:var(--body)}
.card-title{font-family:var(--serif);font-size:22px;line-height:1.15;color:var(--head)}
.card-title-l{font-family:var(--serif);font-size:28px;line-height:1.1;color:var(--head)}
.card-note{font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------- Арт-слоты ---------- */
.art{position:relative;overflow:hidden;background:radial-gradient(80% 90% at 30% 15%,rgba(90,216,255,.16),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 13px),#0E1534}
.art::before{content:"";position:absolute;left:50%;top:46%;width:min(22%,120px);aspect-ratio:1/.95;transform:translate(-50%,-50%);background:linear-gradient(180deg,rgba(169,235,255,.26),rgba(169,235,255,.05));clip-path:polygon(30% 0,70% 0,100% 26%,50% 100%,0 26%)}
.art-v{background:radial-gradient(80% 90% at 65% 20%,rgba(167,123,255,.28),transparent 62%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 13px),#120F2E}
.art-e{background:radial-gradient(80% 90% at 65% 20%,rgba(255,138,76,.24),transparent 62%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 13px),#1A1324}
.no-gem::before,.art.has-art::before{display:none}
.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform .8s}
.art-img.is-loaded{opacity:1}
.has-art>.tag{display:none}
.tag{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;background:rgba(6,9,20,.82);border:1px dashed rgba(169,235,255,.42);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cy-soft);white-space:nowrap}
.tag-tr{top:16px;right:16px;left:auto;bottom:auto}
.tag-c{left:50%;bottom:12px;transform:translateX(-50%)}
.tag-xs{left:6px;bottom:6px;padding:3px 6px}

/* «выход за рамки»: вырезки персонажей поверх рамок */
.pop{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none}

/* ---------- Каркас ---------- */
main{display:block}
.wrap{max-width:calc(1280px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{position:relative;padding:104px 0 0}
.section-last{padding-bottom:104px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:32px}
.sec-head-tight{margin-bottom:22px}
.sec-title{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sec-note{font-size:13px;color:var(--muted2)}
.sec-lead{max-width:460px;font-size:15px;line-height:1.7;color:var(--body)}
.sec-sub{font-size:15px;color:var(--body)}
.link-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy-soft);text-decoration:none}
.link-more:hover{color:#fff;text-shadow:0 0 12px rgba(90,216,255,.8)}

/* ---------- Шапка ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:var(--nav-h);padding:0 var(--gutter);transition:background .3s,box-shadow .3s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(130,225,255,.45) 30%,rgba(224,92,255,.45) 70%,transparent);opacity:0;transition:opacity .3s}
.nav.is-scrolled,.nav.is-solid{background:rgba(7,11,28,.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 10px 40px -20px rgba(0,0,0,.8)}
.nav.is-scrolled::after,.nav.is-solid::after{opacity:1}
.nav-side{display:flex;align-items:center;gap:clamp(4px,.5vw,8px)}
.nav-l{justify-content:flex-end;padding-right:clamp(16px,3vw,48px)}
.nav-r{justify-content:flex-start;padding-left:clamp(16px,3vw,48px)}
.nl{--bh:36px;--pad:6px;font-size:13px;letter-spacing:.12em;color:#D3DCF7}
.nl.is-on{filter:drop-shadow(0 0 12px rgba(140,180,255,.55))}
.nav-cab{--bh:36px;--pad:8px;font-size:13px}
.nav-r .nav-cab{margin-left:auto}
.nav-logo{position:relative;display:block;width:104px;height:104px;margin-top:34px;filter:drop-shadow(0 6px 22px rgba(90,170,255,.55))}
.nav-logo img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s}
.nav-logo:hover img{transform:scale(1.05) rotate(-2deg)}
.nav.is-scrolled .nav-logo{width:70px;height:70px;margin-top:18px}
.nav-mlogo,.online-pill,.burger{display:none}
.online-pill{align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;font-size:12px;color:var(--body);background:rgba(30,44,96,.4);border:1px solid var(--line3);white-space:nowrap}
.online-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* ---------- Главный экран ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:max(780px,min(100svh,1040px));overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:#070B1E}
.hero-bg .art-img{object-position:50% 30%}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(60% 45% at 50% 34%,rgba(6,9,20,.0),rgba(6,9,20,.35) 70%),
  linear-gradient(180deg,rgba(6,9,20,.6) 0%,rgba(6,9,20,0) 18%,rgba(6,9,20,0) 52%,rgba(6,9,20,.78) 80%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%;padding-top:calc(var(--nav-h) + 48px);padding-bottom:40px}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:760px;margin:0 auto auto;padding-top:clamp(0px,3vh,40px);text-align:center}
.hero-title{display:flex;flex-direction:column;align-items:center;line-height:.86;filter:drop-shadow(0 0 30px rgba(110,170,255,.45)) drop-shadow(0 6px 0 rgba(6,10,30,.55))}
.ht-sm{display:flex;align-items:center;gap:22px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,34px);letter-spacing:.62em;padding-left:.62em;color:var(--cy-soft);text-shadow:0 0 18px rgba(90,216,255,.7)}
.ht-sm::before,.ht-sm::after{content:"";width:clamp(40px,7vw,110px);height:1px;background:linear-gradient(90deg,transparent,var(--cy))}
.ht-sm::after{background:linear-gradient(90deg,var(--cy),transparent)}
.ht-lg{font-family:var(--display);font-weight:800;font-size:clamp(84px,11vw,190px);letter-spacing:.05em;padding-left:.05em;background:linear-gradient(180deg,#FFFFFF 8%,#DDF6FF 34%,#8FD3FF 56%,#9C82FF 78%,#E07BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-lg{position:relative}
.ht-lg::before,.ht-lg::after{content:attr(data-text);position:absolute;inset:0;padding-left:.05em;pointer-events:none}
.ht-lg::before{z-index:-1;color:transparent;text-shadow:0 0 30px rgba(120,170,255,.95),0 0 70px rgba(167,123,255,.7);opacity:.25;animation:prime-glow 4.8s ease-in-out infinite}
.ht-lg::after{background:linear-gradient(100deg,transparent 40%,rgba(200,240,255,.4) 46%,#fff 50%,rgba(230,200,255,.4) 54%,transparent 60%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:prime-shine 7s ease-in-out 1.8s infinite}
@keyframes prime-glow{50%{opacity:.85}}
@keyframes prime-shine{0%{background-position:100% 0}20%,100%{background-position:0 0}}
.fx-ready .ht-lg{animation:prime-in 1.6s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes prime-in{from{opacity:0;letter-spacing:.32em;filter:blur(14px)}}
.fx-ready .ht-sm{animation:fade-up .9s .25s backwards}
.fx-ready .ht-sm::before{transform-origin:right;animation:line-grow 1.1s .6s backwards}
.fx-ready .ht-sm::after{transform-origin:left;animation:line-grow 1.1s .6s backwards}
.fx-ready .hero-copy>.eyebrow{animation:fade-up .8s .1s backwards}
.fx-ready .hero-sub{animation:fade-up .8s .7s backwards}
.fx-ready .hero-text{animation:fade-up .8s .85s backwards}
.fx-ready .hero-actions{animation:fade-up .8s 1s backwards}
.fx-ready .realms-live{animation:fade-up .8s 1.15s backwards}
.fx-ready .feat{animation:fade-up .9s backwards}
.fx-ready .feat:nth-child(1){animation-delay:1.2s}
.fx-ready .feat:nth-child(2){animation-delay:1.32s}
.fx-ready .feat:nth-child(3){animation-delay:1.44s}
.fx-ready .feat:nth-child(4){animation-delay:1.56s}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}}
@keyframes line-grow{from{transform:scaleX(0)}}
.hero-sub{font-family:var(--serif);font-size:clamp(20px,2vw,28px);letter-spacing:.3em;text-transform:uppercase;color:var(--gd-soft);text-shadow:0 0 20px rgba(242,196,109,.45)}
.hero-text{max-width:620px;font-size:17px;line-height:1.7;color:#D3DBF5;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
/* онлайн по реалмам: две плашки с гербами и кристальный медальон с общим онлайном */
.realms-live{--v-c:var(--v);--e-c:var(--e);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:min(700px,100%);margin-top:10px}
.rl{--c:var(--v-c);position:relative;display:flex;align-items:center;gap:12px;height:66px;padding:0 56px 0 82px;border-radius:16px;text-decoration:none;color:inherit;
  background:linear-gradient(90deg,color-mix(in oklab,var(--c) 22%,rgba(8,12,30,.7)),rgba(8,12,30,.72) 75%);
  border:1px solid color-mix(in oklab,var(--c) 45%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 26px -10px var(--c);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s,box-shadow .25s,border-color .25s}
.rl-e{--c:var(--e-c);justify-content:flex-end;padding:0 82px 0 56px;background:linear-gradient(270deg,color-mix(in oklab,var(--c) 22%,rgba(8,12,30,.7)),rgba(8,12,30,.72) 75%)}
.rl:hover{color:inherit;transform:translateY(-3px);border-color:color-mix(in oklab,var(--c) 75%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 34px -6px var(--c)}
/* герб выступает за край плашки */
.rl-crest{position:absolute;top:50%;left:-14px;width:84px;height:84px;transform:translateY(-50%);filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 10px color-mix(in oklab,var(--c) 60%,transparent));transition:transform .35s}
.rl-e .rl-crest{left:auto;right:-14px}
.rl:hover .rl-crest{transform:translateY(-50%) scale(1.08) rotate(-4deg)}
.rl-e:hover .rl-crest{transform:translateY(-50%) scale(1.08) rotate(4deg)}
.rl-info{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.rl-e .rl-info{text-align:right}
.rl-info b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.08em;white-space:nowrap;color:color-mix(in oklab,var(--c) 45%,#fff)}
.rl-info small{font-size:11px;color:var(--muted);white-space:nowrap}
.rl-num{display:flex;flex-direction:column;align-items:center;line-height:1;margin-left:auto}
.rl-e .rl-num{margin-left:0;margin-right:auto}
.rl-num b{font-family:var(--display);font-weight:800;font-size:28px;color:color-mix(in oklab,var(--c) 35%,#fff);text-shadow:0 0 18px color-mix(in oklab,var(--c) 70%,transparent);font-variant-numeric:tabular-nums}
.rl-num small{margin-top:3px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* центральный медальон: ромб с кристальной кромкой, внутри — общий онлайн */
.rl-total{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:118px;height:118px;margin:0 -40px;text-align:center}
.rl-total::before{content:"";position:absolute;inset:16px;z-index:-1;transform:rotate(45deg);border-radius:14px;
  background:linear-gradient(135deg,rgba(26,36,84,.96),rgba(8,12,30,.96)) padding-box,var(--crystal) border-box;border:2px solid transparent;
  box-shadow:0 0 30px -4px rgba(140,160,255,.75),inset 0 0 18px rgba(120,160,255,.25);animation:medal-glow 3.6s ease-in-out infinite}
.rl-total::after{content:"";position:absolute;inset:2px;z-index:-2;border-radius:50%;border:1px dashed rgba(169,235,255,.35);animation:spin 40s linear infinite}
@keyframes medal-glow{50%{box-shadow:0 0 44px -2px rgba(167,123,255,.9),inset 0 0 22px rgba(120,160,255,.35)}}
@keyframes spin{to{transform:rotate(360deg)}}
.rl-live{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ok-soft)}
.rl-live .dot-live{width:6px;height:6px;box-shadow:0 0 0 3px rgba(70,224,138,.16),0 0 8px var(--ok);animation:live 1.8s ease-in-out infinite}
@keyframes live{50%{box-shadow:0 0 0 6px rgba(70,224,138,0),0 0 12px var(--ok)}}
.rl-total b{margin:2px 0 1px;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;background:linear-gradient(180deg,#fff,var(--cy-soft) 55%,var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.rl-total small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}

/* карточки-преимущества с «редкостью» и иконкой, выходящей за верхний край */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%;max-width:var(--feat-w);margin:92px auto 0}
.feat{--q:var(--q-rare);position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;height:var(--feat-h);padding:82px 20px 20px;border-radius:18px;text-align:center;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,color-mix(in oklab,var(--q) 14%,rgba(14,20,48,.5)),rgba(8,12,30,.72));
  border:1px solid color-mix(in oklab,var(--q) 55%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 34px -8px color-mix(in oklab,var(--q) 70%,transparent),inset 0 0 42px -18px var(--q);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:transform .3s,box-shadow .3s}
.feat::after{content:"";position:absolute;z-index:1;left:18%;right:18%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--q),transparent);box-shadow:0 0 14px var(--q)}
.feat[data-q="legendary"]{--q:var(--q-legendary)}
.feat[data-q="epic"]{--q:var(--q-epic)}
.feat[data-q="artifact"]{--q:var(--q-artifact)}
.feat:hover{color:inherit;transform:translateY(-6px);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 54px -6px color-mix(in oklab,var(--q) 85%,transparent),inset 0 0 60px -16px var(--q)}
.feat-ico{position:absolute;z-index:2;left:50%;top:-74px;width:150px;height:150px;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));transition:transform .4s}
.feat:hover .feat-ico{transform:translateX(-50%) translateY(-8px) scale(1.06)}
.feat-ico{animation:ico-bob 5.5s ease-in-out infinite}
.feat:nth-child(2) .feat-ico{animation-delay:-1.4s}
.feat:nth-child(3) .feat-ico{animation-delay:-2.8s}
.feat:nth-child(4) .feat-ico{animation-delay:-4.1s}
@keyframes ico-bob{50%{translate:0 -7px}}
.feat-title,.feat-text,.feat-more{position:relative;z-index:1}
.feat-title{font-family:var(--serif);font-size:23px;line-height:1.1;color:color-mix(in oklab,var(--q) 80%,#fff);text-shadow:0 0 18px color-mix(in oklab,var(--q) 60%,transparent)}
.feat-text{font-size:14px;line-height:1.55;color:var(--body)}
.feat-text b{color:var(--head)}
.feat-more{margin-top:auto;font-family:var(--serif);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--q) 70%,#fff);opacity:.85}
.feat-more::after{content:" →"}

/* вырезки героев на первом экране.
   Верх карточек — на высоте --feat-top от низа героя. Сфера мага (82%/88% кадра) ложится
   на левый верхний угол первой карточки, кулак таурена (24%/78%) — на правый верхний угол
   последней. Поверх карточек — только сфера и кулак (pop-front с clip-path). */
.hero{--feat-w:1120px;--feat-h:250px;--feat-top:calc(46px + 40px + var(--feat-h));--mw:clamp(400px,29vw,560px);--ww:clamp(380px,29vw,600px)}
.pop-mage,.pop-warrior{z-index:2}
.pop-mage{width:var(--mw);left:calc(50% - var(--feat-w) / 2 + 34px - var(--mw) * .82);bottom:calc(var(--feat-top) - var(--mw) * 1.207 * .12)}
/* мягкие края обеих вырезок вшиты в картинки (tools/art/soft_edges.py): модель обрезала фигуры краем кадра */
.pop-warrior{width:var(--ww);left:calc(50% + var(--feat-w) / 2 - 20px - var(--ww) * .24);bottom:calc(var(--feat-top) + 10px - var(--ww) * 1.34 * .22)}
.pop-front{z-index:4}
.pop-mage.pop-front{clip-path:polygon(56% 64%,74% 60%,100% 62%,100% 100%,60% 100%,56% 84%)}
/* только кисть в латной перчатке: без ног и пояса ниже неё */
.pop-warrior.pop-front{clip-path:polygon(10% 66%,18% 61%,40% 59%,52% 63%,50% 74%,42% 82%,31% 87%,20% 88%,12% 84%,8% 75%)}

/* живые эффекты (assets/js/fx.js): частицы на canvas, светящиеся пятна, туман, параллакс */
.hero-fx{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.fx-glow{position:absolute;left:0;top:0;z-index:4;pointer-events:none;mix-blend-mode:screen}
.fx-moon,.fx-tower-win,.fx-tower-door,.fx-tower-tip{z-index:1}
.fx-glow::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--g);opacity:var(--o1,.5);animation:fx-pulse var(--d,3s) ease-in-out var(--dl,0s) infinite}
@keyframes fx-pulse{0%,100%{opacity:var(--o1,.5);transform:scale(.88)}50%{opacity:var(--o2,1);transform:scale(1.08)}}
.fx-orb{--g:radial-gradient(circle,rgba(235,210,255,.9),rgba(175,115,255,.55) 20%,rgba(110,90,255,.2) 44%,transparent 68%);--d:2.4s;--o1:.5}
.fx-hand{--g:radial-gradient(circle,rgba(225,235,255,.85),rgba(150,120,255,.4) 32%,transparent 68%);--d:1.7s;--dl:-.4s;--o1:.25}
.fx-hammer{--g:radial-gradient(circle,rgba(255,225,150,.7),rgba(255,140,40,.38) 30%,transparent 68%);--d:3.4s;--o1:.4}
.fx-gauntlet{--g:radial-gradient(circle,rgba(255,215,140,.65),rgba(255,120,30,.32) 32%,transparent 68%);--d:3.8s;--dl:-1.2s;--o1:.3}
.fx-pauldron{--g:radial-gradient(circle,rgba(255,210,130,.6),rgba(255,120,30,.28) 32%,transparent 68%);--d:4.4s;--dl:-2.1s;--o1:.25;--o2:.8}
.fx-moon{--g:radial-gradient(circle,transparent 26%,rgba(185,220,255,.32) 30%,rgba(140,170,255,.14) 44%,transparent 70%);--d:6s;--o1:.45}
.fx-tower-win,.fx-tower-door{--g:radial-gradient(circle,rgba(245,200,255,.95),rgba(190,100,255,.5) 24%,transparent 66%)}
.fx-tower-win::before{animation:fx-flicker 3.4s linear infinite}
.fx-tower-door::before{animation:fx-flicker 4.2s linear -1.6s infinite}
@keyframes fx-flicker{0%,100%{opacity:.45;transform:scale(.92)}18%{opacity:.95}22%{opacity:.55}40%{opacity:1;transform:scale(1.06)}58%{opacity:.6}61%{opacity:.9}80%{opacity:.5;transform:scale(.95)}}
.fx-tower-tip{--g:radial-gradient(circle,#fff,rgba(205,145,255,.65) 18%,rgba(150,100,255,.18) 40%,transparent 62%)}
.fx-tower-tip::before{animation:fx-beacon 4.6s ease-in-out infinite}
@keyframes fx-beacon{0%,66%,100%{opacity:.18;transform:scale(.6)}76%{opacity:1;transform:scale(1.3)}88%{opacity:.4;transform:scale(.9)}}
.hero-mist{position:absolute;left:0;right:0;bottom:0;height:44%;z-index:1;pointer-events:none;opacity:.55;
  background:radial-gradient(38% 55% at 20% 85%,rgba(120,140,255,.2),transparent 70%),radial-gradient(34% 48% at 72% 88%,rgba(170,120,255,.18),transparent 70%),radial-gradient(28% 40% at 46% 98%,rgba(90,200,255,.14),transparent 70%);
  background-size:150% 100%;animation:mist 28s ease-in-out infinite alternate}
@keyframes mist{from{background-position:0 0,100% 0,50% 0}to{background-position:60% 0,20% 0,0 0}}
/* параллакс фона за курсором: --px/--py ставит fx.js (−1…1); персонажи стоят на месте */
.hero-bg{transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -8px),0) scale(1.04)}

/* бегущая строка состояния */
.ticker{position:relative;z-index:5;height:46px;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line2);background:rgba(6,10,26,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:48px;width:max-content;font-size:13px;color:var(--body);animation:tick 70s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(calc(-50% - 24px))}}
.tick{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.tick b{color:var(--head);font-weight:600}
.dot-live{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(70,224,138,.16),0 0 10px var(--ok)}
.dia{width:6px;height:6px;flex:none;transform:rotate(45deg);background:var(--cy);box-shadow:0 0 8px var(--cy)}
.dia-e{background:var(--e);box-shadow:0 0 8px var(--e)}
.dia-v{background:var(--v);box-shadow:0 0 8px var(--v)}

/* ---------- Пульс мира (бенто) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.bento>.card{min-width:0}
.b-online{grid-column:span 5;display:flex;flex-direction:column;gap:16px;padding:26px 28px}
.b-boss{grid-column:span 4;display:flex;align-items:center;gap:20px;padding:24px}
.b-event{grid-column:span 3;display:flex;flex-direction:column;gap:12px;padding:24px}
.b-record{grid-column:span 3;display:flex;flex-direction:column;gap:10px;padding:24px}
.b-cadastre{grid-column:span 4;display:flex;flex-direction:column;gap:14px;padding:24px}
.b-stats{grid-column:span 5;display:flex;flex-direction:column;gap:16px;padding:24px 28px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ok-soft)}
.big-stat{display:flex;align-items:baseline;gap:14px;font-size:15px;color:var(--body)}
.num-xl{font-size:96px;background:linear-gradient(180deg,#fff,var(--cy-soft) 55%,var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(90,216,255,.35))}
.num-l{font-size:64px}
.b-cadastre .big-stat{font-size:14px;gap:12px}
.split-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.06)}
.split-bar .v{background:linear-gradient(90deg,#7C5CFF,var(--v));box-shadow:0 0 12px var(--v);transition:width .6s}
.split-bar .e{flex:1;background:linear-gradient(90deg,var(--e),#FFB070)}
.b-online-day{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.b-online-day b{color:var(--head);font-weight:600}
.boss-portrait{flex:none;width:128px;height:128px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,138,76,.6),0 0 30px -4px rgba(255,138,76,.7)}
.b-boss-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.b-boss-name{font-family:var(--serif);font-size:25px;line-height:1.1;color:var(--head)}
.b-boss-loc{font-size:13px;color:var(--muted)}
.b-boss-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ok-soft)}
.b-boss-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.b-boss-status.is-down{color:var(--muted)}
.b-boss-status.is-down .dot{background:var(--muted2);box-shadow:none}
.b-boss .btn-xs{align-self:flex-start;margin-top:4px}
.timer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.timer>span{display:flex;flex-direction:column;gap:2px;padding:9px 0 7px;border-radius:10px;background:rgba(90,216,255,.06);border:1px solid rgba(90,216,255,.2)}
.timer .num{font-size:28px;color:var(--cy-soft)}
.timer small{font-size:10px;color:var(--muted2)}
.b-record .num-l{color:var(--v-soft);text-shadow:0 0 24px rgba(176,140,255,.6)}
.b-record .card-title{font-size:22px}
.meter{display:flex;flex-direction:column;gap:6px}
.meter-bar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.06)}
.meter-bar .v{background:var(--v);box-shadow:0 0 10px var(--v);transition:width .6s}
.meter-bar .e{background:var(--e);box-shadow:0 0 10px var(--e);transition:width .6s}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.stats-grid>span{display:flex;flex-direction:column;gap:6px}
.stats-grid .num{font-size:40px}
.stats-grid small{font-size:13px;color:var(--muted)}

/* ---------- Хроники ---------- */
.news{display:flex;flex-wrap:wrap;gap:28px 40px}
.news-main{flex:7 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit}
.news-cover{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:18px;box-shadow:0 0 0 1px var(--line3),0 30px 60px -30px rgba(0,0,0,.8)}
.news-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,9,20,.55));pointer-events:none}
.news-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.news-main:hover .news-cover img{transform:scale(1.04)}
.news-meta{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.news-meta b{color:var(--cy-soft);font-weight:600}
.news-title{font-family:var(--serif);font-size:34px;line-height:1.12;color:var(--head);transition:color .2s}
.news-main:hover .news-title{color:var(--cy-soft)}
.news-lead{font-size:16px;line-height:1.7;color:var(--body)}
.news-list{flex:5 1 340px;min-width:0;display:flex;flex-direction:column;gap:10px}
.news-item{display:grid;grid-template-columns:68px minmax(0,1fr);gap:18px;align-items:center;padding:12px 14px 12px 12px;border-radius:16px;background:rgba(20,30,70,.28);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s}
.news-item:hover{border-color:rgba(90,216,255,.35);background:rgba(30,46,100,.36);transform:translateX(4px)}
.date-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;height:68px;border-radius:12px;background:linear-gradient(180deg,rgba(90,216,255,.12),rgba(167,123,255,.08));border:1px solid rgba(90,216,255,.22)}
.date-chip .num{font-size:28px;color:var(--cy-soft)}
.date-chip small{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.news-item-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.realm-lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.news-item-title{font-weight:600;font-size:16px;line-height:1.4;color:var(--text)}

/* ---------- Реалмы ---------- */
.compare{overflow-x:auto;padding:8px}
.compare-grid{display:grid;grid-template-columns:210px repeat(2,minmax(0,1fr));min-width:760px}
.compare-corner{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px}
.compare-corner-title{font-family:var(--serif);font-size:24px;line-height:1.15;color:var(--head)}
.compare-head{display:flex;flex-direction:column;gap:14px;padding:12px 12px 18px}
.compare-art{height:200px;border-radius:14px;box-shadow:0 0 0 1px var(--line3)}
.compare-name{display:flex;align-items:center;gap:12px;padding:0 8px}
.compare-name>span{display:flex;flex-direction:column;flex:1}
.compare-name>span>span{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;letter-spacing:.06em}
.compare-name small{font-size:13px}
.realm-crest{flex:none;display:block;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 10px var(--crest-glow));transition:transform .35s}
.realm-crest-v{--crest-glow:rgba(176,140,255,.55)}
.realm-crest-e{--crest-glow:rgba(255,138,76,.55)}
.compare-head:hover .realm-crest{transform:scale(1.08) rotate(-4deg)}
.compare-name{margin-top:-6px}
.realm-card-head{gap:12px}
.realm-card-head .realm-crest{width:52px;height:52px}
.realm-card-online{margin-left:auto}
.glow-v{filter:drop-shadow(0 0 10px rgba(176,140,255,.7))}
.glow-e{filter:drop-shadow(0 0 10px rgba(255,138,76,.7))}
.cmp-k,.cmp-v{padding:16px 20px;border-top:1px solid var(--line)}
.cmp-k{font-size:13px;font-weight:600;color:var(--muted)}
.cmp-v{font-size:15px;color:var(--text)}
.cv{background:rgba(176,140,255,.06)}
.ce{background:rgba(255,138,76,.05)}
.cmp-num{padding:12px 20px}
.cmp-num .num{font-size:36px}
.cmp-cta{padding:20px}

.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;gap:4px;margin-bottom:12px;border-radius:14px;background:rgba(20,30,70,.4);border:1px solid var(--line2)}
.seg-btn{min-height:42px;border-radius:10px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--body);background:transparent;border:1px solid transparent;cursor:pointer}
.seg-btn.is-on[data-realm-tab="crazy"]{color:#fff;background:rgba(176,140,255,.26);border-color:rgba(176,140,255,.7);box-shadow:0 0 20px -6px var(--v)}
.seg-btn.is-on[data-realm-tab="hardmode"]{color:#fff;background:rgba(255,138,76,.22);border-color:rgba(255,138,76,.7);box-shadow:0 0 20px -6px var(--e)}
.realm-card{display:flex;flex-direction:column;overflow:hidden}
.realm-card[hidden]{display:none}
.realm-card-art{height:170px}
.realm-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
.realm-card-head>span:not(.realm-card-online){display:flex;flex-direction:column;min-width:0}
.realm-card-name{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.05;letter-spacing:.05em}
.realm-card-head small{font-size:12px}
.realm-card-online{display:flex;flex-direction:column;align-items:flex-end}
.realm-card-online .num{font-size:30px}
.realm-card-online small{font-size:10px;color:var(--muted2)}
.realm-card-rows{display:flex;flex-direction:column;padding:0 18px}
.realm-card-rows>div{display:flex;flex-direction:column;gap:2px;padding:11px 0;border-top:1px solid var(--line)}
.realm-card-rows dt{font-size:10px}
.realm-card-rows dd{font-size:14px;color:var(--text)}
.realm-card-cta{padding:14px 18px 18px}

/* ---------- Кодекс (карусель) ---------- */
.carousel-nav{display:flex;gap:10px}
.scroller-wrap{position:relative}
.scroller{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px 4px 8px;margin:-14px -4px 0;scrollbar-width:none;overscroll-behavior-x:contain}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start}
.scroller-fade{position:absolute;top:0;right:0;bottom:0;width:120px;pointer-events:none;background:linear-gradient(90deg,rgba(6,9,20,0),var(--bg));transition:opacity .3s}
.scroller-wrap.at-end .scroller-fade{opacity:0}
.codex-card{flex:0 0 272px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.codex-art{aspect-ratio:3/4;border-radius:18px;box-shadow:0 0 0 1px var(--line3),0 20px 40px -20px rgba(0,0,0,.8);transition:box-shadow .3s,transform .3s}
.codex-art::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(180deg,transparent 60%,rgba(6,9,20,.5));pointer-events:none}
.codex-card:hover .codex-art{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(90,216,255,.6),0 0 40px -8px rgba(90,216,255,.6)}
.codex-card:hover .art-img{transform:scale(1.06)}
.badge-new{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#081230;background:var(--crystal);box-shadow:0 0 16px -2px rgba(140,180,255,.8)}
.codex-title{font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--head);transition:color .2s}
.codex-card:hover .codex-title{color:var(--cy-soft)}
.codex-text{font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- Ранги и Зал славы ---------- */
.split{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-start}
.ranks{flex:5 1 400px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:8px}
.rank-row{display:flex;align-items:flex-end;gap:8px;padding-top:8px}
.rank-legend{font-size:13px;line-height:1.6;color:var(--muted2)}
/* эмблемы рангов (assets/ui/ranks): картинка + буква на середине эмблемы.
   --ly — где у эмблемы середина под букву, --lc/--lg — цвет и свечение буквы */
.rank-row{align-items:flex-end;gap:6px}
.rank-emb{--s:64px;--ly:50%;--lc:#fff;--lg:rgba(255,255,255,.5);--fs:.27;position:relative;display:inline-flex;flex:none;width:var(--s);height:var(--s);transition:transform .3s}
.rank-emb img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.rank-emb b{position:absolute;left:50%;top:var(--ly);transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;font-size:calc(var(--s) * var(--fs));line-height:1;letter-spacing:-.02em;color:var(--lc);text-shadow:0 0 calc(var(--s) * .12) var(--lg),0 1px 2px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9)}
.rank-emb:hover{transform:translateY(-4px) scale(1.06)}
.re-d{--ly:49%;--lc:#D7DCEC;--lg:rgba(180,190,220,.35)}
.re-c{--ly:55%;--lc:#C9FFC0;--lg:rgba(30,255,0,.55)}
.re-b{--ly:50%;--lc:#CFE6FF;--lg:rgba(63,160,255,.7)}
.re-a{--ly:53%;--lc:#EBD6FF;--lg:rgba(176,77,255,.8)}
.re-s{--ly:57%;--lc:#FFE6BF;--lg:rgba(255,128,0,.85)}
.re-ss{--ly:60%;--lc:#FFF6DA;--lg:rgba(230,204,128,.9);--fs:.2}
.re-sss{--ly:52%;--lc:#fff;--lg:rgba(167,123,255,.95);--fs:.15}
.rank-chip{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.rc-ico{width:22px;height:22px;margin:-5px 0 -5px -6px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

.hall{flex:7 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:26px 28px 22px}
.hall-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.hall-title{display:flex;flex-direction:column;gap:6px}
.hall-name{font-family:var(--serif);font-size:32px;line-height:1.05;color:var(--head)}
.pill-switch{display:flex;padding:4px;gap:4px;border-radius:12px;background:rgba(20,30,70,.4);border:1px solid var(--line2)}
.pill-switch button{min-height:36px;padding:0 16px;border-radius:9px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--body);background:transparent;border:0;cursor:pointer}
.pill-switch button.is-on{color:#081230;background:var(--crystal);box-shadow:0 0 16px -4px rgba(140,180,255,.8)}
.table-scroll{overflow-x:auto}
.lad{width:100%;border-collapse:collapse;font-size:14px}
.lad th,.lad td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.lad th{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2)}
.lad tbody tr{transition:background .2s}
.lad tbody tr:hover{background:rgba(90,216,255,.05)}
.lad .lad-pos{width:36px;font-family:var(--display);font-weight:600;font-size:22px;color:var(--muted2)}
.lad th.lad-pos{font-family:var(--sans);font-size:11px}
.lad tr.top .lad-pos{color:var(--gd);text-shadow:0 0 12px rgba(242,196,109,.6)}
.lad-char{display:flex;flex-direction:column;min-width:0}
.lad-char b{font-weight:600;color:var(--cc,var(--head))}
.lad-char small{font-size:12px;color:var(--muted2)}
/* цвета классов (как в игре) и портрет расы со значком класса — иконки Wowhead в assets/ui/race и assets/ui/class */
.c-warrior{--cc:#C79C6E}.c-paladin{--cc:#F58CBA}.c-hunter{--cc:#ABD473}.c-rogue{--cc:#FFF569}.c-priest{--cc:#FFFFFF}
.c-dk{--cc:#C41F3B}.c-shaman{--cc:#2E8BFF}.c-mage{--cc:#69CCF0}.c-warlock{--cc:#9482C9}.c-druid{--cc:#FF7D0A}.c-dh{--cc:#A330C9}
.lad-who{display:flex;align-items:center;gap:14px;min-width:0}
.lad-ava{position:relative;flex:none;width:42px;height:42px;margin:2px 4px 2px 0}
.lad-ava img{display:block;object-fit:cover;background:var(--bg2)}
.lad-ava .la-race{width:100%;height:100%;border-radius:10px;border:1px solid var(--cc,var(--line3));box-shadow:0 0 0 1px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.5),0 0 16px -4px var(--cc,transparent)}
.lad-ava .la-cls{position:absolute;right:-7px;bottom:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--cc,var(--line3));box-shadow:0 0 0 2px var(--bg),0 2px 6px rgba(0,0,0,.6)}
.lad tbody tr:hover .lad-ava .la-race{box-shadow:0 0 0 1px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.5),0 0 20px -2px var(--cc,transparent)}
.rank-chip{padding:2px 8px;border-radius:6px;font-family:var(--display);font-size:11px;font-weight:800;line-height:1.5}
.rank-chip-sss{padding:3px 9px;color:#081230;background:var(--crystal);box-shadow:0 0 12px -2px rgba(167,123,255,.9)}
.rank-chip-ss{color:#2A1C04;background:linear-gradient(180deg,#FFF0C2,#E6B95A)}
.rank-chip-s{color:#2A1404;background:linear-gradient(180deg,#FFC27A,#FF7A00)}
.rank-chip-low{color:var(--body);border:1px solid var(--line3)}
.lad-rank-name{font-size:13px;color:var(--body)}
.lad-key{font-weight:600;color:var(--head)}
.lad-extra{color:var(--body)}
.lad-empty td{padding:28px 12px;text-align:center;white-space:normal;color:var(--muted)}
.hall-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted2)}
.hall-foot a{font-family:var(--serif);letter-spacing:.14em;text-transform:uppercase;font-size:14px;text-decoration:none;color:var(--cy-soft)}

/* ---------- Гардероб ---------- */
.shop{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.shop-frame{position:relative;flex:7 1 520px;min-width:0;display:flex}
.shop-art{flex:1;min-height:500px;border-radius:22px;box-shadow:0 0 0 1px var(--line3),0 0 60px -20px rgba(167,123,255,.6)}
.pop-drake{z-index:3;right:-8%;top:-15%;width:57%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,transparent 0,#000 16%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,transparent 0,#000 16%);mask-composite:intersect;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));animation:hover-fly 6s ease-in-out infinite}
@keyframes hover-fly{50%{transform:translate(-6px,-10px) rotate(-1deg)}}
.shop-caption{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;font-size:14px;line-height:1.55;color:var(--body)}
.shop-side{flex:5 1 360px;min-width:0;display:flex;flex-direction:column;gap:20px}
.bullets li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.bullet-dia{width:8px;height:8px;margin-top:7px;transform:rotate(45deg);background:var(--cy);box-shadow:0 0 10px var(--cy)}
.bullets li>span:last-child{display:flex;flex-direction:column;gap:3px}
.bullets b{font-weight:600;font-size:16px;color:var(--head)}
.bullets small{font-size:14px;color:var(--muted)}
.offer{display:flex;flex-direction:column;gap:14px;padding:20px}
.offer-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.offer-title{display:flex;align-items:center;gap:10px}
.offer-title>span:first-child{font-family:var(--serif);font-size:24px;color:var(--head)}
.chip-sale{padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;color:#2A1404;background:linear-gradient(180deg,#FFC27A,#FF7A00);box-shadow:0 0 12px -2px rgba(255,128,0,.8)}
.offer-timer{font-size:12px;color:var(--muted2)}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.offer-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.offer-art{aspect-ratio:1;border-radius:12px;box-shadow:0 0 0 1px rgba(176,77,255,.55),0 0 18px -6px rgba(176,77,255,.8)}
.offer-name{font-size:13px;color:var(--q-epic);filter:brightness(1.35)}
.offer-price{font-size:12px;color:var(--gd-soft)}
.offer-cta{align-self:flex-start}

/* ---------- Награды (билеты) ---------- */
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:22px}
.ticket{--cut:36%;display:flex;overflow:hidden;border-radius:22px}
.ticket-art{flex:0 0 var(--cut);min-height:320px}
.notch{position:absolute;left:calc(var(--cut) - 13px);width:26px;height:26px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--line3);z-index:3}
.notch-a{top:-13px}
.notch-b{bottom:-13px}
.ticket-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:26px 28px;border-left:2px dashed rgba(169,235,255,.22)}
.ticket-title{font-family:var(--serif);font-size:30px;line-height:1.05;color:var(--head)}
.ticket-list{display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.45;color:var(--body)}
.ticket-list li{display:flex;gap:10px;align-items:baseline}
.ticket-list li::before{content:"";width:5px;height:5px;flex:none;transform:translateY(-2px) rotate(45deg);background:var(--cy);box-shadow:0 0 8px var(--cy)}
.ticket-list-v li::before{background:var(--v);box-shadow:0 0 8px var(--v)}
.ticket-cta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}

/* ---------- Почему Prime ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:12px 22px}
.why{display:grid;grid-template-columns:34px 48px minmax(0,1fr);gap:16px;align-items:center;padding:14px 18px;border-radius:16px;background:rgba(20,30,70,.24);border:1px solid var(--line);transition:border-color .2s,background .2s}
.why:hover{border-color:rgba(90,216,255,.3);background:rgba(30,46,100,.32)}
.why b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--cy)}
.why img{display:block;width:48px;height:48px;border-radius:10px;box-shadow:0 0 0 1px var(--line3),0 0 16px -6px rgba(90,216,255,.6)}
.why>span{display:flex;flex-direction:column;gap:2px}
.why-title{font-weight:600;font-size:16px;color:var(--head)}
.why-text{font-size:14px;color:var(--muted)}

/* ---------- Путь в игру ---------- */
.start{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-start}
.steps-col{flex:7 1 480px;min-width:0;display:flex;flex-direction:column;gap:8px}
.steps{position:relative;display:flex;flex-direction:column}
.steps::before{content:"";position:absolute;left:27px;top:28px;bottom:84px;width:1px;background:linear-gradient(180deg,var(--cy),rgba(167,123,255,.15))}
.step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;padding-bottom:26px}
.step-num{display:flex;align-items:center;justify-content:center;width:56px;height:62px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#5AD8FF,#3A4FA8 8%,#141E48 60%,#0A1030);font-family:var(--display);font-weight:800;font-size:22px;color:var(--cy-soft)}
.step-1 .step-num{background:var(--crystal);color:#081230}
.step-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:6px}
.step-title{font-family:var(--serif);font-size:28px;line-height:1.1;color:var(--head)}
.step-text{font-size:15px;line-height:1.6;color:var(--muted)}
.step-body .btn-prime{margin-top:4px}
.help-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:16px 20px;border-radius:14px;background:rgba(20,30,70,.3);border:1px solid var(--line2);font-size:14px}
.help-bar b{font-weight:600;color:var(--head)}
.launcher{flex:5 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:18px 18px 22px}
.launcher-art{aspect-ratio:16/9;border-radius:14px;container-type:inline-size}
/* Портал на арте L-01. Координаты — доли кадра 1600×900: центр проёма 58.9% / 51%,
   проём 29.3% ширины и 55.2% высоты; кольцо рун арки — радиус 16–20% ширины. */
.portal{position:absolute;inset:0;z-index:1;pointer-events:none;--pcx:56.5%;--pcy:48%;opacity:.9;transition:opacity .5s}
.launcher-art:not(.has-art) .portal{display:none}
.launcher:hover .portal{opacity:1}
.portal>*{position:absolute;mix-blend-mode:screen}
.portal-vortex{left:calc(var(--pcx) - 14.75%);top:calc(var(--pcy) - 25%);width:29.5%;height:50%;border-radius:50%;overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.portal-vortex i{position:absolute;left:-15%;top:50%;width:130%;aspect-ratio:1;margin-top:-65%;border-radius:50%}
.pv-swirl{background:conic-gradient(from 0deg,transparent 0 6%,rgba(205,150,255,.6) 11%,transparent 19%,rgba(255,170,90,.38) 28%,transparent 36%,rgba(185,125,255,.55) 47%,transparent 56%,rgba(255,255,255,.32) 64%,transparent 72%,rgba(205,150,255,.5) 84%,transparent 93%);
  -webkit-mask-image:radial-gradient(circle,transparent 16%,#000 42%);mask-image:radial-gradient(circle,transparent 16%,#000 42%);filter:blur(3px);opacity:.75;animation:spin 26s linear infinite}
.pv-streaks{background:repeating-conic-gradient(from 10deg,rgba(225,180,255,0) 0deg,rgba(225,180,255,.4) 5deg,rgba(225,180,255,0) 12deg 26deg);
  -webkit-mask-image:radial-gradient(circle,transparent 22%,#000 46%,#000 62%,transparent 74%);mask-image:radial-gradient(circle,transparent 22%,#000 46%,#000 62%,transparent 74%);filter:blur(1.5px);opacity:.45;animation:spin 40s linear infinite reverse}
/* кольца сжимаются к центру — ощущение глубины и затягивания */
.pv-rings{background:repeating-radial-gradient(circle,rgba(200,150,255,0) 0 7%,rgba(215,170,255,.32) 9%,rgba(200,150,255,0) 11% 15%);animation:portal-pull 7s linear infinite}
.pv-rings-2{animation-delay:-3.5s}
@keyframes portal-pull{0%{transform:scale(1.35);opacity:0}25%{opacity:.7}100%{transform:scale(.55);opacity:0}}
.portal-core{left:calc(var(--pcx) - 9%);top:calc(var(--pcy) - 15.5%);width:18%;height:31%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,245,255,.5),rgba(200,150,255,.28) 45%,transparent 100%);animation:portal-breathe 5.5s ease-in-out infinite}
.portal-rim{left:calc(var(--pcx) - 15.7%);top:calc(var(--pcy) - 26.6%);width:31.4%;height:53.2%;border-radius:50%;
  background:radial-gradient(closest-side,transparent 80%,rgba(255,205,130,.75) 91%,rgba(255,150,70,.35) 96%,transparent 100%);animation:portal-breathe 4.2s ease-in-out -1.2s infinite}
@keyframes portal-breathe{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}
/* руны арки загораются по кругу: кольцо свечения + вращающийся конический «луч» в маске.
   Обёртка срезает низ кольца (там камни и земля) и не вращается. */
.portal-runes{left:calc(var(--pcx) - 22%);top:calc(var(--pcy) - 39.1%);width:44%;aspect-ratio:1;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 78%);mask-image:linear-gradient(180deg,#000 62%,transparent 78%)}
.portal-runes i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,transparent 76%,rgba(255,200,110,.85) 82%,rgba(255,160,70,.45) 89%,transparent 97%);
  -webkit-mask-image:conic-gradient(#000 0 7%,transparent 22% 78%,#000 93%);mask-image:conic-gradient(#000 0 7%,transparent 22% 78%,#000 93%);
  filter:blur(2px);opacity:.85;animation:spin 9s linear infinite}
/* искры затягиваются в центр по спирали; контейнер — на весь кадр, иначе проценты --pcx/--pcy считаются от точки 0×0
   и искры кружат в левом верхнем углу арта */
.portal-sparks{inset:0}
.portal-sparks span{position:absolute;left:var(--pcx);top:var(--pcy);width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#E2C8FF 35%,rgba(170,110,255,0) 70%);box-shadow:0 0 8px 2px rgba(180,120,255,.7);
  animation:portal-suck var(--d) linear var(--dl) infinite}
.portal-sparks .ps-o{background:radial-gradient(circle,#fff 0,#FFD9A0 35%,rgba(255,140,50,0) 70%);box-shadow:0 0 8px 2px rgba(255,150,60,.7)}
@keyframes portal-suck{0%{transform:rotate(var(--a)) translateX(calc(var(--r) * 1cqw)) scale(1);opacity:0}
  12%{opacity:1}80%{opacity:.85}100%{transform:rotate(calc(var(--a) + 260deg)) translateX(0) scale(.15);opacity:0}}
.launcher-info{display:flex;flex-direction:column;gap:6px;padding:0 6px;font-size:14px}
.launcher-btns{display:flex;flex-wrap:wrap;gap:10px;padding:0 6px}
.reqs{display:flex;flex-direction:column;margin:4px 6px 0;border-top:1px solid var(--line)}
.reqs .lbl{padding:14px 0 6px}
.reqs dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:7px 0;font-size:13px}
.reqs dt{color:var(--muted2)}
.reqs dd{color:var(--text)}

/* ---------- Сообщество ---------- */
.community{display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px;padding:34px;border-radius:24px;overflow:hidden}
.community::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(167,123,255,.35),transparent 70%);pointer-events:none;z-index:0}
.community-copy{flex:1 1 300px;display:flex;flex-direction:column;gap:12px}
.community-copy p{font-size:15px;line-height:1.6}
.socials{flex:2 1 520px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.social{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(20,30,70,.35);border:1px solid var(--line2);text-decoration:none;color:inherit;transition:border-color .2s,background .2s,box-shadow .2s}
.social:hover{color:inherit;border-color:rgba(90,216,255,.4);box-shadow:0 0 24px -8px rgba(90,216,255,.6)}
.social>span:last-child{display:flex;flex-direction:column}
.social b{font-weight:600;font-size:15px;color:var(--head)}
.social small{font-size:13px;color:var(--muted2)}
.social-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:12px;color:#fff;font-weight:700;font-size:14px}
.s-discord{background:linear-gradient(135deg,#5865F2,#3B2F9E)}
.s-telegram{background:linear-gradient(135deg,#2AABEE,#1A6FA8)}
.s-vk{background:linear-gradient(135deg,#3D7BFF,#2450B8)}
.s-forum{background:linear-gradient(135deg,#A77BFF,#6A3FD0)}

/* ---------- Подвал ---------- */
.foot{position:relative;border-top:1px solid var(--line2);background:linear-gradient(180deg,rgba(8,12,30,.6),#04060F)}
.foot .wrap{padding-top:52px;padding-bottom:28px}
/* WOW PRIME в подвале: кристальные буквы, появление по одной, волна блика, звёздочки-отблески */
.foot-mark{position:relative;isolation:isolate;display:flex;justify-content:center;gap:.3em;padding:.06em 0 .22em;font-family:var(--display);font-weight:800;font-size:clamp(64px,11vw,176px);line-height:1;letter-spacing:.05em;user-select:none}
.fm-word{display:flex}
.fm-l{--i:0;position:relative;display:inline-block;color:transparent;
  background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%),linear-gradient(180deg,#F6FBFF 0%,#CDEBFF 26%,#8FC4FF 50%,#8E74F2 76%,#432C8C 100%);
  background-size:320% 100%,100% 100%;background-position:110% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 16px rgba(110,160,255,.32)) drop-shadow(0 .05em 0 rgba(3,5,16,.95));
  animation:fm-shine 9s ease-in-out calc(2.4s + var(--i) * .09s) infinite;transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s}
.fm-l:hover{transform:translateY(-.06em);filter:drop-shadow(0 0 26px rgba(150,190,255,.75)) drop-shadow(0 .08em 0 rgba(3,5,16,.95))}
@keyframes fm-shine{0%{background-position:110% 0,0 0}16%,100%{background-position:-10% 0,0 0}}
/* появление: JS ставит fm-wait сразу и is-in, когда подвал виден; без JS буквы видны всегда */
.foot-mark.fm-wait:not(.is-in) .fm-l{opacity:0}
.foot-mark.is-in .fm-l{animation:fm-in 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .08s) backwards,fm-shine 9s ease-in-out calc(1.6s + var(--i) * .09s) infinite}
@keyframes fm-in{from{opacity:0;transform:translateY(.28em) scale(.96);filter:blur(12px)}}
/* звёздочка-отблеск на краю буквы */
.fm-glint{position:absolute;top:.08em;right:-.04em;width:.34em;height:.34em;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0,rgba(200,235,255,.9) 6%,transparent 22%),linear-gradient(90deg,transparent 46%,rgba(220,240,255,.95) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(220,240,255,.95) 50%,transparent 54%);
  filter:drop-shadow(0 0 6px rgba(150,210,255,.9));animation:fm-glint 6.6s ease-in-out calc(3s + var(--gd)) infinite}
@keyframes fm-glint{0%,8%,100%{opacity:0;transform:scale(.3) rotate(0)}4%{opacity:1;transform:scale(1) rotate(45deg)}}
/* дыхание свечения за надписью */
.fm-glow{position:absolute;left:50%;top:50%;z-index:-1;width:70%;height:90%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,150,255,.22),rgba(167,123,255,.1) 55%,transparent);filter:blur(20px);animation:fm-breathe 7s ease-in-out infinite}
@keyframes fm-breathe{50%{opacity:.45;transform:translate(-50%,-50%) scale(1.06)}}
/* кристальная линия с ромбом под надписью */
.fm-line{position:absolute;left:50%;bottom:0;width:min(62%,760px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(130,225,255,.7) 30%,rgba(224,92,255,.6) 70%,transparent)}
.fm-line::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:var(--crystal);box-shadow:0 0 12px rgba(167,123,255,.9)}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:32px;margin-top:36px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col p{font-size:14px;line-height:1.65;color:var(--muted)}
.foot-col a{color:var(--body);text-decoration:none;font-size:14px}
.foot-col a:hover{color:var(--cy-soft)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted2)}

/* ---------- Нижняя панель и мобильное меню (скрыты на десктопе) ---------- */
.tabbar{display:none}
.mmenu[hidden]{display:none}

/* =========================================================
   ≤1180 — без вырезок героев, карточки 2×2
   ========================================================= */
@media (max-width:1180px){
  .pop-mage,.pop-warrior{display:none}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:96px}
  .feat{height:auto;min-height:230px}
}
/* ≤1440 — в шапке без «Мира» и «Форума» (они есть в подвале и меню) */
@media (max-width:1440px){
  .nav-side .nl:nth-child(3){display:none}
}
/* ≤1100 — кнопки шапки компактнее */
@media (max-width:1100px){
  .nl,.nav-cab{--bh:34px;--pad:4px;font-size:12px;letter-spacing:.08em}
}
/* ≤1040 — бенто в 2 колонки */
@media (max-width:1040px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .b-online,.b-boss,.b-cadastre,.b-stats{grid-column:span 2}
  .b-event,.b-record{grid-column:span 1}
}

/* =========================================================
   ≤900 — мобильная раскладка
   ========================================================= */
@media (max-width:900px){
  :root{--tabbar-h:88px;--nav-h:60px;--page-bg:url(../art/page-bg-m.webp)}
  .d-only{display:none!important}

  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .wrap{padding:0 16px}
  .section{padding-top:64px}
  .section-last{padding-bottom:48px}
  .sec-head{gap:12px;margin-bottom:20px;flex-wrap:nowrap}
  .sec-title{gap:10px}
  .sec-head:has(.sec-lead){flex-direction:column;align-items:stretch;flex-wrap:wrap}
  .sec-lead{font-size:14px;line-height:1.6}
  .sec-sub{font-size:14px}
  .eyebrow{font-size:12px;letter-spacing:.22em}
  .h2{font-size:34px}
  .lbl{font-size:10px;letter-spacing:.18em}
  .tag{left:10px;bottom:10px;padding:4px 8px;font-size:9px}
  .tag-tr{top:12px;right:12px;left:auto;bottom:auto}
  .tag-c{left:50%}
  .tag-xs{left:5px;bottom:5px;padding:2px 5px}
  .link-more{font-size:13px;letter-spacing:.12em}
  .card,.glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

  /* шапка */
  .nav{display:flex;gap:10px;padding:0 16px;background:rgba(7,11,28,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .nav::after{opacity:1}
  .nav-side,.nav-logo{display:none}
  .nav-mlogo{display:flex;align-items:center;gap:8px;margin-right:auto;text-decoration:none;color:var(--head)}
  .nav-mlogo img{filter:drop-shadow(0 0 10px rgba(90,170,255,.6))}
  .nav-mlogo span{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.16em}
  .nav-mlogo:hover{color:var(--head)}
  .online-pill{display:inline-flex}
  .burger{display:inline-flex}

  /* главный экран */
  .hero{min-height:0}
  .hero-bg{bottom:auto;height:min(100%,960px);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .hero-bg .art-img{object-position:32% 0%}
  .hero-veil{background:linear-gradient(180deg,rgba(6,9,20,.45) 0%,rgba(6,9,20,0) 20%,rgba(6,9,20,.1) 45%,rgba(6,9,20,.85) 70%,var(--bg) 100%)}
  .hero-inner{padding-top:calc(var(--nav-h) + 40px);padding-bottom:28px}
  .hero-copy{gap:14px;padding-top:24px}
  .ht-sm{gap:12px;font-size:16px;letter-spacing:.5em;padding-left:.5em}
  .ht-sm::before,.ht-sm::after{width:34px}
  .ht-lg{font-size:clamp(70px,22vw,110px)}
  .hero-sub{font-size:17px;letter-spacing:.22em}
  .hero-text{font-size:15px;line-height:1.6}
  .hero-actions{flex-direction:column;align-self:stretch;gap:12px}
  .hero-actions .btn-prime,.hero-actions .btn-glass{width:100%}
  /* телефон: строки как в списке миров — общий онлайн сверху, реалмы в столбик */
  .realms-live{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:6px}
  .rl-total{grid-row:1;flex-direction:row;gap:8px;width:auto;height:auto;margin:0}
  .rl-total::before,.rl-total::after{display:none}
  .rl-total b{margin:0;font-size:24px}
  .rl,.rl-e{justify-content:flex-start;height:60px;gap:10px;padding:0 16px 0 72px;border-radius:14px}
  .rl-e{background:linear-gradient(90deg,color-mix(in oklab,var(--c) 22%,rgba(8,12,30,.7)),rgba(8,12,30,.72) 75%)}
  .rl-crest,.rl-e .rl-crest{left:-4px;right:auto;width:68px;height:68px}
  .rl-e .rl-info{order:1;text-align:left}
  .rl-e .rl-num{order:2;margin-left:auto;margin-right:0}
  .rl-info b{font-size:14px}
  .rl-num b{font-size:24px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 12px;margin-top:84px}
  .feat{min-height:0;gap:6px;padding:52px 12px 14px;border-radius:16px}
  .feat-ico{top:-50px;width:96px;height:96px}
  .feat-title{font-size:17px}
  .feat-text{font-size:12px;line-height:1.45}
  .feat-more{font-size:11px;letter-spacing:.14em}
  .ticker{height:40px}
  .ticker-track{gap:32px;font-size:12px;animation-duration:50s}
  @keyframes tick{to{transform:translateX(calc(-50% - 16px))}}
  .tick{gap:8px}

  /* бенто */
  .bento{gap:10px}
  .b-online{gap:12px;padding:20px}
  .num-xl{font-size:76px}
  .big-stat{gap:10px;font-size:14px}
  .split-bar{height:7px}
  .b-online .row-between.fs-13{font-size:12px}
  .b-online-day{margin-top:0;padding-top:0;border-top:0;font-size:12px}
  .b-boss{gap:16px;padding:16px}
  .boss-portrait{width:92px;height:92px}
  .boss-portrait .tag-c{bottom:8px;padding:2px 6px}
  .b-boss-body{gap:4px}
  .b-boss-name{font-size:21px}
  .b-boss-status{font-size:12px}
  .b-event,.b-record{gap:8px;padding:16px}
  .num-timer{font-size:26px;color:var(--cy-soft)}
  .b-event .card-title,.b-record .card-title{font-size:17px}
  .card-note{font-size:11px}
  .b-record .num-l{font-size:42px}
  .b-cadastre{gap:10px;padding:18px 20px}
  .b-cadastre .num-l{font-size:50px}
  .b-cadastre .big-stat{font-size:13px}
  .b-stats{padding:18px 20px}
  .stats-grid{gap:14px}
  .stats-grid>span{gap:4px}
  .stats-grid .num{font-size:32px}
  .stats-grid small{font-size:12px}

  /* хроники */
  .news{gap:10px}
  .news-main{flex-basis:100%;gap:10px}
  .news-cover{border-radius:16px}
  .news-meta{font-size:10px;letter-spacing:.18em}
  .news-title{font-size:26px;line-height:1.12}
  .news-lead{font-size:14px;line-height:1.6}
  .news-list{flex-basis:100%;gap:8px}
  .news-item{grid-template-columns:58px minmax(0,1fr);gap:12px;padding:10px}
  .date-chip{height:58px;border-radius:10px}
  .date-chip .num{font-size:24px}
  .date-chip small{font-size:9px;letter-spacing:.14em}
  .news-item-body{gap:4px}
  .realm-lbl{font-size:10px;letter-spacing:.16em}
  .news-item-title{font-size:14px;line-height:1.35}

  /* кодекс */
  .scroller{gap:12px;margin:-14px -16px 0;padding:14px 16px 8px;scroll-padding:0 16px}
  .codex-card{flex-basis:220px;gap:10px}
  .codex-art{border-radius:16px}
  .badge-new{top:10px;left:10px;padding:3px 9px;font-size:9px;letter-spacing:.14em}
  .codex-title{font-size:21px}
  .codex-text{font-size:13px;line-height:1.5}

  /* ранги и зал славы */
  .split{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px}
  .ranks{flex:none;gap:14px;padding-top:0}
  .text{font-size:14px;line-height:1.6}
  /* 7 эмблем в полный размер — 498px: на 360–400px растягивали «Ранги» и «Зал славы». Только .rank-row, ладдер не трогаем;
     размер буквы считается от --s из style, поэтому переопределяем и его */
  .rank-row{gap:4px;padding-top:0;flex-wrap:wrap}
  .rank-row .rank-emb{width:calc(var(--s) * .6);height:calc(var(--s) * .6)}
  .rank-row .rank-emb b{font-size:calc(var(--s) * var(--fs) * .6)}
  .hall{flex:none;gap:0;padding:18px 18px 8px}
  .hall-head{align-items:center;padding-bottom:8px}
  .hall-name{font-size:26px}
  .pill-switch button{min-height:30px;padding:0 12px;font-size:11px}
  .lad thead,.lad .lad-key,.lad .lad-extra,.lad .lad-rank-name{display:none}
  .lad tbody tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;border-top:1px solid var(--line)}
  .lad td{padding:11px 0;border:0;white-space:normal}
  .lad .lad-pos{width:auto;font-size:20px}
  .lad-char b{font-size:15px}
  .lad tbody tr.lad-empty{display:block}

  /* гардероб */
  .shop{flex-direction:column;gap:14px}
  .shop-frame{flex:none;margin-top:40px}
  .shop-art{min-height:300px;border-radius:18px}
  .pop-drake{width:58%;right:-4%;top:-26%}
  .shop-caption{left:12px;right:12px;bottom:12px;gap:4px;padding:14px;border-radius:14px;font-size:13px;line-height:1.5}
  .shop-caption .card-title-l{font-size:22px}
  .shop-side{flex:none;gap:14px}
  .bullets li{gap:12px;padding:12px 0}
  .bullet-dia{width:7px;height:7px}
  .bullets b{font-size:15px}
  .bullets small{font-size:13px}
  .offer{gap:12px;padding:16px}
  .offer-head{flex-wrap:nowrap}
  .offer-title{gap:8px}
  .offer-title>span:first-child{font-size:21px}
  .chip-sale{padding:2px 8px}
  .offer-timer{font-size:11px}
  .offer-grid{gap:8px}
  .offer-item{gap:4px}
  .offer-art{border-radius:10px}
  .offer-name{font-size:12px}
  .offer-cta{align-self:stretch}

  /* билеты */
  .tickets{gap:14px}
  .ticket{flex-direction:column;border-radius:20px}
  .ticket-art{flex:none;min-height:0;height:150px}
  .notch{top:137px;bottom:auto}
  .notch-a{left:-13px}
  .notch-b{left:auto;right:-13px}
  .ticket-body{gap:10px;padding:20px;border-left:0;border-top:2px dashed rgba(169,235,255,.22)}
  .ticket-title{font-size:26px}
  .ticket-cta{margin-top:4px}
  .ticket-cta .btn-md{flex:1}

  /* почему prime */
  .why-grid{gap:8px}
  .why{grid-template-columns:24px 40px minmax(0,1fr);gap:12px;padding:12px 14px}
  .why b{font-size:15px}
  .why img{width:40px;height:40px;border-radius:9px}
  .why-title{font-size:15px}
  .why-text{font-size:13px}

  /* путь в игру */
  .start{flex-direction:column;align-items:stretch;gap:14px}
  .steps-col{flex:none}
  .steps{padding-top:6px}
  .steps::before{left:21px;top:32px;bottom:44px}
  .step{grid-template-columns:44px minmax(0,1fr);gap:16px;padding-bottom:20px}
  .step-last{padding-bottom:12px}
  .step-num{width:44px;height:50px;font-size:18px}
  .step-body{gap:6px;padding-top:0}
  .step-title{font-size:23px}
  .step-text{font-size:14px}
  .step-body .btn-md{--bh:44px;font-size:13px}
  .launcher{flex:none;gap:14px;padding:14px 14px 18px}
  .launcher-art{border-radius:12px}
  .launcher-info{padding:0 4px}
  .launcher-info .card-title-l{font-size:24px}
  .launcher-btns{flex-direction:column;padding:0}
  .launcher-btns .btn-md{width:100%}
  .launcher-btns .ico{display:none}
  .reqs{margin:0;padding:0 4px}
  .reqs .lbl{padding:10px 0 4px}
  .reqs dl>div{grid-template-columns:96px minmax(0,1fr);padding:4px 0;font-size:12px}

  /* сообщество */
  .community{flex-direction:column;align-items:stretch;gap:14px;padding:20px}
  .community-copy{flex:none}
  .h2-sm{font-size:32px}
  .socials{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .social{gap:10px;padding:12px;border-radius:14px}
  .social small{display:none}
  .social b{font-size:14px}
  .social-ico{width:38px;height:38px;font-size:13px}

  /* подвал */
  .foot .wrap{padding-top:36px}
  .foot-mark{font-size:10.6vw;letter-spacing:.03em;gap:.26em}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:24px}
  .foot-col{gap:0}
  .foot-col .lbl{margin-bottom:4px}
  .foot-col a{display:flex;align-items:center;min-height:34px}
  .foot-bottom{display:block;margin-top:24px;padding-top:16px;font-size:11px;line-height:1.6}
  .foot-bottom span+span::before{content:". "}

  /* нижняя панель */
  .tabbar{position:fixed;z-index:30;left:max(12px,calc(50% - 240px));right:max(12px,calc(50% - 240px));bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:64px;padding:0 6px;border-radius:20px;background:rgba(8,12,32,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line3);box-shadow:0 12px 32px rgba(0,0,0,.6),0 0 30px -12px rgba(90,216,255,.5)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:0;text-decoration:none;font-family:inherit;font-size:10px;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer}
  .tab:hover,.tab.is-on{color:var(--cy-soft)}
  .tab-play{display:flex;align-items:center;justify-content:center;justify-self:center;width:56px;height:56px;margin-top:-22px;transform:rotate(45deg);border-radius:14px;background:var(--crystal);box-shadow:0 8px 24px rgba(120,160,255,.55),0 0 0 1px rgba(255,255,255,.35) inset;color:#081230}
  .tab-play:hover{color:#081230;filter:brightness(1.08)}
  .tab-play svg{transform:rotate(-45deg)}

  /* мобильное меню */
  .mmenu{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:radial-gradient(90% 40% at 50% 0%,rgba(167,123,255,.2),transparent 70%),radial-gradient(70% 30% at 50% 100%,rgba(90,216,255,.12),transparent 70%),var(--bg);animation:menuIn .25s ease both}
  @keyframes menuIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .mmenu-head{display:flex;align-items:center;justify-content:space-between;flex:none;height:60px;padding:0 16px;border-bottom:1px solid var(--line)}
  .mmenu-logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.16em;color:var(--head)}
  .mmenu-body{flex:1;display:flex;flex-direction:column;gap:16px;padding:18px 16px;overflow-y:auto}
  .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:16px;text-decoration:none;color:var(--head);background:rgba(20,30,70,.4);border:1px solid var(--line2);font-size:14px;font-weight:600}
  .tile:hover{color:var(--head);border-color:rgba(90,216,255,.4)}
  .tile-wide{grid-column:1/-1;flex-direction:row;align-items:center;background:linear-gradient(90deg,rgba(90,216,255,.16),rgba(167,123,255,.16));border-color:rgba(140,180,255,.4)}
  .tile .gico,.music-row .gico{opacity:1;filter:none}
  .gico{display:block;flex:none;object-fit:contain}
  .mmenu-group{display:flex;flex-direction:column}
  .mmenu-label{padding:6px 4px;font-family:var(--serif);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy-soft)}
  .sub{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 4px;text-decoration:none;color:var(--body);font-size:15px;border-bottom:1px solid var(--line)}
  .sub:hover{color:#fff}
  .sub small{font-size:12px;color:var(--muted2)}
  .mmenu-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:4px}
  .mmenu-socials a{display:flex;align-items:center;justify-content:center;height:48px;border-radius:14px;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
  .music-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-family:inherit;text-align:left;color:var(--body);background:rgba(20,30,70,.4);border:1px solid var(--line2);cursor:pointer}
  .music-row span{flex:1;font-size:14px}
  .music-row small{font-size:12px;color:var(--muted2)}
  .music-row[aria-pressed="true"]{border-color:rgba(90,216,255,.5)}
  .mmenu-foot{flex:none;display:flex;flex-direction:column;gap:10px;padding:16px 16px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);background:rgba(6,10,26,.9)}
  .mmenu-auth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mmenu-auth .btn-md{--bh:42px;--pad:2px;font-size:13px;letter-spacing:.06em}
}

@media (min-width:901px){
  .mmenu{display:none!important}
}

/* ---------- Анимации и доступность ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fm-l,.fm-glint,.fm-glow,.portal *,.rl-total::before,.rl-total::after,.rl-live .dot-live,.ticker-track,.mmenu,.hero-mist,.pop-drake,.feat-ico,.ht-lg::before,.ht-lg::after,.hero-actions .btn-prime,.nl.is-on::after{animation:none}
  .btn-prime:hover::after,.btn-glass:hover::after,.nl:hover::after,.btn-prime:hover::before,.btn-glass:hover::before,.nl:hover::before{animation:none}
  .scroller{scroll-behavior:auto}
}