/* Mobile Responsive Styles */
@media (max-width: 991px) {
  .xl8slide-title {
    font-size: 32px;
  }

  .kj3slide-text {
    font-size: 18px;
  }

  .wq9slide-item img {
    height: 350px;
  }

  .yw9section-title {
    font-size: 28px;
  }

  .pg4main-heading {
    font-size: 32px;
  }

  .lm4info-table-wrap {
    overflow-x: auto;
  }

  .bk8info-table {
    font-size: 14px;
  }

  .fn1tournaments-row,
  .tb5games-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    display: flex;
  }

  .fn1tournaments-row > div,
  .tb5games-row > div {
    min-width: 300px;
    flex: 0 0 auto;
  }

  .mx3wheel-canvas {
    width: 300px !important;
    height: 300px !important;
  }

  .rd1btn-spin {
    padding: 15px 30px;
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .wp3container {
    padding: 0 15px;
  }

  .px7casino-info,
  .mr8tournaments-section,
  .pl6live-games-section,
  .wh2wheel-section,
  .gy4reviews-section {
    padding: 40px 0;
  }

  .xt5content-block {
    padding: 25px 15px;
  }

  .wq9slide-item img {
    height: 250px;
  }

  .xl8slide-title {
    font-size: 24px;
  }

  .kj3slide-text {
    font-size: 16px;
  }

  .cv7btn-cta {
    padding: 12px 25px;
    font-size: 16px;
  }

  .ag8widget-text {
    font-size: 14px;
  }

  .ag8widget-text strong {
    font-size: 18px;
  }

  .tj3btn-widget {
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .jk5menu-list .nav-link {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.1);
  }

  .qw8header-actions {
    gap: 10px;
  }

  .uf3btn-login,
  .pk6btn-signup {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* Unused media queries */
@media (max-width: 320px) {
  .dp9unused-mobile {
    font-size: 10px;
  }
}

@media (min-width: 1920px) {
  .vh3unused-large {
    max-width: 2000px;
  }
}
/* =========================
   MOBILE PATCH (global)
   Put at the very end of CSS
   ========================= */

/* Better touch + fluid text */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Make containers actually mobile-friendly */
@media (max-width: 767px){
    .wp3container{
        max-width: 100%;
        padding: 0 12px;
    }
}

/* =========================
   HERO — stop looking like desktop
   ========================= */
@media (max-width: 767px){
    .wq9slide-item img{
        height: 220px;
        border-radius: 12px;
    }

    .sd2slide-content{
        padding: 22px 14px;
    }

    .xl8slide-title{
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .kj3slide-text{
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .cv7btn-cta{
        width: 100%;
        display: inline-flex;
        justify-content: center;
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 10px;
    }
}

/* =========================
   SECTIONS — spacing like mobile, not desktop
   ========================= */
@media (max-width: 767px){
    .px7casino-info,
    .mr8tournaments-section,
    .pl6live-games-section,
    .wh2wheel-section,
    .gy4reviews-section{
        padding: 28px 0;
        margin: 0;
    }

    .yw9section-title{
        font-size: 22px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .yw9section-title::after{
        width: 70px;
        height: 3px;
    }
}

/* =========================
   CONTENT BLOCK — reduce padding & typography
   ========================= */
@media (max-width: 767px){
    .xt5content-block{
        padding: 18px 14px;
        margin: 18px 0;
        border-radius: 14px;
    }

    .pg4main-heading{
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .fh6text-content{
        line-height: 1.7;
        font-size: 15px;
    }

    .fh6text-content h2{
        font-size: 20px;
        margin: 18px 0 10px;
    }

    .fh6text-content h3{
        font-size: 17px;
        margin: 16px 0 8px;
    }

    .fh6text-content ul,
    .fh6text-content ol{
        margin-left: 16px;
    }

    .fh6text-content .lead-text{
        font-size: 16px;
    }
}

/* =========================
   TABLES — make them usable on mobile
   ========================= */

/* Wrapper scroll + nicer look */
@media (max-width: 767px){
    .lm4info-table-wrap{
        padding: 14px;
        border-radius: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bk8info-table{
        min-width: 560px; /* enables horizontal scroll */
        font-size: 14px;
    }

    .bk8info-table .vc3param-name,
    .bk8info-table .df1param-value{
        padding: 10px 12px;
        white-space: nowrap;
    }
}

/* Content tables inside text blocks */
@media (max-width: 767px){
    .fh6text-content table{
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    .fh6text-content table th,
    .fh6text-content table td{
        white-space: nowrap;
        font-size: 14px;
        padding: 10px;
    }
}

/* =========================
   TOURNAMENTS / GAMES — cards in 1 column on mobile
   (remove desktop-like fixed widths)
   ========================= */
@media (max-width: 767px){

    /* If your rows are bootstrap: make spacing consistent */
    .fn1tournaments-row,
    .tb5games-row{
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        overflow: visible !important;
    }

    .fn1tournaments-row > div,
    .tb5games-row > div{
        min-width: 0 !important;
        flex: initial !important;
    }

    .zh3tournament-card{
        border-radius: 14px;
        padding: 14px;
    }

    .wp5tournament-name{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .bt2tournament-desc{
        font-size: 14px;
        margin-bottom: 12px;
    }

    .xs6prize-amount{
        font-size: 14px;
        padding: 10px;
        border-radius: 10px;
    }

    .yu2btn-tournament{
        padding: 12px;
        border-radius: 10px;
        font-size: 15px;
    }

    .ek7game-card{
        border-radius: 14px;
    }

    .uz4game-name{
        font-size: 15px;
    }

    .xi9btn-play{
        padding: 10px;
        border-radius: 10px;
        font-size: 14px;
    }
}

/* =========================
   WHEEL — fit small screens
   ========================= */
@media (max-width: 767px){
    .jy5wheel-container{
        margin: 18px 0;
        flex-direction: column;
        gap: 12px;
    }

    .mx3wheel-canvas{
        width: 260px !important;
        height: 260px !important;
    }

    .rd1btn-spin{
        width: 100%;
        max-width: 360px;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 14px;
        border-width: 2px;
    }

    .vn2result-alert{
        padding: 16px;
        border-radius: 14px;
    }

    .ql8result-title{
        font-size: 20px;
        margin-bottom: 8px;
    }

    .bm9result-text{
        font-size: 15px;
        margin-bottom: 12px;
    }
}

/* =========================
   REVIEWS — one column, tighter spacing
   ========================= */
@media (max-width: 767px){
    .lp8review-card{
        padding: 14px;
        border-radius: 14px;
    }

    .zq1reviewer-info{
        gap: 10px;
    }

    .ky5avatar{
        width: 44px;
        height: 44px;
        margin-right: 10px;
    }

    .dm4rating-stars{
        font-size: 16px;
    }

    .fg2review-text{
        font-size: 14px;
    }

    .hs7review-form-wrap{
        padding: 16px 14px;
        border-radius: 14px;
    }

    .vw1form-title{
        font-size: 18px;
        margin-bottom: 12px;
    }

    .tp4review-form .form-control{
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 14px;
    }
}

/* =========================
   FOOTER — stack nicely on mobile
   ========================= */
@media (max-width: 767px){
    .yn3footer-main{
        padding: 34px 0 22px;
        margin-top: 36px;
    }

    .kp9footer-heading{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .st2footer-desc,
    .jm6copyright,
    .fm7legal-text{
        font-size: 13px;
        line-height: 1.6;
    }

    .dg3providers-logos img,
    .vc8payments-logos img{
        height: 28px;
        padding: 4px;
    }
}

/* =========================
   STICKY WIDGET — mobile UX
   ========================= */
@media (max-width: 767px){
    .pz5bonus-widget{
        padding: 10px 0;
    }

    .ql9widget-content{
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        padding: 0 12px;
    }

    .dc2widget-icon{
        font-size: 22px;
        margin-right: 8px;
    }

    .ag8widget-text{
        font-size: 13px;
        line-height: 1.2;
    }

    .ag8widget-text strong{
        font-size: 16px;
    }

    .tj3btn-widget{
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 999px;
        white-space: nowrap;
    }
}

/* =========================
   EXTRA: prevent hover transforms from breaking layout on mobile
   ========================= */
@media (hover: none) and (pointer: coarse){
    .zh3tournament-card:hover,
    .ek7game-card:hover,
    .lp8review-card:hover,
    .cv7btn-cta:hover,
    .rd1btn-spin:hover{
        transform: none !important;
        box-shadow: none !important;
    }
}
/* =========================
   LIVE GAMES: horizontal scroll on mobile
   ========================= */
@media (max-width: 767px) {
    /* wrapper with scroll */
    .pl6live-games-section .io3games-grid-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 10px;
        /* optional: hides ugly scrollbar in some browsers */
        scrollbar-width: thin;
    }

    /* make Bootstrap row behave like a horizontal track */
    .pl6live-games-section .tb5games-row {
        flex-wrap: nowrap !important;
        display: flex !important;
        gap: 12px;
        margin: 0 !important;            /* kill bootstrap negative margins */
        padding: 0 12px;                  /* inner padding for edges */
    }

    /* make each "col-*" act like a slide */
    .pl6live-games-section .tb5games-row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: 72% !important;            /* card width on mobile */
        max-width: 72% !important;
        padding: 0 !important;            /* remove bootstrap col padding */
    }

    /* nicer snap scrolling */
    .pl6live-games-section .tb5games-row > [class*="col-"] {
        scroll-snap-align: start;
    }
    .pl6live-games-section .io3games-grid-wrap {
        scroll-snap-type: x mandatory;
    }

    /* card sizing */
    .pl6live-games-section .ek7game-card {
        border-radius: 14px;
        overflow: hidden;
    }

    /* image should fill card width, not 50px */
    .pl6live-games-section .card-img-top {
        width: 100% !important;
        height: 140px !important;         /* stable mobile height */
        object-fit: cover;
        display: block;
    }

    .pl6live-games-section .card-body {
        padding: 12px;
    }

    .pl6live-games-section .uz4game-name {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .pl6live-games-section .xi9btn-play {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        font-size: 14px;
    }
}

/* smaller phones */
@media (max-width: 420px) {
    .pl6live-games-section .tb5games-row > [class*="col-"] {
        width: 82% !important;
        max-width: 82% !important;
    }
}
/* =========================
   APP PAGE ( .container.app )
   ========================= */

/* Base layout for the page container */
.container.app{
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 20px;
    background: transparent;
}

/* Paper-like content box (optional but looks much better) */
.container.app{
    background: linear-gradient(135deg, rgba(9,1,17,.85), rgba(12,6,18,.75));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,.35);
}

/* Typography */
.container.app p{
    color: #e6e6e6;
    font-size: 16px;
    line-height: 1.85;
    margin: 0 0 14px;
}

.container.app h1,
.container.app h2,
.container.app h3,
.container.app h4{
    color: #fff;
    line-height: 1.25;
    margin: 22px 0 12px;
}

.container.app h2{
    font-size: 26px;
    font-weight: 800;
    position: relative;
    padding-left: 12px;
}

.container.app h2::before{
    content:"";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, #0b80dc, #a8c94e);
}

.container.app h3{
    font-size: 20px;
    font-weight: 750;
}

.container.app h4{
    font-size: 16px;
    font-weight: 750;
    color: #a8c94e;
}

/* Links */
.container.app a{
    color: #0b80dc;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease, opacity .2s ease;
}
.container.app a:hover{
    color: #a8c94e;
    opacity: .95;
}

/* Lists */
.container.app ul,
.container.app ol{
    margin: 12px 0 18px;
    padding-left: 22px;
}

.container.app li{
    color: #d9d9d9;
    line-height: 1.75;
    margin: 8px 0;
}

.container.app ul li::marker{
    color: #a8c94e;
}

.container.app ol li::marker{
    color: #0b80dc;
    font-weight: 700;
}

/* Emphasis */
.container.app strong{
    color: #a8c94e;
    font-weight: 800;
}

/* FAQ paragraphs (those with strong at start) */
.container.app p strong{
    color: #fff;
}

/* Blockquote (if later you add) */
.container.app blockquote{
    margin: 18px 0;
    padding: 14px 16px;
    border-left: 4px solid #a8c94e;
    background: rgba(168,201,78,.08);
    border-radius: 12px;
    color: #eaeaea;
}

/* Tables (if later appear) */
.container.app table{
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
}
.container.app th,
.container.app td{
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    color: #e6e6e6;
}
.container.app th{
    background: rgba(11,128,220,.14);
    font-weight: 800;
}
.container.app tr:last-child td{
    border-bottom: none;
}

/* Author / Aside */
.container.app aside{
    margin-top: 26px;
    padding: 18px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, rgba(11,128,220,.10), rgba(168,201,78,.08));
}

.container.app aside p{
    margin-bottom: 10px;
    color: #e9e9e9;
    font-size: 15px;
    line-height: 1.75;
}

.container.app aside h4{
    margin: 0 0 10px;
    color: #fff;
    font-size: 16px;
}

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

@media (max-width: 991px){
    .container.app{
        max-width: 100%;
        padding: 26px 16px;
        border-radius: 16px;
    }

    .container.app h2{ font-size: 22px; }
    .container.app h3{ font-size: 18px; }

    .container.app p{
        font-size: 15px;
        line-height: 1.8;
    }
}

@media (max-width: 767px){
    .container.app{
        padding: 18px 14px;
        border-radius: 14px;
    }

    .container.app h2{
        font-size: 20px;
        margin: 18px 0 10px;
    }

    .container.app h3{
        font-size: 17px;
        margin: 16px 0 8px;
    }

    .container.app p{
        font-size: 14.5px;
        margin-bottom: 12px;
    }

    .container.app ul,
    .container.app ol{
        padding-left: 18px;
    }

    /* tables become scrollable */
    .container.app table{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .container.app aside{
        padding: 14px;
        border-radius: 14px;
    }

    .container.app aside p{
        font-size: 14px;
    }
}

@media (max-width: 420px){
    .container.app{
        padding: 16px 12px;
    }

    .container.app h2{ font-size: 19px; }
    .container.app p{ font-size: 14px; }
}