/* Общие токены «Как все» — язык аукциона: тёмная стеклянная сцена, цветные пятна и зерно, Unbounded + Onest, градиенты.
   Мир остаётся прежним (перетягивание каната, две стороны), но без ярмарки: ни неба, ни травы, ни толстых обводок.
   Доска и телефон подключают этот файл и дальше рисуют своё. Стороны различимы и при дальтонизме: синий и оранжевый
   по яркости и по иконкам (✔ / ✖, буквы А / Б). Тема только тёмная: «принудительная тёмная тема» её не перекрашивает. */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Onest:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #08080c;
  --text: #f4f2ff;
  --muted: rgba(244, 242, 255, .68);
  --glass: rgba(255, 255, 255, .06);
  --glass-hi: rgba(255, 255, 255, .10);
  --glass-line: rgba(255, 255, 255, .12);
  --c1: #8b5cf6;
  --c2: #ec4899;
  --c3: #22d3ee;
  --side-a: #4f8bff;      /* ДА / А */
  --side-a2: #22d3ee;
  --side-b: #ff7a2f;      /* НЕТ / Б */
  --side-b2: #ec4899;
  --ok: #34d399;
  --bad: #fb7185;
  --gold: #fbbf24;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* старые имена, чтобы не ломать то, что ещё не переписано */
  --f-head: var(--display);
  --f-body: var(--body);
  --ink: var(--text);
}

html { background: var(--bg); touch-action: manipulation; }

/* фон мира: плавающие цветные пятна + зерно (в HTML — <div class="bg"><i class="blob a"></i><i class="blob b"></i><i class="blob c"></i><div class="grain"></div></div>) */
.bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.blob { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(90px); opacity: .38; transition: background 1s ease; will-change: transform; }
.blob.a { background: var(--side-a); top: -22vmax; left: -14vmax; animation: crowd-drift1 22s ease-in-out infinite alternate; }
.blob.b { background: var(--side-b); bottom: -28vmax; right: -16vmax; animation: crowd-drift2 26s ease-in-out infinite alternate; }
.blob.c { background: var(--c1); top: 35%; left: 45%; width: 32vmax; height: 32vmax; opacity: .22; animation: crowd-drift3 30s ease-in-out infinite alternate; }
@keyframes crowd-drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes crowd-drift2 { to { transform: translate(-12vmax, -14vmax) scale(1.1); } }
@keyframes crowd-drift3 { to { transform: translate(-20vmax, 8vmax) scale(1.3); } }
.grain { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* стеклянная панель и градиентная кнопка — как в аукционе */
.glass { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cta-btn { font: 900 clamp(16px, 4.6vw, 22px)/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #0a0a0f;
  background: linear-gradient(100deg, var(--c1), var(--c2) 60%, var(--c3)); border: 0; border-radius: 20px; padding: 20px;
  box-shadow: 0 22px 60px -22px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .45); cursor: pointer; }
.cta-btn:disabled { opacity: .45; cursor: default; }
.side-a-fill { background: linear-gradient(135deg, var(--side-a), var(--side-a2)); }
.side-b-fill { background: linear-gradient(135deg, var(--side-b), var(--side-b2)); }

/* --- дописано при переезде телефона на язык аукциона --- */
:root {
  --ink-dark: #0a0a0f;                 /* текст на градиентных кнопках и сторонах */
  --gold2: #f59e0b;
  --glow-a: rgba(79, 139, 255, .55);   /* свечение стороны А */
  --glow-b: rgba(255, 122, 47, .55);   /* свечение стороны Б */
  --grad-main: linear-gradient(100deg, var(--c1), var(--c2) 60%, var(--c3));
  --grad-a: linear-gradient(135deg, var(--side-a), var(--side-a2));
  --grad-b: linear-gradient(135deg, var(--side-b), var(--side-b2));
}
.grad-text { background: linear-gradient(100deg, var(--c3), var(--c1) 55%, var(--c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.chip { display: inline-block; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px; padding: 4px 11px; font: 700 13px/1.2 var(--body); }