/* Golden Guns — дизайн-система 2.0.2 · gg.css
   Собрано gen.py из tokens.dtcg.json (sha256 341319461e373884). Руками не править.
   Темы: <… data-gg-theme="arena"> (сайт, по умолчанию) и <… data-gg-theme="graphite"> (ладдер, кабинет).
   Совместимость: --gg-ld-* 1.3 = графит в любом блоке. Прочие имена 1.3 — gg-compat-13.css. */

@layer gg.legacy, gg.tokens, gg.base, gg.components;

/* Шрифты. Латиница заголовков — Bowlby One; кириллица, № и ₽ — GG Cyr Display (= Montserrat Black,
   решение владельца 27.08 и 23.09.2026), size-adjust 106 % по высоте заглавных.
   Oswald и JetBrains Mono — из общего /assets/fonts/fonts.css сайта (браузер грузит их только там, где они нужны). */
@font-face { font-family: 'Bowlby One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://csgg.pro/assets/fonts/gg-cyr-display-900.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD; size-adjust: 106%; }
@font-face { font-family: 'GG Cyr Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://csgg.pro/assets/fonts/gg-cyr-display-900.woff2) format('woff2'); size-adjust: 106%; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://csgg.pro/assets/fonts/montserrat-var.woff2) format('woff2'); }

@layer gg.tokens {
  :root {
    --gg-p-red-400: #EF5A43;
    --gg-p-red-500: #E0412B;
    --gg-p-red-600: #C73A26;
    --gg-p-red-700: #B8321F;
    --gg-p-red-800: #A82D1C;
    --gg-p-cream-50: #F5F1E8;
    --gg-p-white: #FFFFFF;
    --gg-p-black: #000000;
    --gg-p-warm-1000: #050304;
    --gg-p-warm-950: #0A0608;
    --gg-p-warm-925: #14080B;
    --gg-p-warm-900: #1A0508;
    --gg-p-warm-875: #1F0A0F;
    --gg-p-warm-850: #2A0F14;
    --gg-p-warm-200: #D5D0C6;
    --gg-p-warm-400: #9A9590;
    --gg-p-warm-500: #8A847E;
    --gg-p-graphite-1000: #050506;
    --gg-p-graphite-950: #08080A;
    --gg-p-graphite-925: #0E0F12;
    --gg-p-graphite-900: #131418;
    --gg-p-graphite-875: #1A1B20;
    --gg-p-graphite-850: #202127;
    --gg-p-graphite-50: #F1EFEA;
    --gg-p-graphite-200: #C8C6C1;
    --gg-p-graphite-400: #8F8D89;
    --gg-p-graphite-500: #8A8884;
    --gg-p-gold-400: #F2C463;
    --gg-p-amber-400: #F0B43C;
    --gg-p-green-400: #3ECF7A;
    --gg-p-violet-400: #B18AFF;
    --gg-p-danger-400: #EF4444;
    --gg-p-ct-300: #8FB4F0;
    --gg-p-t-400: #E8A25A;
    --gg-p-stone-300: #A9A39A;
    --gg-p-flame-400: #FF6A4D;
    --gg-line-accent: rgba(224,65,43,.30);
    --gg-on-accent: var(--gg-p-white);
    --gg-accent: var(--gg-p-red-500);
    --gg-accent-hover: var(--gg-p-red-600);
    --gg-accent-press: var(--gg-p-red-700);
    --gg-accent-fill: var(--gg-p-red-600);
    --gg-accent-fill-hover: var(--gg-p-red-700);
    --gg-accent-fill-press: var(--gg-p-red-800);
    --gg-gold: var(--gg-p-gold-400);
    --gg-gold-wash: rgba(242,196,99,.12);
    --gg-ct: var(--gg-p-ct-300);
    --gg-t: var(--gg-p-t-400);
    --gg-ok: var(--gg-p-green-400);
    --gg-warn: var(--gg-p-amber-400);
    --gg-danger: var(--gg-p-danger-400);
    --gg-live: var(--gg-p-violet-400);
    --gg-font-display: 'Bowlby One', 'GG Cyr Display', 'Montserrat', Impact, sans-serif;
    --gg-font-ui: 'Oswald', 'Montserrat', 'Arial Narrow', sans-serif;
    --gg-font-text: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
    --gg-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    --gg-fs-11: 11px;
    --gg-fs-12: 12px;
    --gg-fs-13: 13px;
    --gg-fs-14: 14px;
    --gg-fs-16: 16px;
    --gg-fs-20: 20px;
    --gg-fs-24: 24px;
    --gg-fs-32: 32px;
    --gg-fs-44: 44px;
    --gg-fs-64: 64px;
    --gg-fs-hero: clamp(44px, 6vw, 96px);
    --gg-fw-regular: 400;
    --gg-fw-medium: 500;
    --gg-fw-bold: 700;
    --gg-fw-heavy: 800;
    --gg-fw-black: 900;
    --gg-lh-tight: 1;
    --gg-lh-head: 1.15;
    --gg-lh-ui: 1.35;
    --gg-lh-text: 1.6;
    --gg-ls-head: .02em;
    --gg-ls-label: .12em;
    --gg-ls-mono: .18em;
    --gg-space-2xs: 2px;
    --gg-space-xs: 4px;
    --gg-space-sm: 8px;
    --gg-space-ms: 12px;
    --gg-space-md: 16px;
    --gg-space-lg: 24px;
    --gg-space-xl: 32px;
    --gg-space-2xl: 48px;
    --gg-space-3xl: 80px;
    --gg-radius-0: 0px;
    --gg-radius-sm: 4px;
    --gg-radius-md: 8px;
    --gg-radius-lg: 16px;
    --gg-radius-pill: 999px;
    --gg-radius-round: 50%;
    --gg-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.45);
    --gg-shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.7);
    --gg-glow-accent: 0 0 0 1px rgba(224,65,43,.9), 0 8px 28px rgba(224,65,43,.35);
    --gg-glow-gold: 0 0 22px rgba(233,183,84,.45);
    --gg-clip-btn: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    --gg-clip-card: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    --gg-clip-corner: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    --gg-clip-stamp: polygon(10% 0, 90% 0, 100% 18%, 100% 82%, 90% 100%, 10% 100%, 0 82%, 0 18%);
    --gg-dur-fast: 180ms;
    --gg-dur-step: 300ms;
    --gg-dur-base: 380ms;
    --gg-dur-strike: 420ms;
    --gg-dur-flip: 450ms;
    --gg-dur-stamp: 520ms;
    --gg-dur-fly: 600ms;
    --gg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --gg-ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
    --gg-ease-stamp: cubic-bezier(0.17, 0.89, 0.32, 1.28);
    --gg-container-text: 760px;
    --gg-container: 1200px;
    --gg-container-wide: 1440px;
    --gg-gutter: clamp(16px, 3vw, 40px);
    --gg-section-y: clamp(48px, 7vw, 96px);
    --gg-tap: 44px;
    --gg-header-h: 76px;
    --gg-z-sticky: 20;
    --gg-z-strip: 60;
    --gg-z-pop: 70;
    --gg-z-panel: 80;
    --gg-z-modal: 90;
    --gg-btn-h: 44px;
    --gg-btn-h-sm: 36px;
    --gg-btn-primary-bg: var(--gg-accent-fill);
    --gg-btn-primary-bg-hover: var(--gg-accent-fill-hover);
    --gg-btn-primary-bg-press: var(--gg-accent-fill-press);
    --gg-btn-primary-text: var(--gg-on-accent);
    --gg-btn-fs: var(--gg-fs-14);
    --gg-ssb-h: 64px;
    --gg-ssb-label-fs: 22px;
    --gg-ssb-seg-w: 88px;
    --gg-ssb-seg-w-sm: 80px;
    --gg-ssb-divider: rgba(0,0,0,.32);
    --gg-ssb-sw-off: rgba(255,255,255,.82);
    --gg-card-pad: var(--gg-space-lg);
    --gg-chat-avatar: 18px;
    --gg-chat-fs: var(--gg-fs-13);
    --gg-chat-lh: 1.45;
    --gg-chat-font: var(--gg-font-mono);
    --gg-chat-sys: var(--gg-gold);
    --gg-chat-sys-bg: var(--gg-gold-wash);
    --gg-chat-mention-line: var(--gg-accent);
    --gg-chat-game: var(--gg-ct);
    --gg-chat-row-gap: var(--gg-space-2xs);
    --gg-chat-input-min: 180px;
    --gg-emote-inline: 20px;
    --gg-emote-big: 40px;
    --gg-emote-cell: 44px;
    --gg-emote-cell-img: 28px;
    --gg-emote-suggest-img: 20px;
    --gg-emote-preview: 56px;
    --gg-media-card-w: 240px;
    --gg-media-thumb-ratio: 16 / 9;
    --gg-media-gap: var(--gg-space-ms);
    --gg-media-player-max: 960px;
    --gg-impact-low: var(--gg-p-stone-300);
    --gg-impact-hi: var(--gg-gold);
    --gg-impact-top: var(--gg-p-flame-400);
    --gg-rank-sss: #F6D27A;
    --gg-rank-sss-bg: #0B0907;
    --gg-rank-ss: #8F1426;
    --gg-rank-s: var(--gg-p-red-500);
    --gg-rank-a: #A9C3E6;
    --gg-rank-a-bg: #0F1824;
    --gg-rank-b: #E0A06A;
    --gg-rank-b-bg: #3A2010;
    --gg-rank-c: #B4BDC8;
    --gg-rank-c-bg: #1E2329;
    --gg-rank-d: #8E8984;
    --gg-rank-d-bg: #1A1715;
    --gg-medal-gold: #F7CF4A;
    --gg-medal-silver: #DCE1E8;
    --gg-medal-bronze: #E0955A;
    --gg-medal-ribbon: #9C2617;
    --gg-foil-gold: linear-gradient(115deg, #7a4a10 0%, #c48a2c 12%, #ffe7a8 27%, #f2c463 40%, #b47621 55%, #ffe29e 71%, #d29a39 86%, #865010 100%);
    --gg-foil-plat: linear-gradient(115deg, #555c66 0%, #959ca6 14%, #d9dde3 29%, #bcc2ca 42%, #7e8692 57%, #d3d8de 73%, #a0a7b0 87%, #58606a 100%);
    --gg-foil-silver-blue: linear-gradient(160deg, #f2f7ff 0%, #a9c3e6 38%, #6d86a8 62%, #dce8f8 100%);
    --gg-foil-bronze: linear-gradient(160deg, #ffe2c6 0%, #e0955a 40%, #a65a2a 70%, #ffd0a6 100%);
    --gg-mod-ban-fg: var(--gg-danger);
    --gg-mod-ban-line: var(--gg-danger);
    --gg-mod-ban-bg: rgba(239,68,68,.06);
    --gg-mod-limit-fg: var(--gg-warn);
    --gg-mod-limit-line: var(--gg-warn);
    --gg-mod-limit-bg: rgba(240,180,60,.12);
    --gg-mod-lifted-fg: var(--gg-ok);
    --gg-mod-lifted-line: rgba(62,207,122,.55);
    --gg-mod-panel-w: clamp(320px, 34vw, 480px);
    --gg-mod-z: var(--gg-z-panel);
  }

  /* Тема «Арена» — по умолчанию */
  :root, [data-gg-theme="arena"] {
    --gg-bg: var(--gg-p-warm-950);
    --gg-sunken: var(--gg-p-warm-1000);
    --gg-surface: var(--gg-p-warm-900);
    --gg-card: var(--gg-p-warm-925);
    --gg-raised: var(--gg-p-warm-875);
    --gg-hover: var(--gg-p-warm-850);
    --gg-line: rgba(245,241,232,.08);
    --gg-line-2: rgba(245,241,232,.15);
    --gg-line-3: rgba(245,241,232,.26);
    --gg-line-field: rgba(245,241,232,.42);
    --gg-text: var(--gg-p-cream-50);
    --gg-text-2: var(--gg-p-warm-200);
    --gg-muted: var(--gg-p-warm-400);
    --gg-dim: var(--gg-p-warm-500);
    --gg-accent-wash: rgba(224,65,43,.10);
    --gg-focus: var(--gg-p-cream-50);
    --gg-scrim: rgba(5,3,4,.82);
    --gg-glass: rgba(20,8,11,.78);
    --gg-media-shade: rgba(10,6,8,.72);
    --gg-btn-radius: var(--gg-radius-0);
    --gg-btn-clip: var(--gg-clip-btn);
    --gg-card-radius: var(--gg-radius-0);
    --gg-card-clip: var(--gg-clip-card);
    --gg-chat-text: var(--gg-text-2);
    --gg-chat-nick: var(--gg-text);
    --gg-chat-time: var(--gg-muted);
    --gg-chat-mention-bg: var(--gg-accent-wash);
    --gg-media-badge-bg: var(--gg-scrim);
    --gg-media-radius: var(--gg-radius-0);
    --gg-media-clip: var(--gg-clip-corner);
    --gg-impact-norm: var(--gg-text);
    --gg-mod-warn-fg: var(--gg-text-2);
    --gg-mod-warn-line: var(--gg-line-field);
    --gg-mod-review-fg: var(--gg-text-2);
    --gg-mod-review-line: var(--gg-line-field);
    --gg-mod-pending-line: var(--gg-line-field);
    --gg-mod-off-fg: var(--gg-dim);
    --gg-role-fg: var(--gg-text-2);
    --gg-role-owner-fg: var(--gg-text);
    --gg-role-line: var(--gg-line-field);
    --gg-role-off-fg: var(--gg-dim);
    --gg-role-yes: var(--gg-text);
    --gg-role-propose-line: var(--gg-line-field);
    --gg-role-scoped-line: var(--gg-line-field);
    --gg-role-no: var(--gg-dim);
    --gg-ggnick-auto-line: var(--gg-line-field);
    --gg-ggnick-auto-fg: var(--gg-text-2);
  }

  /* Тема «Графит»: те же имена, другие значения */
  [data-gg-theme="graphite"] {
    --gg-bg: var(--gg-p-graphite-950);
    --gg-sunken: var(--gg-p-graphite-1000);
    --gg-surface: var(--gg-p-graphite-925);
    --gg-card: var(--gg-p-graphite-900);
    --gg-raised: var(--gg-p-graphite-875);
    --gg-hover: var(--gg-p-graphite-850);
    --gg-line: rgba(255,255,255,.07);
    --gg-line-2: rgba(255,255,255,.13);
    --gg-line-3: rgba(255,255,255,.24);
    --gg-line-field: rgba(255,255,255,.40);
    --gg-text: var(--gg-p-graphite-50);
    --gg-text-2: var(--gg-p-graphite-200);
    --gg-muted: var(--gg-p-graphite-400);
    --gg-dim: var(--gg-p-graphite-500);
    --gg-accent-wash: rgba(224,65,43,.07);
    --gg-focus: var(--gg-p-graphite-50);
    --gg-scrim: rgba(5,5,6,.82);
    --gg-glass: rgba(14,15,18,.78);
    --gg-media-shade: rgba(8,8,10,.72);
    --gg-btn-radius: var(--gg-radius-md);
    --gg-btn-clip: none;
    --gg-card-radius: var(--gg-radius-md);
    --gg-card-clip: none;
    --gg-chat-text: var(--gg-text-2);
    --gg-chat-nick: var(--gg-text);
    --gg-chat-time: var(--gg-muted);
    --gg-chat-mention-bg: var(--gg-accent-wash);
    --gg-media-badge-bg: var(--gg-scrim);
    --gg-media-radius: var(--gg-radius-md);
    --gg-media-clip: none;
    --gg-impact-norm: var(--gg-text);
    --gg-mod-warn-fg: var(--gg-text-2);
    --gg-mod-warn-line: var(--gg-line-field);
    --gg-mod-review-fg: var(--gg-text-2);
    --gg-mod-review-line: var(--gg-line-field);
    --gg-mod-pending-line: var(--gg-line-field);
    --gg-mod-off-fg: var(--gg-dim);
    --gg-role-fg: var(--gg-text-2);
    --gg-role-owner-fg: var(--gg-text);
    --gg-role-line: var(--gg-line-field);
    --gg-role-off-fg: var(--gg-dim);
    --gg-role-yes: var(--gg-text);
    --gg-role-propose-line: var(--gg-line-field);
    --gg-role-scoped-line: var(--gg-line-field);
    --gg-role-no: var(--gg-dim);
    --gg-ggnick-auto-line: var(--gg-line-field);
    --gg-ggnick-auto-fg: var(--gg-text-2);
  }

  /* Совместимость 1.3: --gg-ld-* — всегда графит */
  :root {
    --gg-ld-bg: var(--gg-p-graphite-950);
    --gg-ld-sunken: var(--gg-p-graphite-1000);
    --gg-ld-surface: var(--gg-p-graphite-925);
    --gg-ld-card: var(--gg-p-graphite-900);
    --gg-ld-raised: var(--gg-p-graphite-875);
    --gg-ld-hover: var(--gg-p-graphite-850);
    --gg-ld-line: rgba(255,255,255,.07);
    --gg-ld-line-2: rgba(255,255,255,.13);
    --gg-ld-line-3: rgba(255,255,255,.24);
    --gg-ld-text: var(--gg-p-graphite-50);
    --gg-ld-text-2: var(--gg-p-graphite-200);
    --gg-ld-muted: var(--gg-p-graphite-400);
    --gg-ld-dim: var(--gg-p-graphite-500);
    --gg-ld-accent: var(--gg-accent);
    --gg-ld-accent-wash: rgba(224,65,43,.07);
    --gg-ld-glass: rgba(14,15,18,.78);
    --gg-ld-shadow-1: var(--gg-shadow-1);
    --gg-ld-shadow-2: var(--gg-shadow-2);
    --gg-ld-glow-accent: var(--gg-glow-accent);
    --gg-ld-font-display: var(--gg-font-display);
    --gg-ld-font-ui: var(--gg-font-ui);
    --gg-ld-font-text: var(--gg-font-text);
    --gg-ld-font-mono: var(--gg-font-mono);
    --gg-ld-radius-sm: var(--gg-radius-sm);
    --gg-ld-radius-md: var(--gg-radius-md);
    --gg-ld-radius-lg: var(--gg-radius-lg);
    --gg-ld-radius-pill: var(--gg-radius-pill);
    --gg-ld-clip-button: var(--gg-clip-btn);
    --gg-ld-clip-card: var(--gg-clip-card);
    --gg-ld-clip-corner: var(--gg-clip-corner);
    --gg-ld-ease: var(--gg-ease-out);
    --gg-ld-ease-io: var(--gg-ease-in-out);
    --gg-ld-ease-stamp: var(--gg-ease-stamp);
    --gg-ld-dur-fast: var(--gg-dur-fast);
    --gg-ld-dur-base: var(--gg-dur-base);
    --gg-ld-dur-step: var(--gg-dur-step);
    --gg-ld-dur-flip: var(--gg-dur-flip);
    --gg-ld-dur-stamp: var(--gg-dur-stamp);
    --gg-ld-dur-strike: var(--gg-dur-strike);
    --gg-ld-dur-fly: var(--gg-dur-fly);
    --gg-ld-glint-period: 7s;
    --gg-ld-pulse-period: 1.6s;
  }
}

@layer gg.base {
  [data-gg-theme] { color-scheme: dark; }
  /* Видимый только чтецам текст */
  .gg-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* Роли текста 2.0 (приставка gg-tx-, чтобы не столкнуться с классами страниц) */
  .gg-tx-hero { font-family: var(--gg-font-display); font-size: var(--gg-fs-hero); line-height: var(--gg-lh-tight); letter-spacing: var(--gg-ls-head); text-transform: uppercase; font-weight: 400; }
  .gg-tx-h1 { font-family: var(--gg-font-display); font-size: var(--gg-fs-44); line-height: var(--gg-lh-head); letter-spacing: var(--gg-ls-head); text-transform: uppercase; font-weight: 400; }
  .gg-tx-h2 { font-family: var(--gg-font-display); font-size: var(--gg-fs-32); line-height: var(--gg-lh-head); letter-spacing: var(--gg-ls-head); text-transform: uppercase; font-weight: 400; }
  .gg-tx-h3 { font-family: var(--gg-font-ui); font-size: var(--gg-fs-20); line-height: var(--gg-lh-ui); font-weight: var(--gg-fw-bold); letter-spacing: .04em; text-transform: uppercase; }
  .gg-tx-label { font-family: var(--gg-font-ui); font-size: var(--gg-fs-11); line-height: var(--gg-lh-ui); font-weight: var(--gg-fw-bold); letter-spacing: var(--gg-ls-label); text-transform: uppercase; }
  .gg-tx-body { font-family: var(--gg-font-text); font-size: var(--gg-fs-16); line-height: var(--gg-lh-text); font-weight: var(--gg-fw-medium); }
  .gg-tx-ui { font-family: var(--gg-font-text); font-size: var(--gg-fs-14); line-height: var(--gg-lh-ui); font-weight: var(--gg-fw-medium); }
  .gg-tx-stat { font-family: var(--gg-font-ui); font-size: var(--gg-fs-24); line-height: var(--gg-lh-tight); font-weight: var(--gg-fw-bold); font-variant-numeric: tabular-nums; }
  .gg-tx-mono { font-family: var(--gg-font-mono); font-size: var(--gg-fs-13); line-height: var(--gg-lh-ui); font-weight: var(--gg-fw-medium); font-variant-numeric: tabular-nums; }

  /* Кнопка 2.0: одна разметка, форма от темы (арена — срез 8 px, графит — скругление 8 px) */
  .gg-button { --_bg: var(--gg-raised); --_fg: var(--gg-text); --_bd: var(--gg-line-3); box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gg-space-sm);
    min-height: var(--gg-btn-h); padding: 0 calc(var(--gg-space-lg) - 4px); border: 1px solid var(--_bd);
    border-radius: var(--gg-btn-radius); clip-path: var(--gg-btn-clip);
    background: var(--_bg); color: var(--_fg); font: var(--gg-fw-bold) var(--gg-btn-fs)/1 var(--gg-font-ui);
    letter-spacing: var(--gg-ls-label); text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: background-color var(--gg-dur-fast) var(--gg-ease-out), border-color var(--gg-dur-fast) var(--gg-ease-out); }
  .gg-button:hover { --_bg: var(--gg-hover); --_bd: var(--gg-line-field); }
  .gg-button:focus-visible { outline: 2px solid var(--gg-focus); outline-offset: 2px; clip-path: none; }
  .gg-button--primary { --_bg: var(--gg-btn-primary-bg); --_fg: var(--gg-btn-primary-text); --_bd: transparent; }
  .gg-button--primary:hover { --_bg: var(--gg-btn-primary-bg-hover); --_bd: transparent; }
  .gg-button--primary:active { --_bg: var(--gg-btn-primary-bg-press); }
  .gg-button--quiet { --_bg: transparent; --_bd: transparent; color: var(--gg-text-2); }
  .gg-button--sm { min-height: var(--gg-btn-h-sm); padding: 0 var(--gg-space-md); }
  .gg-button[disabled], .gg-button[aria-disabled="true"] { --_bg: var(--gg-card); --_fg: var(--gg-dim); --_bd: var(--gg-line); cursor: not-allowed; }
}

/* Кнопка поиска с участком «Автопоиск» — SplitSearchButton (2.0.1, решение владельца 15.10.2026).
   Две настоящие кнопки в одной рамке: основная часть .gg-ssb__main («Найти матч») и узкий участок-тумблер справа
   .gg-ssb__auto (role="switch", aria-checked). Состояние — data-state на .gg-ssb: ready (по умолчанию), accept, inmatch —
   красная заливка; searching — приподнятая; locked — поиск закрыт. Нет участка (гость, автопоиск недоступен) —
   основная часть на всю ширину. Разметка и правила — components/SplitSearchButton/README.md. */
@layer gg.components {
  .gg-ssb { --_bg: var(--gg-btn-primary-bg); --_bg-h: var(--gg-btn-primary-bg-hover); --_bg-a: var(--gg-btn-primary-bg-press);
    --_fg: var(--gg-btn-primary-text); --_div: var(--gg-ssb-divider); --_ring: transparent;
    --_sw: var(--gg-ssb-sw-off); --_kn: var(--gg-ssb-sw-off); --_on: var(--gg-btn-primary-text);
    box-sizing: border-box; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    width: 100%; min-height: var(--gg-ssb-h); overflow: hidden; border-radius: var(--gg-btn-radius); clip-path: var(--gg-btn-clip); }
  .gg-ssb::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--_ring); }
  .gg-ssb__main, .gg-ssb__auto { --_b: var(--_bg); box-sizing: border-box; margin: 0; border: 0; border-radius: 0;
    background: var(--_b); color: var(--_fg); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--gg-dur-fast) var(--gg-ease-out); }
  .gg-ssb__main:hover, .gg-ssb__auto:hover { --_b: var(--_bg-h); }
  .gg-ssb__main:active, .gg-ssb__auto:active { --_b: var(--_bg-a); }
  .gg-ssb__main:focus-visible, .gg-ssb__auto:focus-visible { outline: 2px solid var(--gg-focus); outline-offset: -5px; }
  .gg-ssb__main { container-type: inline-size; display: grid; place-items: center; align-content: center; gap: 6px;
    min-width: 0; min-height: var(--gg-ssb-h); padding: 8px 12px; text-align: center; text-decoration: none; }
  .gg-ssb__label { font-family: var(--gg-font-display); font-weight: 400; font-size: var(--gg-ssb-label-fs);
    font-size: min(var(--gg-ssb-label-fs), 7.6cqi); line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .gg-ssb__sub { font-family: var(--gg-font-mono); font-weight: 600; font-size: var(--gg-fs-11); line-height: 1.35;
    letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; }
  .gg-ssb__auto { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-width: var(--gg-ssb-seg-w); padding: 8px 10px; border-left: 1px solid var(--_div);
    font-family: var(--gg-font-ui); font-weight: var(--gg-fw-bold); font-size: var(--gg-fs-11); line-height: 1;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .gg-ssb__sw { position: relative; flex: none; width: 34px; height: 18px; border-radius: var(--gg-radius-pill);
    box-shadow: inset 0 0 0 2px var(--_sw); transition: background-color var(--gg-dur-fast) var(--gg-ease-out); }
  .gg-ssb__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--_kn); transition: transform var(--gg-dur-fast) var(--gg-ease-out), background-color var(--gg-dur-fast) var(--gg-ease-out); }
  .gg-ssb__auto[aria-checked="true"] .gg-ssb__sw { background: var(--_on); box-shadow: none; }
  .gg-ssb__auto[aria-checked="true"] .gg-ssb__sw::after { transform: translateX(16px); background: var(--_kn-on, var(--_b)); }
  .gg-ssb__auto[aria-busy="true"] { cursor: progress; }
  .gg-ssb__auto[aria-busy="true"] .gg-ssb__sw::after { opacity: .5; }
  .gg-ssb__auto[aria-disabled="true"] { --_bg: var(--gg-card); --_bg-h: var(--gg-card); --_bg-a: var(--gg-card); --_fg: var(--gg-muted);
    --_sw: var(--gg-line-field); --_kn: var(--gg-muted); --_on: var(--gg-line-3); --_kn-on: var(--gg-muted); cursor: not-allowed; }
  .gg-ssb__note { margin: var(--gg-space-xs) 0 0; color: var(--gg-muted); font: var(--gg-fw-medium) var(--gg-fs-12)/1.35 var(--gg-font-text); text-align: right; }
  .gg-ssb[data-state="inmatch"] .gg-ssb__label::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px;
    vertical-align: .12em; border-radius: 50%; background: currentColor; }
  .gg-ssb[data-state="searching"] { --_bg: var(--gg-raised); --_bg-h: var(--gg-hover); --_bg-a: var(--gg-card); --_fg: var(--gg-text);
    --_div: var(--gg-line-2); --_ring: var(--gg-line-2); --_sw: var(--gg-line-field); --_kn: var(--gg-muted); --_on: var(--gg-accent); --_kn-on: var(--gg-text); }
  .gg-ssb[data-state="searching"] .gg-ssb__label { font-family: var(--gg-font-mono); font-weight: 800; font-size: 30px; font-size: min(30px, 9cqi);
    letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  .gg-ssb[data-state="locked"] { --_bg: var(--gg-card); --_bg-h: var(--gg-hover); --_bg-a: var(--gg-card); --_fg: var(--gg-muted);
    --_div: var(--gg-line); --_ring: var(--gg-line); --_sw: var(--gg-line-field); --_kn: var(--gg-muted); --_on: var(--gg-accent); --_kn-on: var(--gg-text); }
  .gg-ssb[data-state="locked"] .gg-ssb__main { cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--gg-card) 0 10px, var(--gg-surface) 10px 20px); }
  @media (max-width: 479px) { .gg-ssb__auto { min-width: var(--gg-ssb-seg-w-sm); padding-inline: 6px; } }
  @media (forced-colors: active) {
    .gg-ssb { border: 1px solid ButtonText; }
    .gg-ssb__auto { border-left-color: ButtonText; }
    .gg-ssb__sw { border: 1px solid ButtonText; box-shadow: none; }
    .gg-ssb__sw::after { background: ButtonText; }
    .gg-ssb__auto[aria-checked="true"] .gg-ssb__sw { background: Highlight; }
    .gg-ssb__auto[aria-checked="true"] .gg-ssb__sw::after { background: HighlightText; }
  }
}

/* Движение: при «уменьшить движение» — мгновенно и без бесконечных анимаций (в том числе заданных в style="…") */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}