/* Общий слой оформления «Стекло»: шрифт, палитра, фон и стеклянные поверхности
   для всех страниц сайта. Подключается ПОСЛЕ постраничного <style>, но на порядок
   не полагается: правила ниже начинаются с html, чтобы быть специфичнее
   постраничных .card / nav / :root и перебивать их в любом порядке.

   Размытие (backdrop-filter) стоит только на том, под чем прокручивается
   содержимое: шапка, модалки, поповеры. Обычные карточки полупрозрачны без
   размытия - фон и так мягкий, а лента из десятков размытых карточек сажает
   слабые телефоны. */

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(vendor/jetbrains-mono/jbm-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(vendor/jetbrains-mono/jbm-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:italic;font-weight:100 800;font-display:swap;src:url(vendor/jetbrains-mono/jbm-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:italic;font-weight:100 800;font-display:swap;src:url(vendor/jetbrains-mono/jbm-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Токены ─────────────────────────────────────────────────────────────────
   Имена те же, что в постраничных :root, поэтому всё, что красилось через
   var(--bg2) / var(--border), становится стеклом без правки страницы. */
html:root{
  --bg:      #110a0a;                    /* основа под фоном и тёмные вставки */
  --bg2:     rgba(255,255,255,.065);     /* стекло: карточки и панели */
  --bg3:     rgba(255,255,255,.105);     /* стекло плотнее: поля, приподнятое */
  --card:    rgba(255,255,255,.065);
  --border:  rgba(255,255,255,.13);
  --accent:  #ef3b33;
  --accent2: #fb8a3c;
  --glow:    rgba(239,59,51,.3);
  --text:    #fff5ef;
  --muted:   #b9a8a2;
  --ok:      #34d399;

  --jb: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --mono: var(--jb);
  --display: var(--jb);
  --g-over:  rgba(34,20,20,.66);         /* плотное стекло для того, что лежит поверх */
  --g-hi:    inset 0 1px 0 rgba(255,255,255,.17);
  --g-shadow:0 .75rem 2.4rem rgba(0,0,0,.24);
  --g-blur:  blur(26px) saturate(150%);
  --r:       1.4rem;                     /* карточки */
  --r-sm:    .9rem;                      /* поля, мелкие панели */
  --gut:     clamp(.9rem, 3.2vw, 9rem);  /* боковые поля страницы */
}

/* База растёт вместе с экраном: 15px на телефоне, ~16 на ноутбуке, 17 на
   FullHD, 18.5 на 2560, 21.5 на 4K. Постраничные размеры переведены в rem. */
html{font-size:clamp(15px, 12px + .25vw, 24px);background:#110a0a;-webkit-text-size-adjust:100%}

html body{
  font-family:var(--jb);
  font-variant-numeric:tabular-nums;
  background:transparent;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
html button, html input, html select, html textarea{font-family:var(--jb)}
/* Моноширинный шрифт шире гротеска: длинные ники и слова обязаны переноситься,
   а крупные заголовки - стоять плотнее. */
html h1, html h2, html h3{word-spacing:-.18em;letter-spacing:-.035em;overflow-wrap:anywhere}

/* ── Фон: четыре цветных пятна за всем содержимым ───────────────────────────
   Слой фиксированный и с z-index:-1, поэтому body обязан быть прозрачным:
   его собственный фон рисуется поверх отрицательных слоёв. */
html body::before{
  content:'';position:fixed;z-index:-1;inset:-18vmax;pointer-events:none;
  background:
    radial-gradient(52vmax 52vmax at 12% 10%, rgba(205,30,30,.82), transparent 72%),
    radial-gradient(46vmax 46vmax at 92% 34%, rgba(234,88,12,.5), transparent 72%),
    radial-gradient(54vmax 54vmax at 40% 78%, rgba(12,122,87,.6), transparent 72%),
    radial-gradient(44vmax 44vmax at 88% 96%, rgba(159,18,57,.55), transparent 72%);
  animation:glass-drift 40s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes glass-drift{to{transform:translate3d(5vmax,3.5vmax,0) scale(1.1)}}
@media(prefers-reduced-motion:reduce){html body::before{animation:none}}

html ::selection{background:rgba(239,59,51,.45);color:#fff}
html :focus-visible{outline:2px solid #4dedb4;outline-offset:2px}
html{scrollbar-color:rgba(255,255,255,.22) transparent}

/* ── Во всю ширину ──────────────────────────────────────────────────────────
   Никаких центральных колонок: контейнеры страниц тянутся от поля до поля. */
html main, html .wrap, html body > section, html #cta, html .container, html .page{
  max-width:none;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* ── Стеклянные поверхности ─────────────────────────────────────────────── */
html .card, html .panel, html .post-card, html .pubstat-card, html .pstop-card,
html .profile-card, html .game-row, html .tour-card, html .team-card,
html .about-card, html .player-card, html .achievement-card, html .hall-season,
html .blk, html .applist .item, html .role-list-item, html .free-list,
html .box, html .lobby-card, html .room-card, html .rp-card, html .wipe-card,
html .stat-card, html .tile{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--g-hi), var(--g-shadow);
}

/* То, что лежит ПОВЕРХ содержимого: плотнее и с размытием, иначе текст под
   панелью просвечивает и читать невозможно. */
html body > nav, html #nav, html body > header, html .modal-overlay > .modal, html .modal-box, html #nav-drawer,
html #react-pop, html #react-tip, html #rail-tip, html .auth-box,
html .dropdown, html .menu, html .popover, html .toast{
  background:var(--g-over);
  -webkit-backdrop-filter:var(--g-blur);
  backdrop-filter:var(--g-blur);
  border:1px solid var(--border);
  box-shadow:var(--g-hi), 0 1.2rem 3.4rem rgba(0,0,0,.45);
}
html .modal-overlay > .modal, html .modal-box, html .auth-box{border-radius:var(--r)}
html .modal-overlay, html .auth-overlay{
  background:rgba(12,6,6,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
html .auth-overlay{font-family:var(--jb);color:var(--text)}
/* Отказ в доступе закрывает страницу целиком - тут фон обязан быть глухим. */
html body.access-denied .auth-overlay{background:#110a0a}

/* ── Шапка: плавающая стеклянная пилюля ─────────────────────────────────── */
/* Только шапка сайта (прямой потомок body): у панели есть свой <nav> внутри <header>. */
html body > nav, html #nav{
  top:.75rem;left:var(--gut);right:var(--gut);
  justify-content:flex-start;gap:.5rem;
  border-radius:999px;
  padding-left:1.1rem;padding-right:.5rem;
  height:3.5rem;
}
html body > nav.scrolled{box-shadow:var(--g-hi), 0 1.2rem 3.4rem rgba(0,0,0,.5)}
html .nav-logo{
  background:none;-webkit-text-fill-color:currentColor;color:var(--text);
  font-size:1.05rem;
}
html .nav-links{gap:.15rem;margin:0 auto}
html .nav-links a{border-radius:999px;font-size:.82rem;padding:.42rem .8rem;color:#d9cbc5}
html .nav-links a:hover, html .nav-links a.active{background:rgba(255,255,255,.13);color:var(--text)}
html .nav-links a.btn-nav{border-color:var(--border);color:var(--text)}
html .nav-back{margin:0;padding:.42rem .8rem;border-radius:999px;font-size:.82rem;color:#d9cbc5}
html .nav-back:hover{background:rgba(255,255,255,.13);color:var(--text)}
html body > nav > .nav-auth{margin-left:auto}
html .nav-links ~ .nav-auth{margin-left:0}

/* Страницы без общей шапки (трекер, турниры, РП): поля даёт .wrap, а не body. */
html body{padding-left:0;padding-right:0}
html .wrap h1, html .wrap > header h1, html #topbar h1, html #head h1{
  background:none;-webkit-text-fill-color:currentColor;color:var(--text);
}
/* Панель: шапка-пилюля в том же ключе, что и на остальном сайте. */
html body > header{
  margin:.75rem var(--gut) 0;border-radius:999px;padding:.55rem 1.1rem;
}
html body > header nav{background:none;border:0;box-shadow:none;display:flex;gap:.15rem;flex-wrap:wrap}
html body > header nav a{border-radius:999px;padding:.4rem .75rem;font-size:.82rem;color:#d9cbc5;text-decoration:none}
html body > header nav a:hover{background:rgba(255,255,255,.13);color:var(--text)}

/* ── Кнопки и поля ──────────────────────────────────────────────────────── */
html .btn, html .btn-ghost, html .btn-secondary, html .btn-nav, html .btn-write,
html .mbtn-submit, html .mbtn-cancel, html .auth-btn, html .chip, html .fchip,
html .social-chip, html .react-chip, html .tag-opt, html .mini{
  border-radius:999px;
}
/* Главное действие - светлая пилюля: красная кнопка на красном пятне фона теряется. */
html .auth-btn:not(.google), html .btn-write, html .mbtn-submit, html .btn.primary,
html .btn-primary, html .btn.accent{
  background:var(--text);color:#1a0c0c;border-color:transparent;box-shadow:none;
}
html .auth-btn:not(.google):hover, html .btn-write:hover, html .mbtn-submit:hover,
html .btn.primary:hover, html .btn-primary:hover, html .btn.accent:hover{background:#fff}
html .auth-btn.google, html .btn-ghost, html .btn-secondary{
  background:rgba(255,255,255,.1);border:1px solid var(--border);color:var(--text);
}
html .auth-btn.google:hover, html .btn-ghost:hover, html .btn-secondary:hover{background:rgba(255,255,255,.18)}

html input[type=text], html input[type=search], html input[type=number],
html input[type=email], html input[type=password], html input[type=url],
html input[type=date], html input[type=datetime-local], html textarea, html select,
html .finput, html .ftextarea, html .fselect{
  background:rgba(0,0,0,.26);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--text);
}
html input:focus, html textarea:focus, html select:focus{border-color:rgba(255,255,255,.4)}
/* Выпадающий список рисует ОС: полупрозрачный фон там превращается в белый. */
html select option, html select optgroup{background:#201313;color:var(--text)}
html ::placeholder{color:rgba(255,232,220,.42)}

html .auth-box h2{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
html .auth-box input{background:rgba(0,0,0,.26);border-color:var(--border);border-radius:var(--r-sm)}
html .auth-sub, html .auth-sep{color:var(--muted)}

/* Таблицы: моноширинные цифры и так стоят столбиком, линии делаем тише. */
html table{font-variant-numeric:tabular-nums}
html th, html td{border-color:rgba(255,255,255,.09)}

html footer{border-color:var(--border)}

/* ══ ГЛАВНАЯ ════════════════════════════════════════════════════════════════
   Первый экран - плитка по утверждённому макету C:
     [ хиро: слоган, герб, кнопки ] [ КО              ]
     [            ...             ] [ игроки | победы ]
     [ топ игроков ] [ игры ] [ связь ]
   #public-stats и .pubstats-grid растворены (display:contents), чтобы их
   карточки стали плитками общей сетки; порядок задаёт order. */
html .bento{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;
  padding:5.25rem var(--gut) 0;
}
html .bento > section, html .bento-tile{max-width:none;margin:0;min-width:0}
html .bento > #hero, html .bento-tile, html .bento .pubstat-card, html .bento .pubstats-top, html .bento > #contact{
  background:var(--bg2);border:1px solid var(--border);border-radius:calc(var(--r) + .25rem);
  box-shadow:var(--g-hi), var(--g-shadow);padding:1.6rem 1.7rem;
}

/* Хиро: текст слева, герб уходит в правый нижний угол плитки. */
html .bento > #hero{
  order:0;grid-column:span 7;grid-row:span 2;
  min-height:clamp(26rem,62dvh,40rem);
  align-items:flex-start;justify-content:flex-start;text-align:left;
  padding:1.7rem 1.8rem;
}
html #hero::after{display:none}
html #hero .hero-tag{
  order:1;background:none;border:0;padding:0;margin:0;
  color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:.82rem;
}
html #hero .hero-tag::before{display:none}
html #hero .hero-sub{
  order:2;position:relative;z-index:2;margin:.9rem 0 0;max-width:11ch;
  font-size:clamp(1.9rem,4.1vw,3.9rem);font-weight:800;font-style:normal;line-height:1.05;
  letter-spacing:-.055em;word-spacing:-.18em;color:var(--text);
}
html #hero .hero-sub br{display:none}
html #hero .hero-video{order:3;position:relative;z-index:2}
html #hero .hero-acts{order:4;margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem;position:relative;z-index:2;padding-top:1.5rem}
html .hero-pill{
  display:inline-block;padding:.72rem 1.5rem;border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:var(--text);
}
html .hero-pill:hover{background:rgba(255,255,255,.18)}
html .hero-pill.pri{background:var(--text);color:#1a0c0c;border-color:transparent}
html .hero-pill.pri:hover{background:#fff}
html #hero .hero-title{position:absolute;right:1%;bottom:-7%;height:94%;max-width:62%;margin:0;z-index:1;pointer-events:none}
html #hero .hero-emblem{height:100%;width:auto}
html #hero .hero-emblem img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:right bottom;
  filter:drop-shadow(0 0 2.5rem rgba(220,38,38,.5))}
html #hero .hero-emblem::before{display:none}
/* Плашка побед в хиро уступила место отдельной плитке; элемент остаётся в DOM - с ним работает скрипт. */
html #hero .hero-temple-badge{display:none}

/* Статистика: карточки - самостоятельные плитки сетки. */
html .bento > #public-stats{display:contents}
html .bento .pubstats-grid{display:contents}
html .bento #ps-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html .bento .pubstat-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:10.5rem;flex:none}
html .bento .pubstat-card:first-child{order:1;grid-column:span 5}
html .bento .pubstat-card:nth-child(2){order:2;grid-column:span 2}
html .ps-val{font-size:clamp(1.9rem,3.6vw,3.9rem);letter-spacing:-.06em;word-spacing:-.3em;line-height:1;
  background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
html .bento .pubstat-card:nth-child(2) .ps-val{font-size:clamp(1.9rem,2.8vw,3rem)}
html .bento .t-win{
  order:3;grid-column:span 3;display:flex;flex-direction:column;justify-content:flex-end;min-height:10.5rem;
  background:rgba(77,237,180,.1);border-color:rgba(77,237,180,.28);
}
html .bento .t-win b{font-size:clamp(1.9rem,2.8vw,3rem);font-weight:800;letter-spacing:-.06em;word-spacing:-.25em;line-height:1;color:#4dedb4}
html .bento .t-win span, html .ps-lbl{color:var(--muted);font-size:.85rem;margin-top:.65rem}
/* Плитки высокие (их тянет хиро), поэтому верх занят делом, а цифра растёт вместе с плиткой:
   cqw - доля ширины самой плитки, число занимает её почти целиком на любом экране. */
html .bento .pubstat-card, html .bento .t-win{container-type:inline-size}
html .bento .pubstat-card:first-child .ps-val{font-size:clamp(2rem,14.5cqw,12rem)}
html .bento .pubstat-card:nth-child(2) .ps-val{font-size:clamp(2rem,34cqw,10rem)}
html .bento .t-win b{font-size:clamp(1.9rem,17cqw,9rem)}
html .ps-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:auto;padding-bottom:1.2rem}
html .ps-mini b{display:block;font-size:clamp(1rem,3.6cqw,3rem);font-weight:800;letter-spacing:-.04em;word-spacing:-.25em;line-height:1.1}
html .ps-mini span{display:block;color:var(--muted);font-size:.74rem;line-height:1.35;margin-top:.3rem}
/* В узкой плитке игроков мини-цифра одна, поэтому её размер считается от ширины плитки крупнее. */
html .ps-mini--one{grid-template-columns:1fr}
html .ps-mini--one b{font-size:clamp(1rem,11cqw,3rem)}
html .win-flames{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:auto;padding-bottom:1rem}
html .win-flames img{width:clamp(1.7rem,11cqw,4.2rem);height:clamp(1.7rem,11cqw,4.2rem);image-rendering:pixelated;filter:drop-shadow(0 .25rem .5rem rgba(0,0,0,.4))}

html .bento .pubstats-top{order:4;grid-column:span 5;grid-template-columns:1fr;gap:0;align-content:start}
html .bento .pubstats-top::before{content:"Лучшие за все вайпы";font-weight:700;font-size:1rem;margin-bottom:.5rem}
html .pstop-card{background:none;border:0;border-radius:0;box-shadow:none;padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);align-items:baseline;gap:.8rem}
html .pstop-card:last-child{border-bottom:0}
html .pstop-rank{font-size:.9rem;color:var(--accent);min-width:1rem}
html .pstop-nick{font-size:.95rem;margin:0}
html .pstop-card > div:last-child{display:flex;flex-wrap:wrap;gap:.15rem 1rem;align-items:baseline;flex:1;justify-content:space-between}
html .pstop-line{font-size:.76rem}

html .bento .t-games{order:5;grid-column:span 4}
html .bento .t-games h2, html .bento #contact .section-title{font-size:1rem;font-weight:700;letter-spacing:-.02em;word-spacing:normal;margin:0 0 .6rem}
html .bento .t-games h2 a{color:inherit;text-decoration:none}
html .bento .t-games ul{list-style:none;margin:0;padding:0}
html .bento .t-games li a{display:flex;align-items:center;justify-content:space-between;padding:.42rem 0;color:var(--text);text-decoration:none;font-size:.9rem}
html .bento .t-games li span{font-size:.76rem;font-weight:600;padding:.2rem .8rem;border-radius:999px;background:rgba(255,255,255,.12)}
html .bento .t-games li a:hover span{background:var(--text);color:#1a0c0c}

html .bento > #contact{order:6;grid-column:span 3;display:flex;flex-direction:column}
html .bento #contact .section-desc{font-size:.85rem;line-height:1.5}
html .contact-links{margin-top:auto;padding-top:1rem;gap:.6rem;flex-direction:column}
html .contact-btn{border-radius:999px;padding:.65rem 1.2rem;background:rgba(255,255,255,.1);border:1px solid var(--border);justify-content:center}
html .contact-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);box-shadow:none;transform:none}
html .bento > #hall-section{order:7;grid-column:1 / -1;padding:1.5rem 0 0}

html #news{padding-top:3rem;padding-bottom:4rem}
html .news-header{margin-bottom:1.2rem}
/* Лента в один столбец: одна новость в строке. Длину строки текста держим в пределах чтения. */
html .news-feed{display:flex;flex-direction:column;gap:1rem}
html .post-card .post-body, html .post-card .post-content{max-width:95ch}
html .feed-more{
  align-self:center;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  padding:.7rem 1.5rem;border-radius:999px;font-weight:700;font-size:.9rem;
  background:rgba(255,255,255,.1);border:1px solid var(--border);color:var(--text);
}
html .feed-more:hover{background:rgba(255,255,255,.18)}
html .feed-more span{color:var(--muted);font-weight:600}
html .post-card{padding:1.4rem 1.5rem}
html .post-card:hover{border-color:rgba(255,255,255,.26)}
html .post-card.pinned{border-color:rgba(239,59,51,.5)}
html .footer-logo{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
html footer{padding-left:var(--gut);padding-right:var(--gut)}

/* Лента и живой чат рядом: слева новости, справа чат, прилипший к окну. */
html .news-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(19rem,1fr);gap:1rem;align-items:start}
html .news-col{min-width:0}
html .chat{
  position:sticky;top:5rem;height:calc(100dvh - 6rem);min-height:22rem;
  display:flex;flex-direction:column;min-width:0;
  background:var(--bg2);border:1px solid var(--border);border-radius:calc(var(--r) + .25rem);
  box-shadow:var(--g-hi), var(--g-shadow);padding:1.2rem 1.3rem 1.1rem;
}
html .chat-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
html .chat-head .section-title{margin:0}
html .chat-note{color:var(--muted);font-size:.76rem}
html .chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.55rem;padding-right:.3rem;scrollbar-width:thin}
html .chat-msg{padding:.55rem .75rem;border-radius:var(--r-sm);background:rgba(255,255,255,.06);max-width:100%}
html .chat-msg.mine{background:rgba(255,255,255,.12)}
html .chat-meta{display:flex;align-items:baseline;gap:.6rem;font-size:.78rem}
html .chat-meta a{color:var(--accent2);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
html .chat-meta a:hover{text-decoration:underline}
html .chat-meta time{color:var(--muted);font-size:.72rem}
html .chat-acts{margin-left:auto;display:flex;gap:.1rem;opacity:0}
html .chat-msg:hover .chat-acts, html .chat-acts:focus-within{opacity:1}
html .chat-act{display:grid;place-items:center;background:none;border:0;border-radius:.4rem;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;width:1.6rem;height:1.5rem;padding:0}
html .chat-act:hover{color:var(--text);background:rgba(255,255,255,.12)}
html .chat-quote{display:block;width:100%;text-align:left;margin-top:.3rem;padding:.25rem .55rem;border:0;border-left:2px solid var(--accent2);
  border-radius:.3rem;background:rgba(0,0,0,.22);color:var(--muted);font-size:.78rem;line-height:1.4;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .chat-quote b{color:var(--text);font-weight:700}
html .chat-quote.gone{cursor:default;font-style:italic}
html .chat-img{display:block;margin-top:.4rem;max-width:100%;max-height:16rem;border-radius:.7rem;cursor:zoom-in;object-fit:cover}
html .chat-chips, html .chat-pick{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
html .chat-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .5rem;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid transparent;color:var(--text);font-size:.8rem;line-height:1.5}
html .chat-chip span{font-size:.74rem;font-weight:700;color:var(--muted)}
html .chat-chip.on{background:rgba(239,59,51,.2);border-color:rgba(239,59,51,.5)}
html .chat-chip.on span{color:var(--text)}
html .chat-pick{padding:.3rem;border-radius:999px;background:rgba(0,0,0,.3);width:max-content;max-width:100%}
html .chat-pick button{background:none;border:0;cursor:pointer;font-size:1.05rem;line-height:1;padding:.2rem .3rem;border-radius:.5rem}
html .chat-pick button:hover{background:rgba(255,255,255,.16)}
html .chat-msg.flash{box-shadow:0 0 0 2px var(--accent2)}
html .chat-draft-row{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;padding:.4rem .6rem;border-radius:.7rem;
  background:rgba(0,0,0,.24);color:var(--muted);font-size:.78rem}
html .chat-draft-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .chat-draft-row b{color:var(--text)}
html .chat-draft-row img{width:2.2rem;height:2.2rem;border-radius:.4rem;object-fit:cover;flex:none}
html .chat-draft-row button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 .2rem}
html .chat-draft-row button:hover{color:var(--text)}
html .chat-attach{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid var(--border);color:var(--text)}
html .chat-attach:hover{background:rgba(255,255,255,.18)}
html .chat-text{font-size:.88rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.15rem}
html .chat-empty{margin:auto;color:var(--muted);font-size:.85rem;text-align:center}
html .chat-form{display:flex;gap:.5rem;margin-top:.6rem;align-items:flex-end}
html .chat-form textarea{flex:1;min-width:0;resize:none;padding:.6rem .8rem;font-size:.88rem;line-height:1.4;max-height:7rem;field-sizing:content}
html .chat-send{flex:none;border:0;border-radius:999px;padding:.6rem 1.1rem;font-weight:700;font-size:.85rem;cursor:pointer;background:var(--text);color:#1a0c0c}
html .chat-send:hover{background:#fff}
html .chat-err{color:#ff8a80;font-size:.78rem;min-height:1rem;margin-top:.3rem}
html .chat-guest{display:none;margin:auto;text-align:center;color:var(--muted);font-size:.9rem}
html .chat-guest p{margin-bottom:.9rem}
html .chat-guest .auth-btn{width:auto;padding:.6rem 1.4rem}
html .chat--guest .chat-log, html .chat--guest .chat-form, html .chat--guest .chat-err, html .chat--guest .chat-draft{display:none}
html .chat--guest .chat-guest{display:block}
/* На удаление с телефона наведения нет - крестик виден всегда. */
@media(hover:none){html .chat-acts{opacity:1}}
@media(max-width:1000px){
  html .news-split{grid-template-columns:1fr}
  html .chat{position:static;height:26rem;order:-1}
}

/* Упоминания: ссылка на профиль в тексте, подсказка ников при наборе и колокольчик в шапке. */
html .mention{color:var(--accent2);font-weight:700;text-decoration:none;border-radius:.3rem;padding:0 .15rem}
html .mention:hover{text-decoration:underline}
html .mention.me{background:rgba(251,138,60,.22);color:#ffd2b0}
html .chat-msg.pinged{box-shadow:inset 3px 0 0 var(--accent2);background:rgba(251,138,60,.13)}
html #mention-pop, html #ping-pop{
  position:fixed;z-index:1200;display:none;
  background:var(--g-over);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--g-hi), 0 1.2rem 3rem rgba(0,0,0,.5);
}
html #mention-pop{padding:.3rem;min-width:11rem}
html #mention-pop button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:.5rem;cursor:pointer;
  color:var(--text);font-size:.85rem;padding:.4rem .6rem}
html #mention-pop button.on, html #mention-pop button:hover{background:rgba(255,255,255,.14)}
html .ping-btn{position:relative;display:inline-grid;place-items:center;padding:.45rem .6rem}
html .ping-count{position:absolute;top:-.3rem;right:-.3rem;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.66rem;font-weight:800;line-height:1.15rem;text-align:center}
html #ping-pop{width:min(23rem,calc(100vw - 1rem));max-height:min(70dvh,30rem);overflow-y:auto;padding:.4rem}
html .ping-item{display:grid;gap:.15rem;width:100%;text-align:left;background:none;border:0;border-radius:.6rem;cursor:pointer;
  color:var(--text);font-size:.84rem;padding:.55rem .65rem}
html .ping-item:hover{background:rgba(255,255,255,.1)}
html .ping-item b{color:var(--accent2)}
html .ping-item em{font-style:normal;color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .ping-item time{color:var(--muted);font-size:.7rem}
html .ping-clear{display:block;width:100%;margin-top:.3rem;padding:.5rem;border:0;border-top:1px solid rgba(255,255,255,.1);
  background:none;color:var(--muted);font-size:.78rem;cursor:pointer}
html .ping-clear:hover{color:var(--text)}
html .ping-empty{padding:1rem;color:var(--muted);font-size:.84rem;text-align:center}

/* Боковые ленты аватарок состава висят по краям окна: когда они показаны,
   раздвигаем поля, иначе контент во всю ширину заезжает под них. */
@media(min-width:1401px){
  html body:has(.team-rail){--gut:6.5rem}
}
@media(max-width:1000px){
  html .bento > #hero, html .bento .pubstat-card:first-child, html .bento .pubstats-top,
  html .bento .t-games, html .bento > #contact{grid-column:1 / -1}
  html .bento .pubstat-card:nth-child(2), html .bento .t-win{grid-column:span 6}
  html .bento > #hero{grid-row:auto;min-height:24rem}
  html #hero .hero-title{height:70%;max-width:70%;right:-4%;opacity:.9}
  html .bento .pubstat-card, html .bento .t-win{min-height:7.5rem}
}

/* ══ ПОВЕРХ СОДЕРЖИМОГО: страховка ══════════════════════════════════════════
   Окна внутри затемняющих оверлеев называются на страницах по-разному. Ловим
   их по смыслу имени, чтобы ни одно не осталось полупрозрачным без размытия. */
html [class*="overlay"] > [class*="modal"], html [class*="overlay"] > [class*="box"],
html [class*="overlay"] > [class*="dialog"], html [class*="overlay"] > [class*="card"],
html [class*="modal"] > [class*="box"]{
  background:var(--g-over);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--g-hi), 0 1.2rem 3.4rem rgba(0,0,0,.45);
}
/* Прилипающие ячейки таблиц и выпадающие подсказки: под ними едет текст,
   поэтому фон глухой - стекло тут дало бы кашу из наложенных строк. */
html th, html td.nick, html th.nick, html .ac-list{background:#241616}
html .ac-list{border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 1rem 2.4rem rgba(0,0,0,.5)}

/* Плашка «подтвердите почту» встаёт под шапку-пилюлю и повторяет её форму. */
html .verify-banner{
  font-family:var(--jb);left:var(--gut);right:var(--gut);
  border-radius:var(--r-sm);
}
/* Шапки, где ссылки лежат прямо в <nav> без списка (заявки): тот же вид пилюль. */
html body > nav > a:not(.nav-logo):not(.nav-back){padding:.42rem .8rem;border-radius:999px;font-size:.82rem;color:#d9cbc5;text-decoration:none}
html body > nav > a:not(.nav-logo):not(.nav-back):hover{background:rgba(255,255,255,.13);color:var(--text)}

/* ══ ПРОФИЛЬ ════════════════════════════════════════════════════════════════
   Плитка во всю ширину: слева карточка игрока, справа цифры, ниже награды. */
html .profile-wrap{max-width:none;width:100%}
/* Страница профиля центровала карточку по вертикали; плитка начинается сверху, под шапкой. */
html main:has(.profile-wrap){align-items:flex-start;padding-top:5.5rem}
html .nav-logo, html .nav-back{white-space:nowrap}
html .pf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;align-items:stretch}
html .pf-tile{
  min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:calc(var(--r) + .25rem);
  box-shadow:var(--g-hi), var(--g-shadow);padding:1.6rem 1.7rem;
}
html .pf-main{grid-column:span 5;grid-row:span 2;margin:0;max-width:none;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
html .pf-main::before{display:none}
html .pf-main .profile-avatar{width:7.5rem;height:7.5rem;border-radius:1.6rem;margin:0 0 1.2rem}
html .pf-main .profile-nick{font-size:clamp(1.9rem,3.4vw,3.4rem);line-height:1.05;letter-spacing:-.055em;margin:0 0 .7rem;
  background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
html .pf-main .profile-roles{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
html .pf-main .profile-bio{max-width:52ch;text-align:left;margin:0 0 1.1rem;color:var(--muted);line-height:1.6}
html .pf-main .socials{justify-content:flex-start;margin-bottom:1.2rem}
html .pf-main .btn-edit{margin-top:auto;border-radius:999px;background:rgba(255,255,255,.1);color:var(--text)}
html .pf-main .btn-edit:hover{background:rgba(255,255,255,.18);border-color:var(--border);color:var(--text)}
html .pf-stat{display:flex;flex-direction:column;justify-content:flex-end;min-height:9.5rem;grid-column:span 2}
html .pf-stat b{font-size:clamp(1.8rem,2.7vw,2.9rem);font-weight:800;letter-spacing:-.06em;word-spacing:-.3em;line-height:1}
html .pf-stat span{color:var(--muted);font-size:.85rem;margin-top:.65rem;line-height:1.35}
html .pf-ko{grid-column:span 7}
html .pf-ko b{font-size:clamp(2.1rem,4.4vw,4.6rem)}
html .pf-wins{grid-column:span 3;background:rgba(77,237,180,.1);border-color:rgba(77,237,180,.28)}
html .pf-wins b{color:#4dedb4}
html .pf-empty b{color:var(--muted)}
html .pf-medals{grid-column:1 / -1}
html .pf-medals{text-align:center}
html .pf-medals h2{font-size:1rem;font-weight:700;letter-spacing:-.02em;word-spacing:normal;margin:0 0 1rem}
html .pf-none{margin-left:auto;margin-right:auto}
html .medal-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem 1.4rem}
html .medal{margin:0;display:grid;justify-items:center;gap:.45rem}
/* Огоньки нарисованы пиксель-артом 16x16: сглаживание превратило бы их в кашу. */
html .medal img{width:4.5rem;height:4.5rem;image-rendering:pixelated;filter:drop-shadow(0 .4rem .9rem rgba(0,0,0,.45));transition:transform .15s}
html .medal:hover img{transform:translateY(-3px) scale(1.06)}
html .medal figcaption{font-size:.74rem;color:var(--muted);font-weight:600}
html .pf-none{color:var(--muted);font-size:.88rem;max-width:60ch}
@media(max-width:1000px){
  html .pf-stat{grid-column:span 6;min-height:7.5rem}
  html .pf-main, html .pf-ko, html .pf-wins{grid-column:1 / -1}
  html .pf-main{grid-row:auto}
}
@media(prefers-reduced-motion:reduce){html .medal img{transition:none}}