/* ============================================
   BillionaireSpin Casino - Design System
   Mobile-first, dark-only anime-manga aesthetic
   Fonts: Zen Dots (display) + Noto Sans (body)
   ============================================ */

/* ============================================
   RESET & BOX MODEL
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100dvh;
}

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

section {
    overflow: clip;
}

p, li, td, th {
    overflow-wrap: break-word;
}

input, textarea, select {
    max-width: 100%;
    font-family: inherit;
}

/* ============================================
   TYPOGRAPHY
   Zen Dots: display/headings
   Noto Sans: body copy
   ============================================ */
.font-display {
    font-family: "Zen Dots", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Zen Dots", sans-serif;
    line-height: 1.2;
    color: var(--foreground);
}

h1 {
    font-size: clamp(28px, 6vw, 52px);
    font-weight: 700;
    letter-spacing: -0.5px;
}

h2 {
    font-size: clamp(22px, 4vw, 38px);
    font-weight: 700;
}

h3 {
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 600;
}

h4 {
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 600;
}

.heading-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--foreground);
    max-width: 75ch;
}

.text-muted {
    color: var(--muted-foreground);
}

.text-gold {
    color: var(--primary);
}

.text-green {
    color: var(--accent);
}

.text-danger {
    color: var(--destructive);
}

.text-center { text-align: center; }
.text-left { text-align: left; }

/* ============================================
   LAYOUT & SPACING
   Base unit: 8px
   ============================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-sm);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-inline: var(--space-lg);
    }
}

.section {
    padding-block: var(--space-xl);
}

@media (min-width: 1024px) {
    .section {
        padding-block: var(--space-2xl);
    }
}

.section--dark {
    background-color: var(--background);
}

.section--card {
    background-color: var(--card);
}

/* Manga panel gold divider */
.manga-divider {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* ============================================
   GRIDS
   ============================================ */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }
    .grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }
    .grid-2 {
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Zen Dots", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 24px;
    border-radius: var(--radius);
    min-height: 48px;
    border: 2px solid transparent;
    transition: all 200ms ease-out;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 300ms ease-out;
}

.btn:hover::after {
    opacity: 1;
}

/* Gold CTA Button */
.btn-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: var(--primary-foreground);
    border-color: #FFD700;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}


.btn-gold:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5);
    transform: translateY(-2px);
}

/* Green Secondary Button */
.btn-green {
    background: var(--accent);
    color: var(--accent-foreground);
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 200, 83, 0.3);
}

.btn-green:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 24px rgba(0, 200, 83, 0.45);
    transform: translateY(-2px);
}

/* Outlined Gold */
.btn-outline-gold {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-gold:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}

/* Outlined Green */
.btn-outline-green {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline-green:hover {
    background: rgba(0, 200, 83, 0.1);
}

/* Large Button */
.btn-lg {
    font-size: 16px;
    padding: 18px 36px;
    min-height: 56px;
    border-radius: 10px;
}

/* Full-width Button */
.btn-full {
    width: 100%;
}

/* ============================================
   HEADER
   Fixed sticky with frosted glass effect
   z-index: 1000
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background-color: rgba(10, 15, 46, 0.95);
    border-bottom: 1px solid var(--border);
    /* NOTE: backdrop-filter disabled on mobile to prevent nav drawer containment bug */
}

@media (min-width: 1024px) {
    .site-header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background-color: rgba(10, 15, 46, 0.88);
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-sm);
    gap: var(--space-sm);
}

@media (min-width: 1024px) {
    .header-inner {
        padding-inline: var(--space-lg);
    }
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid var(--primary);
}

@media (min-width: 768px) {
    .logo-img {
        width: 40px;
        height: 40px;
    }
}

.logo-text {
    font-family: "Zen Dots", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 480px) {
    .logo-text {
        font-size: 18px;
    }
}

.logo-accent {
    color: var(--primary);
}

/* Desktop Navigation */
.main-nav {
    display: none;
    flex: 1;
    justify-content: center;
}

@media (min-width: 1024px) {
    .main-nav {
        display: flex;
    }
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 48px;
    padding-inline: 14px;
    font-family: "Zen Dots", sans-serif;
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color 200ms ease, background 200ms ease;
    white-space: nowrap;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 200ms ease;
    border-radius: 2px;
}

.nav-link:hover {
    color: var(--foreground);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link.active {
    color: var(--primary);
}

/* Header Actions */
.header-actions {
    display: none;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .header-actions {
        display: flex;
    }
}

.header-login {
    padding: 10px 18px;
    min-height: 40px;
    font-size: 12px;
}

.header-register {
    padding: 10px 18px;
    min-height: 40px;
    font-size: 12px;
}

/* ============================================
   MOBILE MENU
   z-index: 999 (below header at 1000)
   ============================================ */

/* Hamburger Toggle */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    z-index: 1001;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.mobile-menu-toggle:hover {
    background: var(--muted);
}

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--foreground);
    border-radius: 2px;
    transition: transform 300ms ease, opacity 300ms ease;
    transform-origin: center;
}

/* X animation when expanded */
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/* Mobile Nav Drawer */
@media (max-width: 1023px) {
    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background-color: var(--background);
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        padding: var(--space-md);
        transform: translateX(-100%);
        transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main-nav.is-open {
        display: flex;
        transform: translateX(0);
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .nav-link {
        font-size: 18px;
        padding: 16px 20px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        height: auto;
        min-height: 56px;
        color: var(--foreground);
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active {
        background: var(--card);
        color: var(--primary);
    }

    /* Mobile CTA buttons in drawer */
    .mobile-nav-ctas {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--border);
    }
}

@media (min-width: 1024px) {
    .mobile-nav-ctas {
        display: none;
    }
}

/* Nav Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.nav-overlay.is-visible {
    display: block;
}

/* ============================================
   HERO SECTIONS
   Full-bleed, manga panel style
   ============================================ */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
    background-color: var(--background);
    overflow: clip;
}

.hero--medium {
    min-height: 70vh;
}

.hero--short {
    min-height: 60vh;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.4;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 15, 46, 0.92) 0%,
        rgba(10, 15, 46, 0.75) 50%,
        rgba(10, 15, 46, 0.6) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .hero-inner {
        padding-inline: var(--space-md);
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .hero-inner {
        padding-inline: var(--space-lg);
    }
}

.hero-text {
    flex: 1;
    min-width: 0;
}

.hero-eyebrow {
    display: inline-block;
    font-family: "Zen Dots", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    background: rgba(0, 200, 83, 0.12);
    border: 1px solid rgba(0, 200, 83, 0.3);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: var(--space-sm);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.hero-mascot {
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero-mascot {
        width: 340px;
    }
}

@media (min-width: 1024px) {
    .hero-mascot {
        width: 420px;
    }
}

.hero-mascot-img {
    width: 100%;
    height: auto;
    /* Drop-in from top animation */
    animation: mascotDropIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.35));
}

@keyframes mascotDropIn {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   SAKURA / COIN PARTICLES
   CSS-only float animation
   ============================================ */
.sakura-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.sakura-petal {
    position: absolute;
    top: -30px;
    width: 16px;
    height: 16px;
    border-radius: 50% 0 50% 0;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 60%, transparent 100%);
    opacity: 0.7;
    animation: sakuraFall linear infinite;
}

.sakura-petal:nth-child(1)  { left: 8%;  animation-duration: 7s;  animation-delay: 0s;   width: 14px; height: 14px; }
.sakura-petal:nth-child(2)  { left: 18%; animation-duration: 9s;  animation-delay: 1.2s; width: 10px; height: 10px; opacity: 0.5; }
.sakura-petal:nth-child(3)  { left: 32%; animation-duration: 6s;  animation-delay: 0.5s; width: 18px; height: 18px; }
.sakura-petal:nth-child(4)  { left: 45%; animation-duration: 8s;  animation-delay: 2s;   width: 12px; height: 12px; opacity: 0.6; }
.sakura-petal:nth-child(5)  { left: 60%; animation-duration: 7.5s;animation-delay: 0.8s; width: 16px; height: 16px; }
.sakura-petal:nth-child(6)  { left: 72%; animation-duration: 5.5s;animation-delay: 3s;   width: 10px; height: 10px; opacity: 0.4; }
.sakura-petal:nth-child(7)  { left: 85%; animation-duration: 9s;  animation-delay: 1s;   width: 14px; height: 14px; }
.sakura-petal:nth-child(8)  { left: 92%; animation-duration: 6.5s;animation-delay: 2.5s; width: 20px; height: 20px; opacity: 0.6; }
.sakura-petal:nth-child(9)  { left: 25%; animation-duration: 8.5s;animation-delay: 4s;   width: 12px; height: 12px; opacity: 0.5; }
.sakura-petal:nth-child(10) { left: 55%; animation-duration: 7s;  animation-delay: 1.8s; width: 16px; height: 16px; }

@keyframes sakuraFall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0.7;
    }
    25% {
        transform: translateY(25vh) rotate(90deg) translateX(20px);
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(-15px);
        opacity: 0.7;
    }
    75% {
        transform: translateY(75vh) rotate(270deg) translateX(10px);
    }
    100% {
        transform: translateY(110vh) rotate(360deg) translateX(-10px);
        opacity: 0;
    }
}

/* ============================================
   SPEED LINES (manga burst effect)
   SVG-based radial decoration
   ============================================ */
.speed-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 215, 0, 0.03) 5deg,
        transparent 10deg,
        rgba(255, 215, 0, 0.02) 15deg,
        transparent 20deg,
        rgba(255, 215, 0, 0.03) 25deg,
        transparent 30deg,
        rgba(255, 215, 0, 0.02) 35deg,
        transparent 40deg,
        rgba(255, 215, 0, 0.03) 45deg,
        transparent 50deg,
        rgba(255, 215, 0, 0.02) 55deg,
        transparent 60deg,
        rgba(255, 215, 0, 0.03) 65deg,
        transparent 70deg,
        rgba(255, 215, 0, 0.02) 75deg,
        transparent 80deg,
        rgba(255, 215, 0, 0.03) 85deg,
        transparent 90deg,
        rgba(255, 215, 0, 0.02) 95deg,
        transparent 100deg,
        rgba(255, 215, 0, 0.03) 105deg,
        transparent 110deg,
        rgba(255, 215, 0, 0.02) 115deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.03) 125deg,
        transparent 130deg,
        rgba(255, 215, 0, 0.02) 135deg,
        transparent 140deg,
        rgba(255, 215, 0, 0.03) 145deg,
        transparent 150deg,
        rgba(255, 215, 0, 0.02) 155deg,
        transparent 160deg,
        rgba(255, 215, 0, 0.03) 165deg,
        transparent 170deg,
        rgba(255, 215, 0, 0.02) 175deg,
        transparent 180deg,
        rgba(255, 215, 0, 0.03) 185deg,
        transparent 190deg,
        rgba(255, 215, 0, 0.02) 195deg,
        transparent 200deg,
        rgba(255, 215, 0, 0.03) 205deg,
        transparent 210deg,
        rgba(255, 215, 0, 0.02) 215deg,
        transparent 220deg,
        rgba(255, 215, 0, 0.03) 225deg,
        transparent 230deg,
        rgba(255, 215, 0, 0.02) 235deg,
        transparent 240deg,
        rgba(255, 215, 0, 0.03) 245deg,
        transparent 250deg,
        rgba(255, 215, 0, 0.02) 255deg,
        transparent 260deg,
        rgba(255, 215, 0, 0.03) 265deg,
        transparent 270deg,
        rgba(255, 215, 0, 0.02) 275deg,
        transparent 280deg,
        rgba(255, 215, 0, 0.03) 285deg,
        transparent 290deg,
        rgba(255, 215, 0, 0.02) 295deg,
        transparent 300deg,
        rgba(255, 215, 0, 0.03) 305deg,
        transparent 310deg,
        rgba(255, 215, 0, 0.02) 315deg,
        transparent 320deg,
        rgba(255, 215, 0, 0.03) 325deg,
        transparent 330deg,
        rgba(255, 215, 0, 0.02) 335deg,
        transparent 340deg,
        rgba(255, 215, 0, 0.03) 345deg,
        transparent 350deg,
        rgba(255, 215, 0, 0.02) 355deg,
        transparent 360deg
    );
}

/* ============================================
   GAME CARDS
   Used by game_card macro
   2-col mobile → 3-col tablet → 4-col desktop
   ============================================ */
.game-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--primary);
    overflow: hidden;
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    min-width: 0;
}

.game-card:hover {
    transform: scale(1.04);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.game-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.game-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}

.game-card:hover .game-card-img {
    transform: scale(1.06);
}

/* Live badge - darkened red for WCAG AA contrast with white text */
.game-live-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #c0001e;
    color: #fff;
    font-family: "Zen Dots", sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 100px;
    z-index: 2;
}

.live-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

/* Game badge overlay */
.game-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: "Zen Dots", sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 100px;
    z-index: 2;
    text-transform: uppercase;
}

.game-badge--green { background: var(--accent); color: var(--accent-foreground); }
.game-badge--gold  { background: var(--primary); color: var(--primary-foreground); }
.game-badge--red   { background: #c0001e; color: #ffffff; }
.game-badge--blue  { background: var(--muted); color: var(--foreground); }

/* Card body */
.game-card-body {
    padding: 14px 16px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-card-title {
    font-family: "Zen Dots", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* RTP badge */
.rtp-badge {
    display: inline-block;
    background: rgba(0, 200, 83, 0.15);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 100px;
    border: 1px solid rgba(0, 200, 83, 0.3);
}

/* Provider badge */
.provider-badge {
    display: inline-block;
    background: rgba(255, 215, 0, 0.08);
    color: var(--muted-foreground);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 100px;
    border: 1px solid var(--border);
}

/* Jackpot counter on card */
.game-jackpot {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 61, 87, 0.1);
    border: 1px solid rgba(255, 61, 87, 0.25);
    border-radius: var(--radius);
    padding: 4px 10px;
}

.jackpot-label {
    font-size: 10px;
    color: var(--destructive);
    font-weight: 700;
    text-transform: uppercase;
}

.jackpot-amount {
    font-family: "Zen Dots", sans-serif;
    font-size: 13px;
    color: var(--primary);
    font-weight: 700;
}

/* Card CTA */
.game-card-cta {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    font-size: 12px;
    padding: 10px;
    min-height: 40px;
    text-align: center;
}

/* ============================================
   GAME GRID SECTION
   ============================================ */
.games-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .games-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   FAQ ACCORDION
   Used by faq_accordion macro
   ============================================ */
.faq-accordion {
    width: 100%;
}

.faq-item {
    border-left: 4px solid var(--primary);
    background: var(--card);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 200ms ease;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: var(--space-sm);
    transition: background 200ms ease;
}

.faq-question:hover {
    background: rgba(255, 215, 0, 0.05);
}

.faq-question[aria-expanded="true"] {
    background: rgba(255, 215, 0, 0.08);
}

.faq-question-text {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.faq-chevron {
    flex-shrink: 0;
    transition: transform 300ms ease;
    display: flex;
    align-items: center;
}

.faq-question[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease-out;
}

.faq-answer:not([hidden]) {
    max-height: 600px;
}

.faq-answer[hidden] {
    display: block !important;
    max-height: 0;
    visibility: hidden;
}

.faq-answer-inner {
    padding: 4px 20px 20px 20px;
    font-size: 16px;
    color: var(--muted-foreground);
    line-height: 1.7;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.faq-answer-inner p {
    color: var(--muted-foreground);
    font-size: 16px;
    max-width: none;
}

/* ============================================
   JACKPOT COUNTER SECTION
   ============================================ */
.jackpot-section {
    background: var(--card);
    border-block: 4px solid var(--primary);
}

.jackpot-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.jackpot-counter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.jackpot-coin-burst {
    font-size: 40px;
    animation: coinSpin 3s linear infinite;
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

.jackpot-big-number {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(36px, 8vw, 72px);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -1px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation: numberGlow 2s ease-in-out infinite alternate;
}

@keyframes numberGlow {
    from { text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
    to   { text-shadow: 0 0 50px rgba(255, 215, 0, 0.8); }
}

.jackpot-fomo {
    font-family: "Zen Dots", sans-serif;
    font-size: 14px;
    color: var(--destructive);
    background: rgba(255, 61, 87, 0.1);
    border: 1px solid rgba(255, 61, 87, 0.3);
    padding: 8px 16px;
    border-radius: 100px;
    animation: urgencyPulse 1.5s ease-in-out infinite alternate;
}

@keyframes urgencyPulse {
    from { opacity: 0.8; }
    to   { opacity: 1; box-shadow: 0 0 12px rgba(255, 61, 87, 0.4); }
}

/* ============================================
   BONUS CARDS
   ============================================ */
.bonus-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border-top: 4px solid var(--primary);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    min-width: 0;
}

.bonus-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.bonus-card--green   { border-top-color: var(--accent); }
.bonus-card--gold    { border-top-color: var(--primary); }
.bonus-card--blue    { border-top-color: var(--muted); }
.bonus-card--red     { border-top-color: var(--destructive); }

.bonus-card-icon {
    font-size: 40px;
    line-height: 1;
}

.bonus-card-title {
    font-family: "Zen Dots", sans-serif;
    font-size: 16px;
    color: var(--foreground);
}

.bonus-card-value {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(20px, 4vw, 28px);
    color: var(--primary);
    line-height: 1.1;
}

.bonus-card-terms {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.bonus-card-terms p {
    font-size: 13px;
    color: var(--muted-foreground);
    max-width: none;
}

/* Term pills */
.terms-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.term-pill {
    display: inline-block;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--border);
}

/* ============================================
   PROVIDER CARDS & LOGOS
   ============================================ */
.provider-logo-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 20px;
    min-height: 60px;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    font-family: "Zen Dots", sans-serif;
    font-size: 12px;
    color: var(--muted-foreground);
    text-align: center;
}

.provider-logo-pill:hover {
    transform: scale(1.04);
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
    color: var(--foreground);
}

.provider-logo-pill img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
    filter: brightness(0.7) saturate(0.5);
    transition: filter 200ms ease;
}

.provider-logo-pill:hover img {
    filter: brightness(1) saturate(1);
}

/* Provider spotlight card */
.provider-spotlight-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.provider-spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 30% 30%,
        transparent 0deg,
        rgba(255,215,0,0.02) 8deg,
        transparent 16deg,
        rgba(255,215,0,0.015) 24deg,
        transparent 32deg
    );
    pointer-events: none;
}

.provider-spotlight-card:hover {
    transform: scale(1.04);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.provider-spotlight-name {
    font-family: "Zen Dots", sans-serif;
    font-size: 14px;
    color: var(--foreground);
}

.provider-spotlight-desc {
    font-size: 13px;
    color: var(--muted-foreground);
    max-width: none;
}

/* ============================================
   SOCIAL PROOF / TRUSTPILOT STRIP
   ============================================ */
.social-proof-strip {
    background: var(--card);
    border-top: 4px solid var(--primary);
    border-bottom: 4px solid var(--primary);
}

.stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: var(--space-md);
}

.stat-number {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(28px, 5vw, 48px);
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-icon {
    font-size: 28px;
}

/* Testimonials */
.testimonial-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.testimonial-text {
    font-size: 15px;
    color: var(--foreground);
    font-style: italic;
    line-height: 1.6;
    max-width: none;
}

.testimonial-author {
    font-size: 13px;
    color: var(--muted-foreground);
    font-weight: 700;
}

.testimonial-stars {
    color: var(--primary);
    font-size: 14px;
    letter-spacing: 2px;
}

/* ============================================
   SEO TEXT SECTION
   ============================================ */
.seo-text-section {
    background: var(--background);
}

.seo-text-wrap {
    max-width: 800px;
    margin-inline: auto;
}

.seo-text-wrap p {
    margin-bottom: var(--space-sm);
    color: var(--foreground);
    max-width: none;
}

.seo-text-wrap h3 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    color: var(--foreground);
}

.seo-text-wrap a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.seo-text-wrap a:hover {
    color: var(--accent);
}

.seo-text-wrap strong {
    color: var(--foreground);
    font-weight: 700;
}

/* PAA Q&A inline block */
.paa-block {
    background: var(--card);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--space-md);
    margin-block: var(--space-md);
}

.paa-question {
    font-family: "Zen Dots", sans-serif;
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 8px;
}

.paa-answer {
    font-size: 16px;
    color: var(--foreground);
    max-width: none;
    line-height: 1.7;
}

/* ============================================
   RESPONSIBLE GAMBLING NOTICE
   ============================================ */
.responsible-bar {
    background: var(--muted);
    border: 1px solid var(--border);
    border-left: 4px solid var(--muted-foreground);
    border-radius: var(--radius);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .responsible-bar {
        flex-direction: row;
        align-items: flex-start;
    }
}

.responsible-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.responsible-content {
    flex: 1;
    min-width: 0;
}

.responsible-content p {
    font-size: 14px;
    color: var(--muted-foreground);
    max-width: none;
    margin-bottom: 8px;
}

.responsible-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.responsible-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--foreground);
}

/* ============================================
   URGENCY STRIP
   Full-bleed crimson section
   ============================================ */
.urgency-strip {
    background: #c0001e;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    overflow: clip;
}

.urgency-strip-text {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(14px, 3vw, 20px);
    color: #fff;
    line-height: 1.3;
    max-width: none;
}

.urgency-counter {
    font-size: clamp(16px, 4vw, 24px);
    font-weight: 700;
}

/* ============================================
   SECTION HEADINGS WITH GOLD ACCENT LINE
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section-header h2 {
    margin-bottom: var(--space-xs);
}

.section-subtitle {
    font-size: 16px;
    color: var(--muted-foreground);
    max-width: 600px;
    margin-inline: auto;
}

.section-gold-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    margin: var(--space-sm) auto 0;
}

/* ============================================
   FILTER BAR (Slots page)
   ============================================ */
.filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Zen Dots", sans-serif;
    font-size: 12px;
    padding: 10px 20px;
    border-radius: 100px;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    transition: all 200ms ease;
}

.filter-pill:hover {
    border-color: var(--primary);
    color: var(--foreground);
}

.filter-pill.active,
.filter-pill[aria-selected="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

/* ============================================
   BET LIMITS TABLE
   ============================================ */
.bet-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    /* Allow keyboard scrolling for accessibility */
    outline: none;
}

.bet-table-wrap:focus {
    box-shadow: 0 0 0 2px var(--primary);
}

.bet-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    background: var(--card);
}

.bet-table thead {
    background: rgba(255, 215, 0, 0.1);
}

.bet-table th {
    font-family: "Zen Dots", sans-serif;
    font-size: 13px;
    color: var(--primary);
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid var(--primary);
    white-space: nowrap;
}

.bet-table td {
    font-size: 15px;
    color: var(--foreground);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.bet-table tbody tr:last-child td {
    border-bottom: none;
}

.bet-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.04);
}

.bet-min { color: var(--accent); font-weight: 700; }
.bet-max { color: var(--primary); font-weight: 700; }

/* ============================================
   CALLOUT BOXES
   ============================================ */
.callout {
    background: var(--card);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--space-md);
    margin-block: var(--space-md);
}

.callout--gold { border-left-color: var(--primary); }
.callout--red  { border-left-color: var(--destructive); }
.callout--blue { border-left-color: var(--muted-foreground); }

.callout-title {
    font-family: "Zen Dots", sans-serif;
    font-size: 14px;
    color: var(--foreground);
    margin-bottom: 8px;
}

.callout p {
    font-size: 15px;
    color: var(--muted-foreground);
    max-width: none;
}

/* ============================================
   PULL QUOTE
   ============================================ */
.pull-quote {
    border-left: 4px solid var(--primary);
    padding: var(--space-md) var(--space-lg);
    margin-block: var(--space-lg);
}

.pull-quote-text {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(18px, 3vw, 24px);
    color: var(--foreground);
    line-height: 1.4;
    max-width: none;
}

.pull-quote-cite {
    display: block;
    font-size: 14px;
    color: var(--muted-foreground);
    margin-top: 8px;
}

/* ============================================
   STAT HIGHLIGHT (standalone)
   ============================================ */
.stat-highlight {
    text-align: center;
    padding: var(--space-md);
}

.stat-highlight-number {
    display: block;
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(40px, 8vw, 72px);
    color: var(--primary);
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.stat-highlight-label {
    display: block;
    font-size: 15px;
    color: var(--muted-foreground);
    margin-top: 8px;
}

.stat-highlight-source {
    display: block;
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: 4px;
    opacity: 0.7;
}

/* ============================================
   CTA BAND (full-width conversion section)
   ============================================ */
.cta-band {
    background: linear-gradient(135deg, #0F1640 0%, #1a2060 50%, #0F1640 100%);
    border-block: 4px solid var(--primary);
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}

.cta-band h2 {
    margin-bottom: var(--space-sm);
}

.cta-band-subtitle {
    font-size: 16px;
    color: var(--muted-foreground);
    margin-bottom: var(--space-md);
    max-width: 560px;
    margin-inline: auto;
    margin-bottom: var(--space-md);
}

.cta-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
}

.cta-small-text {
    font-size: 13px;
    color: var(--muted-foreground);
    margin-top: var(--space-sm);
}

/* ============================================
   TRUST BADGES ROW
   ============================================ */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 13px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.trust-badge-icon {
    font-size: 20px;
}

/* ============================================
   DETAILS/SUMMARY ACCORDION (wagering explainer)
   ============================================ */
details.expandable {
    background: var(--card);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 8px;
    overflow: hidden;
}

details.expandable summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
    cursor: pointer;
    list-style: none;
    min-height: 56px;
    user-select: none;
    transition: background 200ms ease;
}

details.expandable summary:hover {
    background: rgba(255, 215, 0, 0.05);
}

details.expandable summary::-webkit-details-marker {
    display: none;
}

details.expandable summary::after {
    content: '▼';
    color: var(--primary);
    font-size: 12px;
    transition: transform 300ms ease;
    flex-shrink: 0;
}

details.expandable[open] summary::after {
    transform: rotate(180deg);
}

details.expandable .details-body {
    padding: 0 20px 20px;
    font-size: 16px;
    color: var(--muted-foreground);
    line-height: 1.7;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

details.expandable .details-body p {
    color: var(--muted-foreground);
    font-size: 16px;
    max-width: none;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.comparison-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.comparison-table {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    background: var(--card);
}

.comparison-table th {
    font-family: "Zen Dots", sans-serif;
    font-size: 13px;
    color: var(--foreground);
    padding: 14px 16px;
    border-bottom: 2px solid var(--border);
    text-align: left;
    background: var(--muted);
}

.comparison-table th.highlight-col {
    background: rgba(255, 215, 0, 0.15);
    color: var(--primary);
}

.comparison-table td {
    padding: 12px 16px;
    font-size: 15px;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.comparison-table td.highlight-col {
    background: rgba(255, 215, 0, 0.05);
    font-weight: 700;
    color: var(--primary);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================
   FOOTER
   4-col desktop, 2-col tablet, 1-col mobile
   ============================================ */
.site-footer {
    background: var(--card);
    border-top: 4px solid var(--primary);
    padding-top: var(--space-xl);
}

.footer-inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-sm);
}

@media (min-width: 1024px) {
    .footer-inner {
        padding-inline: var(--space-lg);
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.footer-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-sm);
    text-decoration: none;
}

.footer-tagline {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    max-width: 320px;
}

.footer-badge-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* 18+ badge - darkened red background to meet WCAG AA 4.5:1 with white text */
.badge-18plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #a50017;
    color: #fff;
    font-family: "Zen Dots", sans-serif;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.footer-license {
    font-size: 12px;
    color: var(--muted-foreground);
    background: var(--muted);
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
}

.footer-col {}

.footer-heading {
    font-family: "Zen Dots", sans-serif;
    font-size: 14px;
    color: var(--primary);
    margin-bottom: var(--space-sm);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.footer-link {
    font-size: 14px;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 200ms ease;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.footer-link:hover {
    color: var(--primary);
}

.footer-link-external {
    color: var(--accent);
    text-decoration: underline;
}

.footer-link-external:hover {
    color: var(--primary);
}

/* Payment Methods */
.footer-payments {
    padding-block: var(--space-md);
    border-block: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

.footer-payments-label {
    font-size: 12px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    max-width: none;
}

.payment-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.payment-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 14px;
    font-family: "Zen Dots", sans-serif;
    font-size: 11px;
    color: var(--muted-foreground);
    min-height: 36px;
    white-space: nowrap;
}

/* Responsible Gambling footer note */
.footer-responsible {
    margin-bottom: var(--space-md);
}

.footer-responsible-text {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.6;
    max-width: none;
}

/* Footer Bottom */
.footer-bottom {
    padding-block: var(--space-md);
    border-top: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-copyright {
    font-size: 13px;
    color: var(--muted-foreground);
    max-width: none;
}

/* Footer disclaimer - lightened to meet WCAG AA 4.5:1 on #0f1640 background */
.footer-disclaimer {
    font-size: 12px;
    color: #8a99c0;
    max-width: none;
    line-height: 1.5;
}

/* ============================================
   SCROLL ANIMATIONS
   .animate-on-scroll elements start hidden,
   JS adds .is-visible on viewport entry
   ============================================ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 100ms; }
.animate-on-scroll.delay-2 { transition-delay: 200ms; }
.animate-on-scroll.delay-3 { transition-delay: 300ms; }
.animate-on-scroll.delay-4 { transition-delay: 400ms; }
.animate-on-scroll.delay-5 { transition-delay: 500ms; }

/* From left */
.animate-from-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.animate-from-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* From right */
.animate-from-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.animate-from-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   INDEX PAGE - HERO
   ============================================ */
.hero-home {
    min-height: 90vh;
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: var(--space-xl);
    background: var(--background);
    position: relative;
    overflow: clip;
    display: flex;
    align-items: center;
}

.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(255, 215, 0, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 30% 30%, rgba(0, 200, 83, 0.05) 0%, transparent 60%),
        var(--background);
}

.hero-bonus-headline {
    font-size: clamp(20px, 4.5vw, 36px);
    color: var(--foreground);
    font-weight: 700;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    line-height: 1.25;
}

.hero-bonus-headline .text-green {
    display: block;
}

.hero-sub {
    font-size: 16px;
    color: var(--muted-foreground);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: var(--space-sm);
}

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-sm);
}

.hero-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--muted-foreground);
    font-family: "Noto Sans", sans-serif;
    white-space: nowrap;
}

.hero-terms {
    font-size: 12px;
    color: var(--muted-foreground);
    opacity: 1;
    margin-top: var(--space-sm);
    max-width: none;
}

.hero-cta-primary {
    position: relative;
}

.hero-cta-primary::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,215,0,0.3) 60deg, transparent 120deg);
    animation: ctaSpinGlow 3s linear infinite;
    z-index: -1;
    opacity: 0.6;
}

@keyframes ctaSpinGlow {
    to { transform: rotate(360deg); }
}

/* ============================================
   INDEX PAGE - JACKPOT SECTION
   ============================================ */
.jackpot-top-label {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.jackpot-game-name {
    font-family: "Zen Dots", sans-serif;
    font-size: 14px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Jackpot live badge - darkened red for WCAG AA compliance */
.jackpot-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #a50017;
    color: #fff;
    font-family: "Zen Dots", sans-serif;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 100px;
    animation: urgencyPulse 1.5s ease-in-out infinite alternate;
}

.section-eyebrow-sm {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(14px, 2.5vw, 18px);
    color: var(--muted-foreground);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    text-align: center;
}

.jackpot-sub {
    font-size: 15px;
    color: var(--muted-foreground);
    max-width: 520px;
    text-align: center;
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.jackpot-cta {
    margin-top: var(--space-sm);
}

/* ============================================
   INDEX PAGE - GAMES SECTION
   ============================================ */
.games-cta-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-lg);
}

/* ============================================
   INDEX PAGE - BONUS SECTION
   ============================================ */
.bonus-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.bonus-card-badge {
    display: inline-block;
    font-family: "Zen Dots", sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
}

.bonus-badge-new  { background: var(--primary); color: var(--primary-foreground); }
/* bonus-badge-hot - darkened red for WCAG AA compliance */
.bonus-badge-hot  { background: #a50017; color: #fff; }
.bonus-badge-live { background: var(--accent); color: var(--accent-foreground); }

.bonus-card-fs {
    font-size: clamp(14px, 3vw, 18px);
    font-family: "Zen Dots", sans-serif;
    color: var(--accent);
}

.bonus-card-fs--green { color: var(--accent); }
.bonus-card-fs--muted { color: var(--muted-foreground); }
.bonus-card-fs--red   { color: var(--destructive); }

.bonus-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-md);
    background: rgba(0, 200, 83, 0.07);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: var(--radius-lg);
    margin-block: var(--space-lg);
    flex-wrap: wrap;
    text-align: center;
}

.bonus-social-icon { font-size: 22px; }

.bonus-social-text {
    font-size: 15px;
    color: var(--muted-foreground);
}

.bonus-social-text strong {
    color: var(--accent);
}

/* ============================================
   INDEX PAGE - PROVIDERS
   ============================================ */
.providers-section {
    background: var(--card);
}

.provider-name-text {
    font-family: "Zen Dots", sans-serif;
    font-size: 12px;
    color: var(--muted-foreground);
    text-align: center;
}

.provider-scene {
    margin-top: var(--space-xl);
}

.provider-scene-inner {
    text-align: center;
    position: relative;
}

.provider-scene-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.15));
}

/* ============================================
   INDEX PAGE - TRUST / SOCIAL PROOF
   ============================================ */
.trust-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

@media (min-width: 768px) {
    .trust-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.trust-stats-grid .stat-block {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-stats-grid .stat-block:nth-child(2n) {
    border-right: none;
}

@media (min-width: 768px) {
    .trust-stats-grid .stat-block:nth-child(2n) {
        border-right: 1px solid var(--border);
    }
    .trust-stats-grid .stat-block:last-child {
        border-right: none;
    }
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================
   INDEX PAGE - SEO SECTION
   ============================================ */
.seo-links-grid {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-lg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
}

.seo-links-grid h3 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-size: 16px;
    color: var(--primary);
}

.seo-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.seo-links-list li {
    font-size: 15px;
    color: var(--muted-foreground);
}

.seo-links-list a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.seo-links-list a:hover {
    color: var(--accent);
}

/* ============================================
   BONI PAGE - WELCOME BONUS FEATURE CARD
   ============================================ */
.welcome-bonus-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--primary);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.15);
    overflow: hidden;
}

.welcome-bonus-split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

@media (min-width: 768px) {
    .welcome-bonus-split {
        flex-direction: row;
        align-items: center;
    }
}

.welcome-bonus-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.1) 0%, transparent 70%);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .welcome-bonus-visual {
        width: 300px;
        padding: var(--space-lg);
    }
}

.welcome-mascot-img {
    max-width: 220px;
    width: 100%;
    height: auto;
    animation: mascotFloat 3s ease-in-out infinite;
}

.welcome-bonus-details {
    flex: 1;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    min-width: 0;
}

@media (min-width: 768px) {
    .welcome-bonus-details {
        padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-lg);
        border-left: 2px solid var(--border);
    }
}

.welcome-value-big {
    display: block;
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(28px, 6vw, 48px);
    font-weight: 700;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
}

.welcome-value-fs {
    display: block;
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    color: var(--accent);
    margin-bottom: var(--space-sm);
}

.welcome-bonus-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-sm);
}

.welcome-bonus-features li {
    font-size: 15px;
    color: var(--foreground);
}

/* ============================================
   BONI PAGE - BONUS CODE PILL
   ============================================ */
.bonus-code-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 215, 0, 0.07);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.bonus-code-label {
    font-size: 13px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.bonus-code-value {
    font-family: "Zen Dots", monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.1em;
    flex: 1;
    min-width: 80px;
}

.bonus-code-copy {
    font-size: 12px;
    padding: 6px 12px;
    min-height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bonus-code-copy.copied {
    background: rgba(0, 200, 83, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================
   BONI PAGE - PAIR GRID
   ============================================ */
.boni-pair-grid {
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .boni-pair-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   BONI PAGE - SPORTS BONUS CARD
   ============================================ */
.sports-bonus-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border-left: 6px solid var(--destructive);
    box-shadow: 0 0 30px rgba(255, 61, 87, 0.1);
    overflow: hidden;
}

.sports-bonus-inner {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .sports-bonus-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.sports-bonus-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sports-icon {
    font-size: 36px;
    line-height: 1;
}

.sports-bonus-content {
    flex: 1;
    min-width: 0;
}

.sports-bonus-stat {
    text-align: center;
    flex-shrink: 0;
    padding: var(--space-sm);
    background: rgba(255, 61, 87, 0.08);
    border: 2px solid rgba(255, 61, 87, 0.25);
    border-radius: var(--radius-lg);
    min-width: 120px;
}

.sports-wr-number {
    display: block;
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(36px, 6vw, 56px);
    color: var(--primary);
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.sports-wr-label {
    display: block;
    font-size: 13px;
    color: var(--muted-foreground);
    margin-top: 4px;
    line-height: 1.4;
}

.sports-wr-label small {
    font-size: 11px;
    opacity: 0.8;
}

/* ============================================
   BONI PAGE - WEEKLY PROMOS GRID
   ============================================ */
.weekly-promos-grid {
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .weekly-promos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .weekly-promos-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.weekly-promo-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border-top: 4px solid var(--border);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    position: relative;
    overflow: hidden;
}

.weekly-promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 20% 20%,
        transparent 0deg,
        rgba(255,215,0,0.02) 10deg,
        transparent 20deg
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

.weekly-promo-card:hover {
    transform: scale(1.04);
}

.weekly-promo-card:hover::before {
    opacity: 1;
}

.weekly-promo-card--gold  { border-top-color: var(--primary); }
.weekly-promo-card--gold:hover  { box-shadow: 0 0 20px rgba(255, 215, 0, 0.35); }
.weekly-promo-card--green { border-top-color: var(--accent); }
.weekly-promo-card--green:hover { box-shadow: 0 0 20px rgba(0, 200, 83, 0.35); }
.weekly-promo-card--red   { border-top-color: var(--destructive); }
.weekly-promo-card--red:hover   { box-shadow: 0 0 20px rgba(255, 61, 87, 0.35); }
.weekly-promo-card--blue  { border-top-color: var(--muted-foreground); }
.weekly-promo-card--blue:hover  { box-shadow: 0 0 20px rgba(155, 170, 207, 0.25); }

.weekly-promo-icon {
    font-size: 36px;
    line-height: 1;
}

.weekly-promo-title {
    font-family: "Zen Dots", sans-serif;
    font-size: 15px;
    color: var(--foreground);
}

.weekly-promo-value {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(18px, 3vw, 22px);
    color: var(--primary);
    line-height: 1.1;
}

.weekly-promo-desc {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.5;
    flex: 1;
    max-width: none;
}

/* ============================================
   BONI PAGE - WAGERING EXPLAINER CARD
   ============================================ */
.wagering-explainer-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.wagering-explainer-inner {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .wagering-explainer-inner {
        flex-direction: row;
        align-items: flex-start;
    }
}

.wagering-mascot-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .wagering-mascot-col {
        width: 220px;
    }
}

.wagering-mascot-img {
    max-width: 180px;
    width: 100%;
    height: auto;
}

.wagering-content-col {
    flex: 1;
    min-width: 0;
}

.wagering-content-col h3 {
    margin-bottom: var(--space-sm);
    color: var(--foreground);
}

.wagering-content-col p {
    color: var(--foreground);
    margin-bottom: var(--space-sm);
    max-width: none;
}

.wagering-calc-box {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-block: var(--space-sm);
}

.wagering-calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    gap: var(--space-sm);
}

.wagering-calc-row:last-child {
    border-bottom: none;
}

.wagering-calc-total {
    background: rgba(255, 215, 0, 0.07);
}

.wagering-calc-label {
    font-size: 14px;
    color: var(--muted-foreground);
}

.wagering-calc-value {
    font-family: "Zen Dots", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
}

.wagering-calc-value.gold {
    color: var(--primary);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

/* ============================================
   BONI PAGE - CTA BAND MASCOT
   ============================================ */
.cta-band-mascot {
    max-width: 160px;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-md);
    animation: mascotFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}

/* ============================================
   INDEX PAGE - RESPONSIBLE GAMBLING SECTION
   ============================================ */
.responsible-section {
    padding-block: var(--space-md);
}

.responsible-heading {
    font-size: clamp(16px, 2.5vw, 20px);
    color: var(--foreground);
    margin-bottom: var(--space-xs);
}

/* ============================================
   LUCKY PAGE (stub/redirect)
   ============================================ */
.lucky-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--background);
    text-align: center;
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    gap: var(--space-sm);
}

.lucky-speed-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.lucky-sakura {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.lucky-logo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-xs);
}

.lucky-logo-line {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border-radius: 2px;
}

.lucky-mascot-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xs);
}

.lucky-mascot-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.18) 0%, transparent 70%);
    z-index: -1;
    animation: luckyGlowPulse 2.5s ease-in-out infinite alternate;
}

@keyframes luckyGlowPulse {
    from { transform: scale(0.9); opacity: 0.6; }
    to   { transform: scale(1.2); opacity: 1; }
}

.lucky-mascot {
    max-width: 220px;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: mascotFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 32px rgba(255, 215, 0, 0.4));
}

@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.lucky-message {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.lucky-heading {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(20px, 5vw, 30px);
    color: var(--foreground);
    margin: 0;
    line-height: 1.3;
}

.lucky-subtext {
    font-size: 16px;
    color: var(--muted-foreground);
    margin: 0;
    max-width: none;
    line-height: 1.6;
}

/* Spinner wrap */
.lucky-spinner-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/* Gold spinner loader */
.lucky-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid rgba(255, 215, 0, 0.12);
    border-top-color: var(--primary);
    animation: spinnerRotate 0.9s linear infinite;
    margin-inline: auto;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

.lucky-tagline {
    position: relative;
    z-index: 2;
    font-family: "Zen Dots", sans-serif;
    font-size: 11px;
    color: var(--muted-foreground);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: var(--space-xs);
    max-width: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.w-full { width: 100%; }
.min-w-0 { min-width: 0; }

/* Horizontal scroll container (mobile carousels) */
.h-scroll {
    display: flex;
    overflow-x: auto;
    gap: var(--space-sm);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.h-scroll::-webkit-scrollbar {
    display: none;
}

.h-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Grid → horizontal scroll on mobile for providers */
.providers-scroll {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.providers-scroll::-webkit-scrollbar { display: none; }
.providers-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-width: 140px;
}

@media (min-width: 768px) {
    .providers-scroll {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .providers-scroll > * {
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .providers-scroll {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Bonus card horizontal scroll on mobile */
.bonus-scroll {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.bonus-scroll::-webkit-scrollbar { display: none; }
.bonus-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-width: 260px;
    max-width: 300px;
}

@media (min-width: 768px) {
    .bonus-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .bonus-scroll > * {
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .bonus-scroll {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   MANGA PANEL BORDER DECORATION
   Gold 4px top border on major sections
   ============================================ */
.manga-panel-top {
    border-top: 4px solid var(--primary);
}

.manga-panel-bottom {
    border-bottom: 4px solid var(--primary);
}

/* ============================================
   SPIELAUTOMATEN PAGE - HERO
   ============================================ */
.slots-hero {
    min-height: 70vh;
}

.slots-hero-sub {
    font-size: clamp(16px, 3vw, 22px);
    color: var(--foreground);
    font-weight: 600;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    font-family: "Noto Sans", sans-serif;
}

/* Floating RTP/stat badges in hero */
.slots-stat-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.slots-stat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius);
    padding: 8px 16px;
    min-width: 100px;
    text-align: center;
}

.slots-stat-badge--green {
    background: rgba(0, 200, 83, 0.1);
    border-color: rgba(0, 200, 83, 0.3);
}

.slots-stat-num {
    font-family: "Zen Dots", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.slots-stat-badge--green .slots-stat-num {
    color: var(--accent);
}

.slots-stat-lbl {
    font-size: 11px;
    color: var(--muted-foreground);
    margin-top: 4px;
    line-height: 1.3;
}

/* ============================================
   SPIELAUTOMATEN PAGE - FILTER BAR SECTION
   ============================================ */
.slots-filter-section {
    background: var(--card);
    padding: var(--space-sm) 0;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
    position: sticky;
    top: var(--header-height);
    z-index: 50;
}

.filter-bar-wrap {
    padding-inline: var(--space-sm);
    max-width: var(--max-width);
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .filter-bar-wrap {
        padding-inline: var(--space-lg);
    }
}

/* ============================================
   SPIELAUTOMATEN PAGE - JACKPOT CALLOUT
   ============================================ */
.jackpot-callout {
    background: var(--card);
    border: 2px solid var(--destructive);
    border-radius: var(--radius-lg);
    margin-top: var(--space-lg);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(255, 61, 87, 0.15);
}

.jackpot-callout-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    text-align: center;
}

@media (min-width: 768px) {
    .jackpot-callout-inner {
        flex-direction: row;
        text-align: left;
        align-items: center;
    }
}

.jackpot-callout-text {
    flex: 1;
    min-width: 0;
}

.jackpot-callout-title {
    font-family: "Zen Dots", sans-serif;
    font-size: 18px;
    color: var(--foreground);
    margin-bottom: 8px;
}

.jackpot-callout-desc {
    font-size: 15px;
    color: var(--muted-foreground);
    max-width: none;
    line-height: 1.6;
}

.jackpot-callout-num {
    font-size: clamp(28px, 5vw, 48px) !important;
    flex-shrink: 0;
}

/* ============================================
   SPIELAUTOMATEN PAGE - PROVIDER SPOTLIGHT GRID
   ============================================ */
.provider-spotlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 480px) {
    .provider-spotlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .provider-spotlight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .provider-spotlight-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.provider-spotlight-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) 0;
}

.provider-spotlight-char {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.05);
}

.provider-spotlight-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    justify-content: center;
}

/* ============================================
   SPIELAUTOMATEN PAGE - SEO SECTION LAYOUT
   ============================================ */
.slots-seo-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

@media (min-width: 1024px) {
    .slots-seo-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-xl);
    }
}

.slots-seo-text {
    flex: 1;
    min-width: 0;
}

.slots-seo-mascot {
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .slots-seo-mascot {
        width: 360px;
    }
}

.slots-mascot-panel {
    position: sticky;
    top: calc(var(--header-height) + 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.slots-seo-mascot-img {
    max-width: 280px;
    width: 100%;
    height: auto;
    animation: mascotFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.2));
}

/* Slot tips card */
.slots-tips-card {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.slots-tips-title {
    font-family: "Zen Dots", sans-serif;
    font-size: 15px;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.slots-tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slots-tips-list li {
    font-size: 14px;
    color: var(--foreground);
    line-height: 1.4;
}

/* RTP Comparison Table */
.rtp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-block: var(--space-md);
    font-size: 14px;
}

.rtp-table thead {
    background: rgba(255, 215, 0, 0.1);
}

.rtp-table th {
    font-family: "Zen Dots", sans-serif;
    font-size: 12px;
    color: var(--primary);
    padding: 12px 14px;
    text-align: left;
    border-bottom: 2px solid var(--primary);
    white-space: nowrap;
}

.rtp-table td {
    padding: 10px 14px;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.rtp-table tbody tr:last-child td {
    border-bottom: none;
}

.rtp-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.04);
}

/* ============================================
   LIVE CASINO PAGE - HERO SUBTITLE
   ============================================ */
.live-hero-subtitle {
    font-size: clamp(16px, 3vw, 24px);
    color: var(--foreground);
    font-weight: 600;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    font-family: "Noto Sans", sans-serif;
}

/* ============================================
   LIVE CASINO PAGE - TABLE CTA ROW
   ============================================ */
.live-table-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* ============================================
   LIVE CASINO PAGE - PROVIDER CARDS
   Two-column desktop, stacked mobile
   ============================================ */
.live-providers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .live-providers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
    }
}

.live-provider-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    border-top: 4px solid var(--primary);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    position: relative;
    overflow: hidden;
}

.live-provider-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 30% 30%,
        transparent 0deg,
        rgba(255,215,0,0.02) 8deg,
        transparent 16deg
    );
    pointer-events: none;
}

.live-provider-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.25);
    border-color: var(--primary);
}

.live-provider-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.live-provider-mascot {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.05);
    padding: 8px;
    animation: mascotFloat 4s ease-in-out infinite;
}

.live-provider-name {
    font-family: "Zen Dots", sans-serif;
    font-size: 20px;
    color: var(--foreground);
    margin-top: 4px;
}

.live-provider-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.live-provider-features li {
    font-size: 15px;
    color: var(--foreground);
    line-height: 1.5;
}

/* ============================================
   LIVE CASINO PAGE - ADVANTAGES GRID
   3-col desktop, 2-col tablet, 1-col mobile
   ============================================ */
.live-advantages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 480px) {
    .live-advantages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .live-advantages-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

.live-advantage-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--primary);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    position: relative;
    overflow: hidden;
}

.live-advantage-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 180deg at 70% 80%,
        transparent 0deg,
        rgba(255,215,0,0.015) 10deg,
        transparent 20deg
    );
    pointer-events: none;
}

.live-advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2);
}

.live-advantage-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 4px;
}

.live-advantage-title {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(16px, 2.5vw, 20px);
    color: var(--foreground);
}

.live-advantage-desc {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.6;
    max-width: none;
    flex: 1;
}

/* ============================================
   ACTIVE NAV HIGHLIGHTING
   JS adds .active class based on current page
   ============================================ */
.nav-link.active {
    color: var(--primary);
}

/* ============================================
   PAGE BODY TOP PADDING
   Compensate for fixed header
   ============================================ */
body {
    padding-top: 0; /* Hero sections handle this via padding-top */
}

/* Non-hero pages need body offset */
.page-content-offset {
    padding-top: calc(var(--header-height) + var(--space-xl));
}