@import "tailwindcss";
@config "../../tailwind.config.ts";

/*
 * Tailwind v4 compatibility: v4 changed the default border/divide color from
 * gray-200 to `currentColor`. Restore the v3 default so existing `border`/`divide`
 * utilities without an explicit color keep their previous appearance.
 */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/* Prevent iOS zoom on inputs */
input,
select,
textarea {
  font-size: 16px !important;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-x pan-y;
}

#app {
  width: 100%;
  height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: none;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

:root {
  font-family: "Geist-Regular", system-ui, sans-serif, arial;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background: #e1a10b;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.game-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  z-index: 10;
  padding-top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-container {
  min-height: 100vh;
  transition: background 1.5s ease-in-out;
}

.bg-home {
  background-color: #e1a10b;
}

.bg-lobby {
  background-color: #1a0533;
  background:
    radial-gradient(circle at 20% 20%, rgba(251, 113, 133, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(251, 191, 36, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #1a0533 0%, #3d1a00 45%, #0f172a 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 25s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}

@keyframes lobbyGlowShift {
  0% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }

  50% {
    background-position: 30% 20%, 75% 85%, 100% 50%;
  }

  100% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }
}

.bg-cuarto-rey {
  background-color: #451a03;
  background:
    radial-gradient(circle at 20% 30%, rgba(146, 64, 14, 0.3) 0%, rgba(146, 64, 14, 0) 45%),
    radial-gradient(circle at 80% 80%, rgba(120, 53, 15, 0.4) 0%, rgba(120, 53, 15, 0) 45%),
    linear-gradient(135deg, #451a03 0%, #290f02 50%, #1a0901 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 20s ease-in-out infinite;
  will-change: transform;
  transform: translate3d(0,0,0);
  position: relative;
}

.bg-cuarto-rey::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use a reliable inline SVG noise base instead of external png */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.bg-impostor {
  background-color: #020617;
  background:
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 45%),
    radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0) 45%),
    linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 25s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}

.bg-verdad-o-reto {
  background-color: #450a0a;
  background:
    radial-gradient(circle at 10% 20%, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0) 45%),
    radial-gradient(circle at 70% 80%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 45%),
    linear-gradient(135deg, #450a0a 0%, #2b0f52 50%, #064e3b 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 22s ease-in-out infinite;
  transform: translate3d(0,0,0);
}

.bg-entre-dos {
  background-color: #9d174d;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 114, 182, 0.15) 0%, rgba(244, 114, 182, 0) 45%),
    radial-gradient(circle at 78% 82%, rgba(251, 113, 133, 0.15) 0%, rgba(251, 113, 133, 0) 45%),
    linear-gradient(135deg, #4a044e 0%, #831843 45%, #4c0519 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 22s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}

.bg-yo-nunca {
  background-color: #172554;
  background:
    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0) 45%),
    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 45%),
    linear-gradient(135deg, #172554 0%, #2a0f1e 50%, #4c0519 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 24s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}

.bg-mala-leche {
  background-color: #022c22;
  background:
    radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0) 45%),
    radial-gradient(circle at 50% 90%, rgba(52, 211, 153, 0.12) 0%, rgba(52, 211, 153, 0) 45%),
    linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
  background-size: 150% 150%;
  animation: lobbyGlowShift 26s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}

body {
  margin: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Custom Font Utilities */
.font-titan {
  font-family: 'Titan One', cursive;
}
.font-paytone {
  font-family: 'Paytone One', sans-serif;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@layer components {
  .cura2-glass-panel {
    @apply relative bg-white/10 backdrop-blur-md border border-white/20 rounded-[2.5rem] overflow-hidden;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
    will-change: transform, opacity;
    transform: translate3d(0,0,0);
  }

  .cura2-inner-glow {
    @apply absolute inset-0 bg-gradient-to-br from-amber-300/15 via-white/5 to-orange-500/15 pointer-events-none;
  }

  .cura2-primary-cta {
    @apply w-full flex items-center justify-center gap-3 py-6 rounded-2xl font-black text-2xl shadow-xl transition-all active:scale-[0.98] uppercase italic tracking-tighter bg-amber-400 hover:bg-amber-300 text-slate-900;

    &:disabled {
      opacity: 0.5 !important;
      filter: grayscale(100%) !important;
      pointer-events: none !important;
      cursor: not-allowed !important;
      transform: none !important;
    }
  }

  .cura2-secondary-cta {
    @apply w-full py-4 rounded-2xl font-black text-white/80 hover:text-white transition-all text-sm uppercase tracking-widest bg-white/10 hover:bg-white/15 border border-white/20;
  }

  .cura2-preview-pill {
    @apply mx-auto w-fit px-4 py-2 rounded-xl border border-white/65 bg-white/90 shadow-lg;
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer base {
  @font-face {
    font-family: "Geist-Regular";
    src: url("/fonts/Geist-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
}

/*
 * Respect the OS-level "Reduce Motion" preference (iOS Accessibility,
 * Android Developer Options, Windows Ease of Access). Disables the
 * animated radial-gradient backgrounds, content reveal animations, and
 * any *-pulse / *-spin / *-bounce utilities. Critical on low-end Android
 * where the animated backgrounds can drop the framerate to ~15fps.
 */
@media (prefers-reduced-motion: reduce) {
  .bg-lobby,
  .bg-cuarto-rey,
  .bg-impostor,
  .bg-verdad-o-reto,
  .bg-entre-dos,
  .bg-yo-nunca,
  .bg-mala-leche {
    animation: none !important;
  }

  .animate-fade-in,
  .animate-slide-up,
  .animate-pulse,
  .animate-spin,
  .animate-bounce,
  .animate-ping {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}