@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Dynalight&display=swap');

:where([class^="ri-"])::before {
    content: "\f3c2";
}

body {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    font-family: 'Arvo', serif;
}

.logo {
    font-family: 'Dynalight', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

section {
    padding: 100px 0;
}

.hero-bg {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(245, 158, 11, 0.2)), url('hero.webp');
    background-size: cover;
    background-position: center;
}

.game-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.feature-icon {
    background: linear-gradient(135deg, #DC2626, #F59E0B);
}

.custom-checkbox {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #DC2626;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.custom-checkbox:checked {
    background: #DC2626;
}

.custom-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.875rem;
    font-weight: bold;
}