:root {
  --zinc-900: #18181b;
  --zinc-850: #202023;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --amber-500: #f59e0b;
  --ink-100: #f4f4f5;
  --ink-400: #a1a1aa;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--zinc-900);
  color: var(--ink-100);
}

.hazard-strip {
  background-image: repeating-linear-gradient(135deg, var(--orange-500) 0, var(--orange-500) 14px, #0a0a0b 14px, #0a0a0b 28px);
}

.row-card {
  border: 1px solid var(--zinc-700);
  background-color: var(--zinc-850);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.row-card:hover {
  border-color: var(--orange-500);
  background-color: var(--zinc-800);
}

.rank-badge {
  font-variant-numeric: tabular-nums;
}

.pill-shadow {
  box-shadow: 0 18px 40px -18px rgba(249, 115, 22, 0.55);
}

#role-select {
  appearance: none;
}

.picker-result {
  display: none;
}

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

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

.tier-tab {
  transition: all 0.15s ease;
}

.game-tab-active {
  background-color: var(--orange-500);
  color: #18181b;
}

#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: 480px;
  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(--orange-500);
  color: #18181b;
}

.timeline-dot {
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}