/* =========================================================
   CASINO — kartoosh-exact rebuild  (loaded after casino.css)
   Tokens taken from kartoosh.bet computed styles:
     --b: 24,35,45   --b-sc: 255,255,255   --b-hover: 41,60,78
     --hero: 248,197,36   --menu: 2,173,128
     radius 4 / 8 / 10   spacing 2 6 8 12 16
     casino card aspect-ratio 44 / 31
     lobby grid: 6 cols web, 6/4/3/2 mobile
   ========================================================= */

/* ---------- 1. section navigation (the teal bar) ---------- */

/* Page wrapper. Scoped to the element tag so it can never collide with the
   lobby content column (.ktc-body).
   On casino pages the product nav (main-nav, 53px on mobile) is REPLACED by the
   section sub-nav, so the fixed stack is 64px mobile header + 36px section nav.
   Because that header is position:fixed it contributes no document height, so the
   <main> compensates with padding-top. Desktop keeps the normal in-flow stack. */
main.ktc-main {
    display: block;
}
@media (max-width: 1024px) {
    main.ktc-main {
        padding-top: 100px;           /* 64px mobile header + 36px section nav */
    }
}

.ktc-subnav {
    display: block;
    width: 100%;
    height: 36px;
    background: #027b5b;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ktc-subnav::-webkit-scrollbar { display: none; }

/* Mobile: header-block-mobile is fixed at top:0 (64px). The section nav takes
   over the slot main-nav used to occupy, so it is pinned directly under the
   header at the same z-index main-nav had. */
@media (max-width: 1024px) {
    .ktc-subnav {
        position: fixed;
        top: 64px;                   /* mobile header only — no main-nav */
        left: 0;
        right: 0;
        z-index: 940;                /* same layer main-nav used to sit in */
    }
}

/* Kartoosh's second header nav row (.header-navigation:nth-child(2)) is a
   centred teal bar. Spacing comes from `li + li { margin-inline-start: 30px }`
   — NOT item padding — and the active/hover marker is a 2px inset gold bar at
   the bottom, not an underline pseudo-element. */
.ktc-subnav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}
.ktc-subnav__list > li {
    display: flex;
    height: 100%;
}
.ktc-subnav__list > li + li {
    margin-inline-start: 30px;       /* the gap that was missing */
}

/* Safe centring: auto margins absorb the slack when the row fits, and collapse
   to 0 when it overflows, so narrow screens scroll from the first item instead
   of clipping it. */
.ktc-subnav__list > li:first-child { margin-inline-start: auto; }
.ktc-subnav__list > li:last-child  { margin-inline-end: auto; }

.ktc-subnav__item {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0;
    white-space: nowrap;
    color: rgba(255, 255, 255, .5);  /* kartoosh inactive */
    font-size: 16px;
    letter-spacing: .5px;
    text-decoration: none;
    transition: color .2s ease, box-shadow .2s ease;
}
.ktc-subnav__item:hover,
.ktc-subnav__item.is-active {
    box-shadow: inset 0 -2px 0 0 #f8c524;   /* --hero */
}
.ktc-subnav__item.is-active { color: #fff; }   /* kartoosh active */

/* ---------- 2. banners carousel ---------- */
/* Real promo photography, same markup/behaviour as the homepage .kt-hero
   slider (index.php) — full-bleed <img> slides, snap scroll, dots. */
.ktc-banners {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #18232d;
}
.ktc-banners__viewport {
    width: 100%;
    overflow: hidden;
}
.ktc-banners__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ktc-banners__track::-webkit-scrollbar { display: none; }

.ktc-banner {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 1574 / 700;
    overflow: hidden;
    display: block;
    text-decoration: none;
}
.ktc-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.ktc-banner:focus-visible { outline: 2px solid #f8c524; outline-offset: -2px; }

/* dots */
.ktc-banners__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.ktc-banners__dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.ktc-banners__dots button.is-active { background: #f8c524; }

/* ---------- 3. section heading ---------- */
.ktc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
}
.ktc-head__title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}
.ktc-head__more {
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    text-decoration: none;
}
.ktc-head__more:hover { color: #f8c524; }

/* ---------- 4. trending rail (horizontal scroll) ---------- */
.ktc-rail {
    margin: 0 0 6px;
}
.ktc-rail__box {
    position: relative;
}
.ktc-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    gap: 10px;                      /* kartoosh .games-horiz-scroll gap */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.ktc-rail__track::-webkit-scrollbar { display: none; }
.ktc-rail__track > * { scroll-snap-align: start; }
@media (min-width: 1025px) {
    .ktc-rail__track {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(150px, 1fr);
    }
}

/* kartoosh-style circular prev/next buttons, overlaid on the rail edges */
.ktc-rail__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(24, 35, 45, .82);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .15s ease, opacity .15s ease;
}
.ktc-rail__nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.ktc-rail__nav--prev { left: -6px; }
.ktc-rail__nav--next { right: -6px; }
.ktc-rail__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.ktc-rail__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.ktc-rail__nav:hover { background: #02ad80; }
.ktc-rail__nav:disabled {
    opacity: 0;
    pointer-events: none;
}
.ktc-rail__box.is-overflowing .ktc-rail__nav { display: block; }
@media (max-width: 1024px) {
    /* touch scrolling is enough on small screens */
    .ktc-rail__nav { display: none !important; }
}

/* ---------- 5. game card (aspect 44/31) ---------- */
.ktc-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ktc-card__art {
    position: relative;
    width: 100%;
    aspect-ratio: 44 / 31;         /* kartoosh --casino-regular-aspect-ratio */
    border-radius: 8px;             /* --fds-ref-radius-xsmall */
    overflow: hidden;
    background-color: rgba(255, 255, 255, .12);
}
    /* Real catalogue thumbnail, when GameCatalog resolves the slug. The art
       element keeps its gradient inline as the fallback/letterbox, and the
       ::after texture is suppressed so it does not sit on top of the photo. */
    .ktc-card__img {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ktc-card__art:has(.ktc-card__img)::after { display: none; }
    .ktc-card__art:has(.ktc-card__img) { background-color: #0a1118; }

    /* subtle inner texture so placeholder art does not look flat */
    .ktc-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px);
    mix-blend-mode: overlay;
    pointer-events: none;
}

.ktc-card__badge {
    position: absolute;
    top: 8px;                       /* --fds-ref-spacing-xsmall */
    right: 8px;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000205;
    background: #f8c524;
}
.ktc-card__badge.is-exclusive { background: #02ad80; color: #fff; }
.ktc-card__badge.is-top       { background: #fff; color: #000205; }

.ktc-card__players {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .48);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
}
.ktc-card__players i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #12eb12;            /* kartoosh live green dot */
    flex-shrink: 0;
}

/* hover overlay (kartoosh .casinoGameItemBlock) */
.ktc-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    background: linear-gradient(229deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .78) 100%);
    transition: opacity .22s ease;
}
.ktc-card:hover .ktc-card__overlay,
.ktc-card:focus-within .ktc-card__overlay { opacity: 1; }

.ktc-card__demo {
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .85);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ktc-card__play {
    padding: 7px 18px;
    border-radius: 4px;
    background: #f8c524;
    color: #000205;
    font-size: 13px;
    font-weight: 600;
}

.ktc-card__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ktc-card__title {
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ktc-card__prov {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 6. lobby layout (sidebar + grid) ---------- */
.ktc-lobby {
    display: flex;
    align-items: flex-start;
    gap: 16px;                       /* --fds-ref-spacing-large */
    margin-top: 4px;
}

.ktc-side {
    flex: 0 0 210px;
    width: 210px;
    max-height: 720px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.ktc-side__group {
    margin: 14px 0 6px;
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ktc-side__link {
    display: block;
    padding: 7px 10px;
    border-radius: 4px;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.ktc-side__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ktc-side__link.is-active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
}
.ktc-side__count {
    float: right;
    color: rgba(255, 255, 255, .3);
    font-size: 11px;
}

/* Lobby content column. Deliberately NOT .ktc-main: that class is the page
   wrapper, which carries padding-top on mobile to clear the fixed header.
   Sharing it here injected a 100px dead gap above the toolbar. */
.ktc-body { flex: 1 1 auto; min-width: 0; }

/* toolbar */
.ktc-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ktc-bar__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
}
.ktc-bar__field input,
.ktc-bar__field select {
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 13px;
    outline: none;
    min-width: 0;
}
.ktc-bar__field input { width: 190px; }
.ktc-bar__field input::placeholder { color: rgba(255, 255, 255, .4); }
.ktc-bar__field select option { background: #18232d; color: #fff; }
.ktc-bar__submit {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: #f8c524;
    color: #000205;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ktc-bar__reset {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    text-decoration: none;
}
.ktc-bar__reset:hover { color: #fff; }
.ktc-bar__count {
    margin-left: auto;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
}

/* grid: kartoosh .casinoGamesList */
.ktc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;                       /* --fds-ref-spacing-large */
    padding-bottom: 16px;
}
@media (max-width: 1400px) { .ktc-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1024px) { .ktc-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (max-width: 768px)  { .ktc-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px)  { .ktc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.ktc-empty {
    padding: 40px 0;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    text-align: center;
}

/* pagination */
.ktc-pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 18px;
}

    /* ---------- live search feedback ----------
       .is-searching dims the grid while a keystroke's query is in flight, so a
       slow round-trip reads as "working" rather than "stuck". */
    .ktc-grid.is-searching { opacity: .45; transition: opacity .12s ease; }

    /* Infinite-scroll sentinel. Desktop pages with .ktc-pager instead, so the
       sentinel is hidden here and re-shown inside the mobile block. */
    .ktc-more { display: none; }
.ktc-pager a,
.ktc-pager span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    text-decoration: none;
}
.ktc-pager a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ktc-pager .is-current { background: #f8c524; color: #000205; font-weight: 700; }

/* ---------- 7. tournaments / jackpot / rtp tables ---------- */
.ktc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}
.ktc-table th {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: start;
}
.ktc-table td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
    vertical-align: middle;
}
.ktc-table tbody tr:hover { background: rgba(255, 255, 255, .04); }

.ktc-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ktc-mini__art {
    flex: 0 0 56px;
    width: 56px;
    aspect-ratio: 44 / 31;
    border-radius: 6px;
    background-size: cover;
}
.ktc-mini__name {
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ktc-mini__prov {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
}

.ktc-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.ktc-pill--live  { background: rgba(255, 52, 73, .18);  color: #ff6676; }
.ktc-pill--soon  { background: rgba(2, 173, 128, .18); color: #02ad80; }
.ktc-pill--demo  { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }

.ktc-num { font-variant-numeric: tabular-nums; }
.ktc-num--up   { color: #16c72e; }
.ktc-num--down { color: #ff3449; }

/* jackpot meter */
.ktc-meter {
    width: 100%;
    max-width: 220px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}
.ktc-meter i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f8c524, #ff8a3d);
}

/* ---------- 8. page shell ---------- */
body.page-casino .page-content-inner { padding: 0 !important; }
body.page-casino .main-content {
    margin-top: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ktc-page {
    padding: 12px 7px 0;            /* --padding-page-aside */
}
@media (min-width: 1025px) {
    .ktc-page { padding: 16px; }
}

/* Inside the casino section the lime pill nav is hidden, and the product nav is
   replaced by .ktc-subnav (topbar.php skips main-nav when $tbAppendNav is set).
   These rules are the safety net if a cached topbar still renders main-nav. */
body.page-casino .nav-menu-mobile { display: none !important; }
body.page-casino .main-nav { display: none !important; }

/* ---------- 9. mobile ---------- */
@media (max-width: 1024px) {
    .ktc-lobby { flex-direction: column; gap: 12px; }

    /* sidebar becomes a horizontal scroller of chips (kartoosh horizontal-sl) */
    .ktc-side {
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .ktc-side::-webkit-scrollbar { display: none; }
    .ktc-side__group { display: none; }
    .ktc-side__link {
        flex: 0 0 auto;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .1);
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
    }
    .ktc-side__link.is-active { background: #f8c524; color: #000205; }
    .ktc-side__count { display: none; }

    .ktc-bar__field input { width: 100%; }
    .ktc-bar__field--search { flex: 1 1 100%; }
    .ktc-bar__count { margin-left: 0; }

    .ktc-table { font-size: 12px; }
    .ktc-table th, .ktc-table td { padding: 7px 6px; }
    .ktc-hide-sm { display: none; }
}

/* ---------- 10. FOURNISSEURS RAIL ----------
   Added for kartoosh parity: a dedicated provider section with a "+N" counter
   and a row of tiles. Desktop wraps them; mobile turns them into a rail. */
.ktc-providers { margin-bottom: 16px; }
.ktc-providers__rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ktc-providers__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 56px;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
.ktc-providers__tile:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ktc-providers__tile.is-active {
    background: rgba(248, 197, 36, .16);
    color: #fff;
    box-shadow: inset 0 0 0 1px #f8c524;
}
/* the "+N" counter link. Rendered as a span: there is no "all providers"
   page to link to, so a link would be a dead end. */
.ktc-head__more--count { cursor: default; }

/* ---------- 11. KARTOOSH MOBILE PARITY (casino lobby) ----------
   Measured live on m.kartoosh.bet/fr/casino/slots at 390x844:
     category rail     390x48  gap 8px  overflow-x auto  no scrollbar
       chip            32px tall, radius 999px, padding 8px 12px, gap 4px,
                       16x16 icon, label 12px/400 rgba(255,255,255,.8)
       chip (idle)     bg rgba(255,255,255,.08)
       chip (selected) bg rgba(248,197,36,.16) + inset 0 0 0 1px #f8c524,
                       text stays rgba(255,255,255,.8)
     search + select   two equal fields, 40px tall, 8px apart (theirs 183x40)
     random pill       full width, 40px, radius 999px, bg rgba(255,255,255,.08),
                       16px/400 rgba(255,255,255,.9)
     section heading   h2 14px/500, counter rgba(255,255,255,.8)
     provider tile     110x56, radius 4px, bg rgba(255,255,255,.08), gap 8px
     game tile         150x106, radius 8px, bg rgba(255,255,255,.12), gap 8px
   The real site has NO vertical game grid on mobile: every list is a stacked
   horizontal rail, so .ktc-grid becomes one. */
@media (max-width: 1024px) {
    /* .ktc-lobby becomes a column with align-items:flex-start, so its children
       size to max-content. Now that .ktc-grid is a 60-tile flex rail that
       max-content is ~9500px and the whole column blows out of the viewport
       (and goes negative in RTL). Pin the column to the page width. */
    .ktc-lobby { align-items: stretch; }
    .ktc-side,
    .ktc-body { width: 100%; min-width: 0; }

    /* ---------- infinite scroll sentinel (mobile) ---------- */
    .ktc-more__link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        margin-top: 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .8);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
    }
    .ktc-more.is-loading .ktc-more__link { opacity: .6; pointer-events: none; }

    /* Mobile-only: desktop uses the numbered pager. */
    .ktc-more { display: block; }

    /* "Tous les jeux" browse view: the provider rail and the winners row are
       not rendered, but the chip rail stays (kartoosh keeps all 37 chips). */

    /* ---------- "Tous les jeux": 2-column vertical list ----------
       Kartoosh (/fr/casino/slots/-1/all @390): .casinoGamesList is
       display:grid, cols 183px 183px, gap 8px, rowGap 8px, 374px wide at x8,
       page-scrolled (not a rail). Tiles .casinoGameItem are 183x129,
       radius 8px, bg rgba(255,255,255,.12), holding a single
       object-fit:cover image with no title/meta text.

       Selectors are prefixed with .ktc-grid so they out-specify the rail rules
       further down this block (which are also .ktc-grid / .ktc-grid .ktc-card
       and would otherwise win on source order). */
    .ktc-grid.ktc-grid--list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        height: auto;
        overflow: visible;
    }
    .ktc-grid.ktc-grid--list .ktc-card {
        flex: none;
        width: auto;
        height: 129px;
        padding: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .12);
        overflow: hidden;
    }
    .ktc-grid.ktc-grid--list .ktc-card__art { width: 100%; height: 129px; }
    .ktc-grid.ktc-grid--list .ktc-card__meta { display: none; }

    /* Safety net: nothing inside the casino page may create document-level
       horizontal scroll, which reveals the #414a53 html background as a grey
       band. The sticky header/subnav live outside <main>, so clipping here is
       safe. */
    main.ktc-main { overflow-x: hidden; }

    /* kartoosh uses rgba(255,255,255,.9) 14px/500 lh20 for every mobile
       section title (Tendance, Fournisseurs, Jeux de casino, Top vainqueurs,
       Revoir les victoires, Tournois, Casino en ligne, Jeux) */
    .ktc-head__title {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: rgba(255, 255, 255, .9);
    }
    .ktc-head__more { font-size: 14px; font-weight: 400; }
    .ktc-head--games { margin-top: 4px; }

    /* ---------- category chip rail ---------- */
    .ktc-side {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 48px;
        max-height: none;
        padding: 0 1px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .ktc-side::-webkit-scrollbar { display: none; }
    .ktc-side__group { display: none; }
    .ktc-side__link {
        display: inline-flex;
        align-items: center;
        gap: 4px;                /* kartoosh .ds-chip gap: 4px (icon + label) */
        flex: 0 0 auto;
        height: 32px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .8);
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }
    .ktc-chip__icon {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        opacity: .85;
    }
    .ktc-side__link.is-active .ktc-chip__icon { opacity: 1; }
    .ktc-side__link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
    /* selected = gold wash + 1px gold ring, white text (kartoosh) */
    .ktc-side__link.is-active {
        background: rgba(248, 197, 36, .16);
        color: rgba(255, 255, 255, .8);
        font-weight: 400;
        box-shadow: inset 0 0 0 1px #f8c524;
    }
    .ktc-side__count { display: none; }

    /* ---------- toolbar: 2 fields + pill ---------- */
    .ktc-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 12px 8px;
        margin-bottom: 12px;
    }
    .ktc-bar__field { height: 40px; padding: 0 10px; }
    .ktc-bar__field input,
    .ktc-bar__field select { width: 100%; }
    .ktc-bar__field--sort,
    .ktc-bar__submit,
    .ktc-bar__count { display: none; }
    /* our reset link is the closest thing to kartoosh's "Jouer à un jeu
       aléatoire" pill; the button form is dropped because it would push the
       toolbar to a third row. */
    .ktc-bar__reset {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .9);
        font-size: 16px;
        font-weight: 400;
    }
    .ktc-bar__reset:hover { background: rgba(255, 255, 255, .14); color: #fff; }

    /* ---------- provider rail ---------- */
    .ktc-providers__rail {
        flex-wrap: nowrap;
        padding: 0 1px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ktc-providers__rail::-webkit-scrollbar { display: none; }
    .ktc-providers__tile { flex: 0 0 110px; }

    /* ---------- game tiles -> horizontal rail ---------- */
    .ktc-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 1px 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ktc-grid::-webkit-scrollbar { display: none; }
    .ktc-grid .ktc-card {
        flex: 0 0 150px;
        width: 150px;
        height: 106px;
        padding: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .12);
        overflow: hidden;
    }
    .ktc-grid .ktc-card__art { width: 150px; height: 106px; }
    .ktc-grid .ktc-card__meta { display: none; }
    /* every game is in the rail now, so paging is redundant */
    .ktc-pager { display: none; }

    /* ---------- trending rail ---------- */
    .ktc-rail__track {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 1px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ktc-rail__track::-webkit-scrollbar { display: none; }
    .ktc-rail .ktc-card--rail {
        flex: 0 0 150px;
        width: 150px;
        height: 106px;
        padding: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .12);
        overflow: hidden;
    }
    .ktc-rail .ktc-card__art { width: 150px; height: 106px; }
    .ktc-rail .ktc-card__meta { display: none; }

    /* ---------- top winners ---------------------------------------------
       Kartoosh measures the winners row as 92px tall: 20px title + 8px gap +
       60px cards, cards 184x60 with radius 4px and an 8px gap.
       Its real data is behind an auth gate, so the exact scroll behaviour
       could not be measured; this is a swipeable rail like every other
       kartoosh rail (providers, games), which also keeps it from forcing
       document-level overflow on narrow screens. */
    .ktc-wins { display: block; }
    .ktc-head--wins { margin: 18px 0 8px; height: 20px; }
    .ktc-head--wins .ktc-head__title { line-height: 20px; }
    .ktc-wins__row {
        display: flex;
        gap: 8px;
        padding: 0 1px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .ktc-wins__row::-webkit-scrollbar { display: none; }
    .ktc-win {
        flex: 0 0 184px;
        width: 184px;
        height: 60px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .08);
        overflow: hidden;
        scroll-snap-align: start;
    }
    .ktc-win__art {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 6px;
        overflow: hidden;
        background: rgba(255, 255, 255, .06);
    }
    .ktc-win__art img,
    .ktc-win__art i {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ktc-win__art i { display: block; }
    .ktc-win__meta {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .ktc-win__user {
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, .9);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ktc-win__amount {
        font-size: 11px;
        font-weight: 700;
        color: #f8c524;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}