@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2-variations'), url('/assets/fonts/manrope-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --ink-900: #1e1533;
  --ink-600: #574a72;
}

* {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: var(--ink-900);
}

.bg-brand-gradient {
  background: radial-gradient(circle at 15% 20%, #f5f3ff 0%, #ffffff 55%);
}

.pill-shadow {
  box-shadow: 0 20px 45px -20px rgba(124, 58, 237, 0.45);
}

.card-shadow {
  box-shadow: 0 12px 40px -18px rgba(30, 21, 51, 0.18);
}

.game-tab {
  transition: all 0.2s ease;
}

.game-tab[data-active="true"] {
  background-color: var(--violet-600);
  color: #ffffff;
  box-shadow: 0 14px 30px -14px rgba(124, 58, 237, 0.55);
}

.game-tab[data-active="false"] {
  background-color: #ffffff;
  color: var(--ink-600);
}

.game-panel {
  display: none;
}

.game-panel[data-visible="true"] {
  display: block;
}

.th-result {
  display: none;
}

.th-result[data-visible="true"] {
  display: block;
  animation: riseIn 0.35s ease;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stream-card {
  border-radius: 1.75rem;
}

#cookie-banner {
  display: none;
}

#cookie-banner[data-open="true"] {
  display: flex;
}

#cookie-preferences {
  display: none;
}

#cookie-preferences[data-open="true"] {
  display: flex;
}

.faq-item[data-open="true"] .faq-answer {
  max-height: 400px;
  padding-top: 0.5rem;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item[data-open="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.25s ease;
}

::selection {
  background: var(--violet-100);
  color: var(--violet-700);
}