@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  font-family: 'Nunito', sans-serif; background: #0a0a0a; color: #fff;
  overflow-x: hidden; overflow-y: auto; height: 100%;
  font-size: 16px; -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
}
@media (min-width: 400px) { body { font-size: 18px; } }
.screen { display: none; min-height: 100dvh; }
.screen.active { display: flex; }

.card {
  position: absolute; width: 100%; touch-action: none; cursor: grab;
  transition: none; will-change: transform;
}
.card.animating {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.card-inner {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem; padding: 1.5rem; min-height: 50vh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
@media (min-width: 400px) {
  .card-inner { padding: 2rem; min-height: 55vh; }
}
.overlay-a, .overlay-b {
  position: absolute; inset: 0; border-radius: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900; opacity: 0; transition: opacity 0.1s;
  pointer-events: none;
}
.overlay-a { background: rgba(239,68,68,0.3); }
.overlay-b { background: rgba(59,130,246,0.3); }
.progress-bar { height: 4px; background: #ef4444; transition: width 0.3s ease; border-radius: 2px; }

.candidate-card {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem; padding: 0.85rem 1rem;
  animation: slideUp 0.5s ease forwards; opacity: 0;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.match-bar { height: 5px; border-radius: 3px; background: #1f2937; overflow: hidden; }
.match-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.btn-option {
  flex: 1; padding: 1rem 1.25rem; border-radius: 1rem; font-weight: 800;
  font-size: 1.15rem; transition: transform 0.1s, background 0.1s; cursor: pointer;
  border: 2px solid; text-align: center; letter-spacing: 0.02em;
  min-height: 56px;
}
@media (min-width: 400px) {
  .btn-option { padding: 1.15rem 1.5rem; font-size: 1.25rem; }
}
.btn-option:active { transform: scale(0.95); }

.spinner {
  width: 40px; height: 40px; border: 4px solid #333;
  border-top-color: #ef4444; border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Particle container */
.particle-container {
  position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden;
}
.particle {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: particleFly 0.8s ease-out forwards;
}
@keyframes particleFly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot)); opacity: 0; }
}

/* Screen flash */
.screen-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  animation: flash 0.4s ease-out forwards;
}
@keyframes flash {
  0% { opacity: 0.4; }
  100% { opacity: 0; }
}

/* Shockwave */
.shockwave {
  position: fixed; pointer-events: none; z-index: 98;
  width: 10px; height: 10px; border-radius: 50%;
  border: 3px solid; opacity: 0;
  animation: shockwave 0.6s ease-out forwards;
}
@keyframes shockwave {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(60); opacity: 0; }
}

/* Emoji explosion */
.emoji-particle {
  position: fixed; pointer-events: none; z-index: 101;
  font-size: 1.5rem;
  animation: emojiBurst 1s ease-out forwards;
}
@keyframes emojiBurst {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot)); opacity: 0; }
}

/* Screen shake */
.shake {
  animation: shake 0.4s ease-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px) rotate(-1deg); }
  30% { transform: translateX(7px) rotate(1deg); }
  45% { transform: translateX(-6px) rotate(-0.5deg); }
  60% { transform: translateX(4px) rotate(0.5deg); }
  75% { transform: translateX(-2px); }
}

/* Lightning bolt */
.lightning {
  position: fixed; pointer-events: none; z-index: 100;
  width: 4px; background: #fff;
  animation: lightning 0.3s ease-out forwards;
  filter: blur(1px);
  box-shadow: 0 0 10px #fff, 0 0 20px currentColor;
}
@keyframes lightning {
  0% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: scaleY(0.5); }
}

/* === GENERATING SCREEN === */

.gen-bg-particles {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.gen-bg-particle {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: genFloat linear infinite;
}
@keyframes genFloat {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

/* Brain */
.gen-orbit-container {
  position: relative; width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.gen-brain {
  font-size: 4.5rem; z-index: 2; position: relative;
  animation: genBrainBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(239,68,68,0.4));
}
@keyframes genBrainBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-3deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(1.1) rotate(3deg); }
}

/* Pulse rings behind brain */
.gen-pulse-ring {
  position: absolute; inset: -20px; border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.3);
  animation: genPulseRing 2s ease-out infinite;
}
.gen-pulse-ring-2 {
  animation-delay: 1s;
}
@keyframes genPulseRing {
  0% { transform: scale(0.5); opacity: 0.8; border-width: 3px; }
  100% { transform: scale(2.5); opacity: 0; border-width: 1px; }
}

/* Orbiting icons */
.gen-orbit-ring {
  position: absolute; inset: 0; animation: genOrbitSpin linear infinite;
}
.gen-orbit-ring-1 { animation-duration: 6s; }
.gen-orbit-ring-2 { animation-duration: 9s; animation-direction: reverse; inset: -30px; }

@keyframes genOrbitSpin {
  to { transform: rotate(360deg); }
}

.gen-orbit-icon {
  position: absolute; font-size: 1.6rem;
  left: 50%; top: 50%;
  --angle: calc(var(--i) * 90deg);
  transform: rotate(var(--angle)) translateY(-70px) rotate(calc(-1 * var(--angle)));
  animation: genIconPop 0.6s ease-out backwards;
  animation-delay: calc(var(--i) * 0.15s);
}
.gen-orbit-ring-2 .gen-orbit-icon {
  --angle: calc(var(--i) * 72deg);
  transform: rotate(var(--angle)) translateY(-95px) rotate(calc(-1 * var(--angle)));
  font-size: 1.3rem;
}
@keyframes genIconPop {
  from { transform: rotate(var(--angle)) translateY(0) scale(0); opacity: 0; }
}

/* Glowing text */
.gen-text-glow {
  animation: genTextGlow 2s ease-in-out infinite alternate;
}
@keyframes genTextGlow {
  from { text-shadow: 0 0 5px transparent; }
  to { text-shadow: 0 0 20px rgba(239,68,68,0.4), 0 0 40px rgba(239,68,68,0.15); }
}

/* Progress dots */
.gen-dots {
  display: flex; gap: 8px; justify-content: center;
}
.gen-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #333;
  animation: genDotPulse 2.5s ease-in-out infinite;
}
.gen-dot:nth-child(1) { animation-delay: 0s; }
.gen-dot:nth-child(2) { animation-delay: 0.3s; }
.gen-dot:nth-child(3) { animation-delay: 0.6s; }
.gen-dot:nth-child(4) { animation-delay: 0.9s; }
.gen-dot:nth-child(5) { animation-delay: 1.2s; }

@keyframes genDotPulse {
  0%, 60%, 100% { background: #333; transform: scale(1); }
  30% { background: #ef4444; transform: scale(1.5); box-shadow: 0 0 10px rgba(239,68,68,0.5); }
}

/* Rotating facts */
.gen-fact {
  animation: genFactFade 3s ease-in-out infinite;
  min-height: 1.5em;
}
@keyframes genFactFade {
  0%, 100% { opacity: 0.5; transform: translateY(2px); }
  50% { opacity: 1; transform: translateY(0); }
}

/* === END GENERATING === */

.ai-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: rgba(239,68,68,0.15); color: #ef4444;
  font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.5rem;
  border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;
}

/* Agree splash message */
.agree-splash {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: #111; border: 3px solid currentColor;
  border-radius: 1.25rem; padding: 1.25rem 2rem;
  font-size: 1.1rem; font-weight: 800; white-space: normal; text-align: center; max-width: 90vw;
  z-index: 50; pointer-events: none;
  animation: agreePop 1.8s ease-out forwards;
  text-shadow: none;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  letter-spacing: 0.01em;
}
@keyframes agreePop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  75% { transform: translate(-50%, -60%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.9); opacity: 0; }
}

/* === MOBILE OPTIMIZATIONS === */

/* Splash title: fits any screen width */
.splash-title {
  font-size: clamp(2.5rem, 12vw, 6rem);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Prevent pull-to-refresh and overscroll bounce */
.screen { overscroll-behavior: none; touch-action: pan-y; }
#game { overflow: hidden; touch-action: none; max-height: 100dvh; }

/* Results screen must scroll */
#results { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: auto; height: 100dvh; }
#game .flex-1 { min-height: 0; }

/* Bottom buttons safe area */
#game > div:last-child {
  padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.5rem));
}

/* Results screen: safe area bottom */
#results {
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
}

/* Card text scaling for short screens */
@media (max-height: 667px) {
  .card-inner { min-height: 40vh; padding: 1.25rem; }
}

/* Modals: respect safe areas and small screens */
#settingsModal > div, #cachedModal > div, #howItWorksModal > div {
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}