/* ── CSS custom properties (matches React index.css HSL tokens) ── */
:root {
    --background: 220 20% 7%;
    --foreground: 210 20% 92%;
    --card: 220 18% 10%;
    --card-foreground: 210 20% 92%;
    --primary: 185 80% 50%;
    --primary-foreground: 220 20% 7%;
    --secondary: 220 16% 16%;
    --secondary-foreground: 210 20% 85%;
    --muted: 220 14% 14%;
    --muted-foreground: 215 12% 50%;
    --accent: 42 95% 55%;
    --accent-foreground: 220 20% 7%;
    --destructive: 0 72% 55%;
    --destructive-foreground: 210 40% 98%;
    --border: 220 14% 18%;
    --input: 220 14% 18%;
    --ring: 185 80% 50%;
    --radius: 0.5rem;
    --glow-primary: 185 80% 50%;
    --glow-accent: 42 95% 55%;
    --surface-elevated: 220 16% 12%;
    --points-high: 42 95% 55%;
    --points-mid: 185 80% 50%;
    --points-low: 215 12% 50%;
    --success: 150 60% 45%;
    --success-foreground: 220 20% 7%;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; min-height: 100%; position: relative; }

body {
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
}

a { color: hsl(var(--primary)); }
a:hover { color: hsl(var(--primary)); }

/* ── Custom utility classes (mirrors React tailwind utilities) ── */
.text-glow {
    text-shadow: 0 0 20px hsl(var(--glow-primary) / 0.5), 0 0 40px hsl(var(--glow-primary) / 0.2);
}
.text-glow-accent {
    text-shadow: 0 0 20px hsl(var(--glow-accent) / 0.5), 0 0 40px hsl(var(--glow-accent) / 0.2);
}
.box-glow {
    box-shadow: 0 0 20px hsl(var(--glow-primary) / 0.15), 0 0 40px hsl(var(--glow-primary) / 0.05);
}
.box-glow-accent {
    box-shadow: 0 0 15px hsl(var(--glow-accent) / 0.2), 0 0 30px hsl(var(--glow-accent) / 0.08);
}
.gradient-hero {
    position: relative;
    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(220 18% 12%) 50%, hsl(var(--background)) 100%);
}

.gradient-hero::before {
    content: '';
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    background: url('/images/color-hyper.jpg') center / cover no-repeat;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;

    animation: linesZoom 7s ease-in-out infinite alternate;
}

@keyframes linesZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.gradient-card {
    background: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--surface-elevated)) 100%);
}
.border-glow { border-color: hsl(var(--primary) / 0.3); }
.text-primary-color  { color: hsl(var(--primary)); }
.text-accent-color   { color: hsl(var(--accent)); }
.text-muted-color    { color: hsl(var(--muted-foreground)); }
.text-success        { color: hsl(var(--success)); }
.text-destructive    { color: hsl(var(--destructive)); }
.text-points-high    { color: hsl(var(--points-high)); }
.text-points-mid     { color: hsl(var(--points-mid)); }

/* ── Hero grid overlay ── */
.hero-grid-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image:
        linear-gradient(hsl(var(--primary) / 0.3) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--primary) / 0.3) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 1;
}


/* ── Slot card hover ── */
.slot-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.slot-card:hover { transform: scale(1.02); }

/* ── Table row hover ── */
.table-row-hover:hover { background-color: hsl(var(--muted) / 0.2); }

/* ── Animations ── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.6s ease forwards; }

/* ── Leaderboard pulse highlight ── */
@keyframes pulseHighlight {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); }
    50% { box-shadow: 0 0 0 8px hsl(var(--primary) / 0); }
}
.pulse-highlight {
    animation: pulseHighlight 0.6s ease 3;
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}