:root{
    --bg: #0E1A2B;
    --panel: #14263C;
    --panel-2: #1B324D;
    --line: #24405F;
    --text: #E9F0F7;
    --muted: #8FA6BF;
    --gold: #F2B33D;
    --gold-2: #E89A1C;
    --teal: #2FD6C6;
    --coral: #FF6B5E;
    --violet: #9B7BFF;
    --radius: 10px;
    --radius-lg: 16px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
  }
  h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;}

  .wrap{max-width:1280px;margin:0 auto;padding:0 0;}

  /* ---------- Placeholder banner ---------- */
  .banner-slot{
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 14px, transparent 14px 28px),
      linear-gradient(120deg, var(--panel-2), var(--panel));
    border:1.5px dashed var(--line);
    border-radius:var(--radius-lg);
    color:var(--muted);
    text-align:center;
    font-size:13px;
  }
  .banner-slot .dim{font-size:11px;opacity:.7;margin-top:2px;}
  .banner-slot svg{opacity:.5;margin-bottom:6px;}

  /* ---------- Header (laptop / desktop) ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:#14294A;
    border-bottom:1px solid #0B1B33;
  }
  .nav-top{display:flex;align-items:center;gap:28px;height:68px;}
  .brand{font-size:22px;font-weight:700;letter-spacing:-0.5px;color:var(--gold);white-space:nowrap;}
  .brand span{color:var(--text);}
  nav.links{display:flex;align-items:center;gap:26px;flex:1;}
  nav.links a{
    font-size:15px;font-weight:700;color:#fff;white-space:nowrap;
    transition:color .15s;padding:6px 2px;
  }
  nav.links a:hover{color:#4D9AFF;}
  nav.links a.active{color:#fff;}
  .nav-actions{display:flex;gap:12px;align-items:center;}
  .btn{padding:9px 18px;border-radius:8px;font-size:14px;font-weight:600;transition:transform .12s, opacity .12s, background .15s, border-color .15s;}
  .btn:hover{transform:translateY(-1px);}

  /* Header LOG IN / REGISTRATION buttons */
  .nav-actions .btn{
    min-width:150px;
    padding:11px 28px;
    border-radius:8px;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#fff;
  }
  .btn-outline{background:#0D6BF0;border:1px solid #0D6BF0;color:#fff;}
  .btn-outline:hover{background:#2E82F5;border-color:#2E82F5;}
  .btn-solid{background:linear-gradient(135deg,var(--teal),#1FAE9F);color:#04241F;}
  .btn-gold{background:#18AD4E;border:1px solid #18AD4E;color:#fff;}
  .btn-gold:hover{background:#1FC25B;border-color:#1FC25B;}

  .search-row{padding:14px 0;}
  .search-box{
    display:flex;align-items:center;gap:10px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:11px 16px;color:var(--muted);font-size:14px;
  }

  /* ---------- Sections ---------- */
  /* section{padding:34px 0;}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;
  }
  .section-head h2{font-size:25px;font-weight:600;display:flex;align-items:center;gap:9px;}
  .section-head .tag{
    width:8px;height:8px;border-radius:2px;background:var(--gold);display:inline-block;
  }
  .section-head .more{font-size:13px;color:var(--muted);}
  .section-head .more:hover{color:var(--gold);} */

  /* =========================================================
   CASINO SECTION
========================================================= */

.casino-section {
    width: 100%;
    font-family: "Poppins", Arial, sans-serif;
    box-sizing: border-box;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.section-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.section-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}

.title-dot {
    width: 5px;
    height: 20px;
    display: block;
    border-radius: 5px;
    background: #ffb400;
}

.more {
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.more:hover {
    opacity: 0.7;
    text-decoration: underline;
}


/* =========================================================
   MAIN ROW
========================================================= */

.feature-row {
    width: 100%;
    display: grid;

    /* Left card + game area */
    grid-template-columns: 392px minmax(0, 1fr);

    gap: 12px;

    align-items: stretch;
}


/* =========================================================
   LEFT STAT PANEL
========================================================= */

.stat-panel.casino {
    position: relative;

    width: 100%;
    min-width: 0;
    height: 426px;

    overflow: hidden;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #ff8500 0%,
            #ffb600 58%,
            #ffd72d 100%
        );

    box-sizing: border-box;
}


/* border */
.stat-panel.casino::after {
    content: "";
    position: absolute;

    inset: 0;

    border: 2px solid rgba(255,255,255,0.12);
    border-radius: inherit;

    pointer-events: none;
}


/* =========================================================
   TITLE
========================================================= */

.casino-content {
    position: relative;

    z-index: 5;

    padding: 28px 28px 0;
}

.kicker {
    margin-bottom: 5px;

    color: #ffffff;

    font-size: 14px;
    line-height: 22px;

    font-weight: 500;
    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.casino-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    line-height: 32px;

    font-weight: 700;
}


/* =========================================================
   MAN IMAGE
========================================================= */

.casino-man {
    position: absolute;

    left: -15px;
    bottom: -5px;

    width: 165px;

    z-index: 3;

    pointer-events: none;
}

.casino-man img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   COINS
========================================================= */

.casino-coins {
    position: absolute;

    top: -22px;
    right: -40px;

    width: 145px;

    z-index: 2;

    pointer-events: none;
}

.casino-coins img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   STATISTICS
========================================================= */

.stats {
    position: absolute;

    right: 15px;
    bottom: 16px;

    width: 246px;

    z-index: 5;
}

.stat {
    width: 100%;

    min-height: 70px;

    margin-bottom: 11px;
    padding: 10px 13px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: 8px;

    background: rgba(255,255,255,0.72);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.stat:last-child {
    margin-bottom: 0;
}

.stat b {
    display: block;

    color: #050505;

    font-size: 16px;
    line-height: 25px;

    font-weight: 700;
}

.stat span {
    display: block;

    color: rgba(0,0,0,0.62);

    font-size: 12px;
    line-height: 18px;

    font-weight: 400;
}


/* =========================================================
   GAME GRID
========================================================= */

.tile-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: repeat(3, 1fr);

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   GAME TILE
========================================================= */

.tile {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 8px;

    text-decoration: none;

    background: #172636;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* image container */

.thumb {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;
}


/* image */

.thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* border */

.tile::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: inherit;

    pointer-events: none;
}


/* =========================================================
   HOVER
========================================================= */

.tile:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0,0,0,0.30);
}

.tile:hover img {
    transform: scale(1.06);
}


/* =========================================================
   REMOVE OLD META
========================================================= */

.tile .meta {
    display: none;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .feature-row {
        grid-template-columns: 392px minmax(0, 1fr);
    }

    .tile-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        grid-template-rows:
            repeat(3, 1fr);

        gap: 12px;
    }

    .tile {
        aspect-ratio: 190 / 132;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 769px) {

    .feature-row {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .stat-panel.casino {
        height: 360px;
    }

    .tile-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        grid-template-rows:
            repeat(4, 1fr);

        gap: 10px;
    }

    .casino-man {
        width: 135px;
    }

    .stats {
        width: 205px;
    }

    .casino-content {
        padding: 20px;
    }

    .casino-content h3 {
        font-size: 21px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .section-head {
        margin-bottom: 10px;
    }

    .section-title h2 {
        font-size: 18px;
        line-height: 24px;
    }

    .more {
        font-size: 12px;
    }

    .feature-row {
        display: block;
    }

    /*
       Hide large desktop statistics card on mobile
       if you want only game cards.
    */
    .stat-panel.casino {
        display: none;
    }

    .tile-grid {
        display: grid;

        grid-template-columns:
            repeat(4, 150px);

        grid-template-rows:
            repeat(3, 105px);

        gap: 8px;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type: x mandatory;
    }

    .tile-grid::-webkit-scrollbar {
        display: none;
    }

    .tile {
        width: 150px;
        height: 105px;

        scroll-snap-align: start;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 568px) {

    .casino-section {
        padding: 0 10px;
    }

    .section-head {
        padding: 5px 0;
    }

    .section-title {
        gap: 7px;
    }

    .title-dot {
        width: 4px;
        height: 17px;
    }

    .section-title h2 {
        font-size: 17px;
    }

    .tile-grid {
        grid-template-columns:
            repeat(4, 145px);

        grid-template-rows:
            repeat(3, 100px);

        gap: 7px;
    }

    .tile {
        width: 145px;
        height: 100px;

        border-radius: 7px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .tile-grid {
        grid-template-columns:
            repeat(4, 130px);

        grid-template-rows:
            repeat(3, 90px);
    }

    .tile {
        width: 130px;
        height: 90px;
    }
}

  /* quick actions */
  .quick-actions{
    display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin:22px 0;
  }
  .qa-item{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 8px;text-align:center;font-size:12.5px;font-weight:600;color:var(--text);
    display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s, transform .12s;
  }
  .qa-item:hover{border-color:var(--gold);transform:translateY(-2px);}
  .qa-icon{width:26px;height:26px;opacity:.85;}

  /* feature-panel + grid layout (sidebar stat card + tile grid) */
  .feature-row{
    display:grid;grid-template-columns:260px 1fr;gap:14px;
  }
  .stat-panel{
    border-radius:var(--radius-lg);
    padding:20px;color:#fff;
    display:flex;flex-direction:column;justify-content:space-between;
    min-height:280px;
    position:relative;overflow:hidden;
  }
  .stat-panel .kicker{font-size:11px;font-weight:700;letter-spacing:.4px;opacity:.85;}
  .stat-panel h3{font-size:22px;margin-top:4px;}
  .stat-panel .stats{margin-top:auto;display:flex;flex-direction:column;gap:10px;}
  .stat-panel .stat b{display:block;font-size:16px;font-family:'Space Grotesk',sans-serif;}
  .stat-panel .stat span{font-size:11.5px;opacity:.8;}
  .stat-panel.live-dealers{background:linear-gradient(160deg,#2C6BE0,#173B84);}
  .stat-panel.sports{background:linear-gradient(160deg,#1E8F6B,#0E5A45);}
  .stat-panel.crash{background:linear-gradient(160deg,#D24A3E,#7C1F1A);}
  .stat-panel.slots{background:linear-gradient(160deg,#C24FCB,#6E2277);}
  .stat-panel.casino{background: linear-gradient(135deg, #ff7a00 0, #ffb800 57.81%, #ffdd2c);}

  /* ===== Live Dealers + Sports + Crash + Slots panels — artwork with white stat cards ===== */
  .feature-row.live-row,
  .feature-row.sports-row,
  .feature-row.crash-row,
  .feature-row.slots-row{position:relative;grid-template-columns:400px 1fr;}
  .stat-panel.live-dealers{
    background:
      radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(180deg,#47A4ED 0%,#2B84E0 55%,#1E68CE 100%);
  }
  .stat-panel.sports{
    background:
      radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(170deg,#2FBE6A 0%,#19A870 55%,#0E9377 100%);
  }
  .stat-panel.crash{
    background:
      radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(170deg,#E8435A 0%,#D6203F 55%,#BC1136 100%);
  }
  .stat-panel.slots{
    background:
      radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(170deg,#DE85E6 0%,#D155DE 55%,#BB2ED2 100%);
  }
  .feature-row.live-row .panel-dice{
    position:absolute;top:-12px;left:282px;width:102px;height:auto;
    z-index:3;pointer-events:none;user-select:none;
    filter:drop-shadow(0 8px 16px rgba(6,32,80,.28));
  }
  .feature-row.sports-row .panel-ball{
    position:absolute;top:-24px;left:284px;width:96px;height:auto;
    z-index:3;pointer-events:none;user-select:none;
    transform:rotate(-16deg);
    filter:drop-shadow(0 8px 16px rgba(6,60,30,.30));
  }
  .feature-row.crash-row .panel-plane{
    position:absolute;left:-30px;bottom:56px;width:200px;height:auto;
    z-index:1;pointer-events:none;user-select:none;
    filter:drop-shadow(0 10px 20px rgba(70,4,18,.45));
  }
  .stat-panel.live-dealers .panel-girl{
    position:absolute;left:-32px;bottom:-6px;width:78%;max-width:318px;height:auto;
    pointer-events:none;user-select:none;z-index:1;
    filter:drop-shadow(0 6px 20px rgba(4,28,70,.30));
  }
  .stat-panel.sports .panel-batsman{
    position:absolute;left:2px;bottom:-2px;width:47%;max-width:190px;height:auto;
    pointer-events:none;user-select:none;z-index:1;
    filter:drop-shadow(0 6px 20px rgba(4,60,35,.30));
  }
  .stat-panel.crash .panel-x100{
    position:absolute;top:12px;right:14px;width:108px;height:auto;
    pointer-events:none;user-select:none;z-index:2;
    filter:drop-shadow(0 4px 10px rgba(90,5,25,.4));
  }
  .stat-panel.slots .panel-777{
    position:absolute;top:16px;right:16px;width:84px;height:auto;
    pointer-events:none;user-select:none;z-index:1;
    filter:drop-shadow(0 4px 10px rgba(80,8,90,.35));
  }
   .stat-panel.slots .casino{
    position:absolute;top:16px;right:16px;width:84px;height:auto;
    pointer-events:none;user-select:none;z-index:1;
    filter:drop-shadow(0 4px 10px rgba(80,8,90,.35));
  }
  .stat-panel.slots .panel-machine{
    position:absolute;left:-8px;bottom:-10px;width:200px;height:auto;
    pointer-events:none;user-select:none;z-index:1;
    filter:drop-shadow(0 8px 18px rgba(80,8,90,.35));
  }
  .stat-panel.live-dealers .kicker,
  .stat-panel.live-dealers h3,
  .stat-panel.sports .kicker,
  .stat-panel.sports h3,
  .stat-panel.crash .kicker,
  .stat-panel.crash h3,
  .stat-panel.slots .kicker,
  .stat-panel.slots h3{position:relative;z-index:2;text-shadow:0 2px 10px rgba(10,60,40,.35);}
  .stat-panel.crash .kicker,
  .stat-panel.crash h3{text-shadow:0 2px 10px rgba(90,6,24,.4);}
  .stat-panel.slots .kicker,
  .stat-panel.slots h3{text-shadow:0 2px 10px rgba(80,8,70,.4);}
  .stat-panel.live-dealers .kicker,
  .stat-panel.sports .kicker,
  .stat-panel.crash .kicker,
  .stat-panel.slots .kicker{font-size:12px;opacity:.95;}
  .stat-panel.live-dealers h3,
  .stat-panel.sports h3,
  .stat-panel.crash h3,
  .stat-panel.slots h3{font-size:26px;margin-top:6px;}
  .stat-panel.live-dealers .stats,
  .stat-panel.sports .stats,
  .stat-panel.crash .stats,
  .stat-panel.slots .stats{
    position:relative;z-index:2;
    width:64%;min-width:200px;margin-left:auto;
    gap:14px;
  }
  .stat-panel.live-dealers .stat,
  .stat-panel.sports .stat,
  .stat-panel.crash .stat,
  .stat-panel.slots .stat{
    position:relative;
    background:linear-gradient(180deg,#FFFFFF 0%,#D9EDFD 100%);
    border-radius:14px;
    padding:14px 18px;
    box-shadow:0 6px 16px rgba(8,38,92,.22);
  }
  .stat-panel.sports .stat{
    background:linear-gradient(180deg,#FFFFFF 0%,#DCF5E9 100%);
    box-shadow:0 6px 16px rgba(8,70,40,.22);
  }
  .stat-panel.crash .stat{
    background:linear-gradient(180deg,#FFFFFF 0%,#F8D3D9 100%);
    box-shadow:0 6px 16px rgba(100,10,30,.28);
    padding:16px 20px;
  }
  .stat-panel.crash .stats{
    width:68%;
    gap:12px;
  }
  .stat-panel.slots .stat{
    background:linear-gradient(180deg,#FFFFFF 0%,#F7DFF5 100%);
    box-shadow:0 6px 16px rgba(80,10,80,.25);
    padding:16px 20px;
  }
  .stat-panel.slots .stats{
    width:68%;
    gap:12px;
  }
  .stat-panel.live-dealers .stat b,
  .stat-panel.sports .stat b,
  .stat-panel.crash .stat b,
  .stat-panel.slots .stat b{
    font-size:17px;color:#123A66;letter-spacing:.2px;text-transform:uppercase;
  }
  .stat-panel.crash .stat b{color:#4A0E20;font-size:18px;}
  .stat-panel.slots .stat b{color:#471040;font-size:18px;}
  .stat-panel.live-dealers .stat span,
  .stat-panel.sports .stat span,
  .stat-panel.slots .stat span{
    font-size:12px;color:#5D7391;opacity:1;font-weight:500;
  }
  .stat-panel.crash .stat span{
    color:#96656F;
  }
  .stat-panel.slots .stat span{
    color:#8F6B8C;
  }
  .stat-panel.live-dealers .stat .live-badge,
  .stat-panel.sports .stat .live-badge,
  .stat-panel.crash .stat .live-badge{
    position:absolute;top:-11px;right:14px;z-index:3;
    display:inline-block;
    background:#1FAE46;color:#fff;
    font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.3px;
    padding:5px 13px;border-radius:999px;
    opacity:1;
    box-shadow:0 3px 8px rgba(5,60,25,.35);
  }
  .stat-panel.sports .stat .live-badge.red{
    background:#E23B3E;
    box-shadow:0 3px 8px rgba(90,12,12,.35);
  }
  @media (max-width:980px){
    .feature-row.live-row,
    .feature-row.sports-row,
    .feature-row.crash-row,
    .feature-row.slots-row{grid-template-columns:320px 1fr;}
    .feature-row.live-row .panel-dice{left:202px;}
    .feature-row.sports-row .panel-ball{left:204px;}
    .feature-row.crash-row .panel-plane{left:-26px;bottom:44px;width:140px;}
    .stat-panel.live-dealers .stats,
    .stat-panel.sports .stats{width:66%;}
  }

  .tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .tile{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;transition:border-color .15s, transform .12s;
  }
  .tile:hover{border-color:var(--gold);transform:translateY(-2px);}
  .tile .thumb{
    aspect-ratio:4/3;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;text-align:center;padding:8px;
    color:rgba(255,255,255,.92);
  }
  .tile .meta{padding:9px 10px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;}
  .tile .meta b{color:var(--text);font-weight:600;font-size:12.5px;}

  .g1{background:linear-gradient(135deg,#3E63B5,#1E3D82);}
  .g2{background:linear-gradient(135deg,#C0455C,#7E1E31);}
  .g3{background:linear-gradient(135deg,#2E9B7A,#12594A);}
  .g4{background:linear-gradient(135deg,#B4802D,#6E4712);}
  .g5{background:linear-gradient(135deg,#7457C6,#3D2A80);}
  .g6{background:linear-gradient(135deg,#3C9BC9,#1D5A79);}
  .g7{background:linear-gradient(135deg,#C9435F,#7A1F35);}
  .g8{background:linear-gradient(135deg,#4E9E4E,#245B24);}

  /* ===== Promo Grid — 1 large promo card + 12 thumbnails in 4-column layout ===== */
  .promo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
  }
  .promo-card{
    grid-column:span 2;
    grid-row:span 6;
    border-radius:var(--radius-lg);
    overflow:hidden;
    position:relative;
    min-height:100%;
    background:linear-gradient(135deg,#1B324D,#0E1A2B);
    border:1px solid var(--line);
  }
  .promo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .promo-card .promo-overlay{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:24px;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.75) 100%);
    color:#fff;
  }
  .promo-card .promo-overlay h3{
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
    letter-spacing:-0.5px;
  }
  .promo-card .promo-overlay p{
    font-size:14px;
    opacity:.85;
    margin-bottom:16px;
  }
  .promo-card .promo-overlay .promo-btn{
    display:inline-block;
    padding:12px 28px;
    background:var(--gold);
    color:#0E1A2B;
    font-weight:700;
    font-size:14px;
    border-radius:8px;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:background .15s, transform .12s;
  }
  .promo-card .promo-overlay .promo-btn:hover{
    background:var(--gold-2);
    transform:translateY(-1px);
  }
  .promo-thumb{
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--line);
    transition:border-color .15s, transform .12s;
    aspect-ratio:1/1;
  }
  .promo-thumb:hover{
    border-color:var(--gold);
    transform:translateY(-2px);
  }
  .promo-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* sports icon grid */
  .sports-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .sport-tile{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 10px;text-align:center;font-size:14px;font-weight:600;
    display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .sport-tile .ico{width:30px;height:30px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;}
  .sport-tile .sport-img{
    width:58px;height:58px;object-fit:contain;
    pointer-events:none;user-select:none;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  }

  /* winners strip */
  .winners{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;}
  .winner-card{
    flex:0 0 auto;display:flex;align-items:center;gap:10px;
    background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:6px 14px 6px 6px;
    font-size:12px;white-space:nowrap;
  }
  .winner-card .avatar{width:30px;height:30px;border-radius:50%;background:var(--panel-2);}
  .winner-card b{color:var(--gold);}

  /* bonuses */
  .bonus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .bonus-card{
    border-radius:var(--radius-lg);padding:18px;color:#fff;min-height:170px;display:flex;flex-direction:column;
    position:relative;overflow:hidden;
  }
  .bonus-card .cat{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.4px;}
  .bonus-card h4{margin-top:6px;font-size:16px;line-height:1.25;}
  .bonus-card .cta{margin-top:auto;display:flex;gap:8px;}
  .bonus-card .cta button{padding:8px 12px;border-radius:6px;font-size:12px;font-weight:700;}
  .bc1{background:linear-gradient(140deg,#E3922C,#8A4E0C);}
  .bc2{background:linear-gradient(140deg,#2E9B7A,#12594A);}
  .bc3{background:linear-gradient(140deg,#C0455C,#7E1E31);}
  .bc4{background:linear-gradient(140deg,#7457C6,#3D2A80);}

  /* footer */
  footer{border-top:1px solid var(--line);padding:44px 0 24px;margin-top:20px;background:var(--panel);}
  .foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.4fr;gap:24px;}
  .foot-grid h5{font-size:13px;margin-bottom:12px;color:var(--muted);font-weight:600;}
  .foot-grid a{display:block;font-size:13px;color:var(--text);opacity:.85;margin-bottom:8px;}
  .foot-grid a:hover{color:var(--gold);opacity:1;}
  .providers{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
  .providers span{
    background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-size:12px;color:var(--muted);font-weight:600;
  }
  .foot-bottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;}

  /* ---------- Modal (login/registration) ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(6,12,20,0.72);
    display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    width:920px;max-width:100%;background:var(--panel);border-radius:var(--radius-lg);
    display:flex;overflow:hidden;position:relative;border:1px solid var(--line);
    max-height:90vh;
  }
  .modal-close{
    position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
    background:rgba(255,255,255,0.08);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:2;
  }
  .modal-visual{
    flex:1;
    background:linear-gradient(180deg, rgba(14,26,43,0.15), rgba(14,26,43,0.85)),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, transparent 14px 28px),
      linear-gradient(160deg,#1E3D82,#0E1A2B);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    padding:40px 30px;gap:10px;
  }
  .modal-visual h3{font-size:28px;}
  .modal-visual p{font-size:13px;color:var(--muted);max-width:280px;}
  .modal-visual .brand{margin-top:20px;font-size:20px;color:var(--gold);}
  .modal-form{
    flex:1;padding:44px 34px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;
  }
  .modal-form .switch{font-size:13px;color:var(--muted);}
  .modal-form .switch b{color:var(--teal);font-weight:600;cursor:pointer;}
  .tab-row{display:flex;gap:10px;}
  .tab-row .tab{
    flex:1;padding:11px;border-radius:8px;border:1px solid var(--line);background:transparent;
    font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .tab-row .tab.active{background:var(--teal);color:#04241F;border-color:var(--teal);}
  .field{
    display:flex;align-items:center;gap:8px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--muted);
  }
  .field input{background:transparent;border:none;outline:none;color:var(--text);font-size:13px;width:100%;}
  .row-2{display:flex;gap:10px;}
  .cc{width:78px;flex:0 0 78px;}
  .link{font-size:12.5px;color:var(--teal);}
  .promo-box{
    background:linear-gradient(120deg,var(--teal),#1E8F87);color:#04241F;border-radius:8px;
    padding:12px 14px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;
  }
  .terms{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;}
  .divider{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);}
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line);}
  .btn-google{
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:#1B2A3D;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:13px;font-weight:600;
  }

  /* ---------- Mobile phone frame section ---------- */
  .phone-showcase{padding:60px 0 90px;text-align:center;}
  .phone-showcase h2{font-size:22px;margin-bottom:6px;}
  .phone-showcase p{color:var(--muted);font-size:14px;margin-bottom:34px;}
  .phone-frame{
    width:340px;margin:0 auto;
    border:10px solid #05090F;border-radius:38px;
    background:var(--bg);
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    overflow:hidden;
  }
  .phone-screen{max-height:680px;overflow-y:auto;}
  .phone-nav{
    display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
    border-bottom:1px solid var(--line);
  }
  .phone-nav .brand{font-size:16px;}
  .phone-btns{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
  .phone-btns .btn{width:100%;text-align:center;padding:11px;}
  .phone-search{margin:0 16px 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--muted);}
  .phone-banner{margin:0 16px 16px;height:130px;border-radius:12px;}
  .phone-qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 18px;}
  .phone-qa .qa-item{padding:10px 4px;font-size:10.5px;gap:6px;}
  .phone-section{padding:0 16px 20px;}
  .phone-section .section-head{margin-bottom:10px;}
  .phone-section .section-head h2{font-size:14px;}
  .phone-tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .phone-tile-row .tile .thumb{font-size:10.5px;padding:6px;}
  .phone-tile-row .tile .meta{font-size:10px;padding:6px 8px;}
  .phone-tile-row .tile .meta b{font-size:10.5px;}
  .phone-foot{background:var(--panel);padding:20px 16px;font-size:11px;color:var(--muted);}
  .phone-foot .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .phone-foot a{display:block;color:var(--text);opacity:.85;margin-bottom:6px;font-size:11px;}
  .phone-foot h5{font-size:11px;margin-bottom:8px;color:var(--muted);}

  @media (max-width: 980px){
    nav.links{display:none;}
    .quick-actions{grid-template-columns:repeat(4,1fr);}
    .feature-row{grid-template-columns:1fr;}
    .tile-grid{grid-template-columns:repeat(3,1fr);}
    .sports-grid{grid-template-columns:repeat(3,1fr);}
    .bonus-grid{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .modal{flex-direction:column;}
    .modal-visual{display:none;}
    .promo-grid{grid-template-columns:repeat(2,1fr);}
    .promo-card{grid-column:span 2;grid-row:span 1;}
    .promo-thumb{aspect-ratio:1/1;}
  }

  /* =========================================================
     MOBILE REDESIGN — compact app-style layout
     Matches the supplied mobile reference while keeping
     desktop markup/content intact.
     ========================================================= */
  .mobile-topbar,
  .mobile-bottom-nav{
    display:none;
  }

  @media (max-width: 600px){
    :root{
      --mobile-gap:8px;
    }

    html, body{
      width:100%;
      min-width:0;
      overflow-x:hidden;
    }

    body{
      padding-bottom:66px;
      background:#071629;
      font-size:12px;
    }

    .wrap{
      width:100%;
      max-width:none;
      padding:0 10px;
    }

    header{
      position:sticky;
      top:0;
      z-index:100;
      background:#07182b;
      border-bottom:1px solid #18324e;
    }

    /* Top utility row */
    .mobile-topbar{
      height:36px;
      padding:0 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:#102844;
      border-bottom:1px solid #18324e;
    }

    .mobile-top-left,
    .mobile-top-right{
      display:flex;
      align-items:center;
      gap:10px;
      width:auto;
    }

    .mobile-top-right{
      justify-content:flex-end;
    }

    .mobile-icon{
      color:#eef5ff;
      font-size:14px;
      line-height:1;
      display:inline-flex;
      align-items:center;
    }

    .mobile-chat-ico{
      width:15px;
      height:15px;
    }

    .mobile-apple-ico{
      width:14px;
      height:14px;
    }

    .mobile-app-icon{
      width:16px;
      height:16px;
      border-radius:4px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#071629;
      background:#f4c53f;
      font-size:9px;
      font-weight:800;
    }

    .mobile-app-icon svg{
      width:10px;
      height:10px;
      display:block;
    }

    .mobile-brand-wrap{
      display:flex;
      align-items:center;
      gap:7px;
    }

    .mobile-brand-logo{
      height:15px;
      width:auto;
      display:block;
    }

    .topbar-flag{
      width:20px;
      height:14px;
      border-radius:2.5px;
      display:inline-block;
      background:
        radial-gradient(circle at 50% 50%, #1a3a8f 0 1.6px, transparent 2.1px),
        linear-gradient(180deg, #ff9933 0 33.3%, #ffffff 33.3% 66.6%, #128807 66.6% 100%);
      box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25);
    }

    /* Login / registration row */
    .nav-top{
      height:54px;
      padding:7px 12px;
      display:block;
    }

    .nav-top > .brand{
      display:none;
    }

    nav.links{
      display:none !important;
    }

    .nav-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:7px;
      width:100%;
      height:31px;
    }

    /* Round flag avatar is desktop-only */
    .nav-avatar{
      display:none;
    }

    .nav-actions .btn{
      width:100%;
      min-width:0;
      padding:7px 5px;
      border-radius:5px;
      font-size:10px;
      line-height:1;
      font-weight:700;
      letter-spacing:0;
      text-transform:uppercase;
    }

    .btn-outline{
      background:#0878e8;
      border-color:#0878e8;
      color:#fff;
    }

    .btn-gold{
      background:#18ad4e;
      border-color:#18ad4e;
      color:#fff;
    }

    /* Search */
    .search-row{
      padding:7px 10px 6px;
      background:#071629;
    }

    .search-box{
      height:34px;
      padding:8px 10px;
      border:0;
      border-radius:5px;
      background:#102844;
      color:#6983a0;
      font-size:10px;
    }

    /* Hero */
    main.wrap{
      padding:0 10px;
    }

    .banner-slot{
      height:78px !important;
      margin:0 0 8px;
      border:0;
      border-radius:5px;
      font-size:0;
      overflow:hidden;
      background:
        linear-gradient(120deg,#193e68,#0d243e);
    }

    .banner-slot svg,
    .banner-slot .dim{
      display:none;
    }

    .banner-slot::after{
      content:"YOUR PROMO BANNER";
      font-size:11px;
      font-weight:700;
      color:#fff;
      opacity:.8;
    }

    /* Quick action menu: 4 columns */
    .quick-actions{
      grid-template-columns:repeat(4,1fr);
      gap:5px;
      margin:0 0 10px;
    }

    .qa-item{
      min-height:42px;
      padding:7px 3px;
      border:0;
      border-radius:5px;
      background:#102844;
      font-size:8px;
      line-height:1.15;
      gap:4px;
      justify-content:center;
    }

    .qa-item:hover{
      transform:none;
      border-color:transparent;
    }

    /* All content sections become compact mobile carousels/rows */
    section{
      padding:5px 0 8px;
    }

    .section-head{
      margin-bottom:6px;
      align-items:center;
    }

    .section-head h2{
      font-size:12px;
      gap:5px;
      font-weight:700;
    }

    .section-head .tag{
      width:12px;
      height:12px;
      border-radius:50%;
      background:transparent;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }

    .section-head .tag::after{
      content:"";
      width:9px;
      height:9px;
      border-radius:50%;
      background:#ef4a48;
      box-shadow:0 0 0 2px rgba(255,255,255,.12);
    }

    .section-head .more{
      font-size:8px;
      white-space:nowrap;
    }

    .feature-row{
      display:block;
    }

    .stat-panel{
      display:none;
    }

    /* dice + ball + plane artwork live on .feature-row — hide them with the panel on phones */
    .feature-row.live-row .panel-dice,
    .feature-row.sports-row .panel-ball,
    .feature-row.crash-row .panel-plane{
      display:none;
    }

    /* 3 cards per row, matching the reference */
    .tile-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:5px;
    }

    .tile{
      min-width:0;
      border:0;
      border-radius:5px;
      background:#102844;
    }

    .tile:hover{
      transform:none;
      border-color:transparent;
    }

    .tile .thumb{
      aspect-ratio:1.42 / 1;
      min-height:56px;
      padding:3px;
      font-size:8px;
      line-height:1;
    }

    .tile .meta{
      min-height:17px;
      padding:3px 4px;
      display:block;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      text-align:center;
      font-size:7px;
      color:#d7e2ee;
    }

    .tile .meta b{
      display:none;
    }

    /* Sports becomes 5 compact icons across */
    .sports-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:5px;
    }

    .sport-tile{
      min-height:48px;
      padding:6px 2px;
      border:0;
      border-radius:5px;
      background:#102844;
      font-size:7px;
      gap:3px;
      justify-content:center;
    }

    .sport-tile .sport-img{
      width:22px;
      height:22px;
      filter:none;
    }

    /* Winners */
    .winners{
      gap:5px;
      overflow-x:auto;
      scrollbar-width:none;
      padding-bottom:0;
    }

    .winners::-webkit-scrollbar{
      display:none;
    }

    .winner-card{
      max-width:150px;
      padding:4px 7px 4px 4px;
      gap:5px;
      border:0;
      border-radius:18px;
      background:#102844;
      font-size:7px;
    }

    .winner-card .avatar{
      width:23px;
      height:23px;
      flex:0 0 23px;
    }

    .winner-card b{
      font-size:7px;
    }

    /* Bonuses: 2 cards visible side-by-side and horizontally scrollable */
    .bonus-grid{
      display:flex;
      gap:7px;
      overflow-x:auto;
      padding-bottom:2px;
      scrollbar-width:none;
    }

    .bonus-grid::-webkit-scrollbar{
      display:none;
    }

    .bonus-card{
      flex:0 0 166px;
      min-height:130px;
      padding:10px;
      border-radius:6px;
    }

    .bonus-card .cat{
      font-size:8px;
    }

    .bonus-card h4{
      font-size:12px;
    }

    .bonus-card .cta{
      gap:4px;
    }

    .bonus-card .cta button{
      padding:6px 8px;
      font-size:8px;
    }

    /* Footer — app-style 2-column links */
    footer{
      margin-top:8px;
      padding:18px 0 85px;
      background:#0b2037;
      border-top:1px solid #16324d;
    }

    .foot-grid{
      grid-template-columns:1fr 1fr;
      gap:18px 25px;
    }

    .foot-grid > div:first-child{
      grid-column:1 / -1;
      display:none;
    }

    .foot-grid h5{
      margin-bottom:8px;
      font-size:9px;
      color:#eef5ff;
    }

    .foot-grid a{
      margin-bottom:6px;
      font-size:8px;
      color:#6f8ca9;
    }

    .foot-grid > div:last-child{
      grid-column:1 / -1;
    }

    .foot-grid > div:last-child p,
    .foot-grid > div:last-child button{
      display:none;
    }

    .providers{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:5px;
      margin-top:14px;
    }

    .providers span{
      min-height:28px;
      padding:6px 4px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      border:0;
      border-radius:4px;
      background:#102844;
      font-size:7px;
    }

    .foot-bottom{
      margin-top:12px;
      padding-top:10px;
      display:flex;
      flex-direction:column;
      gap:7px;
      font-size:7px;
      text-align:center;
    }

    /* Fixed bottom navigation */
    .mobile-bottom-nav{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:300;
      height:58px;
      display:grid;
      grid-template-columns:repeat(6,1fr);
      background:#091d31;
      border-top:1px solid #1c3854;
      box-shadow:0 -8px 20px rgba(0,0,0,.22);
    }

    .mobile-bottom-nav a{
      min-width:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      color:#8299b2;
      font-size:12px;
    }

    .mobile-bottom-nav a span{
      height:18px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .mobile-bottom-nav small{
      font-size:7px;
      line-height:1;
      white-space:nowrap;
    }

    .mobile-bottom-nav a.active{
      color:#fff;
    }

    /* Modal stays usable on phones */
    .modal-overlay{
      padding:8px;
    }

    .modal{
      width:100%;
      max-height:94vh;
      border-radius:10px;
    }

    .modal-form{
      padding:22px 15px;
      gap:12px;
    }

    .modal-form .tab-row{
      gap:6px;
    }

    .modal-form .tab{
      font-size:11px;
      padding:10px 6px;
    }
  }

  @media (min-width: 601px) and (max-width: 980px){
    .mobile-topbar{
      display:none;
    }
    .mobile-bottom-nav{
      display:none;
    }
  }


  /* =========================================================
     AUTH POPUPS + FLOATING CHAT
     ========================================================= */

  .modal-overlay{
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(2px);
    padding:18px;
  }

  .modal{
    width:955px;
    max-width:calc(100vw - 36px);
    min-height:610px;
    max-height:calc(100vh - 36px);
    background:#0d2239;
    border:0;
    border-radius:9px;
    box-shadow:0 24px 70px rgba(0,0,0,.65);
  }

  .modal-close{
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    border-radius:5px;
    background:#163655;
    color:#8fb0cc;
    font-size:20px;
  }

  .modal-visual{
    flex:0 0 51%;
    min-height:610px;
    padding:40px 34px 34px;
    position:relative;
    overflow:hidden;
    justify-content:flex-end;
    background:
      radial-gradient(circle at 70% 15%, rgba(255,209,48,.8) 0 2%, transparent 2.5%),
      radial-gradient(circle at 82% 32%, rgba(255,220,50,.75) 0 5%, transparent 5.5%),
      linear-gradient(180deg,rgba(5,37,75,.08),rgba(3,15,49,.9)),
      linear-gradient(145deg,#087bc8 0%,#0c396d 48%,#07183f 100%);
  }

  /* Decorative cricket-ball / sports feel without external assets */
  .modal-visual::before{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    right:-55px;
    top:95px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff8b0 0 7%,#ffd52d 10% 48%,#d79a0d 70%,transparent 71%);
    opacity:.78;
    filter:blur(.2px);
  }

  .modal-visual::after{
    content:"";
    position:absolute;
    width:250px;
    height:15px;
    left:-35px;
    top:245px;
    background:rgba(255,255,255,.78);
    transform:rotate(-57deg);
    border-radius:10px;
    box-shadow:0 0 0 7px rgba(255,255,255,.12);
    opacity:.65;
  }

  .modal-visual h3{
    position:relative;
    z-index:2;
    font-size:48px;
    line-height:1.05;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 3px 2px rgba(0,0,0,.35);
    margin:0 0 22px;
    letter-spacing:-1.5px;
  }

  .modal-visual p{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:19px;
    line-height:1.35;
    max-width:370px;
    margin:0 auto 38px;
  }

  .modal-visual .brand{
    position:relative;
    z-index:2;
    margin:0;
    color:#fff;
    font-size:28px;
    background:#05070b;
    padding:5px 12px;
    border-radius:5px;
  }

  .modal-form{
    flex:1;
    padding:55px 38px 28px;
    gap:15px;
    background:#0d2239;
  }

  .modal-form .switch{
    font-size:14px;
    color:#fff;
    margin-bottom:1px;
  }

  .modal-form .switch b,
  .modal-form .link{
    color:#0794ff;
  }

  .tab-row{
    gap:10px;
    margin-bottom:18px;
  }

  .tab-row .tab{
    padding:14px;
    border:0;
    background:#1b334f;
    border-radius:9px;
    color:#8faec9;
    font-size:15px;
  }

  .tab-row .tab.active{
    background:#078cf4;
    color:#fff;
  }

  .field{
    min-height:52px;
    background:#112b47;
    border:1px solid #234465;
    border-radius:9px;
    padding:13px 15px;
    color:#a0b8cf;
    font-size:15px;
  }

  .field input{
    font-size:15px;
    color:#fff;
  }

  .modal-form .link{
    font-size:14px;
    margin:1px 0 16px;
  }

  .modal-form > .btn{
    min-height:50px;
    border-radius:9px;
    font-size:15px;
    background:#18324e;
    color:#5f7893;
  }

  .modal-form .divider{
    margin:2px 0;
    color:#fff;
    font-weight:700;
  }

  .modal-form .btn-google{
    min-height:48px;
    border:0;
    border-radius:25px;
    background:#247bea;
    color:#fff;
    font-size:15px;
  }

  /* Registration-specific popup */
  #modal-register .modal-form{
    padding-top:54px;
  }

  #modal-register .row-2{
    gap:0;
  }

  #modal-register .row-2 .cc{
    width:135px;
    flex:0 0 135px;
    border-radius:9px 0 0 9px;
    border-right:0;
  }

  #modal-register .row-2 .field:not(.cc){
    border-radius:0 9px 9px 0;
  }

  #modal-register .promo-box{
    min-height:63px;
    border-radius:9px;
    padding:11px 14px;
    background:linear-gradient(100deg,#7825ff,#159ff2);
    color:#fff;
    font-size:14px;
  }

  #modal-register .terms{
    font-size:13px;
    line-height:1.35;
    color:#7893ad;
    margin:2px 0 10px;
  }

  #modal-register .terms input{
    accent-color:#14d29c;
  }

  #modal-register .btn-gold{
    background:#1d3a5e;
    border-color:#1d3a5e;
    color:#5f7893;
    text-transform:uppercase;
    letter-spacing:.6px;
    font-weight:700;
    border-radius:10px;
  }

  /* =========================================================
     CASINO GAMES SECTION
     Left: Orange gradient stat panel with stats + image
     Right: 4-column × 3-row game tile grid
     ========================================================= */
.casino-section {
  padding: 34px 0;
}

.casino-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* ---- Left Sidebar - Stat Panel ---- */
.casino-sidebar {
  flex: 0 0 280px;
}

.casino-stat-card {
  background: linear-gradient(145deg, #FF8C00, #FF4500, #E8451C);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(255, 69, 0, 0.25);
}

.casino-stat-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.casino-stat-card::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.casino-stat-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.casino-stat-card .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 1;
}

.casino-stat-card .stat-item:last-of-type {
  border-bottom: none;
}

.casino-stat-card .stat-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.casino-stat-card .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.casino-sidebar-img {
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* ---- Right Grid - Game Tiles ---- */
.casino-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
}

.casino-tile {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1 / 1;
}

.casino-tile:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.casino-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.casino-tile .tile-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.casino-tile:hover .tile-name {
  opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .casino-layout {
    flex-direction: column;
  }
  .casino-sidebar {
    flex: none;
  }
  .casino-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .casino-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .casino-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
}


  /* =========================================================
     REGISTRATION POPUP — REDESIGNED
     Left: photo background (registration.webp) + logo badge
     Right: phone / password / bonus chooser form
     ========================================================= */

  /* Left visual panel — photo background */
  #modal-register .modal-visual{
    background:
      linear-gradient(180deg, rgba(6,14,30,.14) 0%, rgba(6,14,30,0) 38%, rgba(6,14,30,.62) 100%),
      url("../img/registration.webp") center top / cover no-repeat,
      #0d2239;
  }

   #modal-login .modal-visual{
    background:
      linear-gradient(180deg, rgba(6,14,30,.14) 0%, rgba(6,14,30,0) 38%, rgba(6,14,30,.62) 100%),
      url("../img/login.webp") center top / cover no-repeat,
      #0d2239;
  }

  #modal-register .modal-visual::before,
  #modal-register .modal-visual::after,
  #modal-login .modal-visual::before,
  #modal-login .modal-visual::after{
    display:none;
  }

  #modal-register .modal-visual h3,
  #modal-login .modal-visual h3{
    font-size:54px;
    letter-spacing:-1px;
    margin-bottom:12px;
  }

  #modal-register .modal-visual p,
  #modal-login .modal-visual p{
    font-size:19px;
    margin-bottom:28px;
  }

  /* Logo badge + India flag at the bottom of the visual */
  .reg-brand{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  .reg-brand-badge{
    display:flex;
    align-items:center;
    background:#05070b;
    border-radius:8px;
    padding:9px 16px;
  }

  .reg-brand-badge img{
    height:24px;
    width:auto;
    display:block;
  }

  .reg-flag{
    width:26px;
    height:26px;
    border-radius:50%;
    display:inline-block;
    background:
      radial-gradient(circle at 50% 50%, #1a3a8f 0 3.5px, transparent 4px),
      linear-gradient(180deg, #ff9933 0 33.3%, #ffffff 33.3% 66.6%, #128807 66.6% 100%);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  }

  /* Small round India flag inside form fields */
  .flag-ico{
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:50%;
    display:inline-block;
    background:
      radial-gradient(circle at 50% 50%, #1a3a8f 0 3px, transparent 3.5px),
      linear-gradient(180deg, #ff9933 0 33.3%, #ffffff 33.3% 66.6%, #128807 66.6% 100%);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  }

  #modal-register .field{
    background:#12283f;
    border-color:#1d3a57;
    border-radius:10px;
    color:#7d93ac;
  }

  #modal-register .row-2 .cc{
    gap:8px;
    font-size:15px;
    color:#fff;
  }

  #modal-register .row-2 .field:not(.cc){
    border-left:1px solid #1d3a57;
  }

  .cc-code{
    font-weight:600;
  }

  .chev{
    color:#6f869e;
    font-size:14px;
    line-height:1;
  }

  .chev-end{
    margin-left:auto;
  }

  /* Password field with eye-off icon */
  .pw-field input{
    flex:1;
    width:auto;
    min-width:0;
  }

  .pw-eye{
    width:20px;
    height:20px;
    flex:0 0 20px;
    color:#7d93ac;
  }

  /* Currency field */
  .cur-label{
    color:#fff;
    font-size:15px;
    font-weight:600;
    letter-spacing:.2px;
  }

  .cur-label i{
    font-style:normal;
    color:#7d93ac;
    font-weight:500;
  }

  /* Promo code link */
  #modal-register .promo-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:15px;
    cursor:pointer;
    margin:1px 0 6px;
  }

  #modal-register .switch b{
    color:#2f7df6;
  }

  .plus-ico{
    width:20px;
    height:20px;
    flex:0 0 20px;
    border-radius:50%;
    background:#2f7df6;
    color:#fff;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  /* Bonus chooser */
  .bonus-head{
    font-size:15px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#fff;
  }

  .bonus-card{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:60px;
    padding:8px 14px 8px 8px;
    border-radius:10px;
    background:linear-gradient(90deg,#2e6ff2 0%,#7a3bf6 100%);
    color:#fff;
    cursor:pointer;
  }

  .bonus-img{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:8px;
    object-fit:cover;
    display:block;
    background:#0b1e38;
  }

  .bonus-text{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1.2;
    text-align:left;
  }

  .bonus-text b{
    font-size:14.5px;
    font-weight:700;
  }

  .bonus-text span{
    font-size:13.5px;
    opacity:.95;
  }

  .bonus-chev{
    font-size:22px;
    line-height:1;
    opacity:.9;
  }

  /* Terms row with green check */
  #modal-register .terms{
    gap:10px;
  }

  .ok-check{
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:50%;
    background:#17a94e;
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:1px;
  }

  #modal-register .terms b{
    color:#cfe0f1;
  }

  /* OR divider */
  #modal-register .divider{
    color:#fff;
    font-size:13px;
  }

  #modal-register .divider::before,
  #modal-register .divider::after{
    background:#27405c;
  }

  /* Continue with Google */
  #modal-register .btn-google{
    position:relative;
    background:#2f7df6;
    border-radius:26px;
    min-height:50px;
    font-weight:600;
  }

  .g-badge{
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .g-badge svg{
    width:20px;
    height:20px;
    display:block;
  }

  #modal-register .modal-close{
    width:34px;
    height:34px;
    border-radius:8px;
    background:#12283f;
    color:#fff;
  }

  /* --- Registration popup on phones --- */
  @media (max-width:600px){
    #modal-register .modal-visual h3,
    #modal-login .modal-visual h3{
      font-size:26px;
      margin-bottom:4px;
    }

    #modal-register .modal-visual p,
    #modal-login .modal-visual p{
      font-size:11px;
      max-width:250px;
      margin-bottom:8px;
    }

    .reg-brand{
      gap:8px;
    }

    .reg-brand-badge{
      padding:4px 8px;
      border-radius:5px;
    }

    .reg-brand-badge img{
      height:13px;
    }

    .reg-flag{
      width:16px;
      height:16px;
    }

    .flag-ico{
      width:16px;
      height:16px;
      flex-basis:16px;
    }

    #modal-register .row-2 .cc{
      gap:5px;
      font-size:11px;
    }

    .cc-code{
      font-weight:600;
    }

    .chev{
      font-size:11px;
    }

    .cur-label{
      font-size:11px;
    }

    .pw-eye{
      width:16px;
      height:16px;
      flex-basis:16px;
    }

    #modal-register .promo-link{
      font-size:11px;
      gap:7px;
    }

    .plus-ico{
      width:16px;
      height:16px;
      flex-basis:16px;
      font-size:12px;
    }

    .bonus-head{
      font-size:11px;
    }

    .bonus-card{
      min-height:44px;
      padding:6px 10px 6px 6px;
      gap:8px;
    }

    .bonus-img{
      width:32px;
      height:32px;
      flex-basis:32px;
    }

    .bonus-text b{
      font-size:11px;
    }

    .bonus-text span{
      font-size:10px;
    }

    .bonus-chev{
      font-size:16px;
    }

    .ok-check{
      width:14px;
      height:14px;
      flex-basis:14px;
      font-size:9px;
    }

    #modal-register .btn-google{
      min-height:42px;
      border-radius:21px;
      font-size:11px;
    }

    .g-badge{
      width:30px;
      height:30px;
    }

    .g-badge svg{
      width:16px;
      height:16px;
    }

    #modal-register .modal-close{
      width:28px;
      height:28px;
      font-size:16px;
    }
  }

  /* Floating support/chat bubble */
  .floating-chat{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:180;
    width:62px;
    height:62px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0aa9e8;
    box-shadow:0 8px 25px rgba(0,0,0,.35);
    cursor:pointer;
    border:0;
  }

  .floating-chat::before{
    content:"";
    width:27px;
    height:21px;
    background:#fff;
    border-radius:50%;
    display:block;
  }

  .floating-chat::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    background:#fff;
    bottom:18px;
    right:17px;
    transform:skew(-20deg);
  }

  @media (max-width:600px){
    .modal-overlay{
      padding:0;
      align-items:flex-end;
    }

    .modal{
      width:100%;
      max-width:none;
      min-height:0;
      max-height:96vh;
      border-radius:14px 14px 0 0;
      flex-direction:column;
      overflow:auto;
    }

    .modal-visual{
      display:flex;
      min-height:170px;
      flex:0 0 170px;
      padding:25px 20px 18px;
      justify-content:flex-end;
    }

    .modal-visual h3{
      font-size:27px;
      margin-bottom:6px;
    }

    .modal-visual p{
      font-size:11px;
      max-width:250px;
      margin-bottom:9px;
    }

    .modal-visual .brand{
      font-size:16px;
      padding:3px 8px;
    }

    .modal-visual::before{
      width:100px;
      height:100px;
      right:-10px;
      top:25px;
    }

    .modal-visual::after{
      width:120px;
      top:72px;
    }

    .modal-form,
    #modal-register .modal-form{
      padding:20px 14px 22px;
      gap:10px;
    }

    .modal-form .switch{
      font-size:11px;
    }

    .tab-row{
      margin-bottom:5px;
    }

    .tab-row .tab{
      padding:10px 6px;
      font-size:10px;
    }

    .field{
      min-height:42px;
      padding:9px 11px;
      font-size:11px;
    }

    .field input{
      font-size:11px;
    }

    .modal-form .link{
      font-size:10px;
      margin-bottom:5px;
    }

    .modal-form > .btn,
    .modal-form .btn-google{
      min-height:42px;
      font-size:11px;
    }

    #modal-register .row-2 .cc{
      width:88px;
      flex-basis:88px;
    }

    #modal-register .promo-box{
      min-height:48px;
      font-size:10px;
    }

    #modal-register .terms{
      font-size:9px;
      margin-bottom:2px;
    }

    .floating-chat{
      width:54px;
      height:54px;
      left:18px;
      bottom:70px;
    }
  }


  /* =========================================================
     SECTION IMAGES — quick actions + game tiles + section icons
     ========================================================= */

  .quick-actions{
    grid-template-columns:repeat(8,1fr);
  }

  .qa-img{
    width:54px;
    height:46px;
    object-fit:contain;
    pointer-events:none;
  }

  .sec-ico{
    width:28px;
    height:28px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
  }

  /* non-square section icons (e.g. slot machine) keep their natural shape */
  .sec-ico.flat{
    border-radius:0;
    object-fit:contain;
  }

  /* Header + footer logo image */
  .brand-logo{
    height:30px;
    width:auto;
    display:block;
  }

  /* India flag next to header logo */
  .nav-flag{
    flex:0 0 auto;
    margin-left:-18px;
    width:22px;
    height:22px;
    border-radius:50%;
    display:inline-block;
    background:
      radial-gradient(circle at 50% 50%, #1a3a8f 0 3px, transparent 3.5px),
      linear-gradient(180deg, #ff9933 0 33.3%, #ffffff 33.3% 66.6%, #128807 66.6% 100%);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
    position:relative;
  }

  @media (max-width: 768px) {
  .nav-flag {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .nav-flag {
    display: none !important;
  }
}

  .nav-flag::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1.5px solid #1a3a8f;
  }

  /* Round India-flag account avatar — far right of the desktop header */
  .nav-avatar{
    width:34px;
    height:34px;
    margin-left:2px;
    border-radius:50%;
    cursor:pointer;
    flex:0 0 auto;
    background:
      radial-gradient(circle at 50% 50%, #1a3a8f 0 4.5px, transparent 5px),
      linear-gradient(180deg, #ff9933 0 33.3%, #ffffff 33.3% 66.6%, #128807 66.6% 100%);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  }

  .nav-avatar::before{
    width:13px;
    height:13px;
    border-width:2px;
  }

  .tile .thumb{
    position:relative;
    padding:0;
  }

  .tile .thumb img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  @media (max-width:600px){
    .qa-img{
      width:36px;
      height:30px;
    }

    .sec-ico{
      width:16px;
      height:16px;
    }
  }


  /* =========================================================
     HERO BANNER SLIDER — auto slide + dots navigation
     ========================================================= */

  .hero-slider{
    position:relative;
    height:280px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin:22px 0 0;
    background:var(--panel);
  }

  .hero-track{
    display:flex;
    height:100%;
    transition:transform .55s ease;
    will-change:transform;
  }

  .hero-slide{
    flex:0 0 100%;
    min-width:100%;
    height:100%;
  }

  .hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* dots navigation */
  .hero-dots{
    position:absolute;
    left:16px;
    bottom:12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    z-index:2;
  }

  .hero-dot{
    width:8px;
    height:8px;
    padding:0;
    border-radius:20px;
    background:rgba(255,255,255,.55);
    border:0;
    cursor:pointer;
    transition:width .25s, background .25s;
  }

  .hero-dot.active{
    width:22px;
    background:#0a84ff;
  }

  .hero-dot:hover{
    background:rgba(255,255,255,.85);
  }

  .hero-dot.active:hover{
    background:#0a84ff;
  }

  @media (max-width:600px){
    .hero-slider{
      height:150px;
      border-radius:5px;
      margin-top:8px;
    }

    .hero-dots{
      left:10px;
      bottom:8px;
      gap:5px;
    }

    .hero-dot{
      width:6px;
      height:6px;
    }

    .hero-dot.active{
      width:16px;
    }
  }

  /* =========================================================
     4RABET EXCLUSIVES / ENTERTAINMENT INFO SECTION
     ========================================================= */

  .main-page__section--entertainment {
    width: 100%;
    margin: 28px 0;
  }

  .entertainment-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  /* Title Block */
  .entertainment-info__title-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .entertainment-info__title-link-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .entertainment-info__title-icon,
  .entertainment-info__title-block img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .entertainment-info__title-text {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
  }

  .entertainment-info__second-link {
    color: #8FA6BF;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .entertainment-info__second-link:hover {
    color: #ffffff;
  }

  /* Content Block Layout */
  .entertainment-info__content-block {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
  }

  /* Left Feature Info Block */
  .info-block--blue2 {
    position: relative;
    display: block;
    background: linear-gradient(135deg, #009BFD 0%, #0060FA 55%, #0042D0 100%);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    min-height: 420px;
    box-shadow: 0 8px 24px rgba(0, 96, 250, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .info-block--blue2:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 96, 250, 0.35);
  }

  .info-block__inner-block {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Top Section in Blue Card */
  .info-block__top-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 3;
    position: relative;
  }

  .info-block__headline {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .info-block__headline--bold {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 2px;
    line-height: 1.15;
  }

  /* Minor Image (Top Right Brand Badge) */
  .info-block__img-block--minor-exclusives {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 95px;
  }

  .entertainment-info__img--minor {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* Main Graphic (Wheel + Cards 3D illustration at bottom-left) */
  .info-block__img-block--main-exclusives {
    position: absolute;
    left: -25px;
    bottom: -15px;
    z-index: 2;
    width: 255px;
    pointer-events: none;
  }

  .info-block__img-block--main-exclusives img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Statistics Stack (Right aligned inside blue card) */
  .info-block__bottom-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 4;
    margin-top: auto;
    align-self: flex-end;
    width: 215px;
    padding-top: 50px;
  }

  .statistics-block {
    background: rgba(215, 238, 255, 0.88);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 4px 14px rgba(0, 20, 50, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .statistics-block:hover {
    background: rgba(235, 246, 255, 0.96);
    transform: translateX(-2px);
  }

  .statistics-block__nums-info {
    margin: 0;
    color: #4B6786;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .statistics-block__nums-info--bold {
    color: #081629;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
  }

  /* Right Slot Card Grid */
  .entertainment-info__list--slot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 420px;
  }

  .entertainment-info__list-slot-wrapper {
    width: 100%;
    height: 100%;
  }

  .slot-item {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #14263C;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .slot-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    z-index: 5;
  }

  .slot-item__link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .slot-item__img-block {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
  }

  .slot-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    transition: transform 0.3s ease;
  }

  .slot-item:hover .slot-item__img {
    transform: scale(1.05);
  }

  .slot-item__name {
    display: none;
  }

  /* Responsive Rules */
  @media screen and (max-width: 1100px) {
    .entertainment-info__content-block {
      grid-template-columns: 320px minmax(0, 1fr);
    }
  }

  @media screen and (max-width: 900px) {
    .entertainment-info__content-block {
      grid-template-columns: 1fr;
    }
    .info-block--blue2,
    .info-block--yellow {
      min-height: 360px;
    }
  }

  @media screen and (max-width: 600px) {
    .entertainment-info__list--slot {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
    }
  }

  /* Yellow Feature Info Block (Casino) */
  .info-block--yellow {
    position: relative;
    display: block;
    background: linear-gradient(135deg, #FFB800 0%, #FFA000 55%, #FF8000 100%);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    min-height: 420px;
    box-shadow: 0 8px 24px rgba(255, 160, 0, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .info-block--yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 160, 0, 0.35);
  }

  /* Minor Image (Top Right Golden Coins) */
  .info-block__img-block--minor-casino {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    width: 90px;
    pointer-events: none;
  }

  /* Main Graphic (Tiki Statue / Character at bottom-left) */
  .info-block__img-block--main-casino {
    position: absolute;
    left: -15px;
    bottom: -10px;
    z-index: 2;
    width: 220px;
    pointer-events: none;
  }

  .info-block__img-block--main-casino img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Stat Blocks inside Yellow Card */
  .info-block--yellow .statistics-block {
    background: rgba(255, 246, 225, 0.92);
    box-shadow: 0 4px 14px rgba(60, 40, 0, 0.12);
  }

  .info-block--yellow .statistics-block:hover {
    background: rgba(255, 252, 242, 0.98);
  }

  .info-block--yellow .statistics-block__nums-info {
    color: #695228;
  }

  .info-block--yellow .statistics-block__nums-info--bold {
    color: #1A1202;
  }

  /* =========================================================
     BONUSES SECTION
     ========================================================= */

  .main-page__section--bonuses {
    width: 100%;
    margin: 32px 0;
  }

  .bonuses-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .bonuses-section__title-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .bonuses-section__title-block__link-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .bonuses-section__title-block__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .bonuses-section__title-block__text {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
  }

  .bonuses-section__second-link {
    color: #8FA6BF;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .bonuses-section__second-link:hover {
    color: #ffffff;
  }

  /* Bonus Cards Horizontal Slider / Grid */
  .allBonuses {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    padding-bottom: 12px;
  }

  .allBonuses::-webkit-scrollbar {
    height: 6px;
  }

  .allBonuses::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .allBonuses::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  .bonuses-grid {
    display: flex;
    gap: 14px;
    width: max-content;
    min-width: 100%;
  }

  .bonus-card-item {
    flex: 0 0 340px;
    width: 340px;
    height: 230px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .bonus-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }

  .bonusBlock__welcome,
  .bonusBlock__other {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
  }

  .bonusBlock__welcome__text,
  .bonusBlock__other__top__text {
    display: flex;
    flex-direction: column;
    z-index: 3;
    max-width: 65%;
  }

  .bonusBlock__welcome__text__title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.9;
  }

  .bonusBlock__welcome__text__desc {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .bonusBlock__welcome__img,
  .bonusBlock__other__top__img {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 110px;
    max-height: 120px;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
  }

  .bonusBlock__welcome__actions,
  .bonusBlock__other__bottom {
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
  }

  /* Steps boxes */
  .boxes.d-flex {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .boxes .box {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
  }

  .boxes .box.active-step {
    background: rgba(255, 255, 255, 0.35);
    border-color: #ffffff;
  }

  .boxes .percent {
    font-size: 11px;
    font-weight: 700;
  }

  .boxes .step-num {
    font-size: 10px;
    opacity: 0.8;
  }

  /* Status badge & Timer */
  .status-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
  }

  .badge-available {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
    backdrop-filter: blur(4px);
  }

  .timer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    width: fit-content;
  }

  .timer-display {
    font-weight: 600;
  }

  /* Buttons */
  .bonusBlock__welcome__actions__btns {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .btn-bonus-primary {
    flex: 1;
    background: #ffffff;
    color: #111111;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }

  .btn-bonus-primary:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
  }

  .btn-bonus-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease;
  }

  .btn-bonus-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .btn-bonus-secondary.full-width {
    width: 100%;
  }

  .btn-bonus-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
  }

  .btn-bonus-outline:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* =========================================================
     LAST WINNERS SECTION
     ========================================================= */

  .last-winners {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 24px 0;
  }

  .last-winners__header {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .last-winners__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .last-winners__title {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
  }

  .last-winners__swiper {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    padding-bottom: 8px;
  }

  .last-winners__swiper::-webkit-scrollbar {
    height: 4px;
  }

  .last-winners__swiper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  .last-winners__list {
    display: flex;
    gap: 8px;
    width: max-content;
  }

  .last-winner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 170px;
    height: 56px;
    padding: 6px 8px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #14263C;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .last-winner-item:hover {
    transform: translateY(-2px);
    background-color: #1B324D;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .last-winner-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
  }

  .last-winner-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .last-winner-item__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex-grow: 1;
  }

  .last-winner-item__amount {
    margin: 0;
    color: #2FD6C6;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .last-winner-item__name {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .last-winner-item__email {
    margin: 0;
    font-size: 10px;
    line-height: 1.2;
    color: #8FA6BF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* =========================================================
     FOOTER SECTION
     ========================================================= */

  /* =========================================================
     FOOTER SECTION (Matching Official 4RABET Site Design)
     ========================================================= */

  .footer {
    width: 100%;
    background-color: #061224;
    padding: 32px 0 28px;
    margin-top: 40px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
  }

  .footer__wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .footer__logo-row {
    margin-bottom: 24px;
  }

  .footer__logo-link {
    display: inline-block;
  }

  .footer__logo-img {
    width: 135px;
    height: auto;
    display: block;
  }

  .footer__main-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 32px;
  }

  .footer__nav-columns {
    display: flex;
    gap: 56px;
    flex-wrap: wrap;
  }

  .footer__nav-col {
    display: flex;
    flex-direction: column;
    min-width: 110px;
  }

  .footer__nav-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
  }

  .footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer__nav-list a {
    color: #78909C;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
  }

  .footer__nav-list a:hover {
    color: #ffffff;
  }

  .badge-new {
    background: #FFE600;
    color: #061224;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    line-height: 1;
  }

  .footer__right-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: 290px;
  }

  .footer__lang-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0C1B2E;
    border: 1px solid #162842;
    border-radius: 8px;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
  }

  .footer__lang-box:hover {
    border-color: #243B5E;
  }

  .flag-icon {
    font-size: 14px;
  }

  .arrow-down {
    color: #78909C;
  }

  .footer__support-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0B182B;
    border: 1px solid #15263D;
    border-radius: 10px;
    padding: 8px 10px 8px 14px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .support-card__left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .support-card__icon {
    color: #78909C;
    flex-shrink: 0;
  }

  .support-card__titles {
    display: flex;
    flex-direction: column;
  }

  .support-card__main-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
  }

  .support-card__sub-title {
    font-size: 10px;
    color: #78909C;
    line-height: 1.2;
  }

  .support-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .support-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .support-icon-btn:hover {
    opacity: 0.85;
  }

  .support-icon-btn--mail {
    background: #16263B;
    color: #78909C;
  }

  .support-icon-btn--telegram {
    background: #0088CC;
    color: #ffffff;
  }

  .support-chat-btn {
    background: #0075FF;
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .support-chat-btn:hover {
    background: #0060D0;
  }

  .footer__providers-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0 28px;
    width: 100%;
  }

  .provider-card {
    flex: 1;
    min-width: 115px;
    height: 52px;
    background: #0B182B;
    border: 1px solid #14243B;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

  .provider-card:hover {
    border-color: #213858;
    background: #0E1F38;
  }

  .provider-logo {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    letter-spacing: 0.3px;
  }

  .provider-logo small {
    font-size: 9px;
    opacity: 0.7;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  .card-ico {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  .red-gem {
    color: #FF3B30;
    font-style: normal;
  }

  .wings {
    color: #00A3FF;
    font-style: normal;
  }

  .oak-tree {
    font-style: normal;
    font-size: 12px;
  }

  .red-dot {
    color: #FF2D55;
    font-size: 16px;
  }

  .bg-ico {
    color: #FF9500;
    font-style: normal;
    font-size: 11px;
  }

  .footer__bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #112035;
    padding-top: 20px;
  }

  .footer__bottom-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer__copyright-block {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .age-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #5C708A;
    color: #5C708A;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .copyright-texts p {
    margin: 0;
    font-size: 11px;
    color: #5C708A;
    line-height: 1.3;
  }

  .copyright-sub {
    font-size: 10px;
    opacity: 0.85;
  }

  .footer__social-links {
    display: flex;
    gap: 8px;
  }

  .social-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease;
  }

  .social-circle:hover {
    transform: scale(1.08);
  }

  .social-circle--tg {
    background: #0088CC;
  }

  .social-circle--wa {
    background: #25D366;
  }

  .footer__app-downloads {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .qr-code-box {
    background: #ffffff;
    padding: 4px;
    border-radius: 6px;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .app-btns-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .app-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #000000;
    border: 1px solid #1A283C;
    border-radius: 6px;
    padding: 6px 12px;
    color: #ffffff;
    text-decoration: none;
    min-width: 135px;
    box-sizing: border-box;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }

  .app-download-btn:hover {
    opacity: 0.9;
    border-color: #2D4059;
  }

  .app-btn-labels {
    display: flex;
    flex-direction: column;
  }

  .app-btn-sub {
    font-size: 8px;
    color: #8A99AD;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .app-btn-main {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
  }

  @media screen and (max-width: 992px) {
    .footer__main-grid {
      flex-direction: column;
    }

    .footer__right-panel {
      width: 100%;
      align-items: stretch;
    }

    .footer__lang-box,
    .footer__support-card {
      max-width: 100%;
    }

    .footer__bottom-row {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media screen and (max-width: 600px) {
    .footer__nav-columns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      width: 100%;
    }
  }