/* Design Tokens as CSS Variables */
:root {
  /* Colors */
  --color-bg-primary: #e8e8e8;
  --color-bg-card: #ffffff;
  --color-bg-overlay: #000000;
  
  --color-text-primary: #000000;
  --color-text-secondary: #6b7280;
  --color-text-white: #ffffff;
  
  --color-button-primary: #000000;
  --color-button-primary-hover: #1f2937;
  --color-button-secondary: #ffffff;
  --color-button-secondary-hover: #f3f4f6;
  --color-button-disabled: #9ca3af;
  
  --color-accent-black: #000000;
  --color-accent-gray-100: #f3f4f6;
  --color-accent-gray-200: #e5e7eb;
  --color-accent-gray-300: #d1d5db;
  --color-accent-gray-600: #4b5563;
  --color-accent-gray-800: #1f2937;
  
  /* Typography */
  --font-family-primary: 'Work Sans', sans-serif;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-2xl: 1.5rem;
  --spacing-3xl: 2rem;
  --spacing-4xl: 2.5rem;
  --spacing-5xl: 3rem;
  --spacing-6xl: 4rem;
  --spacing-8xl: 6rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Animation */
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-slow: 1s;
  
  --easing-out: ease-out;
  --easing-in-out: ease-in-out;
}

/* Base Styles */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  background: var(--color-bg-primary);
}

/* ========================================
   SVG DRAWING ANIMATION - UNIVERSAL
   Works with ANY Illustrator export
   Animates elements sequentially in DOM order
   ======================================== */

/* Apply stroke-dash setup to ALL drawable elements */
svg.drawing path,
svg.drawing line,
svg.drawing polyline,
svg.drawing polygon,
svg.drawing ellipse,
svg.drawing circle,
svg.drawing rect {
  fill: none;
  stroke: var(--color-accent-black);
  stroke-miterlimit: 10;
  stroke-width: 10px;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: draw 0.5s var(--easing-out) forwards;
}

/* Sequential animation delays using :nth-child (DOM order, any element type) */
/* Timing: 0.15s between elements, ~4-5s total for 30 elements */
svg.drawing > :nth-child(1) { animation-delay: 0s; }
svg.drawing > :nth-child(2) { animation-delay: 0.15s; }
svg.drawing > :nth-child(3) { animation-delay: 0.3s; }
svg.drawing > :nth-child(4) { animation-delay: 0.45s; }
svg.drawing > :nth-child(5) { animation-delay: 0.6s; }
svg.drawing > :nth-child(6) { animation-delay: 0.75s; }
svg.drawing > :nth-child(7) { animation-delay: 0.9s; }
svg.drawing > :nth-child(8) { animation-delay: 1.05s; }
svg.drawing > :nth-child(9) { animation-delay: 1.2s; }
svg.drawing > :nth-child(10) { animation-delay: 1.35s; }
svg.drawing > :nth-child(11) { animation-delay: 1.5s; }
svg.drawing > :nth-child(12) { animation-delay: 1.65s; }
svg.drawing > :nth-child(13) { animation-delay: 1.8s; }
svg.drawing > :nth-child(14) { animation-delay: 1.95s; }
svg.drawing > :nth-child(15) { animation-delay: 2.1s; }
svg.drawing > :nth-child(16) { animation-delay: 2.25s; }
svg.drawing > :nth-child(17) { animation-delay: 2.4s; }
svg.drawing > :nth-child(18) { animation-delay: 2.55s; }
svg.drawing > :nth-child(19) { animation-delay: 2.7s; }
svg.drawing > :nth-child(20) { animation-delay: 2.85s; }
svg.drawing > :nth-child(21) { animation-delay: 3s; }
svg.drawing > :nth-child(22) { animation-delay: 3.15s; }
svg.drawing > :nth-child(23) { animation-delay: 3.3s; }
svg.drawing > :nth-child(24) { animation-delay: 3.45s; }
svg.drawing > :nth-child(25) { animation-delay: 3.6s; }
svg.drawing > :nth-child(26) { animation-delay: 3.75s; }
svg.drawing > :nth-child(27) { animation-delay: 3.9s; }
svg.drawing > :nth-child(28) { animation-delay: 4.05s; }
svg.drawing > :nth-child(29) { animation-delay: 4.2s; }
svg.drawing > :nth-child(30) { animation-delay: 4.35s; }
svg.drawing > :nth-child(31) { animation-delay: 4.5s; }
svg.drawing > :nth-child(32) { animation-delay: 4.65s; }
svg.drawing > :nth-child(33) { animation-delay: 4.8s; }
svg.drawing > :nth-child(34) { animation-delay: 4.95s; }
svg.drawing > :nth-child(35) { animation-delay: 5.1s; }
svg.drawing > :nth-child(36) { animation-delay: 5.25s; }
svg.drawing > :nth-child(37) { animation-delay: 5.4s; }
svg.drawing > :nth-child(38) { animation-delay: 5.55s; }
svg.drawing > :nth-child(39) { animation-delay: 5.7s; }
svg.drawing > :nth-child(40) { animation-delay: 5.85s; }
svg.drawing > :nth-child(41) { animation-delay: 6s; }
svg.drawing > :nth-child(42) { animation-delay: 6.15s; }
svg.drawing > :nth-child(43) { animation-delay: 6.3s; }
svg.drawing > :nth-child(44) { animation-delay: 6.45s; }
svg.drawing > :nth-child(45) { animation-delay: 6.6s; }
svg.drawing > :nth-child(46) { animation-delay: 6.75s; }
svg.drawing > :nth-child(47) { animation-delay: 6.9s; }
svg.drawing > :nth-child(48) { animation-delay: 7.05s; }
svg.drawing > :nth-child(49) { animation-delay: 7.2s; }
svg.drawing > :nth-child(50) { animation-delay: 7.35s; }
svg.drawing > :nth-child(51) { animation-delay: 7.5s; }
svg.drawing > :nth-child(52) { animation-delay: 7.65s; }
svg.drawing > :nth-child(53) { animation-delay: 7.8s; }
svg.drawing > :nth-child(54) { animation-delay: 7.95s; }
svg.drawing > :nth-child(55) { animation-delay: 8.1s; }
svg.drawing > :nth-child(56) { animation-delay: 8.25s; }
svg.drawing > :nth-child(57) { animation-delay: 8.4s; }
svg.drawing > :nth-child(58) { animation-delay: 8.55s; }
svg.drawing > :nth-child(59) { animation-delay: 8.7s; }
svg.drawing > :nth-child(60) { animation-delay: 8.85s; }
svg.drawing > :nth-child(61) { animation-delay: 9s; }
svg.drawing > :nth-child(62) { animation-delay: 9.15s; }
svg.drawing > :nth-child(63) { animation-delay: 9.3s; }
svg.drawing > :nth-child(64) { animation-delay: 9.45s; }
svg.drawing > :nth-child(65) { animation-delay: 9.6s; }
svg.drawing > :nth-child(66) { animation-delay: 9.75s; }
svg.drawing > :nth-child(67) { animation-delay: 9.9s; }
svg.drawing > :nth-child(68) { animation-delay: 10.05s; }
svg.drawing > :nth-child(69) { animation-delay: 10.2s; }
svg.drawing > :nth-child(70) { animation-delay: 10.35s; }
svg.drawing > :nth-child(71) { animation-delay: 10.5s; }
svg.drawing > :nth-child(72) { animation-delay: 10.65s; }
svg.drawing > :nth-child(73) { animation-delay: 10.8s; }
svg.drawing > :nth-child(74) { animation-delay: 10.95s; }
svg.drawing > :nth-child(75) { animation-delay: 11.1s; }
svg.drawing > :nth-child(76) { animation-delay: 11.25s; }
svg.drawing > :nth-child(77) { animation-delay: 11.4s; }
svg.drawing > :nth-child(78) { animation-delay: 11.55s; }
svg.drawing > :nth-child(79) { animation-delay: 11.7s; }
svg.drawing > :nth-child(80) { animation-delay: 11.85s; }
svg.drawing > :nth-child(81) { animation-delay: 12s; }
svg.drawing > :nth-child(82) { animation-delay: 12.15s; }
svg.drawing > :nth-child(83) { animation-delay: 12.3s; }
svg.drawing > :nth-child(84) { animation-delay: 12.45s; }
svg.drawing > :nth-child(85) { animation-delay: 12.6s; }
svg.drawing > :nth-child(86) { animation-delay: 12.75s; }
svg.drawing > :nth-child(87) { animation-delay: 12.9s; }
svg.drawing > :nth-child(88) { animation-delay: 13.05s; }
svg.drawing > :nth-child(89) { animation-delay: 13.2s; }
svg.drawing > :nth-child(90) { animation-delay: 13.35s; }
svg.drawing > :nth-child(91) { animation-delay: 13.5s; }
svg.drawing > :nth-child(92) { animation-delay: 13.65s; }
svg.drawing > :nth-child(93) { animation-delay: 13.8s; }
svg.drawing > :nth-child(94) { animation-delay: 13.95s; }
svg.drawing > :nth-child(95) { animation-delay: 14.1s; }
svg.drawing > :nth-child(96) { animation-delay: 14.25s; }
svg.drawing > :nth-child(97) { animation-delay: 14.4s; }
svg.drawing > :nth-child(98) { animation-delay: 14.55s; }
svg.drawing > :nth-child(99) { animation-delay: 14.7s; }
svg.drawing > :nth-child(100) { animation-delay: 14.85s; }
svg.drawing > :nth-child(101) { animation-delay: 15s; }
svg.drawing > :nth-child(102) { animation-delay: 15.15s; }
svg.drawing > :nth-child(103) { animation-delay: 15.3s; }
svg.drawing > :nth-child(104) { animation-delay: 15.45s; }
svg.drawing > :nth-child(105) { animation-delay: 15.6s; }
svg.drawing > :nth-child(106) { animation-delay: 15.75s; }
svg.drawing > :nth-child(107) { animation-delay: 15.9s; }
svg.drawing > :nth-child(108) { animation-delay: 16.05s; }
svg.drawing > :nth-child(109) { animation-delay: 16.2s; }
svg.drawing > :nth-child(110) { animation-delay: 16.35s; }
svg.drawing > :nth-child(111) { animation-delay: 16.5s; }
svg.drawing > :nth-child(112) { animation-delay: 16.65s; }
svg.drawing > :nth-child(113) { animation-delay: 16.8s; }
svg.drawing > :nth-child(114) { animation-delay: 16.95s; }
svg.drawing > :nth-child(115) { animation-delay: 17.1s; }
svg.drawing > :nth-child(116) { animation-delay: 17.25s; }
svg.drawing > :nth-child(117) { animation-delay: 17.4s; }
svg.drawing > :nth-child(118) { animation-delay: 17.55s; }
svg.drawing > :nth-child(119) { animation-delay: 17.7s; }
svg.drawing > :nth-child(120) { animation-delay: 17.85s; }
svg.drawing > :nth-child(121) { animation-delay: 18s; }
svg.drawing > :nth-child(122) { animation-delay: 18.15s; }
svg.drawing > :nth-child(123) { animation-delay: 18.3s; }
svg.drawing > :nth-child(124) { animation-delay: 18.45s; }
svg.drawing > :nth-child(125) { animation-delay: 18.6s; }
svg.drawing > :nth-child(126) { animation-delay: 18.75s; }
svg.drawing > :nth-child(127) { animation-delay: 18.9s; }
svg.drawing > :nth-child(128) { animation-delay: 19.05s; }
svg.drawing > :nth-child(129) { animation-delay: 19.2s; }
svg.drawing > :nth-child(130) { animation-delay: 19.35s; }
svg.drawing > :nth-child(131) { animation-delay: 19.5s; }
svg.drawing > :nth-child(132) { animation-delay: 19.65s; }
svg.drawing > :nth-child(133) { animation-delay: 19.8s; }
svg.drawing > :nth-child(134) { animation-delay: 19.95s; }
svg.drawing > :nth-child(135) { animation-delay: 20.1s; }
svg.drawing > :nth-child(136) { animation-delay: 20.25s; }
svg.drawing > :nth-child(137) { animation-delay: 20.4s; }
svg.drawing > :nth-child(138) { animation-delay: 20.55s; }
svg.drawing > :nth-child(139) { animation-delay: 20.7s; }
svg.drawing > :nth-child(140) { animation-delay: 20.85s; }
svg.drawing > :nth-child(141) { animation-delay: 21s; }
svg.drawing > :nth-child(142) { animation-delay: 21.15s; }
svg.drawing > :nth-child(143) { animation-delay: 21.3s; }
svg.drawing > :nth-child(144) { animation-delay: 21.45s; }
svg.drawing > :nth-child(145) { animation-delay: 21.6s; }
svg.drawing > :nth-child(146) { animation-delay: 21.75s; }
svg.drawing > :nth-child(147) { animation-delay: 21.9s; }
svg.drawing > :nth-child(148) { animation-delay: 22.05s; }
svg.drawing > :nth-child(149) { animation-delay: 22.2s; }
svg.drawing > :nth-child(150) { animation-delay: 22.35s; }

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ========================================
   OTHER ANIMATIONS
   ======================================== */

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

.animate-fadeIn {
  animation: fadeIn var(--duration-fast) var(--easing-out);
}

/* ========================================
   INPUT CORRECTION ANIMATION
   ======================================== */

.input-correct-flash {
  animation: correctFlash 0.3s ease-out;
}

@keyframes correctFlash {
  0% {
    background-color: #ffffff;
    transform: scale(1);
  }
  50% {
    background-color: #86efac;
    transform: scale(1.02);
  }
  100% {
    background-color: #f0fdf4;
    transform: scale(1);
  }
}

/* ========================================
   SLOT MACHINE ANIMATION FOR DYNAMIC HEADER
   Responsive layout with letter scrambling
   ======================================== */

.header-two-line {
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}

.header-line-1 {
  display: inline;
  margin-right: 0.3em; /* Space between "Guess" and "the" */
}

.header-line-2 {
  display: inline;
}

.header-slot-container {
  display: inline;
  white-space: nowrap;
}

/* ========================================
   TYPEWRITER ANIMATION FOR HINTS
   ======================================== */

@keyframes typewriter {
  from { 
    width: 0;
  }
  to { 
    width: 100%;
  }
}

@keyframes blinkCursor {
  from, to { 
    border-right-color: transparent;
  }
  50% { 
    border-right-color: var(--color-text-primary);
  }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  border-right: 3px solid var(--color-text-primary);
  animation: 
    typewriter 1s steps(20) 0.5s both,
    blinkCursor 0.75s step-end infinite 0.5s;
}

/* Remove cursor after animation completes (optional) */
@keyframes typewriterNoCursor {
  from { 
    width: 0;
  }
  to { 
    width: 100%;
  }
}

.card {
  position: relative;
  background: var(--color-bg-card);
  border-radius: var(--radius-2xl);
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn-give-up {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background var(--duration-fast) ease-out;
  border: none;
}

.btn-give-up:hover {
  background: var(--color-bg-primary);
}

/* ========================================
   GRADIENT OVERLAYS
   ======================================== */

.gradient-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: none !important;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl) !important;
}

.gradient-overlay-mobile {
  height: 60px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 60%, var(--color-bg-primary) 100%) !important;
}

.gradient-overlay-desktop {
  height: 80px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 60%, var(--color-bg-primary) 100%) !important;
}

/* ========================================
   ERROR BOUNDARY STYLES
   ======================================== */

.error-boundary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-primary);
  background: var(--color-bg-primary);
}

.error-boundary-content {
  text-align: center;
  padding: 20px;
}

.error-boundary-title {
  font-size: 2rem;
  font-weight: var(--font-weight-black);
  margin-bottom: 1rem;
}

.error-boundary-message {
  margin-bottom: 1rem;
}

.error-boundary-button {
  background: var(--color-button-primary);
  color: var(--color-text-white);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  transition: background var(--duration-fast) ease-out;
}

.error-boundary-button:hover {
  background: var(--color-button-primary-hover);
}


/* Small phone (≤375px) - make SVG 80% to save space for hints */
@media (max-width: 375px) {
  svg.drawing {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}