/* =============================================
   UI Slots Review Widget — CSS
   Prefix: sr-
   ============================================= */

/* Google Fonts + Font Awesome enqueued via PHP — no @import needed */

/* ── Design Tokens ── */
.sr-wrap {
    --sr-font: 'DM Sans', system-ui, sans-serif;

    /* Purple system */
    --sr-purple-500: #7c3aed;
    --sr-purple-600: #6d28d9;
    --sr-purple-700: #5b21b6;
    --sr-purple-muted: rgba(124,58,237,0.08);
    --sr-gradient-purple: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #a855f7 100%);
    --sr-gradient-hero: linear-gradient(135deg, #6d28d9 0%, #9333ea 40%, #ec4899 100%);

    /* Green CTA */
    --sr-green-500: #22c55e;
    --sr-green-600: #16a34a;
    --sr-green-hover: #15803d;

    /* Pink / Orange accent */
    --sr-pink-500: #ec4899;
    --sr-orange-500: #f97316;
    --sr-gradient-hot: linear-gradient(135deg, #ec4899, #f97316);

    /* Surfaces */
    --sr-white: #ffffff;
    --sr-gray-50: #f8fafc;
    --sr-gray-100: #f1f5f9;
    --sr-gray-200: #e2e8f0;
    --sr-gray-300: #cbd5e1;
    --sr-gray-400: #94a3b8;
    --sr-gray-500: #64748b;
    --sr-gray-800: #1e293b;
    --sr-gray-900: #0f172a;

    /* Gold */
    --sr-gold: #f5a623;

    /* Radii */
    --sr-radius-sm: 6px;
    --sr-radius-md: 10px;
    --sr-radius-lg: 14px;
    --sr-radius-xl: 20px;
    --sr-radius-full: 50px;

    /* Layout */
    --sr-container: 1300px;
    --sr-header-h: 60px;

    font-family: var(--sr-font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--sr-gray-500);
    background: #f0eef5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

.sr-wrap *, .sr-wrap *::before, .sr-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sr-wrap a { text-decoration: none; color: inherit; }
.sr-wrap a.sr-btn-play,
.sr-wrap a.sr-btn-review-cta,
.sr-wrap a.sr-btn-header-cta,
.sr-wrap a.sr-demo-offer-btn,
.sr-wrap a.sr-wpi-btn,
.sr-wrap a.sr-offer-btn { color: #fff; }
.sr-wrap ul { list-style: none; }
.sr-wrap button, .sr-wrap input, .sr-wrap select { font-family: inherit; border: none; outline: none; background: none; }
.sr-wrap button { cursor: pointer; }
.sr-wrap img { display: block; max-width: 100%; }

.sr-container {
    max-width: var(--sr-container);
    margin: 0 auto;
    padding: 0 20px;
}
.sr-container-last { padding-bottom: 60px; }

/* === FULL WIDTH OVERRIDE — Elementor parent resets === */
.elementor-section:has(.elementor-widget-slotsreview),
.elementor-section.elementor-section-full_width:has(.elementor-widget-slotsreview) {
    padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important;
}
.elementor-element:has(.elementor-widget-slotsreview),
.e-con:has(.elementor-widget-slotsreview) {
    padding: 0 !important; margin: 0 !important;
    --padding-top: 0px !important; --padding-right: 0px !important;
    --padding-bottom: 0px !important; --padding-left: 0px !important;
    max-width: 100% !important; width: 100% !important;
}
.elementor-column:has(.elementor-widget-slotsreview),
.elementor-column:has(.elementor-widget-slotsreview) > .elementor-widget-wrap {
    padding: 0 !important; margin: 0 !important;
}
.elementor-widget-slotsreview { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
.elementor-widget-slotsreview > .elementor-widget-container { margin: 0 !important; padding: 0 !important; width: 100% !important; }


/* ==============================
   1. HEADER
   ============================== */
.sr-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--sr-header-h);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(124,58,237,0.06);
    box-shadow: 0 1px 12px rgba(124,58,237,0.04);
}
.sr-header-inner { display: flex; align-items: center; height: 100%; gap: 24px; }
.sr-logo { display: flex; align-items: center; gap: 8px; font-family: var(--sr-font); font-weight: 800; font-size: 1.2rem; color: var(--sr-gray-900); letter-spacing: -0.03em; white-space: nowrap; }
.sr-logo-icon { width: 30px; height: 30px; background: var(--sr-gradient-purple); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; }
.sr-header-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.sr-header-nav a { padding: 6px 14px; font-size: 0.9375rem; font-weight: 500; color: var(--sr-gray-500); border-radius: var(--sr-radius-sm); transition: color .15s, background .15s; }
.sr-header-nav a:hover { color: var(--sr-gray-900); background: var(--sr-gray-100); }
.sr-header-nav a.active { color: var(--sr-purple-600); background: var(--sr-purple-muted); font-weight: 600; }
.sr-header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sr-btn-header-cta { padding: 8px 20px; background: var(--sr-green-500); color: #fff; font-size: 0.9375rem; font-weight: 700; border-radius: var(--sr-radius-full); transition: background .15s; }
.sr-btn-header-cta:hover { background: var(--sr-green-600); }
.sr-hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; }
.sr-hamburger span { height: 2px; width: 22px; background: var(--sr-gray-800); border-radius: 2px; }

/* ==============================
   2. BREADCRUMB
   ============================== */
.sr-breadcrumb { padding: 16px 0; font-size: 0.8125rem; color: var(--sr-gray-400); }
.sr-breadcrumb a { color: var(--sr-gray-500); transition: color .12s; }
.sr-breadcrumb a:hover { color: var(--sr-purple-600); }
.sr-breadcrumb span { color: var(--sr-gray-400); margin: 0 6px; }


/* ==============================
   3. SLOT HERO — Full Width Premium
   ============================== */
.sr-slot-hero-wrap {
    background: var(--sr-gradient-hero);
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    padding-bottom: 80px;
}
.sr-slot-hero-wrap::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 160px;
    background: linear-gradient(to bottom, transparent, #f0eef5);
    pointer-events: none;
}
.sr-slot-hero-wrap::before {
    content: '';
    position: absolute; top: -30%; right: -5%;
    width: 700px; height: 700px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    pointer-events: none;
}
.sr-slot-hero {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 48px;
    align-items: center;
    padding: 56px 0;
}

/* Badge */
.sr-slot-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--sr-radius-full);
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 20px;
}
.sr-slot-hero-badge i { font-size: 0.625rem; }

/* Title */
.sr-slot-hero h1 {
    font-family: var(--sr-font);
    font-size: 3.25rem; font-weight: 800;
    color: #fff; line-height: 1.06;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

/* Provider */
.sr-slot-hero-provider {
    font-size: 0.9375rem; color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}
.sr-slot-hero-provider-tag {
    padding: 2px 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.8);
}

/* Description */
.sr-slot-hero-desc {
    font-size: 1rem; color: rgba(255,255,255,0.8);
    line-height: 1.7; margin-bottom: 24px; max-width: 540px;
}

/* Stats */
.sr-slot-hero-stats { display: flex; gap: 10px; margin-bottom: 24px; }
.sr-stat-box {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--sr-radius-md);
    padding: 12px 18px; text-align: center; flex: 1;
}
.sr-stat-box-label {
    font-size: 0.5625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45); margin-bottom: 4px;
}
.sr-stat-box-value { font-size: 1.25rem; font-weight: 800; color: #fff; }

/* CTAs */
.sr-slot-hero-ctas { display: flex; gap: 10px; margin-bottom: 28px; }
.sr-btn-play {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px;
    background: var(--sr-green-500); color: #fff;
    font-weight: 700; font-size: 0.9375rem;
    border-radius: var(--sr-radius-full);
    transition: background .15s, transform .1s;
    box-shadow: 0 3px 14px rgba(34,197,94,0.3);
}
.sr-btn-play:hover { background: var(--sr-green-600); transform: translateY(-1px); }
.sr-btn-review-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; font-weight: 600; font-size: 0.9375rem;
    border-radius: var(--sr-radius-full);
    transition: background .15s, border-color .15s;
}
.sr-btn-review-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

/* Meta row */
.sr-slot-hero-meta { display: flex; gap: 20px; font-size: 0.75rem; color: rgba(255,255,255,0.45); }
.sr-slot-hero-meta span { display: flex; align-items: center; gap: 5px; }
.sr-slot-hero-meta i { font-size: 0.625rem; color: rgba(255,255,255,0.3); }
.sr-slot-hero-meta strong { color: rgba(255,255,255,0.7); font-weight: 600; }

/* Hero Right — Game Card */
.sr-slot-hero-right { position: relative; z-index: 1; }
.sr-hero-game-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--sr-radius-xl);
    overflow: hidden;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sr-hero-game-img {
    height: 220px;
    background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; color: rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sr-hero-game-body { padding: 20px; }
.sr-hero-game-rating {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.sr-hero-game-score {
    font-family: var(--sr-font); font-size: 2rem; font-weight: 800;
    color: #fff; letter-spacing: -0.03em;
}
.sr-hero-game-score-max { font-size: 0.875rem; color: rgba(255,255,255,0.35); font-weight: 500; }
.sr-hero-game-score-label {
    font-size: 0.625rem; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.sr-hero-game-stars { display: flex; gap: 2px; color: var(--sr-gold); font-size: 0.75rem; }
.sr-hero-game-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sr-hero-game-detail {
    background: rgba(255,255,255,0.06);
    border-radius: var(--sr-radius-sm);
    padding: 10px 12px;
}
.sr-hero-game-detail-label {
    font-size: 0.5625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.35); margin-bottom: 2px;
}
.sr-hero-game-detail-value { font-size: 0.875rem; font-weight: 700; color: #fff; }


/* ==============================
   4. DEMO PLAYER
   ============================== */
.sr-demo-section {
    position: relative; margin-top: -56px; margin-bottom: 48px; z-index: 2;
}
.sr-demo-wrapper {
    background: #13132a; border: none; border-radius: 24px; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(124,58,237,0.06);
}

/* Top Bar */
.sr-demo-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sr-demo-top-inner {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 20px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 12px; flex-wrap: wrap;
}
.sr-demo-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--sr-font); font-size: 0.875rem; font-weight: 700;
    color: #fff; letter-spacing: -0.01em;
}
.sr-demo-title i {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sr-gradient-purple); border-radius: 8px;
    color: #fff; font-size: 0.6875rem;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

/* Tabs */
.sr-demo-tabs {
    display: flex;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--sr-radius-full); padding: 3px;
}
.sr-demo-tab {
    padding: 7px 18px; font-size: 0.6875rem; font-weight: 600;
    color: rgba(255,255,255,0.45); border-radius: var(--sr-radius-full);
    cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
    display: flex; align-items: center; gap: 6px;
}
.sr-demo-tab.active {
    background: var(--sr-gradient-purple); color: #fff;
    box-shadow: 0 2px 10px rgba(124,58,237,0.3);
}
.sr-demo-tab:not(.active):hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
.sr-demo-tab i { font-size: 0.5625rem; }

/* Info Bar */
.sr-demo-info-bar { display: flex; align-items: center; gap: 14px; font-size: 0.6875rem; color: rgba(255,255,255,0.35); font-weight: 500; }
.sr-demo-info-bar span { display: flex; align-items: center; gap: 4px; }
.sr-demo-info-bar i { color: rgba(255,255,255,0.2); font-size: 0.5625rem; }
.sr-demo-info-bar strong { color: rgba(255,255,255,0.7); }

/* Player Area */
.sr-demo-player { position: relative; background: #0f0f1e; overflow: hidden; }
.sr-demo-player iframe { width: 100%; height: 560px; border: none; display: block; }
.sr-demo-player-placeholder {
    width: 100%; height: 560px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    color: #64748b;
    background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(124,58,237,0.06) 0%, transparent 100%), #0f0f1e;
}
.sr-demo-play-btn {
    width: 84px; height: 84px;
    background: var(--sr-gradient-purple); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.75rem; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 6px 30px rgba(124,58,237,0.4);
    position: relative;
}
.sr-demo-play-btn::after {
    content: '';
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(124,58,237,0.2);
    animation: sr-playPulse 2s ease-in-out infinite;
}
@keyframes sr-playPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.4; }
}
.sr-demo-play-btn:hover { transform: scale(1.08); box-shadow: 0 8px 40px rgba(124,58,237,0.5); }
.sr-demo-play-label { font-family: var(--sr-font); font-size: 1rem; font-weight: 700; color: #cbd5e1; letter-spacing: -0.01em; }
.sr-demo-play-sub { font-size: 0.75rem; color: #475569; }

/* Fullscreen Button */
.sr-demo-fs-btn {
    position: absolute; top: 16px; right: 16px; z-index: 5;
    width: 42px; height: 42px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.8); font-size: 0.875rem;
    cursor: pointer; transition: background .15s, transform .15s, color .15s;
}
.sr-demo-fs-btn:hover { background: var(--sr-purple-600); color: #fff; transform: scale(1.06); border-color: var(--sr-purple-500); }

/* Fullscreen mode */
.sr-demo-player:fullscreen { background: #000; }
.sr-demo-player:fullscreen iframe { width: 100%; height: 100%; }
.sr-demo-player:fullscreen .sr-demo-player-placeholder { height: 100%; }
.sr-demo-player:-webkit-full-screen { background: #000; }
.sr-demo-player:-webkit-full-screen iframe { width: 100%; height: 100%; }
.sr-demo-player:-webkit-full-screen .sr-demo-player-placeholder { height: 100%; }

/* Offers Strip */
.sr-demo-offers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sr-demo-offer {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sr-radius-lg);
    transition: background .15s, border-color .2s, transform .2s, box-shadow .2s;
    position: relative; overflow: hidden;
}
.sr-demo-offer::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(236,72,153,0.04));
    opacity: 0; transition: opacity .2s; pointer-events: none;
}
.sr-demo-offer:hover { background: rgba(255,255,255,0.08); border-color: rgba(124,58,237,0.3); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.sr-demo-offer:hover::before { opacity: 1; }

.sr-demo-offer-icon {
    width: 44px; height: 44px;
    border-radius: var(--sr-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.sr-demo-offer-icon.purple { background: linear-gradient(135deg, var(--sr-purple-600), var(--sr-purple-500)); color: #fff; box-shadow: 0 3px 10px rgba(124,58,237,0.3); }
.sr-demo-offer-icon.pink   { background: linear-gradient(135deg, #db2777, var(--sr-pink-500)); color: #fff; box-shadow: 0 3px 10px rgba(236,72,153,0.3); }
.sr-demo-offer-icon.green  { background: linear-gradient(135deg, var(--sr-green-600), var(--sr-green-500)); color: #fff; box-shadow: 0 3px 10px rgba(34,197,94,0.3); }
.sr-demo-offer-icon.gold   { background: linear-gradient(135deg, #d97706, var(--sr-gold)); color: #fff; box-shadow: 0 3px 10px rgba(245,166,35,0.3); }
.sr-demo-offer-icon.cyan   { background: linear-gradient(135deg, #0891b2, #06b6d4); color: #fff; box-shadow: 0 3px 10px rgba(6,182,212,0.3); }

.sr-demo-offer-info { flex: 1; min-width: 0; }
.sr-demo-offer-name { font-family: var(--sr-font); font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sr-demo-offer-bonus { font-size: 0.875rem; color: rgba(255,255,255,0.5); font-weight: 500; margin-top: 2px; }
.sr-demo-offer-bonus strong { color: var(--sr-gold); font-weight: 700; }

.sr-demo-offer-btn {
    padding: 10px 22px; background: var(--sr-green-500); color: #fff;
    font-size: 0.875rem; font-weight: 700; border-radius: var(--sr-radius-full);
    white-space: nowrap; transition: background .12s, transform .1s, box-shadow .2s;
    flex-shrink: 0; box-shadow: 0 2px 10px rgba(34,197,94,0.25);
    display: inline-flex; align-items: center; gap: 6px;
}
.sr-demo-offer-btn:hover { background: var(--sr-green-600); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(34,197,94,0.35); }


/* ==============================
   CONTENT GRID (main + sidebar)
   ============================== */
.sr-content-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}
.sr-content-main { min-width: 0; }
.sr-sidebar { display: flex; flex-direction: column; gap: 20px; }


/* ==============================
   5. EXPERT REVIEW + Pros/Cons
   ============================== */
.sr-content-card {
    background: var(--sr-white); border: none;
    border-radius: 20px; padding: 36px; margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 8px 32px rgba(124,58,237,0.03);
}
.sr-content-card h2 {
    font-family: var(--sr-font); font-size: 1.5rem; font-weight: 700;
    color: var(--sr-gray-900); letter-spacing: -0.02em;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 2px solid var(--sr-gray-100);
    display: flex; align-items: center; gap: 10px;
}
.sr-content-card h2 i {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sr-purple-muted); border-radius: 10px;
    color: var(--sr-purple-500); font-size: 0.9375rem;
}
.sr-content-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--sr-gray-800); margin: 20px 0 8px; }

/* Review Body — WYSIWYG content */
.sr-review-body p { color: #5a6578; margin-bottom: 16px; line-height: 1.8; font-size: 0.9375rem; }
.sr-review-body p:last-child { margin-bottom: 0; }
.sr-review-body h3 { font-size: 1.0625rem; font-weight: 700; color: var(--sr-gray-800); margin: 20px 0 8px; }

/* Pros & Cons */
.sr-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sr-pros, .sr-cons { border-radius: 16px; padding: 22px 24px; }
.sr-pros { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 1px solid rgba(34,197,94,0.12); }
.sr-cons { background: linear-gradient(135deg, #fef2f2, #fff1f2); border: 1px solid rgba(239,68,68,0.1); }
.sr-pros h4, .sr-cons h4 {
    font-size: 0.8125rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.sr-pros h4 { color: var(--sr-green-600); }
.sr-cons h4 { color: #dc2626; }
.sr-pros li, .sr-cons li {
    font-size: 1rem; color: var(--sr-gray-500);
    padding: 4px 0; display: flex; align-items: flex-start; gap: 8px;
}
.sr-pros li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.625rem; color: var(--sr-green-500); margin-top: 5px; flex-shrink: 0;
}
.sr-cons li::before {
    content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.625rem; color: #ef4444; margin-top: 5px; flex-shrink: 0;
}


/* ==============================
   6. RATING BREAKDOWN
   ============================== */
.sr-rating-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.sr-rating-item {
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.08);
    border-radius: 14px; padding: 16px 18px;
}
.sr-rating-item-label {
    font-size: 0.8125rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--sr-gray-400); margin-bottom: 6px;
}
.sr-rating-item-bar { height: 6px; background: var(--sr-gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.sr-rating-item-fill { height: 100%; border-radius: 3px; background: var(--sr-gradient-purple); transition: width 1.2s cubic-bezier(0.4,0,0.2,1); }
.sr-rating-fill-highlight { background: var(--sr-gradient-hot); }
.sr-rating-item-score { font-size: 0.9375rem; font-weight: 700; color: var(--sr-purple-600); }
.sr-rating-score-highlight { color: var(--sr-pink-500); }


/* ==============================
   7. BONUS FEATURES
   ============================== */
.sr-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.sr-feature-item {
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.07);
    border-radius: 14px; padding: 20px 16px; text-align: center;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sr-feature-item:hover { border-color: rgba(124,58,237,0.2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.06); }
.sr-feature-item i { font-size: 1.25rem; color: var(--sr-purple-500); margin-bottom: 8px; display: block; }
.sr-feature-item-name { font-size: 0.9375rem; font-weight: 600; color: var(--sr-gray-800); margin-bottom: 2px; }
.sr-feature-item-desc { font-size: 0.8125rem; color: var(--sr-gray-400); }


/* ==============================
   SIDEBAR
   ============================== */
.sr-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--sr-header-h) + 20px); }

/* 8. Quick Info */
.sr-quick-info {
    background: var(--sr-white); border: none; border-radius: 20px; padding: 24px;
    box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 8px 32px rgba(124,58,237,0.03);
}
.sr-quick-info h3 { font-size: 0.9375rem; font-weight: 700; color: var(--sr-gray-900); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.sr-quick-info h3 i { color: var(--sr-purple-500); font-size: 0.875rem; }
.sr-qi-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(124,58,237,0.05); font-size: 0.9375rem;
}
.sr-qi-row:last-child { border-bottom: none; }
.sr-qi-label { color: var(--sr-gray-400); font-weight: 500; }
.sr-qi-value { color: var(--sr-gray-800); font-weight: 600; }
.sr-qi-stars { color: var(--sr-gold); font-size: 0.6875rem; margin-right: 4px; }

/* 9. Where to Play */
.sr-where-play {
    background: var(--sr-white); border: none; border-radius: 20px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 8px 32px rgba(124,58,237,0.03);
}
.sr-where-play-header {
    padding: 16px 20px; background: var(--sr-gradient-purple); color: #fff;
    font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.sr-where-play-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.sr-wpi-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06); border-radius: 14px;
    transition: border-color .15s, box-shadow .2s, transform .2s;
}
.sr-wpi-card:hover { border-color: rgba(124,58,237,0.18); box-shadow: 0 4px 14px rgba(124,58,237,0.06); transform: translateY(-1px); }
.sr-wpi-rank {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-family: var(--sr-font); font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.sr-wpi-rank-1 { background: var(--sr-gradient-purple); color: #fff; }
.sr-wpi-rank-2 { background: linear-gradient(135deg, var(--sr-pink-500), #f97316); color: #fff; }
.sr-wpi-rank-3 { background: linear-gradient(135deg, #0284c7, #06b6d4); color: #fff; }
.sr-wpi-rank-4 { background: var(--sr-gray-200); color: var(--sr-gray-500); }
.sr-wpi-info { flex: 1; min-width: 0; }
.sr-wpi-name { font-family: var(--sr-font); font-size: 0.875rem; font-weight: 700; color: var(--sr-gray-900); }
.sr-wpi-bonus { font-size: 0.8125rem; color: var(--sr-purple-600); font-weight: 600; margin-top: 1px; }
.sr-wpi-rating { font-family: var(--sr-font); font-size: 0.8125rem; font-weight: 800; color: var(--sr-gold); display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.sr-wpi-rating i { font-size: 0.5625rem; }
.sr-wpi-btn {
    padding: 8px 16px; background: var(--sr-green-500); color: #fff;
    font-size: 0.8125rem; font-weight: 700; border-radius: var(--sr-radius-full);
    white-space: nowrap; transition: background .12s, transform .1s; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(34,197,94,0.2);
}
.sr-wpi-btn:hover { background: var(--sr-green-600); transform: translateY(-1px); }

/* 10. Exclusive Offer Card */
.sr-offer-card {
    background: #1e1e2e; border-radius: 20px; overflow: hidden; border: none;
    box-shadow: 0 4px 24px rgba(30,30,46,0.2);
}
.sr-offer-card-header { background: var(--sr-gradient-purple); padding: 16px 20px; text-align: center; }
.sr-offer-card-header h4 {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.7); margin-bottom: 4px;
}
.sr-offer-name { font-size: 1.125rem; font-weight: 800; color: #fff; }
.sr-offer-card-body { padding: 20px; }
.sr-offer-bonus { text-align: center; margin-bottom: 16px; }
.sr-offer-bonus-text {
    font-size: 1.5rem; font-weight: 900;
    background: var(--sr-gradient-hot);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sr-offer-bonus-sub { font-size: 0.75rem; color: var(--sr-gray-400); margin-top: 2px; }
.sr-offer-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sr-offer-feat { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--sr-gray-300); }
.sr-offer-feat i { color: var(--sr-green-500); font-size: 0.625rem; width: 14px; text-align: center; }
.sr-offer-btn {
    display: block; width: 100%; padding: 12px; background: var(--sr-green-500); color: #fff;
    font-weight: 700; font-size: 1rem; border-radius: var(--sr-radius-md); text-align: center;
    transition: background .15s; margin-bottom: 8px;
}
.sr-offer-btn:hover { background: var(--sr-green-600); }
.sr-offer-tc { text-align: center; font-size: 0.6875rem; color: var(--sr-gray-500); }


/* ==============================
   11. FRESH SLOT REVIEWS (Sidebar)
   ============================== */
.sr-fresh-reviews {
    background: var(--sr-white); border: none; border-radius: 20px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 8px 32px rgba(124,58,237,0.03);
}
.sr-fresh-reviews-header {
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--sr-purple-600), var(--sr-pink-500));
    display: flex; align-items: center; justify-content: space-between;
}
.sr-fresh-reviews-title { font-family: var(--sr-font); font-size: 0.9375rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.sr-fresh-reviews-badge { padding: 4px 12px; background: rgba(255,255,255,0.2); border-radius: var(--sr-radius-full); font-size: 0.6875rem; font-weight: 700; color: #fff; }

.sr-fresh-grid { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.sr-fresh-card {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06); border-radius: 14px;
    cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .2s;
}
.sr-fresh-card:hover { border-color: rgba(124,58,237,0.18); box-shadow: 0 4px 14px rgba(124,58,237,0.06); transform: translateY(-1px); }

.sr-fresh-card-img {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; color: rgba(255,255,255,0.25); flex-shrink: 0;
    position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sr-fresh-card-new {
    position: absolute; top: -3px; right: -3px; width: 16px; height: 16px;
    background: var(--sr-green-500); border-radius: 50%; border: 2px solid var(--sr-white);
    display: flex; align-items: center; justify-content: center; font-size: 0.4375rem; color: #fff;
}
.sr-fresh-card-info { flex: 1; min-width: 0; }
.sr-fresh-card-name {
    font-family: var(--sr-font); font-size: 0.875rem; font-weight: 700; color: var(--sr-gray-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-fresh-card-meta { font-size: 0.75rem; color: var(--sr-gray-400); margin-top: 2px; }
.sr-fresh-card-meta strong { color: var(--sr-gray-500); }
.sr-fresh-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sr-fresh-card-rtp { font-family: var(--sr-font); font-size: 0.875rem; font-weight: 800; color: var(--sr-purple-600); }
.sr-fresh-card-tag { padding: 3px 8px; font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 5px; color: #fff; }
.sr-fresh-tag-new { background: var(--sr-green-500); }
.sr-fresh-tag-hot { background: var(--sr-pink-500); }
.sr-fresh-tag-updated { background: var(--sr-purple-500); }

.sr-fresh-reviews-footer { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sr-fresh-page-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.1); color: var(--sr-purple-600); font-size: 0.8125rem;
    cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.sr-fresh-page-btn:hover { background: var(--sr-purple-muted); border-color: rgba(124,58,237,0.25); transform: scale(1.05); }
.sr-fresh-page-btn.disabled { opacity: 0.35; pointer-events: none; }
.sr-fresh-page-info { font-size: 0.8125rem; font-weight: 600; color: var(--sr-gray-400); }
.sr-fresh-page-info strong { color: var(--sr-purple-600); }


/* ==============================
   12. PAYTABLE
   ============================== */
.sr-paytable-hint {
    display: none; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; margin: 0 0 12px;
    background: var(--sr-purple-muted); border: 1px solid rgba(124,58,237,0.12);
    border-radius: var(--sr-radius-md); font-size: 0.75rem; font-weight: 600; color: var(--sr-purple-600);
    animation: sr-swipeHint 2s ease-in-out infinite;
}
.sr-paytable-hint i { font-size: 0.875rem; }
@keyframes sr-swipeHint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.sr-paytable { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(124,58,237,0.06); }
.sr-paytable th {
    padding: 14px 20px; font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--sr-purple-600);
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-bottom: 2px solid rgba(124,58,237,0.08); text-align: left;
}
.sr-paytable th:not(:last-child) { border-right: 1px solid rgba(124,58,237,0.06); }
.sr-paytable td {
    padding: 16px 20px; font-size: 0.9375rem; color: var(--sr-gray-600, #475569);
    border-bottom: 1px solid rgba(124,58,237,0.04);
    transition: background .15s;
}
.sr-paytable td:not(:last-child) { border-right: 1px solid rgba(124,58,237,0.04); }
.sr-paytable tbody tr { transition: background .15s, transform .15s; }
.sr-paytable tbody tr:hover { background: linear-gradient(135deg, #faf9ff, #f5f3ff); }
.sr-paytable tbody tr:last-child td { border-bottom: none; }
.sr-paytable tbody td:not(:first-child) { font-weight: 700; font-family: var(--sr-font); letter-spacing: -0.01em; color: var(--sr-gray-800); }
.sr-sym-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; color: #fff; margin-right: 10px; vertical-align: middle;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sr-paytable td strong { color: var(--sr-gray-900); font-weight: 700; font-size: 0.9375rem; }


/* ==============================
   13. SYMBOL GUIDE (Accordion)
   ============================== */
.sr-sym-guide { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.sr-sym-guide-title {
    font-family: var(--sr-font); font-size: 1.125rem; font-weight: 700;
    color: var(--sr-gray-900); margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.sr-sym-guide-title i { color: var(--sr-purple-500); font-size: 1rem; }

.sr-sym-card {
    display: flex; gap: 16px; padding: 16px 18px;
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06); border-radius: 14px;
    cursor: pointer; transition: border-color .15s, background .15s, box-shadow .2s;
}
.sr-sym-card:hover { border-color: rgba(124,58,237,0.15); box-shadow: 0 4px 16px rgba(124,58,237,0.05); }

.sr-sym-card-icon {
    width: 48px; height: 48px; border-radius: var(--sr-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; color: #fff; flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.sr-sym-card-body { flex: 1; min-width: 0; }
.sr-sym-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sr-sym-card-name { font-size: 1rem; font-weight: 700; color: var(--sr-gray-900); }
.sr-sym-card-tier {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px;
}
.sr-sym-tier-high { background: rgba(124,58,237,0.1); color: var(--sr-purple-600); }
.sr-sym-tier-mid  { background: rgba(59,130,246,0.08); color: #2563eb; }
.sr-sym-tier-low  { background: rgba(148,163,184,0.12); color: var(--sr-gray-500); }

.sr-sym-card-payout { font-size: 0.875rem; font-weight: 600; color: var(--sr-purple-600); margin-bottom: 6px; }
.sr-sym-card-desc {
    font-size: 0.9375rem; color: var(--sr-gray-500); line-height: 1.6;
    max-height: 0; overflow: hidden; transition: max-height .3s ease, margin .3s ease;
}
.sr-sym-card.open .sr-sym-card-desc { max-height: 200px; margin-top: 2px; }

.sr-sym-card-toggle { font-size: 0.625rem; color: var(--sr-gray-400); transition: transform .2s; margin-left: auto; flex-shrink: 0; }
.sr-sym-card.open .sr-sym-card-toggle { transform: rotate(180deg); }


/* ==============================
   14. 1,000 SPIN TEST
   ============================== */
.sr-spin-test-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.sr-spin-stat {
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06); border-radius: 14px; padding: 18px 16px; text-align: center;
}
.sr-spin-stat-icon {
    width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: #fff;
}
.sr-spin-stat-value { font-family: var(--sr-font); font-size: 1.5rem; font-weight: 800; color: var(--sr-gray-900); letter-spacing: -0.02em; }
.sr-spin-stat-label { font-size: 0.8125rem; color: var(--sr-gray-400); margin-top: 2px; }

.sr-spin-chart {
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06); border-radius: 14px; padding: 20px; margin: 16px 0;
}
.sr-spin-chart-title { font-size: 0.875rem; font-weight: 700; color: var(--sr-gray-800); margin-bottom: 14px; }
.sr-spin-chart-bars { display: flex; flex-direction: column; gap: 10px; }
.sr-spin-bar-row { display: flex; align-items: center; gap: 12px; }
.sr-spin-bar-label { font-size: 0.8125rem; font-weight: 600; color: var(--sr-gray-500); width: 100px; flex-shrink: 0; text-align: right; }
.sr-spin-bar-track { flex: 1; height: 28px; background: var(--sr-white); border-radius: 8px; overflow: hidden; border: 1px solid var(--sr-gray-200); }
.sr-spin-bar-fill {
    height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 10px; font-size: 0.75rem; font-weight: 700; color: #fff;
}

.sr-spin-cta {
    margin-top: 20px; padding: 18px;
    background: linear-gradient(135deg, var(--sr-purple-600), var(--sr-pink-500));
    border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sr-spin-cta-text { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.sr-spin-cta-text strong { font-weight: 800; }
.sr-wrap a.sr-spin-cta-btn {
    padding: 10px 24px; background: var(--sr-green-500); color: #fff;
    font-size: 0.875rem; font-weight: 700; border-radius: var(--sr-radius-full);
    white-space: nowrap; box-shadow: 0 2px 10px rgba(34,197,94,0.3); transition: background .12s;
    display: inline-flex; align-items: center; gap: 6px;
}
.sr-wrap a.sr-spin-cta-btn:hover { background: var(--sr-green-600); }


/* ==============================
   15. SLOT COMPARISON
   ============================== */
.sr-vs-table-container { margin-top: 16px; position: relative; }
.sr-vs-swipe-hint {
    display: none; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 0; color: var(--sr-gray-400); font-size: 0.8125rem; font-weight: 500;
}
.sr-vs-swipe-hint i { animation: sr-vsSwipe 1.5s ease-in-out infinite; }
@keyframes sr-vsSwipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.sr-vs-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 16px; border: 1px solid var(--sr-gray-100);
}
.sr-vs-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.sr-vs-table th, .sr-vs-table td { padding: 14px 16px; text-align: center; font-size: 0.9375rem; border-bottom: 1px solid var(--sr-gray-100); }
.sr-vs-table th { background: linear-gradient(135deg, #faf9ff, #f5f3ff); font-weight: 700; color: var(--sr-gray-900); }
.sr-vs-table th:first-child, .sr-vs-table td:first-child {
    text-align: left; position: sticky; left: 0; z-index: 2;
}
.sr-vs-table th:first-child { color: var(--sr-gray-400); font-weight: 600; background: linear-gradient(135deg, #faf9ff, #f5f3ff); }
.sr-vs-table td:first-child { font-weight: 600; color: var(--sr-gray-500); background: #fff; box-shadow: 2px 0 8px rgba(0,0,0,0.04); }
.sr-vs-table td { color: var(--sr-gray-800); }
.sr-vs-highlight { background: var(--sr-purple-muted); font-weight: 700; color: var(--sr-purple-600); }
.sr-vs-winner::after {
    content: '\f521'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.5rem; color: var(--sr-green-500); margin-left: 4px;
}
.sr-vs-game-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sr-vs-game-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(255,255,255,0.2); }
.sr-vs-game-name { font-size: 0.875rem; }


/* ==============================
   16. BONUS ROUND WALKTHROUGH
   ============================== */
.sr-walkthrough-steps { display: flex; flex-direction: column; gap: 0; margin-top: 20px; position: relative; }
.sr-walkthrough-steps::before {
    content: ''; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--sr-gray-200);
}
.sr-wt-step { display: flex; gap: 16px; padding: 16px 0; position: relative; }
.sr-wt-step-num {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sr-font); font-size: 1rem; font-weight: 800; color: #fff;
    flex-shrink: 0; z-index: 1; box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.sr-wt-step-body { flex: 1; padding-top: 4px; }
.sr-wt-step-title { font-size: 1rem; font-weight: 700; color: var(--sr-gray-900); margin-bottom: 4px; }
.sr-wt-step-desc { font-size: 0.9375rem; color: var(--sr-gray-500); line-height: 1.7; }
.sr-wt-step-tip {
    margin-top: 8px; padding: 10px 14px;
    background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.12);
    border-radius: 10px; font-size: 0.8125rem; color: var(--sr-gold); font-weight: 600;
    display: flex; align-items: flex-start; gap: 6px;
}
.sr-wt-step-tip i { font-size: 0.75rem; margin-top: 2px; }


/* ==============================
   17. BIGGEST WINS RECORDED
   ============================== */
.sr-bigwins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.sr-bigwin-card {
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06); border-radius: 16px; padding: 20px; text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.sr-bigwin-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(124,58,237,0.06); }
.sr-bigwin-amount { font-family: var(--sr-font); font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 2px; }
.sr-bw-gold   { color: var(--sr-gold); }
.sr-bw-purple { color: var(--sr-purple-600); }
.sr-bw-green  { color: var(--sr-green-600); }
.sr-bigwin-label { font-size: 0.8125rem; color: var(--sr-gray-400); margin-bottom: 8px; }
.sr-bigwin-detail { font-size: 0.875rem; color: var(--sr-gray-500); line-height: 1.6; margin-bottom: 12px; }
.sr-wrap a.sr-bigwin-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; background: var(--sr-green-500); color: #fff;
    font-weight: 700; border-radius: var(--sr-radius-full);
    box-shadow: 0 2px 8px rgba(34,197,94,0.2); transition: background .12s;
    font-size: 0.875rem;
}
.sr-wrap a.sr-bigwin-cta:hover { background: var(--sr-green-600); }


/* ==============================
   18. SIMILAR SLOTS
   ============================== */
.sr-similar-section { margin-bottom: 48px; }
.sr-similar-wrap {
    background: var(--sr-white); border-radius: 24px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 8px 32px rgba(124,58,237,0.03);
}
.sr-similar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--sr-gray-100); flex-wrap: wrap; gap: 12px;
}
.sr-similar-header h2 {
    font-family: var(--sr-font); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--sr-gray-900); display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 0; border: none;
}
.sr-similar-header h2 i {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--sr-purple-muted); border-radius: 10px; color: var(--sr-purple-500); font-size: 0.9375rem;
}
.sr-similar-filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* Custom dropdown */
.sr-cdrop { position: relative; }
.sr-cdrop-trigger {
    display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 38px;
    background: var(--sr-white); border: 1px solid var(--sr-gray-200); border-radius: 10px;
    cursor: pointer; transition: border-color .15s, box-shadow .15s; user-select: none;
}
.sr-cdrop-trigger:hover { border-color: rgba(124,58,237,0.25); }
.sr-cdrop.open .sr-cdrop-trigger { border-color: var(--sr-purple-500); box-shadow: 0 0 0 3px rgba(124,58,237,0.08); }
.sr-cdrop-icon { font-size: 0.75rem; color: var(--sr-purple-500); }
.sr-cdrop-text { font-family: var(--sr-font); font-size: 0.8125rem; font-weight: 600; color: var(--sr-gray-800); }
.sr-cdrop-arrow { font-size: 0.5rem; color: var(--sr-gray-400); transition: transform .2s; margin-left: 4px; }
.sr-cdrop.open .sr-cdrop-arrow { transform: rotate(180deg); }
.sr-cdrop-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
    background: var(--sr-white); border: 1px solid var(--sr-gray-200); border-radius: 14px; padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1); z-index: 50;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.sr-cdrop.open .sr-cdrop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sr-cdrop-option {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px;
    font-size: 0.8125rem; font-weight: 500; color: var(--sr-gray-500); border-radius: 8px;
    cursor: pointer; transition: background .1s, color .1s; white-space: nowrap;
}
.sr-cdrop-option:hover { background: linear-gradient(135deg, #faf9ff, #f5f3ff); color: var(--sr-gray-900); }
.sr-cdrop-option.selected { background: var(--sr-purple-muted); color: var(--sr-purple-600); font-weight: 700; }
.sr-cdrop-option.selected::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.5625rem; color: var(--sr-purple-500); margin-left: auto;
}

/* Similar Grid */
.sr-similar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; }
.sr-sim-card {
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #faf9ff, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.06);
    transition: transform .25s, box-shadow .25s, border-color .2s; position: relative;
}
.sr-sim-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.15); }
.sr-sim-card-img {
    height: 120px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.sr-sim-card-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.2) 100%); pointer-events: none;
}
.sr-sim-card-img > i { font-size: 2.25rem; color: rgba(255,255,255,0.12); }
.sr-sim-badge {
    position: absolute; top: 10px; left: 10px; padding: 4px 10px;
    font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    border-radius: 6px; color: #fff; z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: inline-flex; align-items: center; gap: 4px;
}
.sr-sim-badge-classic { background: var(--sr-purple-600); }
.sr-sim-badge-hot { background: var(--sr-gradient-hot); }
.sr-sim-badge-new { background: var(--sr-green-500); }
.sr-sim-provider-tag {
    position: absolute; bottom: 10px; left: 10px; padding: 4px 10px;
    font-size: 0.625rem; font-weight: 600; background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    color: #fff; border-radius: 6px; z-index: 1;
}
.sr-sim-card-rating {
    position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    padding: 4px 9px; border-radius: 6px; display: flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-weight: 700; color: #fff; z-index: 1;
}
.sr-sim-card-rating i { color: var(--sr-gold); font-size: 0.5625rem; }
.sr-sim-card-body { padding: 16px; }
.sr-sim-card-name { font-family: var(--sr-font); font-size: 1rem; font-weight: 700; color: var(--sr-gray-900); letter-spacing: -0.01em; margin-bottom: 8px; }
.sr-sim-card-stats { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sr-sim-stat-pill {
    padding: 4px 10px; font-size: 0.6875rem; font-weight: 600; border-radius: var(--sr-radius-full);
    background: var(--sr-white); color: var(--sr-gray-500); border: 1px solid var(--sr-gray-200);
}
.sr-sim-stat-pill.rtp { background: var(--sr-purple-muted); color: var(--sr-purple-600); border-color: rgba(124,58,237,0.1); }
.sr-sim-stat-pill.vol-high { background: rgba(220,38,38,0.05); color: #dc2626; border-color: rgba(220,38,38,0.1); }
.sr-sim-card-actions { display: flex; gap: 8px; }
.sr-sim-card-actions a { flex: 1; text-align: center; padding: 10px; font-size: 0.875rem; font-weight: 700; border-radius: 10px; transition: background .15s, transform .1s; }
.sr-wrap a.sr-sim-btn-play { background: var(--sr-green-500); color: #fff; box-shadow: 0 2px 8px rgba(34,197,94,0.2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sr-wrap a.sr-sim-btn-play:hover { background: var(--sr-green-600); transform: translateY(-1px); }
.sr-wrap a.sr-sim-btn-info { border: 1px solid var(--sr-gray-200); color: var(--sr-gray-500); background: var(--sr-white); }
.sr-wrap a.sr-sim-btn-info:hover { background: var(--sr-gray-100); color: var(--sr-gray-800); }


/* ==============================
   19. RESPONSIBLE GAMBLING
   ============================== */
.sr-rg-disclaimer {
    margin-bottom: 32px; border-radius: 20px; overflow: hidden;
    background: var(--sr-white); box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 8px 32px rgba(124,58,237,0.03);
}
.sr-rg-header {
    display: flex; align-items: center; gap: 14px; padding: 20px 28px;
    background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff;
}
.sr-rg-header-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.sr-rg-header-text { font-family: var(--sr-font); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.sr-rg-header-sub { font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,0.8); margin-top: 2px; }
.sr-rg-badge-18 {
    margin-left: auto; width: 44px; height: 44px; border: 3px solid #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sr-font); font-size: 1rem; font-weight: 900; color: #fff; flex-shrink: 0;
}
.sr-rg-body { padding: 24px 28px; }
.sr-rg-body p { font-size: 0.9375rem; color: var(--sr-gray-500); line-height: 1.8; margin-bottom: 16px; }
.sr-rg-body p:last-of-type { margin-bottom: 20px; }
.sr-rg-body strong { color: var(--sr-gray-800); }
.sr-rg-links { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-rg-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
    background: linear-gradient(135deg, #fef2f2, #fff1f2); border: 1px solid rgba(220,38,38,0.1);
    border-radius: 12px; font-size: 0.8125rem; font-weight: 600; color: #dc2626;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sr-rg-link:hover { border-color: rgba(220,38,38,0.25); box-shadow: 0 4px 12px rgba(220,38,38,0.06); transform: translateY(-1px); }
.sr-rg-link i { font-size: 0.875rem; }


/* ==============================
   20. FAQ  (native <details>/<summary>)
   ============================== */
.sr-faq-section { margin-bottom: 80px; }
.sr-faq-heading {
    font-family: var(--sr-font); font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.02em; color: var(--sr-gray-900); margin-bottom: 16px;
}
.sr-faq-item {
    background: var(--sr-white); border: none; border-radius: 16px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(124,58,237,0.04), 0 4px 16px rgba(124,58,237,0.02);
    transition: box-shadow .2s;
}
.sr-faq-item[open] {
    box-shadow: 0 2px 8px rgba(124,58,237,0.08), 0 8px 32px rgba(124,58,237,0.05);
}
.sr-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 24px; cursor: pointer; font-size: 1rem; font-weight: 600;
    color: var(--sr-gray-800); transition: color .12s;
    list-style: none; -webkit-user-select: none; user-select: none;
}
.sr-faq-q::-webkit-details-marker,
.sr-faq-q::marker { display: none; content: ''; }
.sr-faq-q:hover { color: var(--sr-purple-600); }

.sr-faq-icon {
    position: relative; width: 16px; height: 16px; flex-shrink: 0;
}
.sr-faq-icon::before,
.sr-faq-icon::after {
    content: ''; position: absolute; background: var(--sr-purple-500);
    border-radius: 2px; transition: transform .25s ease;
}
.sr-faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.sr-faq-icon::after  { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.sr-faq-item[open] .sr-faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.sr-faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
    overflow: hidden;
}
.sr-faq-item[open] .sr-faq-a { grid-template-rows: 1fr; }
.sr-faq-a-inner {
    overflow: hidden;
    padding: 0 24px; font-size: 0.9375rem; color: var(--sr-gray-500); line-height: 1.7;
}
.sr-faq-item[open] .sr-faq-a-inner { padding-bottom: 18px; }


/* ==============================
   22. STICKY OFFER BAR
   ============================== */
.sr-sticky-offer {
    position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 30px));
    z-index: 90; width: calc(100% - 40px); max-width: 900px;
    background: linear-gradient(135deg, #1e1e2e, #2a1f3d);
    border: 1px solid rgba(124,58,237,0.15); border-radius: 22px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(124,58,237,0.08);
    transition: transform .45s cubic-bezier(0.16,1,0.3,1);
}
.sr-sticky-offer.visible { transform: translateX(-50%) translateY(0); }
.sr-sticky-offer-inner { padding: 18px 24px; display: flex; align-items: center; gap: 18px; }
.sr-sticky-offer-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--sr-gradient-purple); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.25rem; flex-shrink: 0; box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}
.sr-sticky-offer-info { flex: 1; min-width: 0; }
.sr-sticky-offer-name { font-family: var(--sr-font); font-size: 1.0625rem; font-weight: 700; color: #fff; }
.sr-sticky-offer-bonus { font-size: 0.9375rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.sr-sticky-offer-bonus strong { color: var(--sr-gold); font-weight: 700; }
.sr-wrap a.sr-sticky-offer-btn {
    padding: 14px 32px; background: var(--sr-green-500); color: #fff;
    font-size: 1rem; font-weight: 700; border-radius: var(--sr-radius-full); white-space: nowrap;
    box-shadow: 0 4px 16px rgba(34,197,94,0.3); transition: background .12s, transform .1s;
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.sr-wrap a.sr-sticky-offer-btn:hover { background: var(--sr-green-600); transform: translateY(-1px); }
.sr-sticky-offer-close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: rgba(255,255,255,0.3); font-size: 0.875rem;
    cursor: pointer; transition: color .12s, background .12s; flex-shrink: 0;
}
.sr-sticky-offer-close:hover { color: #fff; background: rgba(255,255,255,0.08); }


/* ==============================
   21. FULLSCREEN OVERLAY
   ============================== */
.sr-fs-overlay { position: fixed; inset: 0; z-index: 9999; background: #0a0a14; display: none; flex-direction: column; }
.sr-fs-overlay.active { display: flex; }

.sr-fs-topbar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; background: #111120; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sr-fs-topbar-left { display: flex; align-items: center; gap: 12px; }
.sr-fs-logo { font-family: var(--sr-font); font-weight: 800; font-size: 1rem; color: #fff; letter-spacing: -0.03em; display: flex; align-items: center; gap: 6px; }
.sr-fs-logo-icon { width: 24px; height: 24px; background: var(--sr-gradient-purple); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.6rem; }
.sr-fs-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.1); }
.sr-fs-game-name { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.sr-fs-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 0.875rem; cursor: pointer; transition: background .12s, color .12s; }
.sr-fs-close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.sr-fs-body { display: flex; flex: 1; min-height: 0; }
.sr-fs-game { flex: 1; display: flex; align-items: stretch; background: #0a0a14; min-width: 0; }
.sr-fs-game iframe { width: 100%; height: 100%; border: none; display: block; }

/* Sidebar */
.sr-fs-sidebar { width: 280px; background: #111120; border-left: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
.sr-fs-sidebar-title { padding: 14px 16px; font-family: var(--sr-font); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.06); }
.sr-fs-sidebar-scroll { flex: 1; overflow-y: auto; padding: 8px; }
.sr-fs-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sr-fs-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sr-fs-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sr-fs-game-card { display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: var(--sr-radius-md); cursor: pointer; transition: background .12s; }
.sr-fs-game-card:hover { background: rgba(255,255,255,0.05); }
.sr-fs-game-card-img { width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: rgba(255,255,255,0.15); flex-shrink: 0; }
.sr-fs-game-card-info { flex: 1; min-width: 0; }
.sr-fs-game-card-name { font-size: 0.9375rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-fs-game-card-meta { font-size: 0.75rem; color: rgba(255,255,255,0.35); display: flex; gap: 8px; margin-top: 3px; }
.sr-fs-game-card-meta strong { color: rgba(255,255,255,0.6); }
.sr-wrap a.sr-fs-game-card-play { padding: 5px 12px; background: var(--sr-green-500); color: #fff; font-size: 0.625rem; font-weight: 700; border-radius: var(--sr-radius-full); white-space: nowrap; transition: background .12s; flex-shrink: 0; }
.sr-wrap a.sr-fs-game-card-play:hover { background: var(--sr-green-600); }

.sr-fs-sidebar-offer { margin: 8px; background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(236,72,153,0.1)); border: 1px solid rgba(124,58,237,0.2); border-radius: var(--sr-radius-md); padding: 14px; text-align: center; }
.sr-fs-sidebar-offer-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sr-purple-500); margin-bottom: 6px; }
.sr-fs-sidebar-offer-bonus { font-family: var(--sr-font); font-size: 1.125rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.sr-fs-sidebar-offer-casino { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.sr-wrap a.sr-fs-sidebar-offer-btn { display: block; padding: 8px; background: var(--sr-green-500); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: var(--sr-radius-sm); text-align: center; transition: background .12s; }
.sr-wrap a.sr-fs-sidebar-offer-btn:hover { background: var(--sr-green-600); }

/* Ticker */
.sr-fs-ticker { height: 72px; background: #111120; border-top: 1px solid rgba(255,255,255,0.06); overflow: hidden; position: relative; flex-shrink: 0; }
.sr-fs-ticker::before, .sr-fs-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.sr-fs-ticker::before { left: 0; background: linear-gradient(90deg, #111120, transparent); }
.sr-fs-ticker::after { right: 0; background: linear-gradient(270deg, #111120, transparent); }
.sr-fs-ticker-track { display: flex; gap: 0; height: 100%; animation: sr-tickerScroll 50s linear infinite; width: max-content; }
.sr-fs-ticker-track:hover { animation-play-state: paused; }
@keyframes sr-tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.sr-fs-ticker-item {
    display: flex; align-items: center; gap: 14px; padding: 0 32px;
    border-right: 1px solid rgba(255,255,255,0.06); white-space: nowrap;
    height: 100%; flex-shrink: 0; transition: background .12s; cursor: pointer;
}
.sr-fs-ticker-item:hover { background: rgba(255,255,255,0.04); }
.sr-fs-ticker-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; flex-shrink: 0; }
.sr-fs-ticker-info { display: flex; flex-direction: column; gap: 2px; }
.sr-fs-ticker-casino { font-size: 0.875rem; font-weight: 800; color: #fff; }
.sr-fs-ticker-bonus { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.45); }
.sr-wrap a.sr-fs-ticker-btn { padding: 8px 20px; background: var(--sr-green-500); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: var(--sr-radius-full); flex-shrink: 0; transition: background .12s; box-shadow: 0 2px 8px rgba(34,197,94,0.25); }
.sr-wrap a.sr-fs-ticker-btn:hover { background: var(--sr-green-600); }


/* ══════════════════════════════════════════════
   RESPONSIVE — Tablet (max 1023px)
   ══════════════════════════════════════════════ */
@media (max-width: 1023px) {
    /* Header */
    .sr-header-nav { display: none; }
    .sr-hamburger  { display: flex; }

    /* Hero */
    .sr-slot-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
    .sr-slot-hero-right { display: none; }
    .sr-slot-hero h1 { font-size: 2.5rem; }
    .sr-slot-hero-stats { flex-wrap: wrap; }
    .sr-stat-box { flex: 0 0 auto; min-width: 100px; }
    .sr-slot-hero-meta { flex-wrap: wrap; gap: 12px; }

    /* Demo */
    .sr-demo-offers { grid-template-columns: 1fr; gap: 10px; padding: 14px; }

    /* Content Grid — stack on tablet */
    .sr-content-grid { grid-template-columns: 1fr; }
    .sr-sidebar { order: -1; position: static; }

    /* Features */
    .sr-features-grid { grid-template-columns: repeat(3, 1fr); }

    /* Comparison — swipe hint on tablet */
    .sr-vs-swipe-hint { display: flex; }
    .sr-vs-table { min-width: 560px; }

    /* Similar */
    .sr-similar-grid { grid-template-columns: repeat(2, 1fr); }
    .sr-similar-filters { flex-wrap: wrap; }
    .sr-bigwins-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile (max 767px)
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Header */
    .sr-logo { font-size: 1.05rem; }
    .sr-btn-header-cta { padding: 6px 14px; font-size: 0.8125rem; }
    .sr-breadcrumb { padding: 12px 0; font-size: 0.75rem; }

    /* Hero */
    .sr-slot-hero { padding: 32px 0; }
    .sr-slot-hero h1 { font-size: 2rem; }
    .sr-slot-hero-desc { font-size: 0.9375rem; }
    .sr-slot-hero-stats { gap: 8px; }
    .sr-stat-box { padding: 10px 14px; }
    .sr-stat-box-value { font-size: 1.125rem; }
    .sr-slot-hero-ctas { flex-direction: column; gap: 10px; }
    .sr-slot-hero-ctas a { width: 100%; justify-content: center; }
    .sr-btn-play, .sr-btn-review-cta { padding: 14px 24px; font-size: 0.9375rem; }
    .sr-slot-hero-meta { gap: 10px; flex-wrap: wrap; }
    .sr-slot-hero-wrap { padding-bottom: 60px; }

    /* Demo */
    .sr-demo-section { margin-top: -36px; }
    .sr-demo-wrapper { border-radius: 20px; }
    .sr-demo-player iframe, .sr-demo-player-placeholder { height: 360px; }
    .sr-demo-player { border-radius: 0 0 16px 16px; }
    .sr-demo-top-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .sr-demo-info-bar { flex-wrap: wrap; gap: 8px; }
    .sr-demo-offer { padding: 12px 14px; gap: 10px; }
    .sr-demo-play-btn { width: 72px; height: 72px; }

    /* Review */
    .sr-content-card { padding: 24px 20px; border-radius: 16px; }
    .sr-content-card h2 { font-size: 1.25rem; }
    .sr-content-card h2 i { width: 30px; height: 30px; font-size: 0.875rem; border-radius: 8px; }
    .sr-pros-cons { grid-template-columns: 1fr; }

    /* Features */
    .sr-features-grid { grid-template-columns: repeat(2, 1fr); }

    /* Sidebar */
    .sr-quick-info { padding: 20px; border-radius: 16px; }
    .sr-where-play { border-radius: 16px; }
    .sr-offer-card { border-radius: 16px; }
    .sr-offer-card-body { padding: 16px; }
    .sr-fresh-reviews { border-radius: 16px; }

    /* Spin Test */
    .sr-spin-test-stats { grid-template-columns: repeat(2, 1fr); }
    .sr-spin-cta { flex-direction: column; text-align: center; padding: 16px; }
    .sr-spin-bar-label { width: 80px; font-size: 0.75rem; }

    /* Walkthrough */
    .sr-walkthrough-steps::before { left: 19px; }
    .sr-wt-step-num { width: 40px; height: 40px; font-size: 0.875rem; }
    .sr-wt-step-title { font-size: 0.9375rem; }

    /* Biggest Wins */
    .sr-bigwins-grid { grid-template-columns: 1fr; }

    /* Similar */
    .sr-similar-wrap { border-radius: 16px; }
    .sr-similar-header { padding: 16px 18px; }
    .sr-similar-header h2 { font-size: 1.125rem; }
    .sr-similar-header h2 i { width: 30px; height: 30px; font-size: 0.875rem; }
    .sr-similar-filters { gap: 6px; }
    .sr-cdrop-trigger { height: 34px; padding: 0 12px; }
    .sr-cdrop-text { font-size: 0.75rem; }
    .sr-similar-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
    .sr-sim-card { border-radius: 14px; }
    .sr-sim-card-img { height: 100px; }
    .sr-sim-card-body { padding: 14px; }

    /* RG */
    .sr-rg-disclaimer { border-radius: 16px; }
    .sr-rg-header { padding: 16px 20px; gap: 12px; }
    .sr-rg-header-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; }
    .sr-rg-badge-18 { width: 38px; height: 38px; }
    .sr-rg-body { padding: 20px; }
    .sr-rg-link { padding: 8px 14px; border-radius: 10px; }

    /* FAQ */
    .sr-faq-item { border-radius: 14px; }
    .sr-faq-q { padding: 16px 18px; font-size: 0.9375rem; }
    .sr-faq-a-inner { padding: 0 18px; font-size: 0.875rem; }
    .sr-faq-item[open] .sr-faq-a-inner { padding-bottom: 16px; }

    /* Fullscreen */
    .sr-fs-sidebar { display: none; }
    .sr-fs-topbar { padding: 0 12px; }
    .sr-fs-game-name { display: none; }
    .sr-fs-ticker { height: 46px; }
    .sr-fs-ticker-item { padding: 0 14px; }

    /* Sticky */
    .sr-sticky-offer { bottom: 12px; width: calc(100% - 24px); border-radius: 16px; }
    .sr-sticky-offer-inner { flex-wrap: wrap; gap: 8px; padding: 12px 14px; position: relative; padding-right: 36px; }
    .sr-sticky-offer-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 0.875rem; }
    .sr-sticky-offer-name { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sr-sticky-offer-bonus { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sr-wrap a.sr-sticky-offer-btn { padding: 10px 18px; font-size: 0.8125rem; width: 100%; justify-content: center; order: 5; }
    .sr-sticky-offer-close { width: 28px; height: 28px; position: absolute; top: 8px; right: 8px; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — Small Mobile (max 479px)
   ══════════════════════════════════════════════ */
@media (max-width: 479px) {
    .sr-container { padding: 0 14px; }
    .sr-wrap { --sr-header-h: 52px; }

    /* Header */
    .sr-logo { font-size: 1rem; }
    .sr-logo-icon { width: 26px; height: 26px; font-size: 0.7rem; }
    .sr-btn-header-cta { padding: 7px 16px; font-size: 0.8125rem; }

    /* Hero */
    .sr-slot-hero { padding: 24px 0; }
    .sr-slot-hero h1 { font-size: 1.75rem; }
    .sr-slot-hero-badge { font-size: 0.625rem; padding: 5px 12px; }
    .sr-slot-hero-provider { font-size: 0.875rem; }
    .sr-slot-hero-desc { font-size: 0.875rem; line-height: 1.65; }
    .sr-slot-hero-stats { gap: 6px; }
    .sr-stat-box { padding: 10px 8px; min-width: 0; }
    .sr-stat-box-value { font-size: 1rem; }
    .sr-stat-box-label { font-size: 0.5rem; }
    .sr-slot-hero-meta { font-size: 0.75rem; gap: 8px; }
    .sr-slot-hero-provider-tag { font-size: 0.5625rem; padding: 2px 6px; }
    .sr-slot-hero-wrap { padding-bottom: 48px; }

    /* Demo */
    .sr-demo-section { margin-top: -28px; }
    .sr-demo-wrapper { border-radius: 16px; }
    .sr-demo-player { border-radius: 0 0 12px 12px; }
    .sr-demo-player iframe, .sr-demo-player-placeholder { height: 240px; }
    .sr-demo-play-btn { width: 60px; height: 60px; font-size: 1.25rem; }
    .sr-demo-play-label { font-size: 0.875rem; }
    .sr-demo-top-inner { padding: 12px; gap: 8px; }
    .sr-demo-title { font-size: 0.8125rem; }
    .sr-demo-title i { width: 22px; height: 22px; font-size: 0.5rem; border-radius: 6px; }
    .sr-demo-tab { padding: 6px 12px; font-size: 0.6875rem; }
    .sr-demo-info-bar { font-size: 0.6875rem; gap: 6px; }
    .sr-demo-offers { padding: 10px; gap: 8px; }
    .sr-demo-offer { padding: 10px 12px; gap: 10px; }
    .sr-demo-offer-icon { width: 36px; height: 36px; font-size: 0.875rem; }
    .sr-demo-offer-name { font-size: 0.875rem; }
    .sr-demo-offer-bonus { font-size: 0.8125rem; }
    .sr-demo-offer-btn { padding: 8px 14px; font-size: 0.75rem; }

    /* Review */
    .sr-content-card { padding: 20px 16px; margin-bottom: 12px; border-radius: 14px; }
    .sr-content-card h2 { font-size: 1.125rem; gap: 8px; padding-bottom: 12px; }
    .sr-content-card h2 i { width: 28px; height: 28px; font-size: 0.8125rem; border-radius: 8px; }
    .sr-content-card h3 { font-size: 1rem; }
    .sr-review-body p { font-size: 0.875rem; }
    .sr-review-body h3 { font-size: 1rem; }
    .sr-pros, .sr-cons { padding: 16px; border-radius: 12px; }
    .sr-pros h4, .sr-cons h4 { font-size: 0.8125rem; }
    .sr-pros li, .sr-cons li { font-size: 0.875rem; }

    /* Rating */
    .sr-rating-item { padding: 12px 14px; border-radius: 10px; }

    /* Features */
    .sr-features-grid { gap: 8px; }
    .sr-feature-item { padding: 14px 12px; border-radius: 10px; }
    .sr-feature-item i { font-size: 1.125rem; }

    /* Sidebar */
    .sr-quick-info { padding: 16px; border-radius: 14px; }
    .sr-qi-row { padding: 9px 0; font-size: 0.8125rem; }
    .sr-fresh-reviews { border-radius: 14px; }
    .sr-fresh-grid { padding: 10px; gap: 6px; }
    .sr-fresh-card { padding: 10px 12px; border-radius: 10px; gap: 10px; }
    .sr-fresh-card-img { width: 42px; height: 42px; border-radius: 10px; }
    .sr-fresh-card-name { font-size: 0.8125rem; }
    .sr-fresh-card-rtp { font-size: 0.8125rem; }

    /* Paytable — horizontal scroll on small mobile */
    .sr-paytable { min-width: 500px; }
    .sr-paytable-card { padding: 20px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .sr-paytable-card h2 { padding: 0 16px; }
    .sr-paytable-card p { padding: 0 16px; }
    .sr-paytable-hint { display: flex; margin: 0 16px 12px; }

    /* Symbol Guide */
    .sr-sym-guide { padding: 0; }
    .sr-sym-card { padding: 14px; gap: 12px; border-radius: 10px; }
    .sr-sym-card-icon { width: 40px; height: 40px; font-size: 1rem; }
    .sr-sym-card-name { font-size: 0.9375rem; }
    .sr-sym-card-payout { font-size: 0.8125rem; }
    .sr-sym-card-desc { font-size: 0.875rem; }

    /* Spin Test */
    .sr-spin-test-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sr-spin-stat { padding: 14px 12px; border-radius: 12px; }
    .sr-spin-stat-value { font-size: 1.25rem; }
    .sr-spin-chart { padding: 16px; border-radius: 12px; }
    .sr-spin-bar-label { width: 70px; font-size: 0.75rem; }
    .sr-spin-bar-track { height: 24px; }
    .sr-spin-bar-fill { font-size: 0.6875rem; }
    .sr-spin-cta { padding: 16px; border-radius: 12px; }
    .sr-spin-cta-text { font-size: 0.875rem; }

    /* Comparison */
    .sr-vs-swipe-hint { display: flex; }
    .sr-vs-table-wrap { border-radius: 12px; }
    .sr-vs-table { min-width: 520px; }
    .sr-vs-table th, .sr-vs-table td { padding: 12px 14px; font-size: 0.875rem; }
    .sr-vs-table th:first-child, .sr-vs-table td:first-child { min-width: 90px; max-width: 100px; font-size: 0.8125rem; }
    .sr-vs-game-icon { width: 34px; height: 34px; font-size: 0.875rem; border-radius: 8px; }
    .sr-vs-game-name { font-size: 0.8125rem; }

    /* Walkthrough */
    .sr-wt-step-num { width: 36px; height: 36px; font-size: 0.8125rem; }
    .sr-walkthrough-steps::before { left: 17px; }
    .sr-wt-step-desc { font-size: 0.875rem; }
    .sr-wt-step-tip { font-size: 0.8125rem; padding: 8px 12px; border-radius: 8px; }

    /* Biggest Wins */
    .sr-bigwins-grid { gap: 10px; }
    .sr-bigwin-card { padding: 18px 16px; border-radius: 14px; }
    .sr-bigwin-amount { font-size: 1.75rem; }

    /* Similar */
    .sr-similar-wrap { border-radius: 14px; }
    .sr-similar-header { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .sr-similar-header h2 { font-size: 1.0625rem; }
    .sr-similar-filters { width: 100%; }
    .sr-cdrop { flex: 1; }
    .sr-cdrop-trigger { height: 34px; padding: 0 10px; }
    .sr-cdrop-text { font-size: 0.6875rem; }
    .sr-cdrop-icon { font-size: 0.625rem; }
    .sr-similar-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
    .sr-sim-card { border-radius: 12px; }
    .sr-sim-card-img { height: 110px; }
    .sr-sim-card-body { padding: 14px; }
    .sr-sim-card-name { font-size: 0.9375rem; }
    .sr-sim-stat-pill { font-size: 0.625rem; padding: 3px 8px; }
    .sr-sim-card-actions a { padding: 10px; font-size: 0.8125rem; border-radius: 8px; }

    /* RG */
    .sr-rg-disclaimer { border-radius: 14px; }
    .sr-rg-header { padding: 14px 16px; gap: 10px; }
    .sr-rg-header-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 0.9375rem; }
    .sr-rg-header-text { font-size: 0.9375rem; }
    .sr-rg-header-sub { font-size: 0.75rem; }
    .sr-rg-badge-18 { width: 34px; height: 34px; font-size: 0.8125rem; border-width: 2px; }
    .sr-rg-body { padding: 16px; }
    .sr-rg-body p { font-size: 0.875rem; }
    .sr-rg-links { gap: 6px; }
    .sr-rg-link { padding: 8px 12px; font-size: 0.75rem; border-radius: 8px; }

    /* FAQ */
    .sr-faq-heading { font-size: 1.125rem; }
    .sr-faq-item { border-radius: 12px; }
    .sr-faq-q { padding: 14px 16px; font-size: 0.9375rem; }
    .sr-faq-icon { width: 14px; height: 14px; }
    .sr-faq-a-inner { padding: 0 16px; font-size: 0.8125rem; }
    .sr-faq-item[open] .sr-faq-a-inner { padding-bottom: 14px; }

    /* Sticky */
    .sr-sticky-offer { bottom: 8px; width: calc(100% - 16px); border-radius: 14px; }
    .sr-sticky-offer-inner { gap: 6px; padding: 10px 12px; padding-right: 32px; }
    .sr-sticky-offer-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 0.8125rem; }
    .sr-sticky-offer-name { font-size: 0.75rem; }
    .sr-sticky-offer-bonus { font-size: 0.6875rem; }
    .sr-wrap a.sr-sticky-offer-btn { padding: 8px 16px; font-size: 0.75rem; }
    .sr-sticky-offer-close { width: 26px; height: 26px; top: 6px; right: 6px; }
}


/* ══════════════════════════════════════════════
   Elementor Mobile Root Reset
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    html:has(.elementor-widget-slotsreview),
    body:has(.elementor-widget-slotsreview) {
        margin: 0 !important; padding: 0 !important; overflow-x: hidden !important;
    }
}