/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Press+Start+2P&family=Rubik:wght@400;500;700&display=swap');

/* ── CSS custom properties (exact copy from original) ── */
:root {
  --radius: 0.25rem;
  --background:          oklch(0.13 0.02 25);
  --foreground:          oklch(0.97 0.01 20);
  --card:                oklch(0.17 0.03 25);
  --card-foreground:     oklch(0.97 0.01 20);
  --popover:             oklch(0.17 0.03 25);
  --popover-foreground:  oklch(0.97 0.01 20);
  --primary:             oklch(0.62 0.24 25);
  --primary-foreground:  oklch(0.99 0 0);
  --secondary:           oklch(0.22 0.04 25);
  --secondary-foreground:oklch(0.97 0.01 20);
  --muted:               oklch(0.2  0.02 25);
  --muted-foreground:    oklch(0.7  0.03 25);
  --accent:              oklch(0.55 0.22 30);
  --accent-foreground:   oklch(0.99 0 0);
  --destructive:         oklch(0.55 0.25 28);
  --destructive-foreground:oklch(0.99 0 0);
  --border:              oklch(0.28 0.06 25);
  --input:               oklch(0.22 0.04 25);
  --ring:                oklch(0.62 0.24 25);
  --blood:               oklch(0.5  0.22 25);
  --ember:               oklch(0.72 0.2  40);
  --gradient-blood: linear-gradient(135deg, oklch(0.55 0.24 25), oklch(0.4 0.2 22));
  --gradient-glow:  radial-gradient(ellipse at top, oklch(0.55 0.24 25 / 0.4), transparent 70%);
  --shadow-blood:   0 10px 40px -10px oklch(0.55 0.24 25 / 0.6);
  --shadow-glow:    0 0 60px oklch(0.62 0.24 25 / 0.5);
}

/* ── Base (mirrors original @layer base) ── */
*, *::before, *::after { border-color: var(--border); }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Rubik', system-ui, sans-serif;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.55 0.24 25 / 0.25), transparent),
    linear-gradient(to bottom, oklch(0.13 0.02 25), oklch(0.1 0.02 25));
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.02em; }

.grid-bg {
  background-image:
    linear-gradient(oklch(0.62 0.24 25 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.62 0.24 25 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.bg-gradient-blood  { background: var(--gradient-blood); }
.bg-gradient-glow   { background: var(--gradient-glow); }
.shadow-blood       { box-shadow: var(--shadow-blood); }
.shadow-glow        { box-shadow: var(--shadow-glow); }
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* ── Keyframes ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-15px) rotate(2deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px oklch(0.62 0.24 25 / 0.5); }
  50%       { box-shadow: 0 0 50px oklch(0.62 0.24 25 / 0.9); }
}