/* ==== inline-critical.css ==== */
body.has-premium-header { margin-top: 0px !important; padding-top: 0px !important; }
:root { --slm-desktop-header-offset: 80px; --slm-mobile-header-offset: 64px; --slm-mobile-header-offset-compact: 58px; }
body.has-premium-header :root { --slm-text-base: 17px; --slm-text-ui: 16px; --slm-text-small: 15px; --slm-leading-base: 1.72; --slm-leading-tight: 1.4; }
body { font-size: 17px !important; line-height: 1.65 !important; }
p, li, td, th, label, input, select, textarea, .panel-body, .software-description, .legal-content, .news-detail, .blog-content, #laypage { font-size: 1.08rem !important; line-height: 1.72 !important; }
 .hero-subtitle-ocean, .section-subtitle-ocean, .epic-game-card .game-card-title, .epic-game-card .game-details-grid, .context-chip, .related-pages a, .maint-banner, .btn, .btn-ocean-primary, .btn-view-all-ocean, .btn-treasure { font-size: 1rem !important; }
.hero-stat-label, .slot-hub-stat span, .casino-banner-name { font-size: 0.98rem !important; }
.hero-stat-number, .slot-hub-stat strong { font-size: 1.28rem !important; }
main, main p, main li, main td, main th, main label, main input, main select, main textarea, .panel-body, .software-description, .legal-content, .news-detail, .blog-content, #laypage, .epic-game-card, .casino-card, .maint-banner { font-size: var(--slm-text-base) !important; line-height: var(--slm-leading-base) !important; }
main h1, main h2, main h3, main h4, main h5, main h6 { line-height: 1.22 !important; }
@media (min-width: 992px) {
  body.has-premium-header main#main-content { padding-top: var(--slm-desktop-header-offset) !important; }
  body.has-premium-header.page-family-home main#main-content, body.has-premium-header.page-family-slots main#main-content, body.has-premium-header.page-family-tools main#main-content, body.has-premium-header.page-family-provider main#main-content, body.has-premium-header.page-family-slot-single main#main-content { padding-top: 0px !important; }
  body.has-premium-header.page-family-home .hero-ocean { padding-top: calc(var(--slm-desktop-header-offset) + 20px) !important; }
  body.has-premium-header.page-family-slots .ocean-hero-free, body.has-premium-header.page-family-slots .slot-hub-hero, body.has-premium-header.page-family-slots .high-rtp-hero, body.has-premium-header.page-family-slots .new-slots-hero, body.has-premium-header.page-family-slots .new-slots-page-section { padding-top: calc(var(--slm-desktop-header-offset) + 20px) !important; }
  body.has-premium-header.page-family-provider .provider-ocean-hero, body.has-premium-header.page-family-provider .software-hero, body.has-premium-header.page-family-provider .newHeader { padding-top: calc(var(--slm-desktop-header-offset) + 20px) !important; }
  body.has-premium-header.page-family-tools .layout-page-hero { padding-top: calc(var(--slm-desktop-header-offset) + 20px) !important; }
  body.has-premium-header.page-family-slot-single #single-game-section .newHeader, body.has-premium-header.page-family-slot-single #single-game-section { padding-top: calc(var(--slm-desktop-header-offset) + 10px) !important; }
  body.has-premium-header.page-family-guides .layout-page-hero { padding-top: calc(var(--slm-desktop-header-offset) + 20px) !important; }
  body.has-premium-header.page-family-guides main#main-content { padding-top: 0px !important; }
}
@media (max-width: 991px) {
  body.has-premium-header { scroll-padding-top: var(--slm-mobile-header-offset) !important; }
  body.has-premium-header main#main-content { padding-top: var(--slm-mobile-header-offset) !important; }
  body.has-premium-header.page-family-home main#main-content, body.has-premium-header.page-family-slots main#main-content, body.has-premium-header.page-family-tools main#main-content, body.has-premium-header.page-family-provider main#main-content { padding-top: 0px !important; }
  body.has-premium-header .ocean-hero-free, body.has-premium-header .slot-hub-hero, body.has-premium-header .high-rtp-hero, body.has-premium-header .new-slots-hero, body.has-premium-header .provider-ocean-hero, body.has-premium-header .layout-page-hero, body.has-premium-header .software-hero, body.has-premium-header #single-game-section .newHeader { scroll-margin-top: calc(var(--slm-mobile-header-offset) + 14px) !important; }
  body.has-premium-header .ocean-hero-free, body.has-premium-header .slot-hub-hero, body.has-premium-header .high-rtp-hero, body.has-premium-header .new-slots-hero, body.has-premium-header .provider-ocean-hero, body.has-premium-header .layout-page-hero, body.has-premium-header .software-hero { padding-top: 12px !important; }
  body.has-premium-header.page-family-slots .ocean-hero-free, body.has-premium-header.page-family-slots .slot-hub-hero, body.has-premium-header.page-family-slots .high-rtp-hero, body.has-premium-header.page-family-slots .new-slots-hero, body.has-premium-header.page-family-slots .new-slots-page-section, body.has-premium-header.page-family-home .hero-ocean, body.has-premium-header.page-family-tools .layout-page-hero, body.has-premium-header.page-family-provider .newHeader, body.has-premium-header.page-family-provider .software-hero { padding-top: 64px !important; }
  body.has-premium-header.page-family-slots .ocean-content-area, body.has-premium-header.page-family-slots .slot-hub-content, body.has-premium-header.page-family-slots .high-rtp-content, body.has-premium-header.page-family-tools .layout-page-shell { padding-top: 0px !important; margin-top: 0px !important; }
  body.has-premium-header.page-family-home .site-discovery-hub { padding-top: 0px !important; margin-top: 0px !important; }
}
@media (max-width: 767px) {
  body.has-premium-header { scroll-padding-top: var(--slm-mobile-header-offset-compact) !important; }
  body.has-premium-header main#main-content { padding-top: var(--slm-mobile-header-offset-compact) !important; }
  body.has-premium-header.page-family-home main#main-content, body.has-premium-header.page-family-slots main#main-content, body.has-premium-header.page-family-tools main#main-content, body.has-premium-header.page-family-provider main#main-content { padding-top: 0px !important; }
  body.has-premium-header .ocean-hero-free, body.has-premium-header .slot-hub-hero, body.has-premium-header .high-rtp-hero, body.has-premium-header .new-slots-hero, body.has-premium-header .new-slots-page-section, body.has-premium-header .provider-ocean-hero, body.has-premium-header .layout-page-hero, body.has-premium-header .software-hero { padding-top: calc(var(--slm-mobile-header-offset-compact) + 4px) !important; }
  body.has-premium-header.page-family-slots .ocean-hero-free, body.has-premium-header.page-family-slots .slot-hub-hero, body.has-premium-header.page-family-slots .high-rtp-hero, body.has-premium-header.page-family-slots .new-slots-hero, body.has-premium-header.page-family-slots .new-slots-page-section, body.has-premium-header.page-family-home .hero-ocean, body.has-premium-header.page-family-tools .layout-page-hero, body.has-premium-header.page-family-provider .newHeader, body.has-premium-header.page-family-provider .software-hero { padding-top: calc(var(--slm-mobile-header-offset-compact) + 6px) !important; padding-bottom: 18px !important; }
  body.has-premium-header.page-family-slots .wave-divider, body.has-premium-header.page-family-slots .slot-hub-page .wave-divider, body.has-premium-header.page-family-slots .high-rtp-page .wave-divider { display: none !important; }
  body.has-premium-header.page-family-slots .ocean-content-area, body.has-premium-header.page-family-slots .slot-hub-content, body.has-premium-header.page-family-slots .high-rtp-content, body.has-premium-header.page-family-tools .layout-page-shell { padding-top: 8px !important; margin-top: 0px !important; }
  body.has-premium-header.page-family-home .hero-ocean .wave-divider { display: none !important; }
  body.has-premium-header.page-family-home .site-discovery-hub { padding-top: 10px !important; margin-top: 0px !important; }
  :root { --slm-text-base: 16px; --slm-text-ui: 15px; --slm-text-small: 14px; --slm-leading-base: 1.7; }
  body { font-size: 16px !important; line-height: 1.62 !important; }
  p, li, td, th, label, input, select, textarea, .panel-body, .software-description, .legal-content, .news-detail, .blog-content, #laypage { font-size: 1rem !important; line-height: 1.7 !important; }
}
 .ocean-game-grid, .epic-game-grid, .swg-game-grid, .swg-games-grid { align-items: stretch !important; }
 .epic-game-card, .swg-game-card, .game-content .content { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 100% !important; }
 .epic-game-card, .epic-game-card .game-card-info, .swg-game-card, .swg-game-card .swg-game-card-body, .game-content .content, .game-content .content-details { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0px !important; }
 .epic-game-card .game-card-title, .swg-game-card .swg-game-card-title, .game-content .gameh5Span { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; white-space: normal !important; line-height: 1.32 !important; min-height: 2.64em !important; margin-bottom: 0px !important; }
 .swg-game-card .swg-game-card-play { margin-top: auto !important; }
 .epic-game-card .epic-play-btn, .swg-game-card .swg-game-card-play { min-height: 42px !important; }
@media (max-width: 767px) {
   .epic-game-card .game-card-title, .swg-game-card .swg-game-card-title, .game-content .gameh5Span { min-height: 2.52em !important; }
   .epic-game-card .epic-play-btn, .swg-game-card .swg-game-card-play { min-height: 38px !important; }
}
body.has-premium-header .ocean-game-card, body.has-premium-header .fresh-release-card, body.has-premium-header .game-card, body.has-premium-header .epic-game-card, body.has-premium-header .swg-game-card, body.has-premium-header .game-card-ocean, body.page-family-slots .ocean-game-card, body.page-family-slots .fresh-release-card, body.page-family-home .ocean-game-card, body.page-family-home .fresh-release-card, body.route-frontend-all-games .ocean-game-card, body.route-frontend-layout-page .ocean-game-card, body.route-frontend-index .ocean-game-card, body.route-frontend-index .home-popular-grid .ocean-game-card, body.route-frontend-software-game .ocean-game-card { background: rgb(13, 27, 42) !important; border: 1px solid rgba(100, 180, 255, 0.25) !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 20px, rgba(100, 180, 255, 0.06) 0px 0px 0px 1px !important; }
body.has-premium-header .ocean-game-card:hover, body.has-premium-header .fresh-release-card:hover, body.has-premium-header .game-card:hover, body.page-family-slots .ocean-game-card:hover, body.page-family-home .ocean-game-card:hover, body.route-frontend-index .home-popular-grid .ocean-game-card:hover { transform: translateY(-4px) !important; border-color: rgba(255, 212, 74, 0.35) !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 32px, rgba(255, 212, 74, 0.12) 0px 0px 0px 1px !important; }
body.has-premium-header .ocean-card-media, body.has-premium-header .game-card-image, body.has-premium-header .fresh-release-media { background: rgb(36, 61, 88) !important; overflow: hidden !important; }
body.has-premium-header .ocean-card-media img, body.has-premium-header .game-card-image img, body.has-premium-header .fresh-release-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
body.has-premium-header .game-card-info, body.has-premium-header .ocean-card-body, body.has-premium-header .game-card-body, body.has-premium-header .fresh-release-body { padding: 12px 14px !important; }
body.has-premium-header .ocean-card-name, body.has-premium-header .game-card-title, body.has-premium-header .game-card-title a, body.has-premium-header .fresh-release-name { color: rgb(255, 255, 255) !important; font-weight: 700 !important; text-decoration: none !important; }
body.has-premium-header .ocean-card-provider, body.has-premium-header .game-card-provider, body.has-premium-header .fresh-release-provider { color: rgba(255, 255, 255, 0.65) !important; font-size: 0.78rem !important; }
.newHeader { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.game-iframe-wrapper { min-height: 624px; }
.sw-hero { min-height: 200px; }
@media (max-width: 768px) {
  .game-iframe-wrapper { min-height: 350px; }
  .newHeader { min-height: 160px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.has-premium-header .ocean-hero-free, body.has-premium-header .taxonomy-hero, body.has-premium-header .hero-ocean, body.has-premium-header .software-hero, body.has-premium-header .slot-hub-hero, body.has-premium-header .rtp-hero, body.has-premium-header.page-family-slots .ocean-hero-free, body.has-premium-header.page-family-home .hero-ocean, body.has-premium-header.page-family-provider .software-hero { min-height: auto !important; padding: 16px 0px 10px !important; }
  body.has-premium-header .ocean-hero-title, body.has-premium-header .hero-title-ocean, body.has-premium-header h1.ocean-hero-title, body.has-premium-header.page-family-slots .ocean-hero-title { font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important; line-height: 1.1 !important; margin-bottom: 4px !important; max-width: none !important; }
  body.has-premium-header .ocean-hero-title .highlight { font-size: clamp(1.4rem, 4vw, 1.8rem) !important; margin: 4px 0px !important; }
  body.has-premium-header .ocean-hero-subtitle, body.has-premium-header .hero-subtitle-ocean, body.has-premium-header .software-hero-lead { display: none !important; }
  body.has-premium-header .hero-stats, body.has-premium-header .hero-stats-ocean, body.has-premium-header .hero-stat-grid, body.has-premium-header .hero-badge-ocean { display: none !important; }
  body.has-premium-header .hero-cta-group { margin: 6px 0px !important; gap: 8px !important; }
  body.has-premium-header .hero-cta-group .btn-ocean-primary, body.has-premium-header .hero-cta-group .btn-ocean-secondary { padding: 7px 14px !important; font-size: 0.78rem !important; min-height: 34px !important; }
  body.has-premium-header .ocean-game-grid, body.has-premium-header #oceanGameGrid, body.has-premium-header .epic-game-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 10px !important; }
  body.has-premium-header footer, body.has-premium-header body.has-premium-header body.has-premium-header { padding-top: 46px !important; }
  body.has-premium-header .software-hero-content { padding: 14px !important; }
  body.has-premium-header .provider-stat-card { padding: 8px 10px !important; }
  body.has-premium-header .game-iframe-wrapper { max-height: 80vh !important; }
  body.has-premium-header .game-iframe-container iframe, body.has-premium-header .game-frame { min-height: 280px !important; }
  body.has-premium-header #single-game-section .newHeader { padding: 10px 14px !important; gap: 6px !important; }
  body.has-premium-header #single-game-section .newHeader h1 { font-size: 1.15rem !important; margin: 0px !important; }
  body.has-premium-header .single-slot-hero-kicker { display: none !important; }
  body.has-premium-header .cBreadcrumb { font-size: 11px !important; margin-bottom: 4px !important; }
  body.has-premium-header .single-slot-hero-meta { gap: 6px !important; padding: 6px 0px !important; }
  body.has-premium-header .single-game-content, body.has-premium-header .faq-section, body.has-premium-header .seo-content-box-ocean, body.has-premium-header .faq-container-ocean { padding: 16px !important; }
  body.has-premium-header .provider-context-nav { padding: 8px 12px !important; }
  body.has-premium-header .layout-hero-surface { padding: 14px 16px !important; }
  body.has-premium-header .layout-page-content { padding: 12px !important; }
}
@media (orientation: landscape) and (max-height: 400px) {
  body.has-premium-header .ocean-hero-free, body.has-premium-header .taxonomy-hero, body.has-premium-header .hero-ocean, body.has-premium-header .software-hero, body.has-premium-header.page-family-slots .ocean-hero-free { padding: 8px 0px 6px !important; }
  body.has-premium-header .ocean-hero-title, body.has-premium-header .hero-title-ocean, body.has-premium-header h1.ocean-hero-title { font-size: 1.1rem !important; }
  body.has-premium-header .ocean-hero-title .highlight { font-size: 1.3rem !important; }
  body.has-premium-header { padding-top: 40px !important; }
  body.has-premium-header .game-iframe-container iframe, body.has-premium-header .game-frame { min-height: 240px !important; }
  body.has-premium-header #single-game-section .newHeader h1 { font-size: 1rem !important; }
  body.has-premium-header .ocean-game-grid, body.has-premium-header #oceanGameGrid, body.has-premium-header .epic-game-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; gap: 8px !important; }
  body.has-premium-header .ocean-game-card .game-card-info { padding: 6px 8px !important; }
  body.has-premium-header .ocean-game-card .game-card-title { font-size: 11px !important; }
  body.has-premium-header .ocean-game-card .game-card-stats { display: none !important; }
}
@media (orientation: landscape) and (min-height: 501px) and (max-height: 800px) and (max-width: 1199px) {
  body.has-premium-header .ocean-hero-free, body.has-premium-header .hero-ocean, body.has-premium-header .software-hero { min-height: auto !important; padding: 28px 0px 24px !important; }
  body.has-premium-header .ocean-hero-title, body.has-premium-header .hero-title-ocean { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; }
  body.has-premium-header .ocean-game-grid, body.has-premium-header #oceanGameGrid { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; }
}
@media (max-width: 359px) {
  body.has-premium-header .ocean-game-grid, body.has-premium-header #oceanGameGrid, body.has-premium-header .epic-game-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; }
  body.has-premium-header .ocean-hero-title, body.has-premium-header .hero-title-ocean, body.has-premium-header h1.ocean-hero-title { font-size: 24px !important; word-break: break-word !important; max-width: 100% !important; }
  body.has-premium-header .hero-cta-group { flex-direction: column !important; gap: 8px !important; }
  body.has-premium-header .hero-cta-group .btn-ocean-primary, body.has-premium-header .hero-cta-group .btn-ocean-secondary { width: 100% !important; }
  body.has-premium-header footer a, body.has-premium-header footer li { font-size: 12px !important; }
  body.has-premium-header .container, body.has-premium-header #main-content .container { padding-left: 10px !important; padding-right: 10px !important; }
}
.single-game-content table, #single-game-table, .rtp-table-container { max-width: 100%; overflow-x: auto; }
#main-content img, .single-game-content img, .layout-page-content img { max-width: 100%; height: auto; }
.single-game-content, .layout-page-content, .faq-answer { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 991px) {
}
/* ==== components/slm-base.css ==== */
/* =============================================================================
   SLM Design System -- Base (v1.0)
   Custom Properties + Typography Scale
   Created: 2026-03-28
   RULE: No !important. No modifications to existing files.
   ============================================================================= */

:root {
    /* Colors */
    --slm-color-primary: #a12918;
    --slm-color-primary-hover: #c13424;
    --slm-color-accent: #00d4ff;
    --slm-color-accent-hover: #33dfff;
    --slm-color-bg: #060d17;
    --slm-color-bg-raised: #0a1423;
    --slm-color-card: #0d1b2a;
    --slm-color-card-hover: #122640;
    --slm-color-surface: #0f2035;
    --slm-color-border: rgba(255, 255, 255, 0.08);
    --slm-color-border-hover: rgba(0, 212, 255, 0.3);
    --slm-color-text: #e8edf3;
    --slm-color-heading: #ffffff;
    --slm-color-muted: rgba(255, 255, 255, 0.6);
    --slm-color-success: #22c55e;
    --slm-color-warning: #f59e0b;
    --slm-color-danger: #ef4444;

    /* Shadows */
    --slm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --slm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --slm-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --slm-shadow-glow: 0 0 20px rgba(0, 212, 255, 0.15);

    /* Typography */
    --slm-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --slm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --slm-line-height: 1.7;
    --slm-line-height-tight: 1.3;

    /* Font Sizes -- clamp(min, preferred, max) */
    --slm-text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
    --slm-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
    --slm-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --slm-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
    --slm-text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --slm-text-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
    --slm-text-3xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
    --slm-text-4xl: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem);

    /* Spacing */
    --slm-gap-xs: 4px;
    --slm-gap-sm: 8px;
    --slm-gap-md: 16px;
    --slm-gap-lg: 24px;
    --slm-gap-xl: 40px;
    --slm-gap-2xl: 64px;

    /* Layout */
    --slm-max-width: 1400px;
    --slm-content-width: 900px;
    --slm-radius-sm: 8px;
    --slm-radius: 14px;
    --slm-radius-lg: 20px;
    --slm-radius-full: 9999px;

    /* Breakpoints (reference only) */
    --slm-bp-sm: 480px;
    --slm-bp-md: 768px;
    --slm-bp-lg: 992px;
    --slm-bp-xl: 1200px;

    /* Transitions */
    --slm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --slm-duration: 0.2s;
    --slm-duration-slow: 0.35s;
}

/* --- Heading Classes --- */
.slm-h1, .slm-heading-1 {
    font-size: var(--slm-text-4xl);
    font-weight: 700;
    line-height: var(--slm-line-height-tight);
    color: var(--slm-color-heading);
    font-family: var(--slm-font-family);
    margin: 0 0 var(--slm-gap-md) 0;
}

.slm-h2, .slm-heading-2 {
    font-size: var(--slm-text-3xl);
    font-weight: 700;
    line-height: var(--slm-line-height-tight);
    color: var(--slm-color-heading);
    font-family: var(--slm-font-family);
    margin: 0 0 var(--slm-gap-md) 0;
}

.slm-h3, .slm-heading-3 {
    font-size: var(--slm-text-2xl);
    font-weight: 600;
    line-height: var(--slm-line-height-tight);
    color: var(--slm-color-heading);
    font-family: var(--slm-font-family);
    margin: 0 0 var(--slm-gap-sm) 0;
}

.slm-h4, .slm-heading-4 {
    font-size: var(--slm-text-xl);
    font-weight: 600;
    line-height: var(--slm-line-height-tight);
    color: var(--slm-color-heading);
    font-family: var(--slm-font-family);
    margin: 0 0 var(--slm-gap-sm) 0;
}

.slm-h5, .slm-heading-5 {
    font-size: var(--slm-text-lg);
    font-weight: 600;
    line-height: var(--slm-line-height-tight);
    color: var(--slm-color-heading);
    font-family: var(--slm-font-family);
    margin: 0 0 var(--slm-gap-sm) 0;
}

.slm-h6, .slm-heading-6 {
    font-size: var(--slm-text-base);
    font-weight: 600;
    line-height: var(--slm-line-height-tight);
    color: var(--slm-color-heading);
    font-family: var(--slm-font-family);
    margin: 0 0 var(--slm-gap-xs) 0;
}
/* ==== components/slm-layout.css ==== */
/* =============================================================================
   SLM Design System -- Layout (v1.0)
   Page structure, grids, spacing utilities
   ============================================================================= */

.slm-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.slm-section {
    width: 100%;
    padding: var(--slm-gap-xl) var(--slm-gap-md);
}

.slm-section--flush { padding-left: 0; padding-right: 0; }
.slm-section--compact { padding-top: var(--slm-gap-lg); padding-bottom: var(--slm-gap-lg); }

.slm-container {
    width: 100%;
    max-width: var(--slm-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--slm-gap-md);
    padding-right: var(--slm-gap-md);
}

.slm-container--narrow { max-width: var(--slm-content-width); }

/* --- Grid System --- */
.slm-grid-2, .slm-grid-3, .slm-grid-4, .slm-grid-5 {
    display: grid;
    gap: var(--slm-gap-md);
}

.slm-grid-2 { grid-template-columns: repeat(2, 1fr); }
.slm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.slm-grid-4 { grid-template-columns: repeat(4, 1fr); }
.slm-grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1200px) {
    .slm-grid-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
    .slm-grid-5 { grid-template-columns: repeat(3, 1fr); }
    .slm-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .slm-grid-5,
    .slm-grid-4,
    .slm-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .slm-grid-5, .slm-grid-4, .slm-grid-3, .slm-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .slm-grid-2--stack { grid-template-columns: 1fr; }
}

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

/* --- Spacing --- */
.slm-mt-sm { margin-top: var(--slm-gap-sm); }
.slm-mt-md { margin-top: var(--slm-gap-md); }
.slm-mt-lg { margin-top: var(--slm-gap-lg); }
.slm-mt-xl { margin-top: var(--slm-gap-xl); }
.slm-mb-sm { margin-bottom: var(--slm-gap-sm); }
.slm-mb-md { margin-bottom: var(--slm-gap-md); }
.slm-mb-lg { margin-bottom: var(--slm-gap-lg); }
.slm-mb-xl { margin-bottom: var(--slm-gap-xl); }
.slm-py-sm { padding-top: var(--slm-gap-sm); padding-bottom: var(--slm-gap-sm); }
.slm-py-md { padding-top: var(--slm-gap-md); padding-bottom: var(--slm-gap-md); }
.slm-py-lg { padding-top: var(--slm-gap-lg); padding-bottom: var(--slm-gap-lg); }
.slm-py-xl { padding-top: var(--slm-gap-xl); padding-bottom: var(--slm-gap-xl); }
.slm-px-sm { padding-left: var(--slm-gap-sm); padding-right: var(--slm-gap-sm); }
.slm-px-md { padding-left: var(--slm-gap-md); padding-right: var(--slm-gap-md); }
.slm-px-lg { padding-left: var(--slm-gap-lg); padding-right: var(--slm-gap-lg); }
.slm-p-md { padding: var(--slm-gap-md); }
.slm-p-lg { padding: var(--slm-gap-lg); }
.slm-w-full { width: 100%; }
.slm-max-w { max-width: var(--slm-max-width); }
/* ==== components/slm-typography.css ==== */
/* =============================================================================
   SLM Design System -- Typography (v1.0)
   Text styles, links, prose formatting
   ============================================================================= */

.slm-text {
    font-size: var(--slm-text-base);
    line-height: var(--slm-line-height);
    color: var(--slm-color-text);
    font-family: var(--slm-font-family);
}

.slm-text-sm { font-size: var(--slm-text-sm); line-height: var(--slm-line-height); color: var(--slm-color-text); }
.slm-text-lg { font-size: var(--slm-text-lg); line-height: var(--slm-line-height); color: var(--slm-color-text); }
.slm-text-xs { font-size: var(--slm-text-xs); line-height: 1.5; color: var(--slm-color-muted); }

.slm-text-muted { color: var(--slm-color-muted); }
.slm-text-accent { color: var(--slm-color-accent); }
.slm-text-white { color: #fff; }
.slm-text-success { color: var(--slm-color-success); }
.slm-text-warning { color: var(--slm-color-warning); }
.slm-text-danger { color: var(--slm-color-danger); }

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

.slm-font-normal { font-weight: 400; }
.slm-font-medium { font-weight: 500; }
.slm-font-semibold { font-weight: 600; }
.slm-font-bold { font-weight: 700; }

.slm-link {
    color: var(--slm-color-accent);
    text-decoration: none;
    transition: color var(--slm-duration) var(--slm-ease);
}
.slm-link:hover {
    color: var(--slm-color-accent-hover);
    text-decoration: underline;
}
.slm-link--subtle { color: var(--slm-color-muted); }
.slm-link--subtle:hover { color: var(--slm-color-text); }

/* --- Prose (CMS/rich content blocks) --- */
.slm-prose {
    font-size: var(--slm-text-base);
    line-height: var(--slm-line-height);
    color: var(--slm-color-text);
}
.slm-prose h2 { font-size: var(--slm-text-2xl); font-weight: 700; color: var(--slm-color-heading); margin: var(--slm-gap-xl) 0 var(--slm-gap-md); }
.slm-prose h3 { font-size: var(--slm-text-xl); font-weight: 600; color: var(--slm-color-heading); margin: var(--slm-gap-lg) 0 var(--slm-gap-sm); }
.slm-prose h4 { font-size: var(--slm-text-lg); font-weight: 600; color: var(--slm-color-heading); margin: var(--slm-gap-md) 0 var(--slm-gap-sm); }
.slm-prose p { margin: 0 0 var(--slm-gap-md); }
.slm-prose a { color: var(--slm-color-accent); text-decoration: none; }
.slm-prose a:hover { text-decoration: underline; }
.slm-prose ul, .slm-prose ol { margin: 0 0 var(--slm-gap-md); padding-left: var(--slm-gap-lg); }
.slm-prose li { margin-bottom: var(--slm-gap-xs); }
.slm-prose strong { color: var(--slm-color-heading); font-weight: 600; }
.slm-prose blockquote {
    border-left: 3px solid var(--slm-color-accent);
    padding: var(--slm-gap-sm) var(--slm-gap-md);
    margin: var(--slm-gap-md) 0;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 0 var(--slm-radius-sm) var(--slm-radius-sm) 0;
    color: var(--slm-color-muted);
}

.slm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slm-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slm-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ==== components/slm-card.css ==== */
/* =============================================================================
   SLM Design System -- Card (v1.0)
   Game card component
   ============================================================================= */

.slm-card {
    position: relative;
    background: var(--slm-color-card);
    border-radius: var(--slm-radius);
    border: 1px solid var(--slm-color-border);
    overflow: hidden;
    transition: transform var(--slm-duration) var(--slm-ease),
                box-shadow var(--slm-duration-slow) var(--slm-ease),
                border-color var(--slm-duration) var(--slm-ease);
    display: flex;
    flex-direction: column;
}

.slm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--slm-shadow-lg), var(--slm-shadow-glow);
    border-color: var(--slm-color-border-hover);
}

/* --- Image --- */
.slm-card__image-wrap {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--slm-color-bg);
}

.slm-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--slm-duration-slow) var(--slm-ease);
}

.slm-card:hover .slm-card__image {
    transform: scale(1.05);
}

/* --- Body --- */
.slm-card__body {
    padding: var(--slm-gap-sm) var(--slm-gap-md) var(--slm-gap-md);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--slm-gap-xs);
}

/* --- Title --- */
.slm-card__title {
    font-size: var(--slm-text-sm);
    font-weight: 600;
    color: var(--slm-color-heading);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* --- Provider --- */
.slm-card__provider {
    font-size: var(--slm-text-xs);
    color: var(--slm-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Stats (RTP, Volatility, Max Win) --- */
.slm-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--slm-gap-xs);
    margin-top: auto;
}

.slm-card__stat {
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: var(--slm-radius-full);
    background: rgba(255, 255, 255, 0.06);
    color: var(--slm-color-muted);
    white-space: nowrap;
    line-height: 1.6;
}

.slm-card__stat--accent {
    background: rgba(0, 212, 255, 0.1);
    color: var(--slm-color-accent);
}

/* --- CTA Overlay --- */
.slm-card__cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 13, 23, 0.7);
    opacity: 0;
    transition: opacity var(--slm-duration) var(--slm-ease);
}

.slm-card:hover .slm-card__cta {
    opacity: 1;
}

.slm-card__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--slm-gap-sm);
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--slm-color-accent), #0891b2);
    color: #fff;
    font-size: var(--slm-text-sm);
    font-weight: 600;
    border-radius: var(--slm-radius-full);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--slm-duration) var(--slm-ease);
}

.slm-card__cta-btn:hover {
    transform: scale(1.05);
}

/* --- Badge --- */
.slm-card__badge {
    position: absolute;
    top: var(--slm-gap-sm);
    left: var(--slm-gap-sm);
    padding: 3px 10px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--slm-radius-sm);
    z-index: 2;
}

.slm-card__badge--new {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.slm-card__badge--hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.slm-card__badge--rtp {
    background: linear-gradient(135deg, var(--slm-color-accent), #0891b2);
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .slm-card__body { padding: var(--slm-gap-sm); }
    .slm-card__stats { gap: 3px; }
    .slm-card__stat { font-size: 0.625rem; padding: 1px 6px; }
}
/* ==== components/slm-hero.css ==== */
/* =============================================================================
   SLM Design System -- Hero (v1.0)
   Hero sections for various page types
   ============================================================================= */

.slm-hero {
    position: relative;
    width: 100%;
    padding: var(--slm-gap-2xl) var(--slm-gap-md) var(--slm-gap-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Gradient overlay */
.slm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 13, 23, 0.3) 0%,
        rgba(6, 13, 23, 0.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.slm-hero > * { position: relative; z-index: 2; }

.slm-hero__title {
    font-size: var(--slm-text-4xl);
    font-weight: 700;
    color: var(--slm-color-heading);
    line-height: var(--slm-line-height-tight);
    margin: 0 0 var(--slm-gap-md);
    max-width: 800px;
}

.slm-hero__subtitle {
    font-size: var(--slm-text-lg);
    color: var(--slm-color-muted);
    line-height: var(--slm-line-height);
    max-width: 600px;
    margin: 0 0 var(--slm-gap-lg);
}

.slm-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--slm-gap-sm);
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--slm-color-accent), #0891b2);
    color: #fff;
    font-size: var(--slm-text-base);
    font-weight: 600;
    border-radius: var(--slm-radius-full);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--slm-duration) var(--slm-ease),
                box-shadow var(--slm-duration) var(--slm-ease);
}

.slm-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.3);
}

/* Stats row */
.slm-hero__stats {
    display: flex;
    gap: var(--slm-gap-lg);
    margin-top: var(--slm-gap-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.slm-hero__stat {
    text-align: center;
}

.slm-hero__stat-value {
    display: block;
    font-size: var(--slm-text-2xl);
    font-weight: 700;
    color: var(--slm-color-accent);
    line-height: 1.2;
}

.slm-hero__stat-label {
    display: block;
    font-size: var(--slm-text-xs);
    color: var(--slm-color-muted);
    margin-top: 2px;
}

/* --- Variants --- */
.slm-hero--home {
    min-height: 420px;
    padding-top: var(--slm-gap-2xl);
}

.slm-hero--listing {
    padding: var(--slm-gap-xl) var(--slm-gap-md) var(--slm-gap-lg);
}

.slm-hero--game {
    padding: var(--slm-gap-lg) var(--slm-gap-md);
    text-align: left;
    align-items: flex-start;
}

.slm-hero--software {
    padding: var(--slm-gap-xl) var(--slm-gap-md) var(--slm-gap-lg);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .slm-hero { padding: var(--slm-gap-xl) var(--slm-gap-md) var(--slm-gap-lg); }
    .slm-hero--home { min-height: auto; padding-top: var(--slm-gap-xl); }
    .slm-hero__title { font-size: var(--slm-text-3xl); }
    .slm-hero__stats { gap: var(--slm-gap-md); }
}

@media (max-width: 480px) {
    .slm-hero__title { font-size: var(--slm-text-2xl); }
    .slm-hero__subtitle { font-size: var(--slm-text-base); }
    .slm-hero__stats { flex-direction: column; gap: var(--slm-gap-sm); }
}

/* Landscape compact */
@media (orientation: landscape) and (max-height: 500px) {
    .slm-hero { min-height: auto; padding: var(--slm-gap-md) var(--slm-gap-md); }
    .slm-hero__title { font-size: var(--slm-text-xl); margin-bottom: var(--slm-gap-sm); }
    .slm-hero__subtitle { display: none; }
}
/* ==== components/slm-filter.css ==== */
/* =============================================================================
   SLM Design System -- Filter (v1.0)
   Filter bar, chips, search input
   ============================================================================= */

.slm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: var(--slm-gap-sm) 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: var(--slm-max-width);
    margin: 0 auto var(--slm-gap-md);
}
.slm-filter-bar--wrap {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center;
}

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

.slm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: var(--slm-radius-full);
    font-size: var(--slm-text-sm);
    font-weight: 500;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--slm-color-border);
    color: var(--slm-color-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--slm-duration) var(--slm-ease);
}

.slm-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--slm-color-border-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}


.slm-filter-chip--active {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #0891b2 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3), 0 4px 16px rgba(6, 182, 212, 0.2);
    transform: translateY(-1px);
}

.slm-filter-chip--active:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0891b2 50%, #0e7490 100%);
    box-shadow: 0 0 24px rgba(14, 165, 233, 0.5), 0 6px 20px rgba(6, 182, 212, 0.35);
    transform: translateY(-2px);
}

/* Bar variant: positioned (for z-index stacking over adjacent content) */
.slm-filter-bar--positioned {
    position: relative;
    z-index: 10;
    padding: 14px 24px;
}

/* Bar variant: centered wrap on wide screens */
@media (min-width: 1200px) {
    .slm-filter-bar--centered {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px 0;
    }
}

/* Loading state utility */
.slm-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}


.slm-filter-chip__icon {
    font-size: 1em;
    opacity: 0.8;
}

.slm-filter-chip__count {
    font-size: 0.75em;
    opacity: 0.7;
    font-weight: 400;
}

/* --- Search Input --- */
.slm-search {
    position: relative;
    max-width: 400px;
    width: 100%;
}

.slm-search__input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--slm-color-border);
    border-radius: var(--slm-radius);
    color: var(--slm-color-text);
    font-size: var(--slm-text-sm);
    font-family: var(--slm-font-family);
    outline: none;
    transition: border-color var(--slm-duration) var(--slm-ease),
                background var(--slm-duration) var(--slm-ease);
}

.slm-search__input::placeholder { color: var(--slm-color-muted); }

.slm-search__input:focus {
    border-color: var(--slm-color-accent);
    background: rgba(255, 255, 255, 0.08);
}

.slm-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slm-color-muted);
    font-size: 14px;
    pointer-events: none;
}


/* Bar variant: sticky with backdrop blur */
.slm-filter-bar--sticky {
    position: sticky;
    top: 70px;
    z-index: 100;
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 0;
    padding: 14px 24px;
    transition: box-shadow 0.3s ease;
}

.slm-filter-bar--sticky.is-stuck {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Active chip: bottom indicator line */
.slm-filter-chip--active-indicator::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: #0ea5e9;
    border-radius: 2px;
}

/* Chip count badge */
.slm-filter-chip__count--badge {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.slm-filter-chip--active .slm-filter-chip__count--badge {
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
}

/* Active filter tags (removable chips) */
.slm-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 4px;
}

.slm-active-filters:empty {
    display: none;
}

.slm-active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: var(--slm-radius-full);
    color: var(--slm-color-accent);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--slm-duration) var(--slm-ease);
}

.slm-active-filter-tag:hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.slm-active-filter-tag__remove {
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .slm-filter-bar {
        padding: 14px 14px 18px;
        gap: 10px;
        row-gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .slm-filter-chip {
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 500;
        min-height: 40px;
        gap: 7px;
        line-height: 1.1;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(0, 212, 255, 0.18);
        color: rgba(255, 255, 255, 0.92);
    }
    .slm-filter-chip:hover { transform: none; }
    .slm-filter-bar--sticky {
        position: static;
        padding: 14px 14px 18px;
        background: transparent;
        backdrop-filter: none;
        border-bottom: none;
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
        gap: 10px;
        row-gap: 10px;
    }
    .slm-filter-chip--active-indicator::after { display: none; }
    .slm-filter-chip__icon { font-size: 15px; opacity: 1; }
    .slm-filter-chip__count--badge {
        font-size: 11px;
        font-weight: 600;
        padding: 2px 7px;
        min-width: 0;
        border-radius: 10px;
        background: rgba(0, 212, 255, 0.14);
        color: rgba(0, 212, 255, 0.95);
        margin-left: 2px;
    }
    .slm-filter-chip--active .slm-filter-chip__count--badge {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
}
@media (max-width: 400px) {
    .slm-filter-bar, .slm-filter-bar--sticky { gap: 8px; row-gap: 8px; padding: 12px 10px 16px; }
    .slm-filter-chip { padding: 9px 12px; font-size: 12px; min-height: 38px; }
    .slm-filter-chip__icon { font-size: 14px; }
}
/* ==== components/slm-faq.css ==== */
/* =============================================================================
   SLM Design System -- FAQ (v1.0)
   Accordion FAQ component
   ============================================================================= */

.slm-faq {
    max-width: var(--slm-content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--slm-gap-sm);
}

.slm-faq__item {
    background: var(--slm-color-card);
    border: 1px solid var(--slm-color-border);
    border-radius: var(--slm-radius);
    overflow: hidden;
    transition: border-color var(--slm-duration) var(--slm-ease);
}

.slm-faq__item:hover {
    border-color: var(--slm-color-border-hover);
}

.slm-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--slm-gap-md) var(--slm-gap-lg);
    background: none;
    border: none;
    color: var(--slm-color-heading);
    font-size: var(--slm-text-base);
    font-weight: 600;
    font-family: var(--slm-font-family);
    text-align: left;
    cursor: pointer;
    transition: color var(--slm-duration) var(--slm-ease);
    line-height: 1.4;
}

.slm-faq__question:hover { color: var(--slm-color-accent); }

.slm-faq__question::after {
    content: '+';
    font-size: 1.25em;
    font-weight: 300;
    color: var(--slm-color-muted);
    transition: transform var(--slm-duration) var(--slm-ease);
    flex-shrink: 0;
    margin-left: var(--slm-gap-md);
}

.slm-faq__item--open .slm-faq__question::after {
    content: '\2212';
    color: var(--slm-color-accent);
}

.slm-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--slm-duration-slow) var(--slm-ease),
                padding var(--slm-duration-slow) var(--slm-ease);
    padding: 0 var(--slm-gap-lg);
}

.slm-faq__item--open .slm-faq__answer {
    max-height: 600px;
    padding: 0 var(--slm-gap-lg) var(--slm-gap-md);
}

.slm-faq__answer p {
    font-size: var(--slm-text-sm);
    color: var(--slm-color-text);
    line-height: var(--slm-line-height);
    margin: 0;
}

.slm-faq__answer a { color: var(--slm-color-accent); }
.slm-faq__answer a:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .slm-faq__question { padding: var(--slm-gap-sm) var(--slm-gap-md); font-size: var(--slm-text-sm); }
    .slm-faq__answer { padding-left: var(--slm-gap-md); padding-right: var(--slm-gap-md); }
    .slm-faq__item--open .slm-faq__answer { padding: 0 var(--slm-gap-md) var(--slm-gap-sm); }
}
/* ==== components/slm-button.css ==== */
/* =============================================================================
   SLM Design System -- Button (v1.0)
   Button variants
   ============================================================================= */

.slm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slm-gap-sm);
    padding: 10px 24px;
    font-size: var(--slm-text-sm);
    font-weight: 600;
    font-family: var(--slm-font-family);
    border-radius: var(--slm-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--slm-duration) var(--slm-ease);
    line-height: 1.4;
}

.slm-btn--primary {
    background: linear-gradient(135deg, var(--slm-color-accent), #0891b2);
    color: #fff;
}

.slm-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.25);
}

.slm-btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--slm-color-border);
    color: var(--slm-color-text);
}

.slm-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--slm-color-border-hover);
    color: #fff;
}

.slm-btn--danger {
    background: linear-gradient(135deg, var(--slm-color-primary), #c13424);
    color: #fff;
}

.slm-btn--danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(161, 41, 24, 0.3);
}

.slm-btn--ghost {
    background: transparent;
    color: var(--slm-color-accent);
}

.slm-btn--ghost:hover { background: rgba(0, 212, 255, 0.08); }

.slm-btn--pill { border-radius: var(--slm-radius-full); }
.slm-btn--sm { padding: 6px 16px; font-size: var(--slm-text-xs); }
.slm-btn--lg { padding: 14px 36px; font-size: var(--slm-text-base); }
.slm-btn--block { width: 100%; }
/* ==== components/slm-surface.css ==== */
/* =============================================================================
   SLM Design System -- Surface (v1.0)
   Content panels, cards without hover, info boxes
   ============================================================================= */

.slm-surface {
    background: var(--slm-color-card);
    border: 1px solid var(--slm-color-border);
    border-radius: var(--slm-radius);
    padding: var(--slm-gap-lg);
}

.slm-surface--raised {
    background: var(--slm-color-bg-raised);
    box-shadow: var(--slm-shadow-md);
}

.slm-surface--glow {
    box-shadow: var(--slm-shadow-glow);
    border-color: var(--slm-color-border-hover);
}

.slm-surface--flush { padding: 0; }

/* Divider */
.slm-divider {
    border: none;
    border-top: 1px solid var(--slm-color-border);
    margin: var(--slm-gap-lg) 0;
}

/* Info callout */
.slm-callout {
    padding: var(--slm-gap-md) var(--slm-gap-lg);
    border-left: 3px solid var(--slm-color-accent);
    background: rgba(0, 212, 255, 0.04);
    border-radius: 0 var(--slm-radius-sm) var(--slm-radius-sm) 0;
}

.slm-callout--warning {
    border-left-color: var(--slm-color-warning);
    background: rgba(245, 158, 11, 0.04);
}

.slm-callout--success {
    border-left-color: var(--slm-color-success);
    background: rgba(34, 197, 94, 0.04);
}
/* ==== css-normalizer.css ==== */
/* ==========================================================================
   CSS CONFLICT NORMALIZER - Slottomat
   Created: 2026-03-28 | Updated: 2026-03-28
   Purpose: Resolve conflicting/duplicate CSS rules across multiple files.
   Load order: LAST (after all other CSS files)

   Overrides conflicts in:
     - core.min.css (Bootstrap + custom base)
     - site-experience-system.css (ocean theme, page families)
     - free-slots-performance.css (red theme, filters, cards)
     - single-game-premium.css (game page)
     - page-home.min.css / page-software.min.css / page-game.min.css
   ========================================================================== */

/* --------------------------------------------------
   1. TYPOGRAPHY NORMALIZATION
   Single source of truth for heading sizes.
   Uses clamp() for fluid responsive sizing.
   -------------------------------------------------- */

/* Base heading scale (site-wide defaults) */
h1 { font-size: clamp(24px, 3vw, 36px) !important; }
h2 { font-size: clamp(20px, 2.5vw, 28px) !important; }
h3 { font-size: clamp(18px, 2vw, 24px) !important; }
h4 { font-size: clamp(16px, 1.5vw, 20px) !important; }
p, .dynamic-content-section, .software-description p,
.play-game-content p, .game-detail-content p, #laypage p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}
small, .small, .casino-banner-legal { font-size: 14px !important; }

/* Page-family-specific heading overrides */
.page-family-home h1, body.route-frontend-index h1 {
    font-size: clamp(28px, 5vw, 48px) !important;
}
.page-family-home h2, body.route-frontend-index h2 {
    font-size: clamp(22px, 3vw, 32px) !important;
}
.page-family-slot-single h1,
body.route-frontend-game h1,
#single-game-section .newHeader h1,
.newHeader h1 {
    font-size: clamp(20px, 3vw, 30px) !important;
}
.page-family-slot-single h2,
body.route-frontend-game h2 {
    font-size: clamp(18px, 2.5vw, 26px) !important;
}
.page-family-provider h1,
body.route-frontend-software-game h1, .sw-hero h1, .swg-hero h1 {
    font-size: clamp(24px, 3.5vw, 40px) !important;
}
.page-family-provider h2, .software-description h2, .swg-description-block h2 {
    font-size: clamp(20px, 2.5vw, 28px) !important;
}
.page-family-slots h1, .page-family-guides h1,
.hero-title-ocean, .layout-page-title {
    font-size: clamp(24px, 4vw, 40px) !important;
}
.page-family-tools h1, .rtp-hero h1, .jackpot-hero h1 {
    font-size: clamp(26px, 4vw, 44px) !important;
}

/* SEO content sections - consistent across all pages */
 .game-detail-content h2,
.play-game-content h2, #laypage h2,
.route-frontend-layout-page #laypage h2 {
    font-size: clamp(20px, 2.5vw, 28px) !important;
}
 .game-detail-content h3,
.play-game-content h3, #laypage h3,
.route-frontend-layout-page #laypage h3 {
    font-size: clamp(18px, 2vw, 24px) !important;
}
 .game-detail-content h4,
.play-game-content h4, #laypage h4 {
    font-size: clamp(16px, 1.5vw, 20px) !important;
}

/* Override free-slots-performance.css static heading sizes */
.software-description h1,
.play-game-content h1 {
    font-size: clamp(24px, 3vw, 36px) !important;
}
.software-description h2,
.play-game-content h2 {
    font-size: clamp(20px, 2.5vw, 28px) !important;
}
.software-description h3,
.play-game-content h3 {
    font-size: clamp(18px, 2vw, 24px) !important;
}
.software-description h4,
.play-game-content h4 {
    font-size: clamp(16px, 1.5vw, 20px) !important;
}

/* Provider content consistency */

/* Dynamic content (CMS/WYSIWYG) - prevent inline style overrides */
.dynamic-content-section h2,
.dynamic-content-section h2[style*="font-size"] {
    font-size: clamp(20px, 2.5vw, 28px) !important;
}
.dynamic-content-section h3,
.dynamic-content-section h3[style*="font-size"] {
    font-size: clamp(18px, 2vw, 24px) !important;
}
.dynamic-content-section h1[style*="font-size"] {
    font-size: clamp(24px, 3vw, 36px) !important;
}
.dynamic-content-section {
    font-size: 16px !important;
}

/* Game cards - consistent title sizes */

h3.game-card-title, .epic-game-card h3 {
    font-size: 14px !important;
}

/* Free slots intro lead text */

/* --------------------------------------------------
   2. BODY PADDING (header offset) NORMALIZATION
   -------------------------------------------------- */
body.has-premium-header {
    padding-top: 70px !important;
}

/* --------------------------------------------------
   3. CONTAINER/MAX-WIDTH NORMALIZATION
   -------------------------------------------------- */
:root {
    --slm-desktop-shell-max: 1400px;
    --slm-desktop-copy-max: 900px;
}

/* Main content containers */
main#main-content .container,
main#main-content .container-fluid {
    max-width: var(--slm-desktop-shell-max) !important;
}

/* Game page uses wider container */
body.page-family-slot-single .container,
body.route-frontend-game .container {
    max-width: 1560px !important;
}

/* Software/provider pages */
body.route-frontend-software-game .software-content > .container {
    max-width: 1480px !important;
}
body.route-frontend-software-game .software-hero-content {
    max-width: 1480px !important;
}

/* SEO content max-width for readability */
 .game-detail-content,
.play-game-content,
.dynamic-content-section, .legal-content {
    max-width: var(--slm-desktop-copy-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --------------------------------------------------
   4. CASINO CARD NORMALIZATION
   Resolve 4-file conflict on .casino-card
   -------------------------------------------------- */
.casino-card {
    background: rgba(13, 27, 42, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.casino-card:hover {
    border-color: rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Casino banner strip */
.casino-banner-strip {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 12px 0 !important;
}
.casino-banner-item {
    background: rgba(13, 27, 42, 0.95) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    flex: 0 0 240px !important;
}
.casino-banner-name {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
.casino-banner-bonus {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
}
.casino-banner-cta {
    background: linear-gradient(135deg, #00d4ff, #0099cc) !important;
    color: #0a0e27 !important;
    font-size: 13px !important;
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}
.casino-banner-logo {
    height: 32px !important;
}

/* Casino card detail text - MAJOR conflict (10+ rules) */
.casino-card-detail {
    font-size: 16px !important;
}
.casino-card-detail span {
    font-size: 12px !important;
}

/* --------------------------------------------------
   5. GRID GAP NORMALIZATION
   -------------------------------------------------- */
 .epic-game-grid {
    gap: 16px !important;
}

/* Similar games grid */
#similar-games .ocean-game-grid,
.similar-games .ocean-game-grid,
body.page-family-slot-single .ocean-game-grid {
    gap: 14px !important;
}

/* --------------------------------------------------
   6. BREADCRUMB NORMALIZATION
   -------------------------------------------------- */
.cBreadcrumb, .slot-hub-breadcrumb {
    font-size: 13px !important;
    margin-bottom: 8px !important;
}
.cBreadcrumb a, .slot-hub-breadcrumb a {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --------------------------------------------------
   7. TEXT ALIGNMENT NORMALIZATION
   Hero/banner sections: center. Content sections: left.
   Resolves 45+ text-align conflicts across files.
   -------------------------------------------------- */

/* Heroes and banners are always centered */
.hero-ocean,
.hero-content-ocean, .rtp-hero, .jackpot-hero, .sw-hero, .swg-hero,
.hero-title-ocean, .hero-subtitle-ocean,
.casino-banner-strip {
    text-align: center !important;
}

/* Content sections are always left-aligned for readability */
 .game-detail-content,
.play-game-content,
.dynamic-content-section, .legal-content,
#laypage,
.software-description,
.swg-description-block, .single-game-content,
.play-game-content p,
.game-detail-content p, #laypage p,
.software-description p {
    text-align: left !important;
}

/* FAQ sections - questions left, answers left */
.faq-section, .faq-item, .faq-question, .faq-answer,
.accordion-body {
    text-align: left !important;
}

/* Game info table stays left */
 .rtp-table-container,
#single-game-table, #single-game-table td,
#single-game-table th {
    text-align: left !important;
}

/* --------------------------------------------------
   8. HEADER CONSISTENCY
   Prevent rogue gradients / backgrounds on header.
   Header should always be the same dark translucent bar.
   -------------------------------------------------- */

/* Unified header background - no per-page gradients */
/* HFL */

/* Prevent page-specific header gradient overrides */
.page-family-slots 




.ocean-game-card .game-card-image,
.epic-game-card .game-card-image {
    aspect-ratio: 1 / 0.85 !important;
    overflow: hidden !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Card info padding consistency */

.epic-game-card .game-card-info {
    padding: 8px 10px !important;
}

/* Card title consistency */
.game-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Card provider subtitle */

/* Card border-radius consistency */
 .epic-game-card {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* --------------------------------------------------
  10. FILTER BAR Z-INDEX & CLICKABILITY
   Fix filter sections getting stuck behind other elements
   or becoming unclickable.
   -------------------------------------------------- */

/* Filter wrapper needs to be above content but below header */

.filter-section,
.slot-context-nav {
    position: relative !important;
    z-index: 10 !important;
}

/* Filter toggle button must be clickable */

.filter-section-header,
.context-chip {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 11 !important;
}

/* Filter panel when open needs to overlay content */

/* Search bar clickability */
.search-bar,
.search-bar input {
    position: relative !important;
    z-index: 10 !important;
}

/* Context chip row scrolling */
.context-chip-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}
.context-chip-row::-webkit-scrollbar {
    display: none !important;
}

/* --------------------------------------------------
  11. ANIMATION NORMALIZATION
   Resolve bubble animation conflict
   -------------------------------------------------- */
.bubble {
    animation: float-up 10s ease-in infinite !important;
    opacity: 0 !important;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(0,212,255,.08)) !important;
    pointer-events: none !important;
}

@keyframes float-up {
    0% { transform: translateY(100vh) scale(0.3); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.1; }
    100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

/* --------------------------------------------------
  12. FOOTER CONSISTENCY
   -------------------------------------------------- */
/* HFL */

/* --------------------------------------------------
  13. TABLE RESPONSIVE
   -------------------------------------------------- */
.single-game-content table, #single-game-table, .rtp-table-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
}

/* --------------------------------------------------
  14. IMAGE SAFETY
   -------------------------------------------------- */
#main-content img, .single-game-content img,
.layout-page-content img, .game-detail-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------
  15. MOBILE RESPONSIVE NORMALIZATION
   Standardize breakpoints: 480, 768, 992, 1200
   -------------------------------------------------- */

/* Cookie consent - desktop 13px, mobile 11px */
.cookie-consent-message { font-size: 13px !important; }
.cookie-btn { font-size: 13px !important; }
@media (max-width: 768px) {
  .cookie-consent-bar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
  .cookie-consent-message { font-size: 11px !important; }
  .cookie-btn { font-size: 12px !important; min-height: 38px !important; padding: 8px 16px !important; }
  .cookie-consent-buttons { justify-content: center !important; gap: 8px !important; }
}

/* Age gate */
#popUp18plus h2 { font-size: 22px !important; }

/* Context chips/nav */
.context-chip { font-size: 13px !important; }
.context-nav-label { font-size: 13px !important; }

/* ---- 1200px: Laptop ---- */
@media (max-width: 1199px) {
    body.has-premium-header {
        padding-top: 60px !important;
    }
    /* Cards 4-col max on laptop */
     .epic-game-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ---- 992px: Tablet landscape ---- */
@media (max-width: 991px) {
    /* SEO content full width on tablets */
     .game-detail-content,
    .play-game-content,
    .dynamic-content-section {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Cards 3-col on tablet */
     .epic-game-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Hero text smaller on tablet */
    .page-family-home h1, body.route-frontend-index h1 {
        font-size: clamp(24px, 4vw, 36px) !important;
    }
    /* Casino banner scroll on tablet */
    .casino-banner-strip {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ---- 768px: Tablet portrait / large phone ---- */
@media (max-width: 767px) {
     .game-detail-content, .play-game-content, .dynamic-content-section {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .container { max-width: 100% !important; }

    /* Cards 2-col on phone */
     .epic-game-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Similar games 2-col */
    #similar-games .ocean-game-grid,
    .similar-games .ocean-game-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Card images taller on mobile for tap target */
    
    .epic-game-card .game-card-image {
        aspect-ratio: 1 / 0.9 !important;
    }

    /* Hero sections compact on mobile */
    .hero-ocean {
        padding: 30px 16px !important;
    }
    .hero-stats, .hero-stats-ocean {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Filter panel full width */

    /* Casino banner items smaller */
    .casino-banner-item {
        flex: 0 0 200px !important;
        padding: 10px 12px !important;
    }
}

/* ---- 480px: Small phone ---- */
@media (max-width: 480px) {
     .epic-game-grid {
        gap: 8px !important;
    }

    /* Card titles even smaller on tiny screens */
    .game-card-title {
        font-size: 12px !important;
    }

    /* Content padding tight */
     .game-detail-content, .play-game-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Casino banner items minimum */
    .casino-banner-item {
        flex: 0 0 180px !important;
    }

    /* Hero even more compact */
    .page-family-home h1, body.route-frontend-index h1 {
        font-size: clamp(22px, 5vw, 30px) !important;
    }
}


/* --------------------------------------------------
  15. FILTER PANEL Z-INDEX FIX
   -------------------------------------------------- */
/* Mobile filter panel must sit above the fixed header (z-index: 2147483002) */
#lobbyFilterPanel.lobby-filter-panel.mobile-open {
    z-index: 2147483010 !important;
}
/* Desktop filter panel needs proper stacking */
.lobby-filter-panel.active {
    z-index: 100 !important;
    position: relative !important;
}

/* ==========================================================================
   END CSS NORMALIZER
   ========================================================================== */

/* === HEADER FIX: Force consistent across ALL pages === */
/* HFL */
/* HFL */



/* ==========================================================================
   MOBILE AUDIT FIXES - 2026-03-28
   Fixes found during comprehensive 375px mobile audit
   ========================================================================== */

/* --------------------------------------------------
   FIX 1: Game card title headings (H2/H3) too small on mobile
   H2 in .game-card-info was 13px, H3 in grid was 14.72px
   -------------------------------------------------- */
.game-card-info h2,
.game-card-info h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* --------------------------------------------------
   FIX 2: Footer section headings too small (14px -> 16px)
   "Slot Types", "Themes", "Features", etc. in footer
   -------------------------------------------------- */

footer h3,
footer h4 {
    font-size: 15px !important;
}
@media (max-width: 768px) {
  
  footer h3,
  footer h4 {
    font-size: 13px !important;
  }
}

/* --------------------------------------------------
   FIX 3: Footer link touch targets too small (40px)
   NCPG and Responsible Gaming links need min 44px height
   -------------------------------------------------- */

footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------
   FIX 4: Header logo image overflow on mobile
   -------------------------------------------------- */
.premium-header .mobile-drawer img,
.premium-header .header-logo img {
    max-width: 100% !important;
}
@media (max-width: 767px) {
    .premium-header .header-container {
        overflow: hidden !important;
    }
}

/* --------------------------------------------------
   FIX 5: Game page wide elements fix
   Tables and content sections overflow viewport on mobile
   -------------------------------------------------- */
@media (max-width: 767px) {
    .single-game-content,
    .play-game-content,
    .game-detail-content,
    #single-game-section {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #single-game-table,
    .single-game-content table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .game-stat-badges {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .game-stat-badge,
    .game-info-badge {
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 44px !important;
    }
}

/* --------------------------------------------------
   FIX 6: Touch target minimum size enforcement
   -------------------------------------------------- */
@media (pointer: coarse) {
    .cBreadcrumb a,
    .slot-hub-breadcrumb a,
    nav[aria-label="Breadcrumb"] a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 4px 2px !important;
    }

    .skip-to-content:focus {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* --------------------------------------------------
   FIX 7: Filter bar horizontal scroll for layout pages
   -------------------------------------------------- */
@media (max-width: 767px) {
    
    .context-chip-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        padding: 10px 12px !important;
    }
    
    .context-chip-row::-webkit-scrollbar {
        display: none !important;
    }
}

/* FIX 2b: Override site-experience-system.css footer heading 13px */

/* FIX: Game card images visible */



/* FIX 9: Game page elements (single-slot-*) overflow on mobile */

/* FIX: Mobile drawer blocks scroll when hidden */
.mobile-drawer {
    pointer-events: none !important;
}
.mobile-drawer.active,
.mobile-drawer.mobile-open,
body.menu-open .mobile-drawer {
    pointer-events: auto !important;
}


/* FIX: Body/html must NOT be height-locked */
html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.mobile-drawer {
    pointer-events: none !important;
}
.mobile-drawer.active,
.mobile-drawer.mobile-open,
body.menu-open .mobile-drawer {
    pointer-events: auto !important;
}


/* --------------------------------------------------
  16. FOOTER V2 RESET
   Override generic footer link sizing for redesigned footer.
   The .site-footer-v2 class uses its own scoped \3c style> block.
   -------------------------------------------------- */
/* ==== site-enhancements.css ==== */
html{scroll-behavior:smooth}#laypage h2,
#laypage h3{text-align:center}#laypage > p,
#laypage > div > p{text-align:center;max-width:800px;margin-left:auto;margin-right:auto}#laypage .ocean-game-grid,
#laypage .slm-grid-5{text-align:left}.sgp-prose h2,
.sgp-prose h3,
.single-game-content h2,
.single-game-content h3{text-align:center}.sgp-prose > p,
.single-game-content > p{max-width:800px;margin-left:auto;margin-right:auto}.sgp-section-intro{text-align:center}.similar-games{max-width:100%;margin-left:auto;margin-right:auto}.similar-games .ocean-game-grid{justify-content:center}.sw-dir-prose h2,
.sw-dir-prose h3{text-align:center}.sw-dir-prose > p{text-align:center;max-width:800px;margin-left:auto;margin-right:auto}.sw-provider-card{transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease}@media (max-width:768px){.sgp-cta-btn,
.game-like-btn,
.slm-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}.panel-heading a,
.faq-question{min-height:44px;padding-top:10px;padding-bottom:10px}}section, .lp-content, .lp-section, main > div{max-width:100%;overflow-x:hidden}.hp-section-header{text-align:center !important}.hp-section-title{text-align:center !important}.hp-section-subtitle{text-align:center !important;max-width:700px;margin-left:auto !important;margin-right:auto !important}.hp-section p,
.hp-section .hp-prose p{text-align:center;max-width:800px;margin-left:auto;margin-right:auto}.hp-kicker{text-align:center;display:block}.hp-discovery-card,
.hp-feature-card,
.hp-release-card,
.hp-cta-card{text-align:center !important;align-items:center !important}.hp-section .container{text-align:center}.hp-discovery-grid,
.hp-feature-grid,
.hp-release-grid{text-align:left}.similar-games h2,
.similar-games h3,
.similar-games .sgp-section-intro,
.sgp-similar-section h2,
.sgp-similar-section h3{text-align:center !important}.similar-games > p,
.sgp-similar-section > p{text-align:center;max-width:600px;margin-left:auto;margin-right:auto}.ag-hero,
.ag-hero-inner,
.ag-hero h1,
.ag-hero .ag-subtitle,
.ag-hero .ag-kicker,
.taxonomy-hero{text-align:center !important}.ag-hero .ag-subtitle,
.ag-hero p{margin-left:auto !important;margin-right:auto !important;max-width:700px}.ag-hero .ag-stats{justify-content:center !important}.ocean-game-card .badge,
.ocean-game-card .card-badge,
.ocean-game-card .vol-badge{background:rgba(0, 212, 255, 0.08) !important;border:1px solid rgba(0, 212, 255, 0.15) !important;color:rgba(255, 255, 255, 0.7) !important;border-radius:8px;font-size:0.7rem;padding:4px 10px}.ocean-game-card .new-badge,
.ocean-game-card .badge-new{background:linear-gradient(135deg, #00d4ff, #0099cc) !important;color:#fff !important;font-size:0.65rem;font-weight:800;border-radius:6px;padding:3px 8px}.game-iframe-wrapper{background:linear-gradient(180deg, #0a1628 0%, #060d17 100%) !important;border:1px solid rgba(0, 212, 255, 0.08) !important;border-radius:16px !important;text-align:center}
.game-iframe-wrapper > div:not([id*="iframe"]){text-align:center !important;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;min-height:400px}.game-iframe-wrapper img:not(iframe){max-width:280px !important;margin:0 auto !important;display:block;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.4)}.game-iframe-wrapper h2,
.game-iframe-wrapper h3,
.game-iframe-wrapper strong{color:#e8edf3;text-align:center}.game-iframe-wrapper .text-slm-accent{font-size:0.8rem}@media (max-width:768px){.mobile-demo-card-play-btn,
.sgp-cta-btn,
[class*="play-demo"],
a[class*="play-btn"]{white-space:nowrap !important;font-size:0.85rem !important;padding:12px 24px !important;border-radius:12px}}@media (max-width:1023px){.game-iframe-wrapper,
#game-wrapper,
.d-lg-block:not(.d-block){display:none !important}}body, html{overflow-x:clip !important}.age-gate-overlay{z-index:9999 !important}#popUp18plus{z-index:9998 !important}a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid #00d4ff !important;outline-offset:2px}.sgp-cta-btn, .lp-pill, .slm-btn, .hp-release-cta, .hp-cta{border-radius:12px !important;font-size:0.85rem !important}.container, main > div, .lp-content, #laypage, .sgp-prose, .sw-dir-prose{max-width:1200px;margin-left:auto;margin-right:auto}#laypage h2, #laypage h3,
.sgp-prose h2, .sgp-prose h3,
.sw-dir-prose h2, .sw-dir-prose h3,
.lp-content h2, .lp-content h3{text-align:center !important}#laypage > p, #laypage > div > p,
.sgp-prose > p, .sw-dir-prose > p{text-align:center;max-width:800px;margin-left:auto !important;margin-right:auto !important}#laypage ul, #laypage ol, #laypage table,
.sgp-prose ul, .sgp-prose ol, .sgp-prose table{text-align:left}section:empty, div.section:empty{display:none}.software-description h2, .software-description h3{text-align:center !important}.software-description > p{text-align:center !important;max-width:800px;margin-left:auto !important;margin-right:auto !important}.software-description ul, .software-description ol{text-align:left;max-width:700px;margin-left:auto;margin-right:auto}.high-rtp-hero{text-align:center}.high-rtp-hero .container{text-align:center}.high-rtp-title{text-align:center !important}.high-rtp-subtitle{text-align:center !important;margin-left:auto !important;margin-right:auto !important;max-width:700px}.high-rtp-kicker{text-align:center !important}.high-rtp-surface{text-align:center !important;max-width:800px;margin-left:auto;margin-right:auto}.slot-context-nav{text-align:center !important}.context-chip-row{justify-content:center !important}.high-rtp-info-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1.5rem;max-width:900px;margin:2rem auto}.high-rtp-info-card{text-align:center}.high-rtp-info-card h3{text-align:center}.provider-surface-header{text-align:center}.provider-surface-title{text-align:center !important}.provider-surface-kicker{text-align:center !important;display:block}.popular-casino-card-heading{text-align:center !important}.cBreadcrumb{text-align:center !important;display:flex;justify-content:center;gap:0.5rem;flex-wrap:wrap}html, body{overflow-x:clip !important;max-width:100%}main, .high-rtp-content, #vegas-slots-section, .container,
.provider-surface, .ocean-game-grid, .game-detail-content{max-width:100%;overflow-x:hidden}img, video, iframe, table, pre, code{max-width:100%}.layout-page-body h2, .layout-page-body h3,
.sw-dir-prose h2, .sw-dir-prose h3,
.high-rtp-info-card h3,
.provider-surface-title,
.popular-casino-card-heading{text-align:center !important}.layout-page-body > p, .sw-dir-prose > p{text-align:center !important;max-width:800px;margin-left:auto !important;margin-right:auto !important} .game-card-title{text-align:left !important}a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid #00d4ff !important;outline-offset:2px;border-radius:4px}a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none}.age-gate-overlay{z-index:9999 !important}.cookie-consent{z-index:9998 !important}.premium-header{z-index:50} .context-chip, .btn-primary,
a.btn, button.btn{border-radius:0.75rem;font-weight:600;font-size:0.8125rem;letter-spacing:0.025em;transition:all 0.2s ease}.game-detail-content, .software-description,
.layout-page-content, .sw-dir-prose{max-width:56rem;margin-left:auto;margin-right:auto}
/* Game page - content under key facts NOT centered on desktop */
.sgp-prose table, .sgp-prose .game-specs, .sgp-prose .key-facts {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.sgp-prose table td, .sgp-prose table th {
    text-align: left;
}



/* Fix: Constrain game card heights to prevent extreme overflow (e.g. 12,386px on /243-ways-slots) */
#laypage .slm-game-card{max-height:450px;overflow:hidden}


/* ================================================================
   GAME SPECS MODERN CARDS - Ocean Premium Theme
   Redesigned Apr 2026
   ================================================================ */
.sgp-game-specs-modern {
    margin: 28px 0;
}

.sgp-specs-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 800;
    color: #f1f5f9;
    text-align: center;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sgp-specs-heading-icon {
    font-size: 1.3em;
}

.sgp-specs-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .sgp-specs-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (min-width: 1024px) {
    .sgp-specs-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.sgp-spec-card {
    position: relative;
    background: linear-gradient(145deg, rgba(13, 27, 42, 0.85), rgba(8, 18, 32, 0.95));
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 14px;
    padding: 18px 14px 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sgp-spec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sgp-spec-card:hover {
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-3px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 212, 255, 0.06);
}

.sgp-spec-card:hover::before {
    opacity: 1;
}

.sgp-spec-card__icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.sgp-spec-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.sgp-spec-card__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.3;
    word-break: break-word;
}

.sgp-spec-card__value--gold {
    color: #ffd166;
    text-shadow: 0 0 12px rgba(255, 209, 102, 0.2);
}

/* RTP color tiers */
.sgp-rtp-high {
    color: #4ade80 !important;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

.sgp-rtp-mid {
    color: #facc15 !important;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
}

.sgp-rtp-low {
    color: #f87171 !important;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.2);
}

/* RTP progress bar */
.sgp-spec-card__bar {
    margin-top: 10px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.sgp-spec-card__bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.sgp-rtp-bar--high {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.sgp-rtp-bar--mid {
    background: linear-gradient(90deg, #eab308, #facc15);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.sgp-rtp-bar--low {
    background: linear-gradient(90deg, #dc2626, #f87171);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

/* RTP card special border glow */
.sgp-spec-card--rtp[data-rtp-tier="high"] {
    border-color: rgba(34, 197, 94, 0.2);
}
.sgp-spec-card--rtp[data-rtp-tier="high"]:hover {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(34, 197, 94, 0.08);
}
.sgp-spec-card--rtp[data-rtp-tier="mid"] {
    border-color: rgba(250, 204, 21, 0.15);
}
.sgp-spec-card--rtp[data-rtp-tier="mid"]:hover {
    border-color: rgba(250, 204, 21, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(250, 204, 21, 0.08);
}
.sgp-spec-card--rtp[data-rtp-tier="low"] {
    border-color: rgba(239, 68, 68, 0.15);
}
.sgp-spec-card--rtp[data-rtp-tier="low"]:hover {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(239, 68, 68, 0.08);
}

/* Volatility color tiers */
.sgp-vol-extreme {
    color: #c084fc !important;
}
.sgp-vol-high {
    color: #f87171 !important;
}
.sgp-vol-mid {
    color: #facc15 !important;
}
.sgp-vol-low {
    color: #4ade80 !important;
}

/* Provider link in spec cards */
.sgp-spec-link {
    color: #00d4ff;
    text-decoration: none;
    transition: color 0.2s ease;
}
.sgp-spec-link:hover {
    color: #38bdf8;
    text-decoration: underline;
}

/* Footnote */
.sgp-specs-footnote {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 14px;
    margin-bottom: 0;
    text-align: center;
    font-style: italic;
}

/* Mobile < 420px: tighter */
@media (max-width: 420px) {
    .sgp-spec-card {
        padding: 14px 10px 12px;
        border-radius: 12px;
    }
    .sgp-spec-card__icon {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }
    .sgp-spec-card__label {
        font-size: 0.62rem;
    }
    .sgp-spec-card__value {
        font-size: 0.92rem;
    }
    .sgp-specs-cards {
        gap: 8px;
    }
}

/* ================================================================
   OCEAN SPECS GRID - Game page RTP/Stats section
   Matches ocean-game-card style from /free-slots exactly
   ================================================================ */

/* Mobile tighter spacing */

/* Hide old table completely */
 #single-game-table {
    display: none !important;
}


/* Fix: Remove blue gap between game card image and title */

/* NUCLEAR: Kill blue gap on ALL game cards everywhere */

body.has-premium-header .ocean-game-card .game-card-image,
body.page-family-slots .ocean-game-card .game-card-image{background:transparent !important;aspect-ratio:auto !important}


/* === Fix: Crisp header logo on retina displays === */
.header-logo img {
    width: 40px;
    height: 40px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* === Fix: Mobile horizontal scroll for explore chips (game page) === */
@media (max-width: 768px) {
    .sgp-context-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 12px 0;
    }
    .sgp-context-nav::-webkit-scrollbar {
        display: none;
    }
    .sgp-context-chips {
        flex-wrap: nowrap !important;
        gap: 8px;
    }
    .sgp-context-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Similar games grid horizontal scroll on mobile */
    .similar-games .ocean-game-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 12px;
        padding-bottom: 8px;
    }
    .similar-games .ocean-game-grid::-webkit-scrollbar {
        display: none;
    }
}

/* === Fix: Mobile horizontal scroll for filter pills (all-games page) === */
@media (max-width: 768px) {
    .slm-active-filters {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 4px 0;
    }
    .slm-active-filters::-webkit-scrollbar {
        display: none;
    }
    .slm-active-filters > * {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .filter-pills {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 4px 0;
    }
    .filter-pills::-webkit-scrollbar {
        display: none;
    }
    .filter-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 16px;
        touch-action: pan-x;
    }

    /* Recently played horizontal scroll */
    #recentlyPlayedGrid {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* Fix: Remove blue line between header and hero on single slot pages */
body.route-frontend-game .single-game-page,
body.route-frontend-game main,
body.route-frontend-game .sgp-hero{margin-top:0 !important;padding-top:16px !important;background-position:center top !important}
body.route-frontend-game{background-color:#060d17 !important}
.fav-heart.favorited{color:#ff4d6a !important;text-shadow:0 0 8px rgba(255,77,106,0.5)}.fav-heart:hover{color:#ff4d6a !important;transform:scale(1.2)}
.header-logo img{width:48px !important;height:48px !important;min-width:48px;min-height:48px}
body.route-frontend-game,body.page-family-slot-single{background:#08111d !important}body.route-frontend-game #single-game-section{top:-62px !important;margin-bottom:-62px !important;padding-top:82px !important}
body.route-frontend-game .premium-header{border-bottom:none !important;box-shadow:0 2px 8px rgba(0,0,0,0.5) !important}
.age-gate-badge{background:#dc2626 !important;color:#fff !important;border-radius:50% !important;width:70px !important;height:70px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:800 !important;font-size:1.4rem !important;margin:0 auto 16px !important;border:3px solid rgba(255,255,255,0.3) !important}.age-gate-logo{text-align:center !important;display:flex !important;justify-content:center !important}
body.route-frontend-game .premium-header,
body.page-family-slot-single .premium-header{box-shadow:none !important;border-bottom:none !important}
body.route-frontend-game,
body.page-family-slot-single{background:#060d17 !important}

/* Fix mobile filter panel cutoff */
@media(max-width:991px){
#lobbyFilterPanel.mobile-open,
.lobby-filter-panel.mobile-open{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:10000 !important;
  padding-top:16px !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  max-height:100vh !important;
  max-height:100dvh !important;
}
}

/* Fix: content hidden behind mobile bottom nav */
@media(max-width:991px){
  #lobbyFilterPanel.mobile-open,
  .lobby-filter-panel.mobile-open{
    padding-bottom:80px !important;
  }
  .filter-section-body{
    padding-bottom:8px !important;
  }
  /* Ensure apply/reset buttons visible above nav bar */
  .filter-btn-apply,
  .filter-btn-reset,
  .mobile-filter-actions{
    margin-bottom:72px !important;
  }
}

/* NUCLEAR: Mobile filter panel - full screen overlay */
@media(max-width:991px){
  .lobby-filter-panel.mobile-open{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    z-index:10000 !important;
    margin:0 !important;
    border-radius:0 !important;
    border:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:70px 16px 20px !important;
    background:rgba(6,13,23,0.98) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }
  .lobby-filter-panel.mobile-open .filter-section-body{
    max-height:300px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .lobby-filter-panel.mobile-open .filter-pill{
    min-height:40px !important;
    padding:8px 14px !important;
  }
}

/* ================================================================
   MOBILE HORIZONTAL SCROLL - Universal pill/chip scrolling
   Added Apr 9, 2026
   ================================================================ */

/* Universal horizontal scroll behavior for pill/chip containers */

.filter-pills,
.slm-active-filters,
.sgp-context-chips,
.context-chip-row {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-pills::-webkit-scrollbar,
.slm-active-filters::-webkit-scrollbar,
.sgp-context-chips::-webkit-scrollbar,
.context-chip-row::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    /* Provider pills, feature pills, theme pills in filter panel */
    .filter-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 6px;
        padding: 4px 0 8px;
        touch-action: pan-x;
    }
    .filter-pills .filter-pill {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        touch-action: pan-x;
    }

    /* Active filter tags bar */
    .slm-active-filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 6px;
        padding: 4px 0;
        touch-action: pan-x;
    }
    .slm-active-filters > * {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Context/explore chips on game pages */
    .sgp-context-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x;
    }
    .sgp-context-chips {
        flex-wrap: nowrap !important;
        gap: 8px;
    }
    .sgp-context-chip {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        touch-action: pan-x;
    }

    /* Context chip row (layout/category pages) */
    .context-chip-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 8px;
        touch-action: pan-x;
    }
    .context-chip-row > * {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ================================================================
   CASINO CARD - Mobile responsive fixes
   Added Apr 9, 2026
   ================================================================ */

/* Casino card logo responsive */
.cc-logo {
    max-width: 100%;
    height: auto;
}
.cc-logo img {
    object-fit: contain !important;
    max-width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    /* Stack casino card vertically on mobile */
    .cc-top {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 10px;
        padding: 16px 16px 12px;
    }
    .cc-logo {
        width: 120px !important;
        height: auto !important;
        min-height: 50px;
        flex-shrink: 0;
    }
    .cc-logo img {
        width: 100%;
        height: auto !important;
        max-height: 60px;
        object-fit: contain !important;
        padding: 6px;
    }
    .cc-bonus-wrap {
        width: 100%;
        text-align: center;
    }
    .cc-bonus-label {
        text-align: center;
    }
    .cc-bonus-text {
        text-align: center;
        font-size: 15px;
    }
    /* Payment methods wrap nicely */
    .cc-payments-row {
        justify-content: center;
    }
    /* CTA full width */
    .cc-cta {
        padding: 14px 24px;
        font-size: 15px;
    }
}



/* ================================================================
   MOBILE CHECKBOX FILTERS - Replace pills with checkbox list
   Added Apr 9, 2026
   ================================================================ */
@media(max-width:991px){
  /* Override horizontal scroll - make vertical list */
  .lobby-filter-panel .filter-pills,
  .lobby-filter-panel.mobile-open .filter-pills{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:2px !important;
    max-height:250px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:4px 0 !important;
    touch-action:pan-y !important;
  }
  /* Each pill becomes a full-width checkbox row */
  .lobby-filter-panel .filter-pill,
  .lobby-filter-panel.mobile-open .filter-pill{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 14px !important;
    border-radius:8px !important;
    min-height:44px !important;
    justify-content:flex-start !important;
    white-space:normal !important;
    flex-shrink:0 !important;
    margin:0 !important;
    background:rgba(0,212,255,0.04) !important;
    border:1px solid rgba(0,212,255,0.1) !important;
    color:rgba(255,255,255,0.85) !important;
    font-size:0.88rem !important;
    touch-action:auto !important;
    box-sizing:border-box !important;
  }
  /* Checkbox indicator */
  .lobby-filter-panel .filter-pill::before,
  .lobby-filter-panel.mobile-open .filter-pill::before{
    content:"" !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    border:2px solid rgba(0,212,255,0.3) !important;
    border-radius:4px !important;
    flex-shrink:0 !important;
    transition:all 0.2s ease !important;
    background:transparent !important;
    display:inline-block !important;
    box-sizing:border-box !important;
  }
  /* Checked state */
  .lobby-filter-panel .filter-pill.selected::before,
  .lobby-filter-panel.mobile-open .filter-pill.selected::before{
    background:rgba(0,212,255,0.9) !important;
    border-color:rgba(0,212,255,0.9) !important;
    box-shadow:inset 0 0 0 2px #fff !important;
  }
  /* Selected row highlight */
  .lobby-filter-panel .filter-pill.selected,
  .lobby-filter-panel.mobile-open .filter-pill.selected{
    background:rgba(0,212,255,0.12) !important;
    border-color:rgba(0,212,255,0.4) !important;
    color:#fff !important;
  }
  /* Hover/active state */
  .lobby-filter-panel .filter-pill:active{
    background:rgba(0,212,255,0.08) !important;
  }
  /* Scrollbar styling for the checkbox list */
  .lobby-filter-panel .filter-pills::-webkit-scrollbar{
    width:4px !important;
  }
  .lobby-filter-panel .filter-pills::-webkit-scrollbar-track{
    background:rgba(0,212,255,0.05) !important;
    border-radius:2px !important;
  }
  .lobby-filter-panel .filter-pills::-webkit-scrollbar-thumb{
    background:rgba(0,212,255,0.2) !important;
    border-radius:2px !important;
  }
}

/* Fix blue bar on homepage under header */
body.route-frontend-index .premium-header,
body.page-family-home .premium-header{box-shadow:none !important;border-bottom:none !important}


/* === Mobile full-width game content sections (Apr 9 2026) === */
@media(max-width:768px){
  /* Main review article wrapper - remove Tailwind max-w-4xl constraint */
  .sgp-prose,
  .play-game-content.sgp-prose,
  article.sgp-prose{
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Review body */
  div[itemprop="reviewBody"]{
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Quick facts / takeaways / recommendation boxes */
  .sgp-quick-facts,
  .sgp-takeaways,
  .sgp-quick-answers,
  .sgp-recommendation{
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Game specs section */
  .sgp-game-specs-modern,
  .sgp-specs-table{
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Container inside single-game-section */
  #single-game-section > div > div,
  #single-game-section .container{
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Override the 760px cap from inline styles */
  body.page-family-slot-single .single-game-content > .container,
  body.route-frontend-game .single-game-content > .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  /* Tailwind max-w-4xl override */
  .max-w-4xl{
    max-width:100% !important;
  }
  /* Inner surface cards - keep padding but remove width constraint */
  .sgp-surface{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* Hide favorite hearts on layout/provider/game pages - only show on free-slots and search */
body.route-frontend-layout-page .fav-heart,
body.route-frontend-software-game .fav-heart,
body.route-frontend-game .ocean-game-card .fav-heart{display:none !important}

/* NUCLEAR: Kill all external ocean-game-card overrides - inline styles only */

html body.page-family-slots .ocean-game-card,
html body.has-premium-header .ocean-game-card{
  display:block !important;
  background:#0d1b2a !important;
  border:1px solid rgba(0,212,255,0.08) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  transition:transform 0.2s,box-shadow 0.2s !important;
}

/* Fix VA findings: layout page content overflow */
.slot-hub-page,.slot-hub-content,.lp-prose{overflow-x:hidden !important;max-width:100% !important;word-break:break-word}
.lp-prose table{display:block;overflow-x:auto;max-width:100%}
.lp-prose img{max-width:100%;height:auto}

/* Fix: Float Play Demo button above mobile nav bar */
@media(max-width:991px){
  #stickyPlayBtn,.sgp-cta-btn-floating{
    bottom:80px !important;
  }
}

/* ============================================================
   OVERFLOW FIX - Prevent elements extending beyond viewport
   Fix for: 18 elements beyond right edge, 3 containers overflow
   Added: 2026-04-11
   ============================================================ */

/* Global containment - prevent ANY horizontal scroll */
html {
  overflow-x: hidden !important;
  max-width: 100vw;
}
body {
  overflow-x: hidden !important;
  max-width: 100%;
  position: relative;
}

/* Main content wrapper */
main, #main-content, .main-content {
  overflow-x: hidden;
  max-width: 100%;
}

/* All sections must clip their pseudo-element children */
.hp-hero,
.hp-section,
.hp-section--alt,
.hp-cta-section,
.depth-streamer {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Pseudo-elements: cap at 100vw so they never push scrollbar */
.hp-hero::before,
.hp-hero::after,
.hp-section::before,
.hp-section--alt::before,
.hp-cta-section::before {
  max-width: 100vw;
}

/* Container class must never exceed viewport */
.container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}

/* Footer containment - footer uses all:initial which resets overflow */
footer, #footer {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
footer > div, #footer > div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Footer grid: ensure it wraps on mobile even before JS fires */
.ft-grid-inline {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 575px) {
  .ft-grid-inline {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
}
@media (max-width: 379px) {
  .ft-grid-inline {
    grid-template-columns: 1fr !important;
  }
}

/* Streamer section grid containment */
.streamer-grid {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .streamer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Media elements: never wider than parent */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
}

/* Tables must scroll horizontally, not push parent */
/* Tables: wrap in scrollable container */
table {
  max-width: 100%;
  overflow-x: auto;
}

/* Pre/code blocks must wrap or scroll */
pre, code {
  overflow-x: auto;
  max-width: 100%;
  word-wrap: break-word;
}

/* Grids: ensure they stay within bounds */
[class*="grid-cols-"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* Game grid containment */
.ocean-game-grid {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Newsletter modal containment */
.modal-dialog, .modal-content {
  max-width: 100%;
  box-sizing: border-box;
}

/* Flex containers should wrap by default on mobile */
@media (max-width: 767px) {
  .flex:not(.flex-col):not([class*="flex-wrap"]) {
    flex-wrap: wrap;
  }
  /* FAQ and content sections */
  .slm-faq-inline {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Prevent inline-styled elements from overflowing */
[style*="width:"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* Age gate popup containment */
#popUp18plus, #popUp18plus > div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Search overlay containment */
#globalSearchOverlay {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* 2026-04-18: Fix cramped/left-looking H1 on high-rtp, vegas, new-slots pages.
   The page-listing.min.css had max-width:13ch which forced awkward wrapping. */
body.route-frontend-high-rtp-slots .high-rtp-title,
body.route-frontend-vegas-slots .high-rtp-title,
body.route-frontend-new-slots-2026 .high-rtp-title {
    max-width: none !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Game card titles — center them so they look balanced */
.ocean-game-grid .ogc .ogc-title,
.ocean-game-grid .ogc .ogc-provider,
.slot-hub-grid .ogc .ogc-title,
.slot-hub-grid .ogc .ogc-provider {
    text-align: center;
}

/* Ensure section H2s on layout/category pages are centered */
.slot-hub-content > .container > h2,
.high-rtp-content .provider-surface-title,
.vegas-slots .provider-surface-title {
    text-align: center;
}

/* === new-slots-2026: high-rtp class wiring + page styles === */
body.route-frontend-new-slots-2026 .high-rtp-hero{position:relative;background:linear-gradient(180deg,#1a4a60 0%,#123850 28%,#0c2840 62%,#071820 100%)!important;padding:44px 0 54px!important;overflow:hidden;}
body.route-frontend-new-slots-2026 .high-rtp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 16% 16%,rgba(80,230,180,.22) 0,transparent 42%),radial-gradient(ellipse at 82% 14%,rgba(13,27,42,.95) 0,transparent 28%),radial-gradient(ellipse at 50% 60%,rgba(0,180,140,.1) 0,transparent 58%),linear-gradient(180deg,rgba(13,27,42,.95),rgba(255,255,255,0));pointer-events:none;}
body.route-frontend-new-slots-2026 .high-rtp-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),rgba(80,230,180,.12));box-shadow:0 0 0 1px rgba(7,24,32,.9) inset;opacity:0;pointer-events:none;animation:slmHubBubble 12s ease-in infinite;}
body.route-frontend-new-slots-2026 .high-rtp-bubble.b1{width:18px;height:18px;left:9%;bottom:18px;animation-delay:0s;}
body.route-frontend-new-slots-2026 .high-rtp-bubble.b2{width:12px;height:12px;left:23%;bottom:-6px;animation-delay:2s;}
body.route-frontend-new-slots-2026 .high-rtp-bubble.b3{width:24px;height:24px;left:54%;bottom:12px;animation-delay:4s;}
body.route-frontend-new-slots-2026 .high-rtp-bubble.b4{width:16px;height:16px;right:19%;bottom:-10px;animation-delay:1s;}
body.route-frontend-new-slots-2026 .high-rtp-bubble.b5{width:26px;height:26px;right:9%;bottom:10px;animation-delay:3s;}
body.route-frontend-new-slots-2026 .high-rtp-bubble.b6{width:10px;height:10px;right:28%;bottom:-18px;animation-delay:5s;}
body.route-frontend-new-slots-2026 .high-rtp-hero>.container,body.route-frontend-new-slots-2026 .high-rtp-content>.container{position:relative;z-index:1;width:min(100% - 48px,1380px)!important;max-width:1380px!important;}
body.route-frontend-new-slots-2026 .high-rtp-content{position:relative;background:linear-gradient(180deg,rgba(14,48,68,.97) 0%,rgba(9,34,50,.98) 18%,rgba(7,26,40,.99) 42%,rgba(5,18,28,1) 66%,rgba(3,10,18,1) 100%)!important;padding:34px 0 0!important;}
body.route-frontend-new-slots-2026 .high-rtp-content::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(80,230,180,.07) 0,rgba(80,230,180,0) 22%),linear-gradient(180deg,rgba(13,27,42,.8) 0,rgba(255,255,255,0) 18%);pointer-events:none;}
body.route-frontend-new-slots-2026 .high-rtp-kicker{background:rgba(80,230,180,.12)!important;border-color:rgba(80,230,180,.28)!important;color:#50e6b4!important;}
body.route-frontend-new-slots-2026 .high-rtp-subtitle{color:rgba(236,248,244,.84)!important;}
body.route-frontend-new-slots-2026 .high-rtp-surface,body.route-frontend-new-slots-2026 .high-rtp-info-card,body.route-frontend-new-slots-2026 .provider-surface{position:relative;overflow:hidden;border-radius:28px!important;border:1px solid rgba(80,230,180,.12)!important;background:linear-gradient(180deg,rgba(9,32,50,.92) 0%,rgba(5,18,30,.97) 100%)!important;box-shadow:0 24px 56px rgba(0,0,0,.22)!important;}
body.route-frontend-new-slots-2026 .high-rtp-surface::before,body.route-frontend-new-slots-2026 .high-rtp-info-card::before,body.route-frontend-new-slots-2026 .provider-surface::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(80,230,180,.5),rgba(255,209,102,.3),rgba(0,0,0,0));pointer-events:none;}
body.route-frontend-new-slots-2026 .high-rtp-surface{padding:28px 32px!important;margin-bottom:24px!important;}
body.route-frontend-new-slots-2026 .high-rtp-surface p,body.route-frontend-new-slots-2026 .high-rtp-info-card p{color:rgba(220,240,232,.82)!important;}
body.route-frontend-new-slots-2026 .high-rtp-info-card{padding:22px 20px!important;}
body.route-frontend-new-slots-2026 .high-rtp-info-card h3{color:#ffd166!important;font-size:1.18rem!important;margin-bottom:10px!important;}
body.route-frontend-new-slots-2026 .slot-context-nav{border-radius:24px!important;}
body.route-frontend-new-slots-2026 .context-chip{background:rgba(7,28,44,.95)!important;border-color:rgba(80,230,180,.18)!important;}
body.route-frontend-new-slots-2026 .context-chip:hover,body.route-frontend-new-slots-2026 .context-chip:focus-visible{background:linear-gradient(135deg,#50e6b4,#ffd166)!important;color:#06111d!important;border-color:transparent!important;}
body.route-frontend-new-slots-2026 .ns-month-pill.active{background:linear-gradient(135deg,#50e6b4,#00b8a0)!important;color:#06111d!important;box-shadow:0 4px 14px rgba(80,230,180,.3)!important;}
body.route-frontend-new-slots-2026 .ns-month-pill:hover{background:rgba(80,230,180,.15)!important;color:#b0f5e0!important;}
@media(max-width:991px){body.route-frontend-new-slots-2026 .high-rtp-hero{padding:20px 0 34px!important;}body.route-frontend-new-slots-2026 .high-rtp-hero>.container,body.route-frontend-new-slots-2026 .high-rtp-content>.container{width:min(100% - 20px,100%)!important;}}

/* new-slots-2026 supporting classes */
.ns-breadcrumb{margin-top:12px;}
body.route-frontend-new-slots-2026 .ns-highlight{color:#ffd166;}
.ns-editorial{text-align:left;}
.mb-30{margin-bottom:30px;}
/* ==== a11y-focus.css ==== */
/* Accessibility: Keyboard focus indicators
   Ensures all interactive elements show visible focus for keyboard users.
   Uses :focus-visible so mouse clicks don't show outlines. */

/* Global focus-visible for ALL interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
details:focus-visible,
.panel-heading a:focus-visible,
.context-chip:focus-visible,
.play-btn-ocean:focus-visible,
.slm-btn:focus-visible,
.ocean-game-card-link:focus-visible,
.provider-featured-link:focus-visible,
.fav-heart:focus-visible,
.epic-search-input:focus-visible,
.ag-search-box input:focus-visible,
.provider-search-box input:focus-visible,
.slm-search__input:focus-visible,
.rdb-input:focus-visible,
.rdb-select:focus-visible,
.rtp-fi:focus-visible,
.rtp-fs:focus-visible,
.calc-group input:focus-visible,
.calc-group select:focus-visible {
    outline: 2px solid #00d4ff !important;
    outline-offset: 2px !important;
}

/* Hide outline for mouse/touch clicks on interactive elements */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
    outline: none !important;
}
/* ==== src/layout-inline-a.css ==== */
html,body{height:auto!important;min-height:100vh!important;overflow-y:visible!important;overflow-x:clip!important}.mobile-drawer{pointer-events:none!important}body.menu-open .mobile-drawer{pointer-events:auto!important}
/* ==== tailwind.min.css ==== */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.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}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-0{inset:0}.bottom-6{bottom:1.5rem}.end-0{inset-inline-end:0}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.right-4{right:1rem}.start-0{inset-inline-start:0}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.top-full{top:100%}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[9998\]{z-index:9998}.col-span-full{grid-column:1/-1}.float-right{float:right}.float-left{float:left}.m-0{margin:0}.m-8{margin:2rem}.m-auto{margin:auto}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-60{margin-bottom:15rem}.mb-8{margin-bottom:2rem}.me-1{-webkit-margin-end:.25rem;margin-inline-end:.25rem}.me-2{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.me-3{-webkit-margin-end:.75rem;margin-inline-end:.75rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mr-auto{margin-right:auto}.ms-1{-webkit-margin-start:.25rem;margin-inline-start:.25rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[16\/11\]{aspect-ratio:16/11}.aspect-\[3\/2\]{aspect-ratio:3/2}.h-1{height:.25rem}.h-10{height:2.5rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-full{height:100%}.min-h-\[36px\]{min-height:36px}.min-h-\[44px\]{min-height:44px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-3\.5{width:.875rem}.w-36{width:9rem}.w-4{width:1rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[44px\]{min-width:44px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[100vw\]{max-width:100vw}.max-w-\[1360px\]{max-width:1360px}.max-w-\[640px\]{max-width:640px}.max-w-\[720px\]{max-width:720px}.max-w-\[900px\]{max-width:900px}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y:1rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.select-all{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-none{border-style:none}.border-\[rgba\(0\2c 212\2c 255\2c 0\.15\)\]{border-color:rgba(0,212,255,.15)}.border-\[rgba\(0\2c 212\2c 255\2c 0\.2\)\]{border-color:rgba(0,212,255,.2)}.border-\[rgba\(255\2c 255\2c 255\2c 0\.05\)\]{border-color:hsla(0,0%,100%,.05)}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.bg-\[rgba\(0\2c 212\2c 255\2c 0\.06\)\]{background-color:rgba(0,212,255,.06)}.bg-\[rgba\(0\2c 212\2c 255\2c 0\.08\)\]{background-color:rgba(0,212,255,.08)}.bg-\[rgba\(148\2c 163\2c 184\2c 0\.1\)\]{background-color:rgba(148,163,184,.1)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-slm-accent{--tw-bg-opacity:1;background-color:rgb(0 212 255/var(--tw-bg-opacity,1))}.bg-slm-bg{--tw-bg-opacity:1;background-color:rgb(6 13 23/var(--tw-bg-opacity,1))}.bg-slm-card{--tw-bg-opacity:1;background-color:rgb(13 27 42/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-opacity-10{--tw-bg-opacity:0.1}.bg-gradient-to-b{background-image:linear-gradient(180deg,var(--tw-gradient-stops))}.from-\[\#060d17\]{--tw-gradient-from:#060d17 var(--tw-gradient-from-position);--tw-gradient-to:rgb(6 13 23/0) var(--tw-gradient-to-position)}.from-\[\#0a1628\],.from-\[\#060d17\]{--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#0a1628\]{--tw-gradient-from:#0a1628 var(--tw-gradient-from-position);--tw-gradient-to:rgb(10 22 40/0) var(--tw-gradient-to-position)}.via-\[\#071a30\]{--tw-gradient-to:rgb(7 26 48/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#071a30 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#0a1628\]{--tw-gradient-to:rgb(10 22 40/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#0a1628 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#060d17\]{--tw-gradient-to:#060d17 var(--tw-gradient-to-position)}.to-\[\#0a1628\]{--tw-gradient-to:#0a1628 var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-8{padding-bottom:2rem}.pe-3{-webkit-padding-end:.75rem;padding-inline-end:.75rem}.pl-1{padding-left:.25rem}.pl-3{padding-left:.75rem}.pr-5{padding-right:1.25rem}.ps-3{-webkit-padding-start:.75rem;padding-inline-start:.75rem}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-end{text-align:end}.align-baseline{vertical-align:baseline}.font-\[Montserrat\2c sans-serif\]{font-family:Montserrat,sans-serif}.font-sans{font-family:Inter,system-ui,-apple-system,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-\[0\.625rem\]{font-size:.625rem}.text-\[0\.6875rem\]{font-size:.6875rem}.text-\[0\.8125rem\]{font-size:.8125rem}.text-\[0\.9375rem\]{font-size:.9375rem}.text-\[1\.0625rem\]{font-size:1.0625rem}.text-\[10px\]{font-size:10px}.text-\[2\.5rem\]{font-size:2.5rem}.text-\[clamp\(0\.875rem\2c 1\.2vw\2c 1rem\)\]{font-size:clamp(.875rem,1.2vw,1rem)}.text-\[clamp\(1\.125rem\2c 2vw\2c 1\.3125rem\)\]{font-size:clamp(1.125rem,2vw,1.3125rem)}.text-\[clamp\(1\.5rem\2c 2\.5vw\2c 1\.875rem\)\]{font-size:clamp(1.5rem,2.5vw,1.875rem)}.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.25rem\)\]{font-size:clamp(1.5rem,3vw,2.25rem)}.text-\[clamp\(1\.5rem\2c 3vw\2c 2rem\)\]{font-size:clamp(1.5rem,3vw,2rem)}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-\[1\.2\]{line-height:1.2}.leading-\[1\.3\]{line-height:1.3}.leading-\[1\.5\]{line-height:1.5}.leading-\[1\.65\]{line-height:1.65}.leading-\[1\.6\]{line-height:1.6}.leading-\[1\.8\]{line-height:1.8}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.tracking-\[0\.05em\]{letter-spacing:.05em}.tracking-\[0\.08em\]{letter-spacing:.08em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#00d4ff\]{--tw-text-opacity:1;color:rgb(0 212 255/var(--tw-text-opacity,1))}.text-\[rgba\(0\2c 212\2c 255\2c 0\.8\)\]{color:rgba(0,212,255,.8)}.text-\[rgba\(255\2c 255\2c 255\2c 0\.5\)\]{color:hsla(0,0%,100%,.5)}.text-\[rgba\(255\2c 255\2c 255\2c 0\.7\)\]{color:hsla(0,0%,100%,.7)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-inherit{color:inherit}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slm-accent{--tw-text-opacity:1;color:rgb(0 212 255/var(--tw-text-opacity,1))}.text-slm-bg{--tw-text-opacity:1;color:rgb(6 13 23/var(--tw-text-opacity,1))}.text-slm-text{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/25{color:rgb(255 255 255/.25)}.text-white\/30{color:rgb(255 255 255/.3)}.text-white\/40{color:rgb(255 255 255/.4)}.text-white\/60{color:rgb(255 255 255/.6)}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0/0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0/0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.blur{--tw-blur:blur(8px)}.blur{-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,-webkit-text-decoration-color,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.placeholder\:text-white\/30::-webkit-input-placeholder{color:rgb(255 255 255/.3)}.placeholder\:text-white\/30::-moz-placeholder{color:rgb(255 255 255/.3)}.placeholder\:text-white\/30:-ms-input-placeholder{color:rgb(255 255 255/.3)}.placeholder\:text-white\/30::-ms-input-placeholder{color:rgb(255 255 255/.3)}.placeholder\:text-white\/30::placeholder{color:rgb(255 255 255/.3)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-slm-accent\/40:hover{border-color:rgb(0 212 255/.4)}.hover\:bg-\[rgba\(0\2c 212\2c 255\2c 0\.1\)\]:hover{background-color:rgba(0,212,255,.1)}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255/.05)}.hover\:text-\[\#00d4ff\]:hover{--tw-text-opacity:1;color:rgb(0 212 255/var(--tw-text-opacity,1))}.hover\:text-cyan-400:hover{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.hover\:text-slm-accent:hover{--tw-text-opacity:1;color:rgb(0 212 255/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-50:focus{z-index:50}.focus\:rounded:focus{border-radius:.25rem}.focus\:border-transparent:focus{border-color:transparent}.focus\:bg-slm-accent:focus{--tw-bg-opacity:1;background-color:rgb(0 212 255/var(--tw-bg-opacity,1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}@media not all and (min-width:768px){.max-md\:gap-3{gap:.75rem}}@media not all and (min-width:640px){.max-sm\:gap-3{gap:.75rem}}@media (min-width:640px){.sm\:block{display:block}.sm\:min-h-\[40px\]{min-height:40px}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-2{gap:.5rem}.sm\:gap-3{gap:.75rem}.sm\:gap-4{gap:1rem}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-20{padding-top:5rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:my-6{margin-top:1.5rem;margin-bottom:1.5rem}.md\:flex{display:flex}.md\:min-h-screen{min-height:100vh}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:gap-6{gap:1.5rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:py-2{padding-top:.5rem;padding-bottom:.5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-3{padding-top:.75rem;padding-bottom:.75rem}.md\:pb-0{padding-bottom:0}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem;line-height:1}}@media (min-width:1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* ==== ocean-theme.css ==== */
/* ==========================================================================
   Slottomat — ocean theme layer (2 Sep 2026)
   One idea: depth. The page is a column of water; you arrive at the sunlit
   surface and browsing takes you deeper. Loaded last; reversible by removing
   its <link>. Only transform/opacity animate. Reduced motion turns it all off.
   ========================================================================== */
:root{
  --sea-surface:#0c1e38; /* darker brand navy at the top (owner) */
  --sea-mid:#08162a;
  --sea-deep:#060d17;   /* body background of /new-slots-2026, the owner's colour reference */
  --foam:#eaf6fb;
  --foam-dim:rgba(234,246,251,.72);
  --foam-faint:rgba(234,246,251,.12);
  --kelp:#00d4ff;      /* site accent (cyan) as on /new-slots-2026 */
  --kelp-deep:#00a9cc;
  --sun:#ffd166;
  --brand-red:#c52e1b;
  --brand-gold:#ffd166;
  --brand-gold-2:#f2b134;
  --ease-water:cubic-bezier(.22,.8,.26,1);
  --r-surface:18px;
  --r-action:999px;
  --r-data:8px;
}

/* ---- the water --------------------------------------------------------- */
html{background:var(--sea-deep) !important}
/* The gradient lives on the static fixed layer (composited once); body stays transparent so scrolling
   never repaints the water. A scroll-driven --depth variant was measured at ~12 fps on a throttled phone. */
body{background:transparent !important;color:var(--foam) !important}
.ocean-water{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;
  background:radial-gradient(ellipse 120% 34% at 50% -8%,rgba(197,46,27,.10),rgba(197,46,27,0) 60%),linear-gradient(180deg,var(--sea-surface) 0%,var(--sea-mid) 30%,var(--sea-deep) 70%);transform:translateZ(0)}
.ocean-water .ray{
  position:absolute;top:-80vh;left:50%;width:56vw;height:260vh;
  background:linear-gradient(180deg,rgba(234,246,251,0) 0%,rgba(234,246,251,.07) 30%,rgba(234,246,251,0) 78%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
  transform:translateX(-50%) rotate(14deg);transform-origin:50% 0;
  animation:ocean-ray 48s ease-in-out infinite alternate;
  will-change:transform,opacity;opacity:.2
}
.ocean-water .ray.two{left:22%;width:34vw;transform:translateX(-50%) rotate(-11deg);animation-duration:67s;opacity:.12}
.ocean-water .bubble{
  position:absolute;bottom:-6vh;width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(234,246,251,.45);background:radial-gradient(circle at 35% 35%,rgba(234,246,251,.35),rgba(234,246,251,0) 70%);
  animation:ocean-rise 38s linear infinite;will-change:transform;opacity:0
}
@keyframes ocean-ray{from{transform:translateX(-50%) rotate(14deg) translateY(0)}to{transform:translateX(-46%) rotate(9deg) translateY(-4%)}}
@keyframes ocean-rise{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}8%{opacity:.7}92%{opacity:.5}100%{transform:translate3d(var(--drift,40px),-115vh,0) scale(1.15);opacity:0}}
/* the water sits behind everything via z-index:-1; no page element is repositioned (a body>* position:relative rule broke the fixed header) */
.ocean-water[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .ocean-water .ray,.ocean-water .bubble{animation:none !important}
  .ocean-water .bubble{display:none}
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
}

/* ---- header: stays brand red (owner decision 2 Sep 2026: logo colours). Only a soft edge under it. ---- */
body .premium-header.premium-header{box-shadow:0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(6,21,39,.35) !important}

/* ---- type -------------------------------------------------------------- */
h1,.ag-title,.sgp-title,.hp-hero h1{
  font-weight:700 !important;letter-spacing:-.02em !important;line-height:1.05 !important;
  color:var(--foam) !important;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem) !important;
}
h2{letter-spacing:-.01em;color:var(--foam)}
p,li{line-height:1.72}
/* the sun through water: the whole headline, not one word */
.ag-title,.hp-hero h1,.sgp-title{color:var(--foam) !important}
#main-content .ag-title .ag-gold,.ag-title .ag-gold,.ag-gold,.hp-title-gold,#hp-hero-inner h1 .hp-title-gold{color:var(--sun) !important;-webkit-text-fill-color:var(--sun) !important;background:none !important}
/* kicker pill: the cyan pill from /new-slots-2026, identical on every template */
.hp-eyebrow,.ag-kicker,.sgp-kicker,.section-eyebrow,#hp-hero-inner > span,.swg-kicker{
  display:inline-flex !important;align-items:center;gap:8px;padding:6px 16px !important;border-radius:999px !important;
  background:rgba(0,212,255,.10) !important;border:1px solid rgba(0,212,255,.30) !important;color:#6ae3ff !important;
  font-size:.72rem !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;
  box-shadow:none !important;margin-bottom:12px !important;
}

/* ---- heroes: out of the box, into the water ---------------------------- */
.hp-hero,.ag-hero-inner,.hp-hero > div,.ag-content-section{
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
.hp-hero::before,.hp-hero::after,.ag-bubbles,.ag-bubble,.sgp-bubble{display:none !important}
.ag-stats,.hp-hero .hp-stats{display:flex !important;justify-content:center;gap:12px !important;flex-wrap:wrap;background:none !important;border:0 !important}
.ag-stat,.hp-stat{
  background:rgba(0,212,255,.03) !important;border:1px solid rgba(0,212,255,.14) !important;border-radius:16px !important;box-shadow:none !important;
  padding:14px 26px !important;display:flex !important;flex-direction:column !important;align-items:center;gap:4px;min-width:150px;
}
#main-content .ag-stats .ag-stat .ag-stat-value,.ag-stat-value,.hp-stat-value{color:var(--kelp) !important;font-size:1.35rem !important;font-weight:800 !important;letter-spacing:0 !important}
#main-content .ag-stats .ag-stat .ag-stat-label,.ag-stat-label,.hp-stat-label{color:var(--foam-dim) !important;font-size:.72rem !important;text-transform:uppercase !important;letter-spacing:.12em !important}

/* ---- buttons ----------------------------------------------------------- */
.ag-search-box,.header-search-input{background:rgba(234,246,251,.06) !important;border:1px solid var(--foam-faint) !important;border-radius:var(--r-action) !important;color:var(--foam) !important}
.ag-search-box:focus-within{border-color:var(--kelp) !important;box-shadow:0 0 0 3px rgba(0,212,255,.18)}
#play-game-btn,.mobile-demo-play-btn,.ogc-cta,.glx-play,.sgp-cta-btn.sgp-cta-primary,.hp-hero a[href*="game-launcher"],.hp-hero a[href*="free-slots"]{
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)) !important;color:#1a1206 !important;border:0 !important;
  border-radius:var(--r-action) !important;font-weight:700 !important;
  box-shadow:0 10px 26px rgba(242,177,52,.28) !important;
  transition:transform .26s var(--ease-water),box-shadow .26s var(--ease-water),background .26s var(--ease-water) !important;
}
#play-game-btn:hover,.mobile-demo-play-btn:hover,.ogc-cta:hover,.hp-hero a[href*="game-launcher"]:hover,.hp-hero a[href*="free-slots"]:hover{
  transform:translateY(-2px);background:linear-gradient(135deg,#ffe08a,var(--brand-gold)) !important;box-shadow:0 14px 34px rgba(242,177,52,.38) !important;
}
.sgp-cta-btn,.btn-secondary-ocean{
  background:rgba(234,246,251,.06) !important;color:var(--foam) !important;
  border:1px solid rgba(234,246,251,.22) !important;border-radius:var(--r-action) !important;
  transition:border-color .26s var(--ease-water),background .26s var(--ease-water) !important;
}
.sgp-cta-btn:hover{border-color:var(--brand-gold) !important;background:rgba(255,209,102,.10) !important}
:focus-visible{outline:2px solid var(--kelp) !important;outline-offset:3px}

/* ---- game cards: one glass style --------------------------------------- */
.ogc{
  background:rgba(13,27,42,.75) !important;border:1px solid rgba(0,212,255,.14) !important;
  border-radius:var(--r-surface) !important;box-shadow:0 8px 24px rgba(6,21,39,.35) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  transition:transform .26s var(--ease-water),border-color .26s var(--ease-water),box-shadow .26s var(--ease-water) !important;
  will-change:auto !important;overflow:hidden;
}
.ogc:hover,.ogc:focus-within{transform:translateY(-4px);border-color:rgba(0,212,255,.45) !important;box-shadow:0 18px 40px rgba(6,21,39,.55) !important}
.ogc-media{border-radius:0 !important}
.ogc-img{transition:transform .5s var(--ease-water)}
.ogc:hover .ogc-img{transform:scale(1.03)}
.ogc-title{color:var(--foam) !important;font-weight:600 !important;letter-spacing:0 !important}
.ogc-provider{color:var(--foam-dim) !important}
.ogc-chip{background:rgba(234,246,251,.07) !important;border:1px solid var(--foam-faint) !important;color:var(--foam-dim) !important;border-radius:var(--r-data) !important;text-shadow:none !important}
.ogc-badge{box-shadow:none !important;text-shadow:none !important;border-radius:var(--r-data) !important;backdrop-filter:none !important}
.ogc-badge-rtp{background:rgba(0,212,255,.14) !important;color:var(--kelp) !important;border:1px solid rgba(0,212,255,.35) !important}
.ogc-badge-new{background:rgba(255,209,102,.16) !important;color:var(--sun) !important;border:1px solid rgba(255,209,102,.35) !important}
.ogc-badge-geo{background:rgba(6,21,39,.7) !important;color:var(--foam) !important;border:1px solid rgba(234,246,251,.25) !important}
.ogc-overlay{background:linear-gradient(180deg,rgba(6,21,39,0),rgba(6,21,39,.85)) !important}

/* ---- game page: play surface rises, facts become chips ----------------- */
.sgp-hero-logo-wrap{width:120px !important;height:auto !important;margin:0 auto 10px !important;box-shadow:none !important;background:none !important;border:0 !important;padding:0 !important}
.sgp-hero-logo{width:120px !important;height:auto !important;border-radius:14px !important}
.ex2-spec{margin:6px 0 10px !important}
#single-game-section table.ex2-spec-table,body div.sgp-hero div.ex2-spec table.ex2-spec-table,body div.ex2-spec table.ex2-spec-table{
  display:flex !important;border:0 !important;background:none !important;box-shadow:none !important;border-radius:0 !important;flex-wrap:wrap;justify-content:center;gap:6px 8px;
  border:0 !important;background:none !important;box-shadow:none !important;
  font-size:.9rem !important;width:auto !important;margin:0 auto !important;
}
.ex2-spec-table tbody,.ex2-spec-table tr{display:contents}
#single-game-section table.ex2-spec-table th,#single-game-section table.ex2-spec-table td,body div.ex2-spec table.ex2-spec-table th,body div.ex2-spec table.ex2-spec-table td{
  display:inline-block;border:0 !important;background:none !important;padding:0 !important;
  width:auto !important;text-align:left !important;color:var(--foam-dim) !important;font-weight:500 !important;
}
#single-game-section table.ex2-spec-table th,body div.ex2-spec table.ex2-spec-table th{padding:5px 0 5px 10px !important;width:auto !important;text-transform:none !important;font-size:.88rem !important;border-radius:var(--r-data) 0 0 var(--r-data) !important;background:rgba(234,246,251,.06) !important;border:1px solid var(--foam-faint) !important;border-right:0 !important}
#single-game-section table.ex2-spec-table td,body div.ex2-spec table.ex2-spec-table td{padding:5px 10px 5px 6px !important;width:auto !important;font-size:.88rem !important;border-radius:0 var(--r-data) var(--r-data) 0 !important;background:rgba(234,246,251,.06) !important;border:1px solid var(--foam-faint) !important;border-left:0 !important;color:var(--foam) !important;margin-right:2px}
#single-game-section table.ex2-spec-table tr:hover td,.ex2-spec-table tr:hover td{background:rgba(234,246,251,.06) !important}
.ex2-spec-table th::after{content:":"}
.sgp-meta-row{margin:6px 0 !important}
.star-rating-widget{margin:4px 0 8px !important;transform:scale(.9);transform-origin:center}
#game-wrapper{border:1px solid rgba(234,246,251,.12) !important;box-shadow:0 30px 70px rgba(6,21,39,.6) !important;background:var(--sea-deep) !important}
#game-play-overlay{background:radial-gradient(ellipse at 50% 30%,rgba(15,61,92,.9),rgba(6,21,39,.98)) !important;justify-content:flex-start !important;padding-top:clamp(20px,7vh,72px) !important}
@media (min-width:992px){.sgp-hero .sgp-meta-row,.sgp-hero > span[style*="margin-top:4px"]{display:none !important} .sgp-hero .star-rating-widget{transform:scale(.8);margin:0 !important}}
body.page-family-slot-single h1{font-size:clamp(1.7rem,1rem + 1.8vw,2.4rem) !important}

/* ---- offers: same glass, still clearly labelled ------------------------ */
.cc-card{background:rgba(234,246,251,.05) !important;border:1px solid rgba(234,246,251,.12) !important;border-radius:var(--r-surface) !important;box-shadow:none !important;backdrop-filter:none !important}
.cc-cta{border-radius:var(--r-action) !important;background:rgba(234,246,251,.08) !important;color:var(--foam) !important;border:1px solid rgba(234,246,251,.22) !important;box-shadow:none !important}
.cc-cta:hover{border-color:var(--sun) !important}
.cc-ad-badge{background:rgba(255,209,102,.18) !important;color:var(--sun) !important;border:1px solid rgba(255,209,102,.35) !important}

/* ---- surfaces and sections --------------------------------------------- */
section,.sectionPTPB,.ag-faq-section,.single-game-content{background:transparent !important}
.slm-surface,.ag-faq-inner,.premium-content-shell,.review-shell{
  background:rgba(234,246,251,.04) !important;border:1px solid rgba(234,246,251,.10) !important;border-radius:var(--r-surface) !important;box-shadow:none !important;
}
hr{border-color:var(--foam-faint) !important}
a{color:var(--kelp)}
a:hover{color:#6ae3ff}

/* ---- footer: the deep ------------------------------------------------- */
#footer{background:linear-gradient(180deg,rgba(6,21,39,0),var(--sea-deep) 120px) !important;border-top:1px solid var(--foam-faint) !important}
#footer,#footer p,#footer a,#footer li{color:var(--foam-dim) !important}
#footer a:hover{color:var(--kelp) !important}
#footer h4,#footer h5,#footer strong{color:var(--foam) !important}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width:991px){
  .ocean-water .ray{width:120vw;opacity:.35}
  .ocean-water .bubble:nth-child(n+7){display:none}
  .ag-stat,.hp-stat{padding:0 10px !important}
}

/* ---- homepage hero (inline-styled markup: ID-anchored overrides) ------- */
.hp-hero > div[style*="pointer-events:none"]{display:none !important}
#hp-hero-inner > span{
  background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important;border-radius:0 !important;
  text-transform:none !important;letter-spacing:0 !important;font-size:1rem !important;font-weight:500 !important;color:var(--foam-dim) !important;display:block !important;margin-bottom:10px !important;
}
#hp-hero-inner h1{font-weight:700 !important;letter-spacing:-.02em !important;color:var(--foam) !important;-webkit-text-fill-color:var(--foam)}
#hp-hero-inner > p{color:var(--foam-dim) !important;max-width:62ch;margin-left:auto;margin-right:auto}
#hp-hero-inner > div:first-of-type > a{
  background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)) !important;color:#1a1206 !important;border:0 !important;border-radius:var(--r-action) !important;
  box-shadow:0 10px 26px rgba(242,177,52,.28) !important;font-weight:700 !important;
  transition:transform .26s var(--ease-water),box-shadow .26s var(--ease-water),background .26s var(--ease-water) !important;
}
#hp-hero-inner > div:first-of-type > a:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ffe08a,var(--brand-gold)) !important}
#hp-hero-inner > div:first-of-type > a + a{background:rgba(234,246,251,.06) !important;color:var(--foam) !important;border:1px solid rgba(234,246,251,.25) !important;box-shadow:none !important}
#hp-hero-inner > div:first-of-type > a + a:hover{border-color:var(--brand-gold) !important;background:rgba(255,209,102,.10) !important}
#hp-hero-inner > div:last-of-type{gap:12px !important;margin-top:1.6rem !important;flex-wrap:wrap !important;justify-content:center}
#hp-hero-inner > div:last-of-type > div{
  background:rgba(0,212,255,.03) !important;border:1px solid rgba(0,212,255,.14) !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:14px 26px !important;border-radius:16px !important;display:flex !important;flex-direction:column !important;align-items:center;gap:4px;min-width:150px !important;flex:0 0 auto !important;width:auto !important;
}
#hp-hero-inner > div:last-of-type > div > span:first-child{color:var(--kelp) !important;font-size:1.35rem !important;font-weight:800 !important;display:block !important}
#hp-hero-inner > div:last-of-type > div > span:last-child{color:var(--foam-dim) !important;font-size:.72rem !important;text-transform:uppercase !important;letter-spacing:.12em !important;display:block !important}

/* ---- facts chips: label and value never separate; mobile hero tighter -- */
#single-game-section table.ex2-spec-table tr,.ex2-spec-table tr{display:inline-flex !important;margin:2px 1px !important}
@media (max-width:991px){
  .sgp-hero{padding-top:6px !important}
  .sgp-hero-logo-wrap,.sgp-hero-logo{width:96px !important}
  .sgp-hero .ex2-lead{font-size:.98rem !important;line-height:1.55 !important}
  body.page-family-slot-single h1{font-size:1.7rem !important}
  #single-game-section table.ex2-spec-table th,#single-game-section table.ex2-spec-table td{font-size:.8rem !important;padding:4px 7px !important}
}

/* ---- homepage hero: mobile spacing and stats wrapping ------------------ */
#hp-hero-inner h1 .hp-title-gold{font-size:inherit !important;font-weight:inherit !important;display:inline !important}
#hp-hero-inner > div:last-of-type{flex-wrap:wrap !important;row-gap:8px !important}
#hp-hero-inner > div:last-of-type > div{white-space:nowrap}
@media (max-width:991px){
  #hp-hero-inner{padding:1.1rem 0 0.6rem !important}
  .hp-hero{padding:8px 16px 18px !important;min-height:0 !important}
  #hp-hero-inner > div:last-of-type > div{padding:10px 16px !important;min-width:120px !important}
}

/* ---- provider hero (inline-styled) + softer header edge on phones ------- */
.swg-hero-title span{background:none !important;-webkit-background-clip:initial !important;-webkit-text-fill-color:var(--sun) !important;color:var(--sun) !important}
.swg-hero-title{color:var(--foam) !important}
.swg-hero-lead{color:var(--foam-dim) !important}
.swg-stat-grid > *{background:rgba(234,246,251,.04) !important;border:1px solid rgba(234,246,251,.10) !important;border-radius:var(--r-surface) !important;box-shadow:none !important;backdrop-filter:none !important}
.swg-stat-grid > * > *{color:var(--foam) !important;text-shadow:none !important}
@media (max-width:991px){
  body .premium-header.premium-header{box-shadow:0 1px 0 rgba(255,255,255,.10) !important}
}

/* ---- sitewide: the body already offsets for the fixed header; #main-content added a second 58px band ---- */
html body.has-premium-header.has-premium-header{padding-top:var(--header-height,70px) !important} /* beats body.page-family-*.has-premium-header{padding-top:0} rules that relied on main's old 58px */
html body.has-premium-header main#main-content,html body.has-premium-header.page-family-guides main#main-content{padding-top:6px !important}
a.skip-to-content.sr-only{position:absolute !important;height:1px !important;width:1px !important;overflow:hidden !important;margin:-1px !important;padding:0 !important}
a.skip-to-content:focus{position:fixed !important;top:12px !important;left:12px !important;height:auto !important;width:auto !important;padding:10px 14px !important;z-index:20000;background:var(--sun);color:var(--sea-deep)}

/* ---- game cards: the art is the card. Compact meta, no tracked caps, one honest button ---- */
.ogc-provider{text-transform:none !important;letter-spacing:0 !important;font-size:.8rem !important;opacity:.85}
.ogc-title{white-space:normal !important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25 !important;text-overflow:clip !important}
.ogc-chips{display:flex !important;flex-wrap:wrap;gap:4px 6px !important}
.ogc-chip{font-size:.74rem !important;padding:2px 7px !important;line-height:1.5 !important;white-space:nowrap}
.ogc-cta{letter-spacing:0 !important;text-transform:none !important;font-size:.92rem !important;min-height:42px !important;padding:8px 14px !important;line-height:1.2 !important}
.ogc-cta::before,.ogc-cta::after{display:none !important}
.ogc-cta{background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)) !important;color:#1a1206 !important;border:0 !important;box-shadow:0 6px 16px rgba(242,177,52,.25) !important;text-shadow:none !important}
@media (max-width:575px){
  .ogc-media{aspect-ratio:4/3 !important}
  .ogc-img{aspect-ratio:4/3 !important;height:100% !important;object-fit:cover !important}
  .ogc-body{padding:9px 9px 10px !important;gap:6px !important}
  .ogc-title{font-size:.95rem !important}
  .ogc-provider{font-size:.74rem !important;margin:0 !important}
  .ogc-chip:nth-child(n+3){display:none !important}
  .ogc-cta{min-height:38px !important;font-size:.86rem !important;padding:6px 10px !important;margin-top:4px !important}
  .ogc-cta svg,.ogc-cta i{width:12px;height:12px;font-size:.8rem}
}
/* dynamic-page hero stat boxes: one quiet line like every other hero */
.dynamic-hero .hero-stats,.hero-stats,.dynamic-hero .stat-grid,.dynamic-hero .dynamic-stats{display:flex !important;flex-wrap:wrap;justify-content:center;gap:8px 18px !important}
.hero-stats .stat-item,.dynamic-hero .stat-item,.dynamic-hero .stat,.dynamic-hero .stat-box,.dynamic-hero .dynamic-stat{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-width:0 !important;display:flex;gap:6px;align-items:baseline;width:auto !important;flex:0 0 auto !important}
.hero-stats .stat-number,.dynamic-hero .stat-number,.dynamic-hero .stat-value{font-size:1.05rem !important;color:var(--foam) !important}
.hero-stats .stat-label,.dynamic-hero .stat-label{font-size:.85rem !important;text-transform:none !important;letter-spacing:0 !important;color:var(--foam-dim) !important}

/* ---- slot page: the section + hero wrapper carried 136px of header-clearing padding; the body offset now does that ---- */
html body.page-family-slot-single #single-game-section{padding-top:10px !important;margin-top:0 !important;top:0 !important} /* the template pulled the section up 62px under the header */
html body.page-family-slot-single #single-game-section > div{padding-top:6px !important;min-height:0 !important}
html body.page-family-slot-single .sgp-hero{padding-top:8px !important}

/* ---- card button: one flat gold pill, label inherits (the inner span carried its own cyan caps + box) ---- */
.ogc-cta *,.ogc-cta > span,.ogc-cta > i{background:none !important;color:inherit !important;letter-spacing:0 !important;text-transform:none !important;box-shadow:none !important;border:0 !important;text-shadow:none !important;font-size:inherit !important;padding:0 !important;margin:0 !important;display:inline !important}
.ogc-cta{display:flex !important;align-items:center;justify-content:center;gap:6px}
/* desktop media rule in page-game.min.css re-applies 90px; win on specificity at every width */
html body.page-family-slot-single main#main-content section#single-game-section{padding-top:10px !important;margin-top:0 !important;top:0 !important}
html body.page-family-slot-single main#main-content section#single-game-section > div{padding-top:6px !important;min-height:0 !important}
@media (min-width:992px){.hp-hero{min-height:0 !important;padding:48px 24px 36px !important} #hp-hero-inner{padding-bottom:0 !important}}

/* ---- 2 Sep: body glow from page sheets painted OVER the water layer (body bg paints above z-index:-1) -> teal wash. Kill it everywhere. */
html body[class][class],html body{background-color:transparent !important;background-image:none !important}

/* ---- header menu: compact, scannable dropdowns (structure unchanged, header stays red) ---- */
.premium-header .dropdown-menu{max-height:min(74vh,760px) !important;overflow:auto !important;padding:14px 16px 16px !important;border-radius:0 0 16px 16px !important;box-shadow:0 24px 48px rgba(0,0,0,.45) !important}
.premium-header .dropdown-header{margin:0 0 8px !important;padding:0 6px 8px !important;border-bottom:1px solid rgba(255,255,255,.12) !important}
.premium-header .dropdown-title{font-size:.72rem !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--sun) !important}
.premium-header .view-all-link{background:transparent !important;border:1px solid rgba(255,255,255,.28) !important;padding:5px 12px !important;font-size:.76rem !important;border-radius:999px !important;color:#fff !important}
.premium-header .view-all-link:hover{background:rgba(255,255,255,.12) !important}
.premium-header .dropdown-grid-2col{gap:2px 12px !important}
.premium-header .dropdown-section-links{gap:2px !important}
.premium-header .dropdown-section-grid{gap:6px 18px !important}
.premium-header .dropdown-section-header{margin:6px 0 4px !important;padding:0 6px !important}
.premium-header .dropdown-section-title{font-size:.66rem !important;letter-spacing:.12em !important;color:rgba(255,255,255,.7) !important}
.premium-header .dropdown-item{padding:7px 10px !important;min-height:0 !important;border:0 !important;background:transparent !important;border-radius:8px !important;font-size:.9rem !important;font-weight:500 !important;line-height:1.3 !important;box-shadow:none !important}
.premium-header .dropdown-item:hover,.premium-header .dropdown-item:focus-visible{background:rgba(255,255,255,.10) !important;color:#fff !important;transform:none !important}
/* search: a visible pill that says what it does (same button, same JS) */
@media(min-width:1200px){
  .premium-header #headerSearchBtn{width:auto !important;height:38px !important;padding:0 14px 0 12px !important;border-radius:999px !important;gap:8px !important;background:rgba(0,0,0,.22) !important;border:1px solid rgba(255,255,255,.2) !important;color:rgba(255,255,255,.9) !important}
  .premium-header #headerSearchBtn::after{content:"Search slots";font-size:.84rem;font-weight:600;letter-spacing:0}
  .premium-header #headerSearchBtn:hover{background:rgba(0,0,0,.34) !important;border-color:rgba(255,255,255,.45) !important}
}
/* mobile drawer: breathing room and 48px targets */
.mobile-drawer .drawer-content{gap:8px !important}
.mobile-drawer .drawer-link,.mobile-drawer .accordion-trigger{min-height:48px !important}
.mobile-drawer .accordion-link{min-height:44px !important}

/* ---- offer cards: the casino logo was clipped (global img{height:auto} beat .cc-logo img{height:100%}) ---- */
.cc-card .cc-logo{width:96px !important;height:52px !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:10px !important;overflow:hidden !important;display:flex !important;align-items:center;justify-content:center}
.cc-card .cc-logo img{width:100% !important;height:100% !important;max-height:100% !important;object-fit:contain !important;padding:5px !important;box-sizing:border-box !important;display:block !important}
.sidebar-casino-logo{max-height:60px !important;width:auto !important;height:auto !important;object-fit:contain !important}

/* ---- F41: drawer search + demo fullscreen ---- */
.mobile-drawer .drawer-search{display:flex !important;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px 14px;margin:0 0 6px;border-radius:12px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.28);color:#fff;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.mobile-drawer .drawer-search:hover,.mobile-drawer .drawer-search:focus-visible{background:rgba(0,212,255,.16);border-color:rgba(0,212,255,.5)}
.game-iframe-wrapper{position:relative}
.sgp-fs-btn{position:absolute;right:12px;top:12px;z-index:6;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(6,13,23,.72);border:1px solid rgba(234,246,251,.25);color:#fff;font:600 .78rem/1 inherit;font-family:inherit;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sgp-fs-btn:hover,.sgp-fs-btn:focus-visible{background:rgba(0,212,255,.25);border-color:rgba(0,212,255,.6)}
.sgp-fs-btn[hidden]{display:none}
.game-iframe-wrapper:fullscreen,.game-iframe-wrapper.is-fullscreen{aspect-ratio:auto !important;border-radius:0 !important;width:100vw;height:100vh;background:#000 !important}
.game-iframe-wrapper:fullscreen #game-iframe-container iframe{width:100%;height:100%}
@media(max-width:767px){.sgp-fs-btn{top:8px;right:8px;padding:6px 10px}}
/* ==== src/layout-inline-b.css ==== */
body.route-frontend-game.has-premium-header,body.page-family-slot-single.has-premium-header{padding-top:0!important;margin-top:0!important;}
/* ==== src/layout-inline-c.css ==== */
/* === Z-INDEX SCALE (replaces ad-hoc max-int values for new code) === */
:root {
    --z-base: 0;
    --z-overlay: 10;
    --z-sticky: 100;
    --z-bottom-nav: 9997;
    --z-cookie: 99999;
    --z-modal-backdrop: 2147483646;
    --z-modal: 2147483647;
    --z-toast: 2147483648;
}
/* === SAFE-AREA: iPhone notch padding for fixed header on landscape === */
.premium-header {
    padding-top: env(safe-area-inset-top, 0px);
}
@supports (padding-top: constant(safe-area-inset-top)) {
    .premium-header { padding-top: constant(safe-area-inset-top, 0px); }
}
/* === FOOTER ACCORDION (mobile only) === */
@media (max-width: 768px) {
    /* Footer columns become collapsible accordions on mobile */
    .slm-footer details.slm-footer-section {
        border-top: 1px solid rgba(255,255,255,0.08);
        margin: 0;
        padding: 0;
    }
    .slm-footer details.slm-footer-section summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 16px;
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
    }
    .slm-footer details.slm-footer-section summary::-webkit-details-marker { display: none; }
    .slm-footer details.slm-footer-section summary::after {
        content: '+';
        font-size: 1.2rem;
        font-weight: 400;
        color: rgba(255,255,255,0.6);
        transition: transform 0.2s;
    }
    
    /* 2026-06-10: accordion disabled — sections always open on mobile (toggle felt broken) */
    .slm-footer details.slm-footer-section summary { pointer-events: none; cursor: default; }
    .slm-footer details.slm-footer-section summary::after { display: none !important; }
    .slm-footer details.slm-footer-section > *:not(summary) { display: block !important; }
    .slm-footer details.slm-footer-section[open] summary::after {
        content: '‘2'; /* minus sign */
    }
    .slm-footer details.slm-footer-section > *:not(summary) {
        padding: 0 16px 14px;
    }
}
/* === TAP HIGHLIGHT === */
* { -webkit-tap-highlight-color: transparent; }
/* === ICON BUTTON HELPER (44x44 minimum for SVG icons) === */
.slm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
/* ==== src/layout-inline-d.css ==== */
/* Mobile: keep content comparison tables tabular + horizontally scrollable (were stacking into giant unreadable blocks). 2026-07-03 */
@media(max-width:768px){
.lp-prose table,.ag-content-card table,.dynamic-content-section table{display:block!important;width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.lp-prose table thead,.ag-content-card table thead,.dynamic-content-section table thead{display:table-header-group!important}
.lp-prose table tbody,.ag-content-card table tbody,.dynamic-content-section table tbody{display:table-row-group!important}
.lp-prose table tr,.ag-content-card table tr,.dynamic-content-section table tr{display:table-row!important}
.lp-prose table td,.lp-prose table th,.ag-content-card table td,.ag-content-card table th,.dynamic-content-section table td,.dynamic-content-section table th{display:table-cell!important;white-space:nowrap!important}
}
/* ==== src/layout-inline-e.css ==== */
/* grid-align fix 20260719: cap ocean grids at 4 cols so 12-card rows stay complete */
@media(min-width:1200px){.ocean-game-grid,.ocean-games-grid,.fresh-release-grid,body.page-family-slots .ocean-game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}