body { background: #09090f; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; overflow-y: scroll; }

    /* Glass — premium glassmorphism */
    .glass {
      background: rgba(25,25,35,.58);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 16px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 32px rgba(0,0,0,.35);
    }

    /* Global animations */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(12px) scale(.98); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes modal-in {
      from { opacity:0; transform:scale(.95) translateY(10px); }
      to   { opacity:1; transform:scale(1) translateY(0); }
    }
    @keyframes accordion-open {
      from { max-height:0; opacity:0; }
      to   { max-height:600px; opacity:1; }
    }
    @keyframes accordion-close {
      from { max-height:600px; opacity:1; }
      to   { max-height:0; opacity:0; }
    }

    /* Glow bg */
    .glow-bg {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 50% 40% at 20% 0%, rgba(124,92,191,.11) 0%, transparent 65%),
        radial-gradient(ellipse 35% 25% at 80% 95%, rgba(124,92,191,.07) 0%, transparent 60%);
    }

    /* Score colors */
    .pos  { color: #4caf50; }
    .neg  { color: #f44336; }
    .zero { color: #555; }
    .frac { font-size: 0.72em; opacity: 0.65; }

    /* ── Period tabs (segmented control) ─────────────────────── */
    .tab-btn {
      padding: 6px 12px; border-radius: 99px; border: none;
      background: transparent; color: #777;
      white-space: nowrap; min-width: 80px; text-align: center;
      font-size: 0.82rem; font-weight: 600;
      cursor: pointer; transition: all .15s;
    }
    .tab-btn:hover { color: #ccc; background: rgba(255,255,255,.06); }
    .tab-btn.active {
      background: linear-gradient(135deg, #7c5cbf, #9d7fe0);
      color: #fff;
      box-shadow: 0 2px 14px rgba(124,92,191,.45);
    }

    /* ── Viewer block ─────────────────────────────────────────── */
    .viewer-block {
      border-radius: 12px; margin-bottom: 6px; overflow: hidden;
      background: rgba(255,255,255,.02);
      border: 1px solid rgba(255,255,255,.05);
      transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .viewer-block:hover {
      border-color: rgba(124,92,191,.35);
      background: rgba(255,255,255,.05);
      box-shadow: inset 0 0 0 1px rgba(124,92,191,.1), 0 4px 20px rgba(0,0,0,.22);
    }
    .viewer-block.rank-1 {
      border-left: 3px solid rgba(255,215,0,.7);
      background: linear-gradient(90deg, rgba(255,215,0,.04) 0%, transparent 55%);
      box-shadow: 0 0 16px rgba(255,215,0,.07), inset 2px 0 8px rgba(255,215,0,.04);
    }
    .viewer-block.rank-2 { border-left: 3px solid rgba(192,192,192,.55); }
    .viewer-block.rank-3 { border-left: 3px solid rgba(205,127,50,.45); }
    .viewer-block.is-me {
      border: 2px solid #ffd700;
      box-shadow: 0 0 20px rgba(255,215,0,.18);
      background: rgba(255,215,0,.03);
    }
    .viewer-block.is-streak {
      border-color: rgba(255,87,34,.5);
      box-shadow: 0 0 14px rgba(255,87,34,.15);
      background: linear-gradient(90deg, rgba(255,87,34,.04) 0%, transparent 60%);
    }
    .viewer-block.is-transferable {
      border-color: rgba(179,136,255,.5);
      box-shadow: 0 0 16px rgba(179,136,255,.18);
      background: linear-gradient(90deg, rgba(179,136,255,.05) 0%, transparent 60%);
    }
    .viewer-block.is-me.is-streak      { border-color: #ffd700; }
    .viewer-block.is-me.is-transferable{ border-color: #ffd700; }
    .viewer-block.is-cursed { border-left: 3px solid rgba(244,67,54,.55); background: rgba(244,67,54,.04); }
    .vr-rank.is-cursed-rank { font-size: 1rem; color: #f44336; min-width: 30px; text-align: right; flex-shrink: 0; }

    .viewer-summary {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px; cursor: default; user-select: none; list-style: none;
    }
    .viewer-summary::-webkit-details-marker { display: none; }
    .viewer-summary:hover { background: rgba(255,255,255,.05); }
    /* Раскрытие строки — явная подсказка только у шеврона; ник — отдельная ссылка */
    .viewer-summary .chevron { cursor: pointer; }

    .vr-rank { min-width: 36px; text-align: center; font-weight: 800; font-size: .9rem; color: #666; flex-shrink: 0; }
    .vr-rank.r1 { color: #ffd700; }
    .vr-rank.r2 { color: #c0c0c0; }
    .vr-rank.r3 { color: #cd7f32; }

    .vr-name-wrap {
      flex: 1 1 auto;
      min-width: 0;
      flex-shrink: 1;
    }
    .vr-name {
      font-weight: 600;
      min-width: 0;
      max-width: 100%;
      display: inline-block;
      vertical-align: bottom;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* inline — зона клика только по тексту ника, не на всю колонку */
    .vr-name-link {
      display: inline;
      cursor: pointer;
      color: inherit;
      text-decoration: none;
    }
    .vr-name-link:hover { text-decoration: underline; }
    .vr-games-count { font-size: .75rem; color: #777; flex-shrink: 0; min-width: 65px; text-align: right; }
    .vr-score { font-weight: 700; font-size: .9rem; min-width: 80px; text-align: right; flex-shrink: 0; }

    /* Profile link button */
    .vr-profile-btn {
      flex-shrink: 0; font-size: .7rem; font-weight: 600;
      padding: 3px 9px; border-radius: 20px;
      border: 1px solid rgba(157,127,224,.3); color: #9d7fe0;
      background: rgba(124,92,191,.08);
      text-decoration: none; white-space: nowrap;
      transition: background .15s, border-color .15s;
    }
    .vr-profile-btn:hover { background: rgba(124,92,191,.2); border-color: rgba(157,127,224,.6); }

    /* Chevron */
    .chevron { font-size: .6rem; color: #555; transition: transform .18s; flex-shrink: 0; }
    details[open] > .viewer-summary .chevron { transform: rotate(90deg); }

    .viewer-body { padding: 0 10px 10px; }

    /* ── Achievement badges (inline) ──────────────────────────── */
    .ach-badges {
      display: flex; gap: 3px; flex-wrap: wrap; align-items: center;
      flex-shrink: 0;
    }
    .ach-badge {
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: 5px; padding: 1px 4px; font-size: .9rem; cursor: help;
      transition: background .15s; line-height: 1.4;
      flex-shrink: 0;
    }
    .ach-badge:hover { background: rgba(255,255,255,.15); }
    .ach-badge-more {
      font-size: .62rem !important;
      font-weight: 700;
      color: #888 !important;
      background: rgba(255,255,255,.05) !important;
      border-color: rgba(255,255,255,.08) !important;
      cursor: default;
    }
    /* Закрепленные в профиле — лёгкий акцент в общем рейтинге */
    .ach-badge--pinned {
      box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.45), 0 0 10px rgba(255, 180, 80, 0.12);
      border-color: rgba(255, 183, 77, 0.45) !important;
      background: rgba(255, 200, 100, 0.07) !important;
    }

    /* Special streak / transferable icons */
    .special-ach-icon {
      font-size: 1.1rem; margin-right: 3px;
      display: inline-block; flex-shrink: 0; cursor: help;
    }
    .special-ach-icon.anim-bounce { animation: achBounce 2s ease-in-out infinite; }
    @keyframes achBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
    .special-ach-more {
      font-size: .62rem;
      font-weight: 700;
      color: #777;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 5px;
      padding: 2px 5px;
      margin-right: 2px;
      flex-shrink: 0;
      align-self: center;
    }

    @media (max-width: 768px) {
      .viewer-summary {
        gap: 4px;
        padding: 8px 4px;
      }
      .vr-name-wrap {
        flex: 1 1 auto;
        min-width: 0;
      }
      .vr-games-count {
        font-size: 0.65rem;
        white-space: nowrap;
      }
      .ach-badges {
        flex-wrap: nowrap;
      }
    }

    /* ── Game block (level 2) ─────────────────────────────────── */
    .game-block {
      background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
      border-radius: 8px; margin-top: 6px;
    }
    .game-summary {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; cursor: pointer; user-select: none; list-style: none;
      font-size: .85rem;
    }
    .game-summary::-webkit-details-marker { display: none; }
    .game-summary:hover { background: rgba(255,255,255,.03); border-radius: 8px; }
    .game-code { color: #555; }
    .game-label { flex: 1; }
    .game-body { padding: 6px 12px 10px; }

    /* ── Game score row (accordion header): desktop one line, mobile two columns ─ */
    .game-score-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .game-score-details-mobile {
      display: none;
    }
    .game-total-mobile {
      display: none;
    }

    @media (max-width: 768px) {
      .game-score-details-desktop,
      .game-total-desktop {
        display: none !important;
      }
      .game-score-details-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        font-size: 0.65rem;
        color: #888;
        line-height: 1.25;
      }
      .game-total-mobile {
        display: inline-block !important;
      }
      .game-score-wrapper {
        gap: 6px;
      }
    }

    /* ── Slots table ──────────────────────────────────────────── */
    .slots-table { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: 4px; }
    .slots-table th {
      text-align: left; color: #555; font-weight: 600; padding: 3px 8px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .slots-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top; }
    .slots-table tr:last-child td { border-bottom: none; }

    @media (max-width: 768px) {
      .hide-on-mobile {
        display: none !important;
      }
      .role-text-mobile {
        display: none !important;
      }
      .earned-item {
        gap: 2px !important;
        white-space: nowrap;
      }
      .earned-item span {
        overflow: visible !important;
        text-overflow: clip !important;
      }
      .slots-table th,
      .slots-table td {
        padding: 4px 2px !important;
        font-size: 0.75rem;
        letter-spacing: -0.2px;
      }
      .frac {
        font-size: 0.85em !important;
      }
    }
    .slot-row { cursor: pointer; transition: background .12s; }
    .slot-row:hover td { background: rgba(124,92,191,.08); }

    .role-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-weight: 700; font-size: .72rem; }
    .role-M    { background: rgba(248,136,136,.12); color: #f88; border: 1px solid rgba(248,136,136,.2); }
    .role-C    { background: rgba(119,221,119,.12); color: #7d7; border: 1px solid rgba(119,221,119,.2); }
    .role-S    { background: rgba(136,136,255,.12); color: #88f; border: 1px solid rgba(136,136,255,.2); }
    .role-null { background: rgba(255,255,255,.05); color: #555; }

    /* Цвет SVG в заголовке «Детализация (M/C/S)» — как текст в бейдже роли */
    .role-icon-fg-M { color: #f88; }
    .role-icon-fg-C { color: #7d7; }
    .role-icon-fg-S { color: #88f; }

    .earned-row  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
    .earned-item { font-size: .73rem; }
    .earned-label{ color: #555; }

    /* ── Separator ────────────────────────────────────────────── */
    .separator {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 4px 10px; font-size: .72rem;
      font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .separator::before, .separator::after {
      content: ''; flex: 1; height: 1px;
    }
    /* "Где я" разделитель — нейтральный */
    .separator-subtle { color: #444; }
    .separator-subtle::before, .separator-subtle::after {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    }
    /* Проклятые разделитель — красный */
    .separator-cursed { color: #f44336; opacity: .75; }
    .separator-cursed::before, .separator-cursed::after {
      background: linear-gradient(90deg, transparent, rgba(244,67,54,.3), transparent);
    }

    /* ── Slot interval modal ──────────────────────────────────── */
    .iv-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0);
      display: flex; align-items: flex-end; justify-content: center;
      z-index: 999; pointer-events: none; transition: background .25s;
    }
    .iv-overlay.open { background: rgba(0,0,0,.7); pointer-events: all; }
    .iv-modal {
      background: #0f0f1a; border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px 20px 0 0; padding: 20px 20px 32px;
      width: 100%; max-width: 680px; max-height: 80vh; overflow-y: auto;
      transform: translateY(100%); transition: transform .32s cubic-bezier(.34,1.2,.64,1);
    }
    .iv-overlay.open .iv-modal { transform: translateY(0); }
    .iv-modal-header {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 16px; padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .iv-modal-title { flex: 1; font-size: 1rem; font-weight: 700; }
    .iv-close {
      background: none; border: none; color: #555; font-size: 1.1rem;
      cursor: pointer; padding: 2px 8px; border-radius: 6px; transition: color .15s;
    }
    .iv-close:hover { color: #e0e0e0; }
    .iv-summary-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .iv-summary-pill {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 8px 14px; flex: 1; min-width: 140px;
    }
    .iv-summary-role  { font-weight: 600; font-size: .85rem; flex: 1; }
    .iv-summary-score { font-weight: 700; font-size: .92rem; }
    .iv-summary-dur   { font-size: .72rem; color: #555; margin-left: 4px; }
    .iv-timeline-label { font-size: .72rem; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
    .iv-timeline { display: flex; flex-direction: column; gap: 0; }
    .iv-event { display: flex; align-items: stretch; gap: 14px; position: relative; }
    .iv-line-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }
    .iv-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #333; background: #1a1a2e; flex-shrink: 0; margin-top: 14px; }
    .iv-dot.role-M { border-color: #f88; background: #3d1515; }
    .iv-dot.role-C { border-color: #7d7; background: #1a2e1a; }
    .iv-dot.role-S { border-color: #88f; background: #1a1e3a; }
    .iv-connector { flex: 1; width: 2px; background: rgba(255,255,255,.06); margin: 2px 0; }
    .iv-event:last-child .iv-connector { display: none; }
    .iv-card {
      flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
    }
    .iv-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .iv-role-label { font-weight: 700; font-size: .88rem; }
    .iv-score-big  { font-weight: 700; font-size: .92rem; margin-left: auto; }
    .iv-card-meta  { font-size: .72rem; color: #555; }
    .iv-nav { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }
    .iv-nav-btn {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      color: #e0e0e0; border-radius: 10px; padding: 7px 18px; font-size: .82rem;
      cursor: pointer; transition: border-color .15s;
    }
    .iv-nav-btn:hover { border-color: rgba(124,92,191,.5); }
    .iv-nav-btn:disabled { opacity: .25; cursor: default; }

    /* ── Achievements showcase: ограниченная высота + скролл ─── */
    .ach-showcase-scroll {
      max-height: 720px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 12px;
      margin-right: -2px;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 183, 77, 0.7) rgba(255, 255, 255, 0.06);
    }
    .ach-showcase-scroll::-webkit-scrollbar {
      width: 7px;
    }
    .ach-showcase-scroll::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06);
      border-radius: 99px;
    }
    .ach-showcase-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(255, 204, 102, 0.85), rgba(255, 152, 60, 0.55));
      border-radius: 99px;
      border: 1px solid rgba(9, 9, 15, 0.5);
    }
    .ach-showcase-scroll::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(255, 220, 130, 0.95), rgba(255, 170, 90, 0.75));
    }

    @media (max-width: 640px) {
      .ach-showcase-scroll {
        max-height: min(480px, 52vh);
      }
    }

    /* ── Achievement sidebar tiles ────────────────────────────── */
    .ach-tile {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 12px; padding: 14px 8px 10px;
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
      text-align: center; user-select: none;
    }
    .ach-tile:hover:not(.locked):not(.globally-locked) {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(124,92,191,.3);
      border-color: rgba(124,92,191,.5);
    }
    .ach-tile.locked { filter: grayscale(100%) opacity(.42); cursor: default; }
    .ach-tile.globally-locked {
      background: rgba(255,255,255,.015);
      border: 1px dashed rgba(255,255,255,.06);
      cursor: default;
    }
    .ach-tile.globally-locked .ach-tile-icon { filter: grayscale(100%) opacity(.1); }
    .ach-tile.globally-locked .ach-tile-name { color: #2e2e2e; }
    .ach-tile-icon { font-size: 2.2rem; line-height: 1; }
    .ach-tile-name { font-size: .68rem; font-weight: 600; color: #d0d0d0; line-height: 1.3; word-break: break-word; }
    .ach-tile-type { font-size: .58rem; color: #555; text-transform: uppercase; letter-spacing: .5px; }
    @keyframes achShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
    .ach-tile.shake { animation: achShake .35s ease; }

    /* ── Unique / pioneer achievement highlight ───────────────── */
    .ach-tile.unique-pioneer {
      border-color: rgba(205,127,50,.45);
      background: linear-gradient(145deg, rgba(205,127,50,.1), rgba(255,215,0,.05));
    }
    .ach-tile.unique-pioneer:hover:not(.locked) {
      box-shadow: 0 8px 28px rgba(205,127,50,.4);
      border-color: rgba(255,215,0,.65);
    }
    .ach-tile.unique-pioneer .ach-tile-icon {
      animation: pioneerPulse 2.4s ease-in-out infinite;
    }
    @keyframes pioneerPulse {
      0%,100% { filter: drop-shadow(0 0 4px rgba(255,215,0,.5)); }
      50%      { filter: drop-shadow(0 0 12px rgba(255,215,0,.9)); }
    }
    .ach-tile .ach-unique-badge {
      font-size: .55rem; font-weight: 800; color: #ffd700;
      background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.3);
      border-radius: 99px; padding: 1px 5px; letter-spacing: .5px; text-transform: uppercase;
    }

    /* ── Achievement popup ────────────────────────────────────── */
    .ach-popup-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      z-index: 1000; pointer-events: none; transition: background .2s;
    }
    .ach-popup-overlay.open { background: rgba(0,0,0,.75); pointer-events: all; }
    .ach-popup-modal {
      background: linear-gradient(160deg, #1a1a2e, #0f0f1a);
      border: 1px solid rgba(124,92,191,.35);
      border-radius: 20px; padding: 36px 28px 28px;
      max-width: 300px; width: 90%; text-align: center; position: relative;
      transform: scale(.85) translateY(16px); opacity: 0;
      transition: transform .25s cubic-bezier(.34,1.4,.64,1), opacity .2s;
      box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 32px rgba(124,92,191,.2);
    }
    .ach-popup-overlay.open .ach-popup-modal { transform: scale(1) translateY(0); opacity: 1; }
    .ach-popup-close {
      position: absolute; top: 10px; right: 12px;
      background: none; border: none; color: #555; font-size: 1.1rem;
      cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color .15s;
    }
    .ach-popup-close:hover { color: #e0e0e0; }
    .ach-popup-icon   { font-size: 3.4rem; margin-bottom: 10px; filter: drop-shadow(0 0 14px rgba(124,92,191,.55)); }
    .ach-popup-type   { font-size: .67rem; text-transform: uppercase; letter-spacing: 1.2px; color: #9d7fe0; margin-bottom: 6px; }
    .ach-popup-name   { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
    .ach-popup-points { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
    .ach-popup-desc   { font-size: .8rem; color: #666; line-height: 1.55; }

    /* ── Ach sidebar sticky scroll ────────────────────────────── */
    #ach-sidebar {
      scrollbar-width: none;          /* Firefox */
    }
    #ach-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

    /* ── Start-arena picker modal ─────────────────────────────── */
    #modal-start-arena {
      position: fixed; inset: 0; background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      z-index: 1010; pointer-events: none; transition: background .2s;
      padding: 16px;
    }
    #modal-start-arena.open { background: rgba(0,0,0,.78); pointer-events: all; }
    .start-arena-box {
      background: #0f0f1a;
      border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
      width: 100%; max-width: 460px;
      max-height: 86vh; overflow-y: auto; display: flex; flex-direction: column;
      transform: scale(.88) translateY(18px); opacity: 0;
      transition: transform .3s cubic-bezier(.34,1.2,.64,1), opacity .2s;
      box-shadow: 0 24px 64px rgba(0,0,0,.75);
    }
    #modal-start-arena.open .start-arena-box { transform: scale(1) translateY(0); opacity: 1; }
    .start-arena-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px 14px;
      border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
    }
    .start-arena-body { padding: 18px 22px 22px; }
    .game-picker-item {
      display: block;
      padding: 10px 13px; border-radius: 11px; cursor: pointer;
      border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
      transition: background .13s, border-color .13s;
      margin-bottom: 6px;
    }
    .game-picker-item:hover {
      border-color: rgba(157,127,224,.45) !important;
      background: rgba(124,92,191,.1) !important;
      box-shadow: 0 0 0 1px rgba(124,92,191,.12), 0 4px 20px rgba(0,0,0,.2);
    }
    .game-picker-item.selected {
      border-color: rgba(157,127,224,.7) !important;
      background: rgba(124,92,191,.16) !important;
      box-shadow: 0 0 16px rgba(124,92,191,.25), 0 0 0 1px rgba(157,127,224,.2);
    }
    .game-picker-code { font-size: .9rem; font-weight: 800; color: #c4abf5; letter-spacing: .02em; }
    .game-picker-meta { font-size: .72rem; color: #777; }
    .game-picker-label {
      font-size: .68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: #555; margin-bottom: 8px;
    }

    /* ── Фазовые бейджи ──────────────────────────────────────────── */
    .phase-pill {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: .67rem; font-weight: 600; line-height: 1.5;
      padding: 2px 8px; border-radius: 20px;
      white-space: nowrap; letter-spacing: .02em;
    }
    .phase-pill--night  { background:rgba(48,63,159,.22);  border:1px solid rgba(63,81,181,.42);  color:#9fa8da; }
    .phase-pill--day    { background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.36); color:#fcd34d; }
    .phase-pill--mafia  { background:rgba(185,28,28,.18);  border:1px solid rgba(239,68,68,.38);  color:#fca5a5; }
    .phase-pill--vote   { background:rgba(13,148,136,.15); border:1px solid rgba(20,184,166,.32); color:#5eead4; }
    .phase-pill--lobby  { background:rgba(100,100,100,.12);border:1px solid rgba(160,160,160,.28);color:#9ca3af; }
    .phase-pill--active { background:rgba(34,197,94,.12);  border:1px solid rgba(34,197,94,.3);   color:#86efac; }

    /* ── Бегущая строка никнеймов ────────────────────────────────── */
    .game-picker-players {
      overflow: hidden; white-space: nowrap; margin-top: 4px; font-size: .72rem; color: #777;
      -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    }
    .game-picker-players-inner { display: inline-block; white-space: nowrap; padding-right: 28px; }
    .game-picker-item:hover .game-picker-players-inner {
      animation: gp-scroll 5s ease-in-out .4s infinite alternate;
    }
    @keyframes gp-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-130px); }
    }

    /* ── Toast уведомления ────────────────────────────────────── */
    #toast-container {
      position: fixed; bottom: 24px; right: 24px;
      display: flex; flex-direction: column; gap: 8px;
      z-index: 1100; pointer-events: none;
    }
    .toast {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 18px; border-radius: 14px;
      font-size: .85rem; font-weight: 600; color: #fff;
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 24px rgba(0,0,0,.5);
      animation: toast-in .25s cubic-bezier(.34,1.56,.64,1) both;
      pointer-events: all;
    }
    .toast.error   { background: rgba(198,40,40,.92); border: 1px solid rgba(255,100,100,.3); }
    .toast.success { background: rgba(27,94,32,.92);  border: 1px solid rgba(76,175,80,.3);  }
    .toast.info    { background: rgba(21,42,85,.92);  border: 1px solid rgba(100,160,255,.3);}
    .toast.out     { animation: toast-out .25s ease forwards; }
    @keyframes toast-in  { from { opacity:0; transform:translateY(12px) scale(.95); } to { opacity:1; transform:none; } }
    @keyframes toast-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-8px) scale(.95); } }

    /* ── Confirm modal ────────────────────────────────────────── */
    #modal-confirm {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      z-index: 1020; padding: 16px;
      opacity: 0; pointer-events: none;
      transition: opacity .2s ease;
    }
    #modal-confirm.open { opacity: 1; pointer-events: all; }
    .confirm-box {
      background: rgba(15,15,26,.97);
      border: 1px solid rgba(124,92,191,.22);
      border-radius: 20px; padding: 28px;
      width: 100%; max-width: 380px;
      transform: scale(.9) translateY(12px); opacity: 0;
      transition: transform .28s cubic-bezier(.34,1.3,.64,1), opacity .2s;
      box-shadow: 0 24px 64px rgba(0,0,0,.75), 0 0 0 1px rgba(124,92,191,.08);
    }
    #modal-confirm.open .confirm-box { transform: scale(1) translateY(0); opacity: 1; }
    .confirm-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .confirm-close {
      background: none; border: none; color: #555; font-size: 1.3rem;
      cursor: pointer; padding: 2px 6px; border-radius: 6px;
      line-height: 1; transition: color .15s;
    }
    .confirm-close:hover { color: #e0e0e0; }
    .confirm-msg  { font-size: .88rem; color: #9a9ab0; line-height: 1.6; margin-bottom: 24px; }
    .confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
    .confirm-ok {
      border: none; color: #fff; font-weight: 700; font-size: .875rem;
      border-radius: 10px; padding: 10px 22px; cursor: pointer; transition: opacity .15s;
      background: linear-gradient(135deg, #b33a3a, #e05555);
    }
    .confirm-ok:hover { opacity: .85; }
    .confirm-cancel {
      background: transparent; border: 1px solid rgba(255,255,255,.12);
      color: #888; font-size: .875rem; font-weight: 600;
      border-radius: 10px; padding: 10px 20px;
      cursor: pointer; transition: border-color .15s, color .15s;
    }
    .confirm-cancel:hover { border-color: rgba(255,255,255,.25); color: #ccc; }

    /* ── Live Streams Card ──────────────────────────────────── */
    .streamer-row {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 6px; text-decoration: none; color: inherit;
      border-bottom: 1px solid rgba(255,255,255,.04);
      border-radius: 8px; transition: background .12s, padding-left .12s;
    }
    .streamer-row:last-child { border-bottom: none; }
    .streamer-row:hover { background: rgba(255,255,255,.06); padding-left: 10px; }
    .streamer-row.streamer-offline { opacity: .55; }
    .streamer-row.streamer-offline .streamer-avatar { border-color: rgba(255,255,255,.12); }
    .streamer-avatar {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      object-fit: cover; border: 2px solid rgba(76,175,80,.5);
    }
    .streamer-name { font-size: .82rem; font-weight: 700; color: #e8e8e8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .streamer-viewers { font-size: .72rem; color: #888; flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .live-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      background: #f44336; box-shadow: 0 0 6px rgba(244,67,54,.7);
      animation: live-pulse 1.5s ease-in-out infinite;
    }
    @keyframes live-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
    /* Admin debug */
    #admin-streamers-debug { display: none; }
    .admin-streamer-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 2px; font-size: .78rem;
      border-bottom: 1px solid rgba(255,255,255,.04);
    }
    .admin-streamer-row:last-child { border-bottom: none; }
    .admin-live-dot {
      font-size: .75rem; line-height: 1; flex-shrink: 0;
    }
    .admin-offline-badge {
      font-size: .65rem; color: #555; font-weight: 600;
      background: rgba(255,255,255,.05); border-radius: 4px;
      padding: 1px 5px; flex-shrink: 0;
    }

    /* ── Status msg ───────────────────────────────────────────── */
    #status-msg { text-align: center; padding: 32px 16px; color: #555; }

    /* ── Locked game row (VIP gate) ───────────────────────────── */
    .game-block--locked { border-radius: 8px; margin-bottom: 4px; overflow: hidden; }
    .game-summary--locked {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; cursor: pointer; user-select: none;
      opacity: .55; transition: opacity .15s;
    }
    .game-summary--locked:hover { opacity: .8; }

    /* ── VIP Gate Modal ───────────────────────────────────────── */
    #vip-gate-modal {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
      align-items: center; justify-content: center;
    }
    #vip-gate-modal.open { display: flex; animation: modal-in .18s ease both; }
    .vip-gate-box {
      position: relative; text-align: center;
      background: #141422; border: 1px solid rgba(255,255,255,.1);
      border-radius: 18px; padding: 36px 40px 32px;
      box-shadow: 0 20px 60px rgba(0,0,0,.5);
      max-width: 300px; width: 90%;
    }
    #vip-gate-close {
      position: absolute; top: 12px; right: 14px;
      background: none; border: none; color: #555; font-size: 1rem;
      cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color .15s;
    }
    #vip-gate-close:hover { color: #e0e0e0; }
    .vip-gate-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 10px 24px; border-radius: 10px;
      background: linear-gradient(135deg, #7c5cbf, #9d7fe0);
      color: #fff; text-decoration: none;
      font-weight: 700; font-size: .88rem; transition: opacity .15s;
    }
    .vip-gate-btn:hover { opacity: .85; }

    /* ── Skeleton Loader ─────────────────────────────────────── */
    @keyframes sk-pulse {
      0%,100% { opacity:.35; }
      50%     { opacity:.68; }
    }
    .sk-block {
      display:flex; align-items:center; gap:10px;
      padding:11px 14px; border-radius:12px; margin-bottom:6px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      animation:sk-pulse 1.5s ease-in-out infinite;
      height:44px; box-sizing:border-box;
    }
    .sk-rank  { width:28px;  height:14px; border-radius:4px; background:rgba(255,255,255,.14); flex-shrink:0; }
    .sk-name  { flex:1;      height:14px; border-radius:4px; background:rgba(255,255,255,.10); }
    .sk-games { width:40px;  height:12px; border-radius:4px; background:rgba(255,255,255,.06); flex-shrink:0; }
    .sk-score { width:56px;  height:14px; border-radius:4px; background:rgba(255,255,255,.08); flex-shrink:0; }
    .sk-btn   { width:30px;  height:18px; border-radius:20px; background:rgba(255,255,255,.05); flex-shrink:0; }

    /* ── Board fade-in ───────────────────────────────────────── */
    @keyframes boardFadeIn {
      from { opacity:0; transform:translateY(8px); }
      to   { opacity:1; transform:none; }
    }
    .board-fade-in { animation:boardFadeIn .22s ease-out both; }

    /* ── Leaderboard container height reservation (anti-CLS) ──── */
    #leaderboard { min-height: 800px; display: flex; flex-direction: column; }
    #lb-rows { flex: 1; }

    /* ── Friends filter toggle ────────────────────────────────── */
    #friends-toggle {
      display: none;
      align-items: center; gap: 6px;
      padding: 6px 10px; border-radius: 99px; font-size: .82rem; font-weight: 600;
      border: 1px solid rgba(124,92,191,.35);
      background: rgba(124,92,191,.07); color: #9d7fe0;
      cursor: pointer; transition: all .2s;
      flex-shrink: 0;
    }
    #friends-toggle:hover:not(:disabled) {
      border-color: rgba(157,127,224,.65);
      background: rgba(124,92,191,.16); color: #c4abf5;
    }
    #friends-toggle.active {
      background: linear-gradient(135deg, rgba(124,92,191,.38), rgba(157,127,224,.18));
      border-color: #9d7fe0; color: #fff;
      box-shadow: 0 0 18px rgba(124,92,191,.35), inset 0 1px 0 rgba(255,255,255,.08);
    }
    #friends-toggle:disabled { opacity: .5; cursor: default; }
    .ft-spinner { display: none; width: 12px; height: 12px; border: 2px solid rgba(157,127,224,.3); border-top-color: #9d7fe0; border-radius: 50%; animation: ftSpin .7s linear infinite; }
    #friends-toggle.loading .ft-spinner { display: block; }
    #friends-toggle.loading .ft-icon { display: none; }
    @keyframes ftSpin { to { transform: rotate(360deg); } }

    /* ── Friends filter banner ─────────────────────────────────── */
    #friends-banner {
      display: flex;
      align-items: center; justify-content: center; gap: 8px;
      padding: 8px 16px 14px;
      font-size: .8rem; color: #9d7fe0; letter-spacing: .4px;
      opacity: 0; pointer-events: none; transition: opacity 0.2s; min-height: 38px;
    }
    #friends-banner.visible { opacity: 1; pointer-events: all; }

    /* ── Arena button ─────────────────────────────────────────── */
    #btn-arenas {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 20px; border-radius: 99px; font-size: .84rem; font-weight: 700;
      border: 1px solid rgba(255,180,0,.4);
      background: linear-gradient(135deg, rgba(255,180,0,.12), rgba(255,160,0,.06));
      color: #ffc94d; cursor: pointer; transition: all .2s;
    }
    #btn-arenas:hover {
      border-color: rgba(255,210,0,.7); background: linear-gradient(135deg, rgba(255,180,0,.22), rgba(255,160,0,.12));
      color: #ffe580; box-shadow: 0 0 20px rgba(255,180,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
    }

    /* ── Sidebar arena block ──────────────────────────────────── */
    #arenas-active-badge {
      background: rgba(76,175,80,.12); border: 1px solid rgba(76,175,80,.3); color: #4caf50;
    }
    #arenas-active-badge.has-active {
      animation: badge-pulse 2s ease-in-out infinite;
    }
    @keyframes badge-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(76,175,80,.3); }
      50%      { box-shadow: 0 0 8px 2px rgba(76,175,80,.2); }
    }

    /* ── VIP lock overlay ─────────────────────────────────────── */
    .vip-lock-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; z-index: 10; border-radius: inherit;
      padding: 20px; text-align: center;
    }
    .vip-lock-overlay .vip-lock-icon { font-size: 2rem; line-height: 1; }
    .vip-lock-overlay .vip-lock-text { color: #e2e8f0; font-weight: 600; font-size: .9rem; }
    .vip-lock-overlay .vip-lock-btn {
      padding: 7px 20px;
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      color: #fff; border: none; border-radius: 20px;
      font-weight: 700; cursor: pointer; font-size: .85rem;
      transition: opacity .15s;
    }
    .vip-lock-overlay .vip-lock-btn:hover { opacity: .88; }

    /* ── Sidebar art card ─────────────────────────────────────── */
    #sidebar-art-card {
      transition: box-shadow .35s ease, border-color .35s ease;
    }
    #sidebar-art-card:hover {
      border-color: rgba(255,180,0,.4);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 32px rgba(0,0,0,.45),
        0 0 32px rgba(255,180,0,.18),
        0 0 64px rgba(255,180,0,.07);
    }
    #sidebar-art-card .art-img-wrap {
      position: relative; overflow: hidden;
    }
    #sidebar-art-card img {
      width: 100%; height: auto; display: block; object-fit: cover;
      transition: transform .45s ease;
    }
    #sidebar-art-card:hover img {
      transform: scale(1.05);
    }
    #sidebar-art-card .art-gradient {
      position: absolute; bottom: 0; left: 0; right: 0; height: 48%;
      background: linear-gradient(to top, rgba(9,9,15,.92) 0%, transparent 100%);
      pointer-events: none;
    }

    /* ── Arena overlay / modal ────────────────────────────────── */
    .arena-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      z-index: 1002; pointer-events: none; transition: background .25s;
      padding: 16px;
    }
    .arena-overlay.open { background: rgba(0,0,0,.82); pointer-events: all; }
    .arena-modal {
      background: #0f0f1a; border: 1px solid rgba(255,255,255,.1);
      border-radius: 22px; width: 100%; max-width: 780px;
      max-height: 90vh; display: flex; flex-direction: column;
      transform: scale(.94) translateY(18px); opacity: 0;
      transition: transform .3s cubic-bezier(.34,1.2,.64,1), opacity .2s;
    }
    .arena-overlay.open .arena-modal { transform: scale(1) translateY(0); opacity: 1; }

    .arena-modal-header {
      display: flex; align-items: center; gap: 10px;
      padding: 18px 22px 14px;
      border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
    }
    .arena-modal-title { flex: 1; font-size: 1.05rem; font-weight: 800; }
    .arena-modal-body  { flex: 1; overflow-y: auto; padding: 18px 22px 24px; }

    /* ── Create form ──────────────────────────────────────────── */
    .arena-field label { display: block; font-size: .74rem; color: #888; font-weight: 600; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
    .arena-field input,
    .arena-field select {
      width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px; padding: 9px 13px; color: #e0e0e0; font-size: .88rem;
      outline: none; transition: border-color .15s;
    }
    .arena-field input:focus,
    .arena-field select:focus { border-color: rgba(124,92,191,.6); }
    .arena-field select option { background: #1a1a2e; }

    /* ── Arena card ───────────────────────────────────────────── */
    .arena-card {
      background: rgba(20,20,32,.65); border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px; padding: 16px 18px; margin-bottom: 12px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      backdrop-filter: blur(14px);
    }
    .arena-card:last-child { margin-bottom: 0; }
    .arena-card:hover {
      border-color: rgba(255,180,0,.32);
      box-shadow: 0 6px 28px rgba(255,180,0,.09);
      transform: translateY(-1px);
    }
    .arena-card.status-active    { border-color: rgba(76,175,80,.3); background: rgba(76,175,80,.04); }
    .arena-card.status-waiting   { border-color: rgba(255,180,0,.22); }
    .arena-card.status-finished  { border-color: rgba(124,92,191,.28); background: rgba(124,92,191,.04); }
    .arena-card.status-cancelled { border-color: rgba(239,83,80,.2);  background: rgba(239,83,80,.03); opacity: .72; }

    /* Vibe Tag */
    .arena-vibe-tag {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 99px;
      letter-spacing: .03em;
    }
    .arena-vibe-tag.hot   { color: #ff7043; background: rgba(255,112,67,.12); border: 1px solid rgba(255,112,67,.3); }
    .arena-vibe-tag.close { color: #ffd54f; background: rgba(255,213,79,.1);  border: 1px solid rgba(255,213,79,.28); }

    /* Battle bar — один большой прогресс лидера */
    .arena-battle-wrap {
      margin: 12px 0 10px;
    }
    .arena-battle-label {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 5px;
    }
    .arena-battle-name { font-size: .82rem; font-weight: 700; color: #4caf50; }
    .arena-battle-score { font-size: .74rem; color: #777; }
    .arena-battle-track {
      background: rgba(255,255,255,.06); border-radius: 99px;
      height: 10px; overflow: hidden; position: relative;
    }
    .arena-battle-fill {
      height: 100%; border-radius: 99px;
      background: linear-gradient(90deg, #2e7d32, #4caf50);
      box-shadow: 0 0 12px rgba(76,175,80,.5);
      transition: width 1.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Mini-leaderboard */
    .arena-mini-lb { margin: 8px 0 10px; display: flex; flex-direction: column; gap: 5px; }
    .arena-mini-lb-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 8px; border-radius: 8px;
      font-size: .78rem; transition: background .15s;
    }
    .arena-mini-lb-row.is-me  { background: rgba(255,215,0,.07); border: 1px solid rgba(255,215,0,.15); }
    .arena-mini-lb-row.is-leader { background: rgba(76,175,80,.07); }
    .arena-mini-lb-pos { width: 18px; text-align: center; font-size: .72rem; color: #555; flex-shrink: 0; }
    .arena-mini-lb-name { flex: 1; font-weight: 600; color: #ccc; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .arena-mini-lb-score { font-size: .74rem; color: #666; white-space: nowrap; flex-shrink: 0; }
    .arena-status-pill.cancelled { background: rgba(239,83,80,.15); color: #ef9a9a; border: 1px solid rgba(239,83,80,.3); }

    .arena-type-pill {
      font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 99px;
      border: 1px solid; white-space: nowrap;
    }
    .arena-type-pill.sprint  { color: #ff7043; border-color: rgba(255,112,67,.35); background: rgba(255,112,67,.1); }
    .arena-type-pill.bestof  { color: #7c5cbf; border-color: rgba(124,92,191,.35); background: rgba(124,92,191,.1); }
    .arena-status-pill {
      font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid;
    }
    .arena-status-pill.waiting  { color: #ffc94d; border-color: rgba(255,201,77,.3); background: rgba(255,201,77,.08); }
    .arena-status-pill.active   { color: #4caf50; border-color: rgba(76,175,80,.3);  background: rgba(76,175,80,.08); }
    .arena-status-pill.finished { color: #9d7fe0; border-color: rgba(157,127,224,.3);background: rgba(157,127,224,.08); }

    .arena-participant-avatar {
      width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
      border: 2px solid rgba(255,255,255,.1); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 700;
    }

    /* ── Arena progress bar ───────────────────────────────────── */
    .arena-bar-track {
      background: rgba(255,255,255,.07); border-radius: 99px;
      height: 8px; overflow: hidden; position: relative;
    }
    .arena-bar-fill {
      height: 100%; border-radius: 99px;
      transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ── Arena action buttons ─────────────────────────────────── */
    .arena-btn {
      font-size: .78rem; font-weight: 700; padding: 6px 14px;
      border-radius: 10px; border: 1px solid; cursor: pointer;
      transition: all .18s cubic-bezier(.34,1.4,.64,1);
    }
    .arena-btn:not(.danger):not(:disabled):hover {
      transform: translateY(-1px);
    }
    .arena-btn.join {
      color: #ffc94d; border-color: rgba(255,201,77,.4); background: rgba(255,201,77,.08);
    }
    .arena-btn.join:hover  {
      background: rgba(255,201,77,.2);
      box-shadow: 0 0 14px rgba(255,201,77,.25);
    }
    .arena-btn.join:disabled { opacity: .4; cursor: default; transform: none; }
    .arena-btn.watch {
      color: #4fc3f7; border-color: rgba(79,195,247,.35); background: rgba(79,195,247,.06);
      text-decoration: none;
    }
    .arena-btn.watch:hover { background: rgba(79,195,247,.15); }
    /* Кнопка «Смотреть на Twitch» — более заметная */
    .btn-stream {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 8px;
      background: linear-gradient(135deg,rgba(145,70,255,.2),rgba(105,41,204,.15));
      border: 1px solid rgba(145,70,255,.4); color: #bf94ff; text-decoration: none;
      transition: background .15s, border-color .15s;
    }
    .btn-stream:hover { background: linear-gradient(135deg,rgba(145,70,255,.32),rgba(105,41,204,.24)); border-color: rgba(145,70,255,.65); }
    /* Live indicator dot */
    .live-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      display: inline-block; transition: box-shadow .3s;
    }
    .live-dot.online  { background: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,.7); animation: dot-pulse 2s ease-in-out infinite; }
    .live-dot.offline { background: #555; }
    @keyframes dot-pulse {
      0%,100% { box-shadow: 0 0 4px rgba(76,175,80,.5); }
      50%      { box-shadow: 0 0 10px rgba(76,175,80,.9); }
    }
    /* Блок "Прямой эфир" */
    .arena-live-block {
      margin-top: 10px; padding: 8px 10px; border-radius: 8px;
      background: rgba(145,70,255,.06); border: 1px solid rgba(145,70,255,.15);
    }
    .arena-live-label {
      font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
      color: #9146ff; margin-bottom: 7px; display: flex; align-items: center; gap: 5px;
    }
    .arena-no-streamer {
      font-size: .74rem; color: #555; font-style: italic;
    }
    /* Поле ввода стримера для создателя — аккордеон */
    .arena-streamer-toggle {
      font-size: .72rem; font-weight: 700; padding: 4px 10px;
      border-radius: 8px; border: 1px solid rgba(145,70,255,.3);
      color: #9146ff; background: rgba(145,70,255,.07);
      cursor: pointer; transition: all .18s; margin-top: 6px;
    }
    .arena-streamer-toggle:hover {
      background: rgba(145,70,255,.18);
      box-shadow: 0 0 12px rgba(145,70,255,.2);
    }
    .arena-streamer-panel {
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height .35s cubic-bezier(.34,1.2,.64,1), opacity .25s;
    }
    .arena-streamer-panel.open {
      max-height: 80px; opacity: 1;
    }
    .arena-add-streamer-row {
      display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
    }
    .arena-add-streamer-row input {
      flex: 1; min-width: 120px; background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12); border-radius: 7px;
      color: #fff; padding: 5px 10px; font-size: .78rem;
      font-family: inherit; outline: none; transition: border-color .15s;
    }
    .arena-add-streamer-row input:focus { border-color: rgba(145,70,255,.5); }
    .arena-add-streamer-row input::placeholder { color: #444; }
    .arena-btn.add-streamer {
      color: #9146ff; border-color: rgba(145,70,255,.35); background: rgba(145,70,255,.07);
      font-size: .74rem; padding: 5px 12px; white-space: nowrap;
    }
    .arena-btn.add-streamer:hover {
      background: rgba(145,70,255,.18);
      box-shadow: 0 0 12px rgba(145,70,255,.2);
    }

    /* Аккордеон для формы создания арены */
    #arena-form-wrap {
      overflow: hidden;
      max-height: 0; opacity: 0;
      transition: max-height .4s cubic-bezier(.34,1.2,.64,1), opacity .3s;
    }
    #arena-form-wrap.open {
      max-height: 700px; opacity: 1;
    }
    .arena-active-banner {
      font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
      color:#4caf50; background:rgba(76,175,80,.08); border:1px solid rgba(76,175,80,.2);
      border-radius:7px; padding:5px 10px; margin-bottom:10px;
      display:flex; align-items:center; gap:6px;
    }
    .arena-active-banner .pulse-dot {
      width:7px; height:7px; border-radius:50%; background:#4caf50;
      box-shadow:0 0 6px #4caf5088; flex-shrink:0;
      animation: arena-pulse 1.4s ease-in-out infinite;
    }
    @keyframes arena-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
    /* ── Active arena accordion card ─────────────────────────── */
    .arena-acc-card {
      background: rgba(76,175,80,.03);
      border: 1.5px solid rgba(76,175,80,.2);
      border-radius: 14px; overflow: hidden;
      transition: border-color .2s;
    }
    .arena-acc-card:hover { border-color: rgba(76,175,80,.45); }

    .arena-acc-card-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; padding: 12px 16px;
      cursor: pointer; list-style: none; user-select: none;
    }
    .arena-acc-card-head::-webkit-details-marker { display: none; }

    .arena-acc-card-left  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
    .arena-acc-card-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

    .arena-acc-card-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      background: #4caf50; animation: arena-pulse 1.6s ease-in-out infinite;
    }
    .arena-acc-card-title {
      font-size: .9rem; font-weight: 800; color: #f0f0f0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .arena-acc-rank { font-size: .7rem; color: #9d7fe0; font-weight: 700; white-space: nowrap; padding: 1px 8px; background: rgba(124,92,191,.12); border: 1px solid rgba(124,92,191,.25); border-radius: 99px; }
    .arena-acc-rank.gold { color: #ffd700; background: rgba(255,215,0,.1); border-color: rgba(255,215,0,.3); }

    .arena-acc-card-chevron { width: 15px; height: 15px; color: #555; transition: transform .25s ease, color .2s; flex-shrink: 0; }
    details[open] .arena-acc-card-chevron { transform: rotate(180deg); color: #4caf50; }

    .arena-acc-card-body { max-height: 0; overflow: hidden; padding: 0 16px; transition: max-height .32s cubic-bezier(.4,0,.2,1), padding .25s ease; }
    details[open] .arena-acc-card-body { max-height: 1200px; padding: 0 16px 14px; }

    .arena-btn.start {
      color: #4caf50; border-color: rgba(76,175,80,.4); background: rgba(76,175,80,.08);
    }
    .arena-btn.start:hover { background: rgba(76,175,80,.2); }
    .arena-btn.danger {
      color: #ef5350; border-color: rgba(239,83,80,.4); background: rgba(239,83,80,.08);
      font-size: .72rem; padding: 4px 10px;
    }
    .arena-btn.danger:hover { background: rgba(239,83,80,.2); }
    .arena-btn.danger:disabled { opacity: .4; cursor: default; }

    /* ── Scrollbar ────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(124,92,191,.35); border-radius: 3px; }

    /* ── Stagger row animation ────────────────────────────────── */
    @keyframes rowIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Sticky header ────────────────────────────────────────── */
    /* ── Status Ticker ───────────────────────────────────────────── */
    .status-ticker {
      position: sticky; top: 0; z-index: 499;
      background: rgba(124,92,191,.05);
      border-bottom: 1px solid rgba(255,255,255,.05);
      overflow: hidden; height: 30px;
      display: flex; align-items: center;
    }
    .ticker-track {
      display: flex; align-items: center;
      white-space: nowrap;
      animation: ticker-scroll 75s linear infinite;
    }
    .status-ticker:hover .ticker-track { animation-play-state: paused; }
    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .ticker-item {
      padding: 0 40px;
      font-size: .72rem; font-weight: 600; letter-spacing: .01em;
      color: rgba(255,255,255,.35);
    }
    .ticker-item strong { color: rgba(157,127,224,.85); }
    .ticker-sep {
      color: rgba(255,255,255,.12); font-size: .6rem; flex-shrink: 0;
    }

    .site-header {
      position: sticky; top: 0; z-index: 500;
      background: rgba(9,9,15,.85);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255,255,255,.07);
      box-shadow: 0 4px 32px rgba(0,0,0,.3);
    }
    .site-header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      padding: 0 20px;
      position: relative;
      min-height: 56px; /* резервируем высоту — нет вертикального CLS при смене скелетона */
    }
    .hdr-logo {
      display: flex; align-items: center; gap: 7px;
      text-decoration: none; color: #e0e0e0;
      font-weight: 800; font-size: .9rem; letter-spacing: -.01em;
      flex: none;
    }
    .hdr-logo:hover { color: #fff; }
    /* Контейнер вкладок + друзья, прилеплен к лого с отступом 30px */
    .hdr-center-zone {
      flex: none;
      margin-left: 30px;
      display: flex;
      align-items: center;
    }
    /* Внутренняя группа: вкладки + "Только друзья" */
    .hdr-center-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hdr-tabs-wrap {
      flex: none;
      display: flex;
      align-items: center;
    }
    .hdr-tabs {
      display: flex; gap: 1px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 99px; padding: 3px;
      overflow-x: auto; scrollbar-width: none;
    }
    .hdr-tabs::-webkit-scrollbar { display: none; }
    .hdr-right {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
    }

    /* ── Floating admin panel ─────────────────────────────────── */
    #admin-bar {
      position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
      z-index: 200; flex-direction: column;
    }
    #btn-admin {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 10px 8px; border-radius: 10px;
      background: rgba(9,9,15,.88); backdrop-filter: blur(16px);
      border: 1px dashed rgba(255,255,255,.14);
      color: #444; cursor: pointer; transition: all .2s;
      font-size: .62rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .04em; line-height: 1.3;
    }
    #btn-admin .admin-icon { font-size: 1rem; }
    #btn-admin:hover { border-color: rgba(255,215,0,.5); color: #ffd700; }
    #btn-admin.is-active {
      border-style: solid; border-color: rgba(255,215,0,.5);
      color: #ffd700; background: rgba(255,215,0,.04);
    }

    /* ── Mobile responsive ────────────────────────────────────── */
    @media (max-width: 640px) {
      .site-header-inner { flex-wrap: wrap; min-height: unset; }
      .hdr-center-zone {
        order: 10; width: 100%; margin-left: 0;
        justify-content: flex-start;
        padding-bottom: 4px; overflow-x: auto;
      }
      .hdr-center-group { gap: 16px; }
      .hdr-tabs-wrap { overflow-x: auto; }
      .hdr-logo-text { display: none; }
      #user-greeting { display: none !important; }
      #btn-profile-me, #btn-logout { display: none !important; }
      #friends-toggle { padding: 5px 10px; }
      #friends-toggle #ft-label { display: none; }
      #btn-arenas { padding: 6px 12px; font-size: .78rem; }
      #admin-bar { right: 4px; }
    }

    /* ── Leaderboard search bar ────────────────────────────────── */
    #lb-search-inner { margin-bottom: 10px; }

    .lb-search-inner {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 8px 14px;
      transition: border-color .2s;
    }
    .lb-search-inner:focus-within {
      border-color: rgba(255,215,0,.35);
      background: rgba(255,215,0,.04);
    }
    .lb-search-inner--locked {
      opacity: .5; cursor: not-allowed;
    }
    .lb-search-icon { font-size: .95rem; flex-shrink: 0; }
    .lb-search-input {
      flex: 1; background: transparent; border: none; outline: none;
      color: #e2e8f0; font-size: .88rem;
      font-family: inherit; caret-color: #ffd700;
    }
    .lb-search-input::placeholder { color: #555; }
    .lb-search-input--locked { cursor: not-allowed; }
    .lb-search-lock {
      font-size: .73rem; color: #ffd700; white-space: nowrap;
      background: rgba(255,215,0,.08); padding: 2px 8px;
      border-radius: 20px; flex-shrink: 0;
    }
    .lb-search-clear {
      background: none; border: none; color: #666; font-size: .85rem;
      cursor: pointer; padding: 0 2px; line-height: 1;
      transition: color .15s;
    }
    .lb-search-clear:hover { color: #ccc; }

    /* ── Pagination ────────────────────────────────────────────── */
    /* min-height резервирует место сразу — нет CLS при появлении кнопок */
    .lb-pagination {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; padding: 18px 0 8px; min-height: 60px;
      transition: opacity .2s;
    }
    .lb-pagination--hidden { opacity: 0; pointer-events: none; }
    .lb-page-btn {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: #c0c0c8; font-size: .82rem; font-family: inherit;
      font-weight: 600; padding: 7px 18px; border-radius: 20px;
      cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    }
    .lb-page-btn:hover:not(:disabled) {
      background: rgba(255,215,0,.1); border-color: rgba(255,215,0,.3); color: #ffd700;
    }
    .lb-page-btn:disabled { opacity: .3; cursor: default; }
    .lb-page-label { font-size: .82rem; color: #666; min-width: 120px; text-align: center; }

    /* ── VIP teaser block ──────────────────────────────────────── */
    .lb-vip-teaser {
      margin-top: 12px; padding: 20px; text-align: center;
      border-radius: 14px; cursor: pointer;
      background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(239,68,68,.04));
      border: 1px dashed rgba(255,215,0,.2);
      transition: background .2s, border-color .2s;
    }
    .lb-vip-teaser:hover {
      background: linear-gradient(135deg, rgba(255,215,0,.1), rgba(239,68,68,.07));
      border-color: rgba(255,215,0,.4);
    }

    /* ── Page slide-in animation ───────────────────────────────── */
    .page-slide-in {
      animation: pageSlide 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes pageSlide {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* ═══ ratings page theme (merged former ratings2) ═══ */
    /* ══════════════════════════════════════════════════════════════
       ratings page theme layer (merged from former ratings2.css)
       Loads AFTER ratings.css — overrides accent from purple → red
       ══════════════════════════════════════════════════════════════ */

    /* ── Background image layer ──────────────────────────────────── */
    body {
      background: #050505 !important;
    }

    /* Figma background: dark abstract image + mesh gradient overlay at 40% */
    .page-bg-img {
      position: fixed;
      inset: -4px;
      z-index: 0;
      background: url('/bg-dark.png') center/cover no-repeat;
      filter: blur(2px);
      pointer-events: none;
    }

    /* Mesh gradient overlay — 40% opacity per Figma */
    .page-bg-overlay {
      position: fixed;
      inset: 0;
      z-index: 0;
      background: url('/bg-mesh-gradient.png') center/cover no-repeat;
      opacity: 0.4;
      pointer-events: none;
    }


    /* ── Glow-bg: off ────────────────────────────────────────────── */
    .glow-bg { display: none; }

    /* ── Role badges — Figma colors ──────────────────────────────── */
    .ratings-page .role-badge.role-C { background: #1E2A2D !important; color: #4494A9 !important; border-color: rgba(7,129,161,0.15) !important; }
    .ratings-page .role-badge.role-S { background: #332A1D !important; color: #EACAA1 !important; border-color: rgba(232,200,158,0.15) !important; }
    .ratings-page .role-badge.role-M { background: #392928 !important; color: #D37373 !important; border-color: rgba(255,136,136,0.15) !important; }

    .ratings-page .role-icon-fg-M { color: #D37373 !important; }
    .ratings-page .role-icon-fg-C { color: #4494A9 !important; }
    .ratings-page .role-icon-fg-S { color: #EACAA1 !important; }

    /* ── Role dots — Figma colors ────────────────────────────────── */
    .ratings-page .iv-dot.role-C { border-color: #4494A9 !important; background: #1E2A2D !important; }
    .ratings-page .iv-dot.role-S { border-color: #EACAA1 !important; background: #332A1D !important; }
    .ratings-page .iv-dot.role-M { border-color: #D37373 !important; background: #392928 !important; }

    /* ── Header — Figma: rgba(11,11,11,0.5) + backdrop-blur(24px) ── */
    .site-header {
      background: rgba(11,11,11,.68) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
      border-bottom-color: rgba(255,255,255,.07) !important;
      box-shadow: 0 4px 32px rgba(0,0,0,.30) !important;
    }

    /* Hide tabs from header (they live inside lb-card) — they live inside lb-card now */
    .ratings-page .hdr-center-zone { display: none !important; }

    /* ── Leaderboard card wrapper ─────────────────────────────────── */
    .lb-card {
      display: flex;
      flex-direction: column;
      background: rgba(10,10,10,.76) !important;
      border: 0.5px solid #666 !important;
      border-radius: 25px !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 1px rgba(255,255,255,.07) !important;
    }

    .lb-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 18px 14px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .lb-card-header .hdr-tabs {
      flex-shrink: 0;
    }

    /* Поиск: внешняя оболочка тянется по центру (flex-grow), внутри — pill с абсолютной лупой/VIP/clear */
    .lb-card-header .lb-search-outer {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: stretch;
    }

    .lb-card-header .lb-search-inner {
      position: relative;
      flex: 1;
      min-width: 0;
      width: 100%;
      max-width: none;
      display: block;
      background: rgba(26,26,26,.56) !important;
      border: 1px solid rgba(255,255,255,.08) !important;
      border-radius: 36px !important;
      padding: 0 !important;
      height: 39px;
      box-sizing: border-box;
      margin-bottom: 0 !important;
    }

    .ratings-page .lb-card-header .lb-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      color: #9d9d9d !important;
      opacity: 0.85;
    }

    .ratings-page .lb-card-header .lb-search-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      margin: 0;
      padding-left: 40px;
      padding-right: 14px;
      border: none;
      outline: none;
      background: transparent;
      color: #e2e8f0;
      font-size: 0.88rem;
      font-family: inherit;
    }

    .ratings-page .lb-card-header .lb-search-inner:not(.lb-search-inner--locked) .lb-search-input {
      padding-right: 40px;
    }

    .ratings-page .lb-card-header .lb-search-inner--locked .lb-search-input {
      padding-right: 140px;
    }

    .ratings-page .lb-card-header .lb-search-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      line-height: 1;
    }

    .ratings-page .lb-card-header .lb-search-lock {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      color: #fbbf24 !important;
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.28);
      white-space: nowrap;
      pointer-events: none;
    }

    .ratings-page .lb-card-header .lb-search-lock-diamond {
      flex-shrink: 0;
      color: #fbbf24;
    }

    .lb-card-right {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 0;
      flex-shrink: 0;
    }

    .lb-card-body {
      padding: 14px 16px 16px;
      flex: 1;
    }

    /* subtitle inside card */
    .lb-card-body #subtitle {
      text-align: left;
      margin-bottom: 10px;
      font-size: .68rem;
      color: #666 !important;
      letter-spacing: .03em;
    }

    /* ── Glass cards — denser fill than before, border #666 0.5px, blur(20px) */
    .glass {
      background: rgba(10,10,10,.76) !important;
      border: 0.5px solid #666 !important;
      border-radius: 16px !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 1px rgba(255,255,255,.07) !important;
    }

    /* ── Period tabs — Figma exact gradient ──────────────────────── */
    .tab-btn.active {
      background: linear-gradient(145deg, rgba(107,0,0,.7) 0%, rgba(181,37,37,.7) 100%) !important;
      color: #FFDDDD !important;
      box-shadow: 0 2px 14px rgba(191,92,92,.45) !important;
    }
    .tab-btn:hover { color: #FFDDDD !important; }

    /* ── Leaderboard rows — red hover ────────────────────────────── */
    .viewer-block:hover {
      border-color: rgba(198,40,40,.38) !important;
      box-shadow: inset 0 0 0 1px rgba(198,40,40,.1), 0 4px 20px rgba(0,0,0,.28) !important;
    }
    /* Figma: diamond gradient left border for top 3 */
    .viewer-block.rank-1 {
      border-left: 3px solid rgba(255,180,0,.7) !important;
      border-color: rgba(255,180,0,.15) !important;
      border-left-color: rgba(255,180,0,.7) !important;
      background: linear-gradient(90deg, rgba(255,215,0,.04) 0%, transparent 55%) !important;
      box-shadow: 0 0 16px rgba(255,215,0,.07), inset 2px 0 8px rgba(255,215,0,.04) !important;
    }
    .viewer-block.rank-2 {
      border-left: 3px solid rgba(192,192,192,.55) !important;
      border-color: rgba(192,192,192,.12) !important;
      border-left-color: rgba(192,192,192,.55) !important;
    }
    .viewer-block.rank-3 {
      border-left: 3px solid rgba(205,127,50,.45) !important;
      border-color: rgba(205,127,50,.12) !important;
      border-left-color: rgba(205,127,50,.45) !important;
    }
    /* Figma: "is-me" row — Pomegranate 4% bg + red diamond gradient border */
    .viewer-block.is-me {
      background: rgba(244,67,54,.04) !important;
      border-color: rgba(255,255,255,.05) !important;
      border-left: 3px solid rgba(244,67,54,.55) !important;
      border-left-color: rgba(244,67,54,.55) !important;
    }

    /* ── Profile button — hidden, replaced by clickable nickname ── */
    .vr-profile-btn {
      display: none !important;
    }

    /* Закреплённые ачивки в рейтинге — акцент под красную тему */
    .ach-badge--pinned {
      box-shadow: 0 0 0 1px rgba(239, 154, 154, 0.5), 0 0 10px rgba(198, 40, 40, 0.15) !important;
      border-color: rgba(239, 154, 154, 0.5) !important;
      background: rgba(198, 40, 40, 0.12) !important;
    }

    /* ── Ссылка только на ник (inline — не на всю ширину колонки) ─ */
    .ratings-page .viewer-summary {
      cursor: default !important;
    }
    .ratings-page .viewer-summary .chevron {
      cursor: pointer !important;
    }
    .vr-name-link {
      display: inline;
      cursor: pointer;
      color: inherit;
      text-decoration: none;
      transition: color .15s;
    }
    .vr-name-link:hover {
      color: #ef9a9a !important;
      text-decoration: underline;
    }

    /* ── Slot row hover ──────────────────────────────────────────── */
    .slot-row:hover td { background: rgba(198,40,40,.08) !important; }

    /* ── Achievement tiles — red hover ──────────────────────────── */
    .ach-tile:hover:not(.locked):not(.globally-locked) {
      box-shadow: 0 8px 24px rgba(198,40,40,.32) !important;
      border-color: rgba(198,40,40,.55) !important;
    }

    /* ── Achievement popup — red ─────────────────────────────────── */
    .ach-popup-modal {
      border-color: rgba(198,40,40,.35) !important;
      background: linear-gradient(160deg, #1a0a0a, #0a0508) !important;
      box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 32px rgba(198,40,40,.18) !important;
    }
    .ach-popup-type { color: #ef9a9a !important; }
    .ach-popup-icon { filter: drop-shadow(0 0 14px rgba(198,40,40,.55)) !important; }

    /* ── Lang switcher active ────────────────────────────────────── */
    .lang-btn--active {
      background: rgba(198,40,40,.35) !important;
      color: #ffcdd2 !important;
    }
    .lang-btn:hover { color: rgba(255,200,200,.7) !important; }

    /* ── Search locked state — Figma: контейнер виден, только input при 0.7 ── */
    .ratings-page .lb-search-inner--locked {
      opacity: 1 !important;
      cursor: default !important;
    }
    .ratings-page .lb-search-inner--locked .lb-search-input { opacity: 0.7; }

    /* ── Search bar focus — red ──────────────────────────────────── */
    .lb-search-inner:focus-within {
      border-color: rgba(198,40,40,.38) !important;
      background: rgba(198,40,40,.04) !important;
    }
    .lb-search-input { caret-color: #ef5350 !important; }
    .lb-search-icon { color: #9D9D9D !important; }
    .lb-search-lock { color: rgba(207,179,28,.8) !important; }

    /* Скрытая кнопка для app.js — клик эмулируется с видимой pill «Друзья» */
    .ratings-page #friends-toggle.friends-toggle-sr {
      position: fixed !important;
      width: 1px !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip-path: inset(50%) !important;
      border: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* ── Friends toggle — red ─────── */
    #friends-toggle {
      border-color: rgba(198,40,40,.38) !important;
      background: rgba(198,40,40,.07) !important;
      color: #ef9a9a !important;
    }
    #friends-toggle:hover:not(:disabled) {
      border-color: rgba(239,154,154,.65) !important;
      background: rgba(198,40,40,.16) !important;
      color: #ffcdd2 !important;
    }
    #friends-toggle.active {
      background: linear-gradient(135deg, rgba(198,40,40,.38), rgba(239,154,154,.18)) !important;
      border-color: #ef9a9a !important;
      color: #fff !important;
      box-shadow: 0 0 18px rgba(198,40,40,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }
    .ft-spinner {
      border-color: rgba(239,154,154,.3) !important;
      border-top-color: #ef9a9a !important;
    }

    /* ── Iv-nav buttons hover — red ──────────────────────────────── */
    .iv-nav-btn:hover { border-color: rgba(198,40,40,.5) !important; }
    .iv-modal {
      background: #0a0508 !important;
    }

    /* ── VIP gate btn ────────────────────────────────────────────── */
    .vip-gate-btn {
      background: linear-gradient(135deg, #b71c1c, #ef5350) !important;
    }
    .vip-gate-box {
      background: #12050a !important;
    }
    #vip-gate-close:hover { color: #ffcdd2 !important; }

    /* ── Confirm modal ───────────────────────────────────────────── */
    .confirm-box {
      background: rgba(10,5,8,.97) !important;
      border-color: rgba(198,40,40,.22) !important;
      box-shadow: 0 24px 64px rgba(0,0,0,.85), 0 0 0 1px rgba(198,40,40,.08) !important;
    }
    .confirm-ok {
      background: linear-gradient(135deg, #b71c1c, #ef5350) !important;
    }

    /* ── Modals — dark bg ────────────────────────────────────────── */
    .start-arena-box {
      background: #0a0508 !important;
      border-color: rgba(198,40,40,.15) !important;
    }
    .arena-modal {
      background: #0a0508 !important;
      border-color: rgba(198,40,40,.12) !important;
    }

    /* ── Game picker — red ───────────────────────────────────────── */
    .game-picker-item:hover {
      border-color: rgba(239,154,154,.45) !important;
      background: rgba(198,40,40,.1) !important;
      box-shadow: 0 0 0 1px rgba(198,40,40,.12), 0 4px 20px rgba(0,0,0,.25) !important;
    }
    .game-picker-item.selected {
      border-color: rgba(239,154,154,.7) !important;
      background: rgba(198,40,40,.16) !important;
      box-shadow: 0 0 16px rgba(198,40,40,.25), 0 0 0 1px rgba(239,154,154,.2) !important;
    }
    .game-picker-code { color: #ffcdd2 !important; }

    /* ── Arena field focus ───────────────────────────────────────── */
    .arena-field input:focus,
    .arena-field select:focus { border-color: rgba(198,40,40,.6) !important; }

    /* ── Arena type/status pills ─────────────────────────────────── */
    .arena-type-pill.bestof {
      color: #ef9a9a !important;
      border-color: rgba(198,40,40,.35) !important;
      background: rgba(198,40,40,.1) !important;
    }
    .arena-status-pill.finished {
      color: #ef9a9a !important;
      border-color: rgba(198,40,40,.3) !important;
      background: rgba(198,40,40,.08) !important;
    }

    /* ── Arenas button — Figma: gold gradient + gold border ──────── */
    #btn-arenas {
      background: linear-gradient(174deg, rgba(255,180,0,.12) 0%, rgba(255,160,0,.06) 100%) !important;
      border: 1px solid rgba(255,180,0,.4) !important;
      border-radius: 99px !important;
      color: #ffc94d !important;
    }
    #btn-arenas:hover {
      background: linear-gradient(174deg, rgba(255,180,0,.2) 0%, rgba(255,160,0,.1) 100%) !important;
    }

    /* ── Pagination — Figma: bg White 6%, border White 12%, text French Gray */
    .lb-page-btn {
      background: rgba(255,255,255,.06) !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      color: #C0C0C8 !important;
      padding: 7px 18px !important;
      border-radius: 8px !important;
      font-size: 10.9px !important;
      font-weight: 600 !important;
    }
    .lb-page-btn:not(:disabled):hover {
      border-color: rgba(239,154,154,.4) !important;
      color: #ffcdd2 !important;
    }
    .lb-page-btn.active-page {
      background: rgba(198,40,40,.12) !important;
      border-color: rgba(239,154,154,.4) !important;
      color: #ffcdd2 !important;
    }
    .lb-page-label {
      color: #C0C0C8 !important;
      font-size: 10.9px !important;
      font-weight: 600 !important;
    }

    /* ── Ticker — clickable links ────────────────────────────────── */
    .ticker-item strong { color: rgba(239,154,154,.85) !important; }
    .ticker-link {
      color: #5b9bd5 !important;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
      transition: opacity .2s;
    }
    .ticker-link:hover {
      opacity: .8;
      text-decoration: underline;
    }
    /* Figma: rgba(32,32,32,0.45), border-bottom rgba(255,255,255,0.05) */
    .status-ticker {
      background: rgba(32,32,32,.45) !important;
      border-bottom-color: rgba(255,255,255,.05) !important;
    }

    /* ── Admin bar ───────────────────────────────────────────────── */
    #btn-admin {
      background: rgba(6,3,4,.88) !important;
    }
    #btn-admin:hover { border-color: rgba(255,215,0,.5) !important; color: #ffd700 !important; }

    /* ── Spinner ─────────────────────────────────────────────────── */
    .spinner { border-top-color: #ef5350 !important; }

    /* ── Sidebar art card hover — red glow ───────────────────────── */
    #sidebar-art-card:hover {
      border-color: rgba(198,40,40,.35) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 32px rgba(0,0,0,.55),
        0 0 32px rgba(198,40,40,.2),
        0 0 64px rgba(198,40,40,.07) !important;
    }

    /* ── Unique pioneer stays gold — no override ─────────────────── */

    /* ── Btn primary ─────────────────────────────────────────────── */
    #af-submit,
    #btn-start-arena-confirm {
      background: linear-gradient(135deg, #c62828, #ef5350) !important;
    }

    /* ── Twitch login button — stays purple (brand) ──────────────── */
    /* #btn-find-me — intentionally not overridden */

    /* ── My profile btn in header ────────────────────────────────── */
    #btn-profile-me {
      background: rgba(198,40,40,.1) !important;
      border-color: rgba(198,40,40,.3) !important;
      color: #ef9a9a !important;
    }
    #btn-profile-me:hover {
      background: rgba(198,40,40,.2) !important;
    }

    /* ── Separator color for "where am I" ────────────────────────── */
    /* separator-subtle stays neutral */

    /* ── Viewer row panels — slightly denser fill */
    .viewer-block {
      background: rgba(255,255,255,.055) !important;
      border-color: rgba(255,255,255,.06) !important;
    }

    /* ── Game block ──────────────────────────────────────────────── */
    .game-block {
      background: rgba(255,255,255,.035) !important;
      border-color: rgba(255,255,255,.06) !important;
    }

    /* ── Skeleton pulse ──────────────────────────────────────────── */
    .sk-block {
      background: rgba(255,255,255,.04) !important;
      border-color: rgba(255,255,255,.05) !important;
    }

    /* ── Friends banner text ─────────────────────────────────────── */
    #friends-banner { color: #ef9a9a !important; }

    /* ── Notif box ───────────────────────────────────────────────── */
    .notif-box {
      background: #0a0508 !important;
      border-color: rgba(198,40,40,.12) !important;
    }

    /* ── Period tabs pill container ──────────────────────────────── */
    .ratings-page .hdr-tabs {
      background: rgba(26,26,26,.56) !important;
      border: 1px solid rgba(255,255,255,.08) !important;
      border-radius: 99px !important;
      padding: 3px !important;
      gap: 1px !important;
    }
    .ratings-page .tab-btn {
      border-radius: 99px !important;
      border: none !important;
      background: none !important;
      color: #9D9D9D !important;
      font-weight: 600 !important;
      font-size: 13.1px !important;
      padding: 6px 16px !important;
    }
    .ratings-page .tab-btn.active {
      background: linear-gradient(145deg, rgba(107,0,0,.7) 0%, rgba(181,37,37,.7) 100%) !important;
      color: #FFDDDD !important;
      box-shadow: 0 2px 14px rgba(191,92,92,.45) !important;
    }

    /* ── Кнопка «Друзья» снаружи поиска — красная таблетка ─────── */
    .lb-friends-pill-wrap {
      display: none;
      flex-shrink: 0;
      align-items: center;
    }

    .lb-friends-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 13.1px;
      font-weight: 600;
      line-height: 1.25;
      color: #F4D5D5 !important;
      background: #821B1B;
      border: 1px solid #312222;
      transition: background 0.15s;
    }

    .lb-friends-pill:hover {
      background: #9B2020;
    }

    .lb-friends-pill.active {
      background: #9B2020;
      border-color: #1e1010;
    }

    /* ── Responsive: lb-card-header wraps on small screens ──────── */
    @media (max-width: 768px) {
      .lb-card-header {
        gap: 8px;
        padding: 12px 12px 10px;
      }
      .lb-card-header .lb-search-outer {
        order: 10;
        flex: 1 1 100%;
        min-width: 0;
      }
    }
    @media (max-width: 480px) {
      .lb-card-header .hdr-tabs {
        overflow-x: auto;
        flex-shrink: 1;
        min-width: 0;
      }
      .ratings-page .tab-btn {
        padding: 5px 10px !important;
        font-size: .72rem !important;
        min-width: unset !important;
      }
      .ratings-page .lb-friends-pill {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
      }
    }

    /* ── Строка лидерборда на мобилках: без ряда ачивок, больше места нику ──
       На узких экранах скрываем ряд ачивок в таблице. */
    @media (max-width: 768px) {
      .ratings-page .ach-badges {
        display: none !important;
      }

      .ratings-page .viewer-summary {
        align-items: center;
        gap: 4px !important;
        padding: 8px 4px !important;
      }

      .ratings-page .vr-name-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
      }

      .ratings-page .vr-name {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: inline-block !important;
        vertical-align: bottom !important;
        min-width: 0 !important;
        line-height: 1.25;
      }
      .ratings-page .vr-name-link {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
      }

      /* Титул под ником — внутри колонки, без наезда на счётчик игр / очки */
      .ratings-page .vr-title {
        margin-top: 2px !important;
        max-width: 100%;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .ratings-page .special-ach-icon,
      .ratings-page .special-ach-more {
        align-self: flex-start;
        margin-top: 2px;
      }

      .ratings-page .vr-games-count {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
      }

      .ratings-page .vr-score {
        align-self: center;
        flex-shrink: 0;
      }

      .ratings-page .chevron {
        align-self: center;
      }
    }