@font-face { font-family: 'Unbounded'; font-weight: 700; font-display: swap; src: url(/fonts/unbounded/unbounded-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-display: swap; src: url(/fonts/unbounded/unbounded-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Unbounded'; font-weight: 900; font-display: swap; src: url(/fonts/unbounded/unbounded-cyrillic-900-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 900; font-display: swap; src: url(/fonts/unbounded/unbounded-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Rubik'; font-weight: 500; font-display: swap; src: url(/fonts/rubik/rubik-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; font-weight: 500; font-display: swap; src: url(/fonts/rubik/rubik-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Rubik'; font-weight: 700; font-display: swap; src: url(/fonts/rubik/rubik-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; font-weight: 700; font-display: swap; src: url(/fonts/rubik/rubik-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --ink: #1a0b2e;
  --deep: #2a0b4a;
  --purple: #4b1786;
  --violet: #7b2ff7;
  --pink: #ff3e8a;
  --yellow: #ffd23f;
  --cyan: #35e0ff;
  --green: #6dff8a;
  --orange: #ff8a2b;
  --paper: #fff8ee;
  --muted: #c9b8e8;
  --head: 'Unbounded', 'Arial Black', sans-serif;
  --body: 'Rubik', 'Segoe UI', Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--body); font-weight: 500; color: #fff; background: var(--deep); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
a { color: var(--yellow); }

/* «наклейка» — карточка с толстой обводкой и жёсткой тенью, как в Jackbox */
.sticker { background: var(--paper); color: var(--ink); border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 9px 0 var(--ink); }
.outline { -webkit-text-stroke: var(--stroke, 8px) var(--ink); paint-order: stroke fill; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); border-radius: 18px;
  box-shadow: 0 7px 0 var(--ink); padding: 16px 26px; text-decoration: none; transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.btn[disabled] { filter: grayscale(.8) brightness(.8); cursor: not-allowed; transform: none; }
.btn.pink { background: var(--pink); color: #fff; }
.btn.cyan { background: var(--cyan); }
.btn.green { background: var(--green); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }

/* фон: вращающиеся лучи + виньетка */
.burst { position: fixed; inset: -50vmax; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.055) 0 10deg, transparent 10deg 20deg);
  animation: spin 90s linear infinite; }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(10,0,25,.75) 100%); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes popIn { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes slamIn { 0% { transform: scale(3) rotate(-8deg); opacity: 0; } 55% { transform: scale(.9) rotate(2deg); opacity: 1; } 75% { transform: scale(1.06); } 100% { transform: scale(1) rotate(0); } }
@keyframes wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-14px,6px); } 40% { transform: translate(12px,-8px); } 60% { transform: translate(-8px,4px); } 80% { transform: translate(6px,-2px); } }
@keyframes fadeUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.logo { font-family: var(--head); font-weight: 900; letter-spacing: -.02em; line-height: .9; color: var(--yellow); text-shadow: 0 .09em 0 var(--pink), 0 .18em 0 var(--ink); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; }
.logo .dot { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) { .burst { animation: none; } }