:root {
  --background: 0 0% 3%;
  --foreground: 0 0% 96%;
  --primary: 357 92% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 92%;
  --secondary-foreground: 0 0% 6%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 66%;
  --destructive: 5 84% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 18%;
  --card: 0 0% 8%;
  --shadow-sm: 0 16px 40px rgba(0, 0, 0, 0.58);
  --shadow-md: 0 24px 60px rgba(229, 9, 20, 0.24);
  --shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.7);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
}

.dark {
  --background: 0 0% 3%;
  --foreground: 0 0% 96%;
  --primary: 357 92% 47%;
  --secondary: 0 0% 92%;
  --muted: 0 0% 12%;
  --destructive: 5 84% 58%;
  --border: 0 0% 18%;
  --card: 0 0% 8%;
}

.light {
  --background: 42 100% 94%;
  --foreground: 260 45% 10%;
  --primary: 326 86% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 177 73% 38%;
  --secondary-foreground: 0 0% 100%;
  --muted: 37 72% 87%;
  --muted-foreground: 260 18% 38%;
  --destructive: 5 74% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 32 38% 72%;
  --card: 43 100% 98%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(229, 9, 20, .18), transparent 22%),
    radial-gradient(circle at top, rgba(229, 9, 20, .14), transparent 26%),
    linear-gradient(180deg, #000 0%, #090909 38%, #111 68%, #000 100%);
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: hsla(var(--primary), .55); }

.glass {
  background: linear-gradient(180deg, rgba(24,24,24,.96), rgba(12,12,12,.92));
  border: 1px solid hsla(var(--border), .95);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.poster-shine {
  position: relative;
  overflow: hidden;
}
.poster-shine::after {
  content: "";
  position: absolute;
  inset: -80% -40%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08), transparent 62%);
  transform: translateX(-70%) rotate(8deg);
  transition: transform var(--transition-smooth);
}
.poster-shine:hover::after { transform: translateX(70%) rotate(8deg); }

.scanline {
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 100% 9px;
}

.focus-ring:focus-visible {
  outline: 3px solid hsla(var(--primary), .85);
  outline-offset: 3px;
}

.skeleton {
  background: linear-gradient(90deg, hsla(var(--muted), .5), hsla(var(--foreground), .12), hsla(var(--muted), .5));
  background-size: 220% 100%;
  animation: pulseFruit 1.3s infinite linear;
}
@keyframes pulseFruit { to { background-position: -220% 0; } }

.floating-orb { animation: floatOrb 7s ease-in-out infinite; }
@keyframes floatOrb {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}