/* Палитра «неон и золото» — по макету design/new (логотип, фоны). Шрифты только системные. */
:root {
  --night: #0b0726;
  --mid: #1a0b44;
  --deep: #3a0f5c;
  --bar: #0a0620;
  --panel-a: #160b3d;
  --panel-b: #2a0f4f;
  --gold: #e9b949;
  --gold-hi: #ffe39a;
  --gold-deep: #9a6a1c;
  --pink: #ff3d8b;
  --a1: #ff3d8b; /* 0 треугольник — неон-розовый */
  --a2: #29d3f0; /* 1 круг — неон-бирюза */
  --a3: #f5c04a; /* 2 квадрат — золото */
  --a4: #b45cff; /* 3 ромб — неон-фиолет */
  --ink: #ffffff;
  --muted: #d6cdf2;
  --dark: #0b0726;
  --line: rgba(233, 185, 73, .38);
  --card: rgba(255, 255, 255, .06);
  --glass: linear-gradient(180deg, rgba(22, 12, 58, .9), rgba(10, 6, 30, .92));
  --ok: #17955a;
  --bad: #d4325a;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  font-family: var(--sans);
  /* цвет фона — последним слоем: shorthand `background` сбрасывает background-color */
  background:
    radial-gradient(1100px 700px at 90% 100%, rgba(255, 61, 139, .22), transparent 60%),
    radial-gradient(900px 600px at 0% 0%, rgba(80, 40, 200, .35), transparent 60%),
    linear-gradient(160deg, var(--night) 0%, var(--mid) 50%, var(--deep) 100%) var(--night);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* боке и искры: только градиенты и векторы, без картинок */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .45;
  background: radial-gradient(circle, rgba(255, 227, 154, .5), rgba(255, 227, 154, 0) 70%); }
.sky svg { position: absolute; fill: var(--gold-hi); opacity: .55; animation: twinkle 4s ease-in-out infinite; }
/* фон-картинка праздника (телефон, пульт): фиксированный слой, затемнение к центру */
.bgimg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--night) center top / cover no-repeat; }
.bgimg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 60% at 50% 52%, rgba(11, 7, 38, .72), rgba(11, 7, 38, .25) 75%, rgba(11, 7, 38, .1)); }

@keyframes twinkle { 50% { opacity: .15; transform: scale(.8); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glowpulse { 50% { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 70px rgba(255, 227, 154, .95), inset 0 0 30px rgba(255, 227, 154, .35); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes shine { 0%, 62% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes bounce-in { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
.enter > * { animation: rise .45s ease both; }
.enter > *:nth-child(2) { animation-delay: .06s; }
.enter > *:nth-child(3) { animation-delay: .12s; }
.enter > *:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.gold { color: var(--gold-hi); }
.muted { color: var(--muted); }
.shape { width: 1em; height: 1em; fill: #fff; flex: none; }
.hidden { display: none !important; }
.spinner { width: 1em; height: 1em; border-radius: 50%; display: inline-block;
  border: .12em solid rgba(255, 227, 154, .25); border-top-color: var(--gold-hi); animation: spin 1s linear infinite; }
/* золотой текст: заголовки, очки */
.goldtext { background: linear-gradient(180deg, #fff6d6 0%, #ffe39a 35%, #e9b949 70%, #b07a22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* логотип с бликом: блик бегает только по самой картинке (маска по её прозрачности) */
.logo { position: relative; display: inline-block; line-height: 0; animation: float 6s ease-in-out infinite; }
.logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 30px rgba(255, 61, 139, .35)); }
.logo::after { content: ''; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--logo-mask) center / 100% 100% no-repeat; mask: var(--logo-mask) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%) no-repeat;
  background-size: 50% 100%; animation: sweep 5s ease-in-out infinite; }
@keyframes sweep { 0%, 55% { background-position: -60% 0; } 100% { background-position: 260% 0; } }

/* Кнопка-вариант: неоновая рамка + фигура (для дальтоников), порядок цветов жёсткий */
/* --ac-soft / --ac-glow заданы явно: color-mix() не работает на iOS 15 и старше */
.opt { --ac: var(--a1); --ac-soft: rgba(255, 61, 139, .2); --ac-glow: rgba(255, 61, 139, .55); --ac-deep: #9c1452;
  position: relative; display: flex; align-items: center; text-align: left;
  border: 3px solid var(--ac); border-radius: 22px; color: #fff; font-weight: 800;
  background: linear-gradient(180deg, var(--ac-soft), rgba(10, 6, 30, .9) 55%), rgba(10, 6, 30, .88);
  box-shadow: 0 0 14px var(--ac-glow), 0 0 34px var(--ac-soft), inset 0 0 18px var(--ac-soft), inset 0 1px 0 rgba(255, 255, 255, .18);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  transition: opacity .3s, transform .15s, box-shadow .3s, background .2s, filter .3s; }
.opt .tile { display: grid; place-items: center; flex: none; border-radius: 16px;
  background: linear-gradient(180deg, var(--ac), var(--ac-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 16px var(--ac-glow); }
.opt .tile .shape { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.opt .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.o0, .k0 { --ac: var(--a1); --ac-soft: rgba(255, 61, 139, .2); --ac-glow: rgba(255, 61, 139, .55); --ac-deep: #9c1452; }
.o1, .k1 { --ac: var(--a2); --ac-soft: rgba(41, 211, 240, .18); --ac-glow: rgba(41, 211, 240, .55); --ac-deep: #0f6f8a; }
.o2, .k2 { --ac: var(--a3); --ac-soft: rgba(245, 192, 74, .18); --ac-glow: rgba(245, 192, 74, .55); --ac-deep: #8a5d10; }
.o3, .k3 { --ac: var(--a4); --ac-soft: rgba(180, 92, 255, .2); --ac-glow: rgba(180, 92, 255, .55); --ac-deep: #5a1f9a; }
.opt.chosen { background: linear-gradient(180deg, var(--ac-glow), var(--ac-soft) 70%), rgba(10, 6, 30, .9); transform: scale(1.02);
  box-shadow: 0 0 22px var(--ac-glow), 0 0 60px var(--ac-glow), inset 0 0 26px var(--ac-soft); }
.opt.right { border-color: var(--gold-hi); animation: glowpulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--gold-hi), 0 0 46px rgba(255, 227, 154, .7), inset 0 0 22px rgba(255, 227, 154, .25); }
.opt.dim { opacity: .35; filter: saturate(.4); }

/* Чип игрока: лобби, голосование — неоновая плашка */
.chip { display: inline-flex; align-items: center; gap: .45em; border-radius: 999px;
  border: 2px solid var(--ac); background: linear-gradient(180deg, var(--ac-soft), rgba(10, 6, 30, .85)); color: #fff; font-weight: 800;
  box-shadow: 0 0 14px var(--ac-glow), inset 0 0 10px var(--ac-soft); white-space: nowrap; overflow: hidden; }
.chip .nm { overflow: hidden; text-overflow: ellipsis; }
.chip.off { opacity: .45; }

.btn { border: 2px solid var(--gold); border-radius: 14px; background: rgba(233, 185, 73, .12); color: var(--gold-hi);
  font-weight: 800; padding: .7em 1.3em; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.primary { background: linear-gradient(180deg, #fff0bf, var(--gold-hi) 30%, var(--gold) 75%, #c8902c); color: #2a1500;
  border-color: #fff0bf; box-shadow: 0 0 22px rgba(255, 227, 154, .45), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .opt:focus-visible, .chip:focus-visible, input:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

/* эффекты: конфетти поверх всего, шары и звёзды — декор за содержимым */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
.deco-balloon { position: absolute; bottom: -30%; width: var(--w); pointer-events: none; opacity: .92;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); animation: balloon var(--dur) linear forwards; }
@keyframes balloon { 0% { transform: translate(0, 0) rotate(-3deg); }
  25% { transform: translate(var(--sway), -40vh) rotate(3deg); } 50% { transform: translate(0, -80vh) rotate(-3deg); }
  75% { transform: translate(var(--sway), -120vh) rotate(3deg); } 100% { transform: translate(0, -170vh) rotate(-2deg); } }
.deco-star { position: absolute; pointer-events: none; animation: twinkle 3.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255, 227, 154, .8)); }