/* Basic reset to ensure consistent styling across browsers */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    /* Add a subtle radial gradient to evoke a casino table */
    background: radial-gradient(circle at center, #06441b 0%, #012a0d 100%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}

.container {
    background-color: #033b15;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 800px;
}

/* Status bar for balance and bet */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Chips container for betting */
.chips-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.chip {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #f9a825, #f57f17);
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.6);
    transition: transform 0.1s ease;
}

.chip:hover {
    transform: scale(1.1);
}

/* Highlight selected stake chip in Big2 */
.chip.selected {
    border: 3px solid #ffd54f;
}

/* Button to clear bet */
.chip-clear {
    background-color: #b71c1c;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.chip-clear:hover {
    background-color: #c62828;
}

/* Probability display */
.probability {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 10px;
}

/* Hands container for multiple player hands */
.hands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hand-wrapper {
    border: 2px solid #444;
    border-radius: 8px;
    padding: 5px;
    background-color: #033b15;
    width: fit-content;
}

.hand-wrapper.active-hand {
    border-color: #ffd54f;
    box-shadow: 0 0 10px #ffd54f;
}

.hand-info {
    font-size: 0.9em;
    margin-top: 4px;
    text-align: center;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.section {
    margin-bottom: 20px;
}

.hand {
    display: flex;
    flex-wrap: wrap;
    min-height: 140px;
    margin-bottom: 5px;
    align-items: flex-end;
}

.card {
    width: 70px;
    height: 100px;
    border: 1px solid #444;
    border-radius: 8px;
    background-color: #fff;
    margin-right: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #000;
    position: relative;
    transition: transform 0.2s ease;
}

.card.red {
    color: #c62828;
}

.card.hidden {
    background-color: #005e20;
    border: 1px solid #444;
}

/* Highlight playable cards for Big2 */
.playable {
    cursor: pointer;
    box-shadow: 0 0 10px 2px #ffd54f;
    transform: translateY(-6px);
}

.playable:hover {
    transform: translateY(-10px) scale(1.05);
}

.not-playable {
    opacity: 0.5;
}

/* AI container for Big2 */
.big2-ai-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}

.big2-ai {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background-color: #022c11;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    width: 80px;
}

.big2-ai.finished {
    opacity: 0.4;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #007a2c, #003f1a);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffd54f;
    font-weight: bold;
    font-size: 0.9em;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Highlight selected cards in Big2 */
.card.selected {
    transform: translateY(-10px);
    box-shadow: 0 0 8px #ffd54f;
    border: 2px solid #ffd54f;
}

.ai-count {
    font-size: 1.1em;
    color: #ffd54f;
}


.rank {
    font-weight: bold;
}

.suit {
    font-size: 1.4em;
}

.total {
    font-size: 1.1em;
    margin-top: 5px;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.action-btn {
    background-color: #007a2c;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-btn:hover:not(:disabled) {
    background-color: #009e3a;
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.message {
    font-size: 1.2em;
    text-align: center;
    margin-top: 10px;
    min-height: 24px;
}

/* Navigation bar for switching between games */
.nav-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.nav-bar .nav-link {
    color: #ffd54f;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-bar .nav-link:hover {
    background-color: #005e20;
}

.nav-bar .nav-link.active {
    background-color: #ffd54f;
    color: #033b15;
}

/* Money animation overlay */
.money-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1000;
}

.money-symbol {
    position: absolute;
    font-size: 24px;
    opacity: 0;
}

.money-symbol.win {
    color: #ffd54f;
    animation: fall 3.5s linear forwards;
}

.money-symbol.lose {
    color: #e57373;
    animation: rise 3.5s linear forwards;
}

@keyframes fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes rise {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) rotate(-360deg);
        opacity: 0;
    }
}

/* === Casino chip stack and animations === */

/* Chip stack to represent player's balance in casino style */
.chip-stack {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

.chip-stack .stack-chip {
    width: 32px;
    height: 10px;
    border-radius: 50%;
    margin-top: -5px;
    background: radial-gradient(circle at 30% 30%, #ffd54f, #ccac33);
    border: 1px solid #aa8c2b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Animation container for chips flying away when player loses */
.flying-chips {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 20;
}

.flying-chips .flying-chip {
    position: absolute;
    width: 20px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd54f, #ccac33);
    border: 1px solid #aa8c2b;
    animation: chip-fly 1.5s ease-in forwards;
}

@keyframes chip-fly {
    from {
        transform: translateY(0px) scale(1);
        opacity: 1;
    }
    to {
        transform: translateY(-300px) scale(0.6);
        opacity: 0;
    }
}

/* Animation for dealing cards: cards slide in from the top-left and fade in */
.card.deal {
    animation: deal 0.6s ease-out;
}

@keyframes deal {
    0% {
        transform: translate(-200px, -200px) scale(0.4);
        opacity: 0;
    }
    100% {
        transform: translate(0px, 0px) scale(1);
        opacity: 1;
    }
}

/* Shuffle animation overlay */
.card-shuffle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 2000;
}

.card-shuffle .shuffle-card {
    position: absolute;
    width: 40px;
    height: 60px;
    border-radius: 5px;
    background: linear-gradient(45deg, #004716, #007a2c);
    border: 1px solid #002c10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    animation: shuffle 1s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes shuffle {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -10px) rotate(90deg); }
    50% { transform: translate(-20px, 10px) rotate(180deg); }
    75% { transform: translate(10px, -20px) rotate(270deg); }
    100% { transform: translate(0,0) rotate(360deg); }
}
#insurance { display: none; }

/* S'assure que la barre de contrôles passe AU-DESSUS de la pile de jetons */
.controls {
  position: relative;        /* crée un contexte de positionnement */
  z-index: 1000;             /* > à la pile de jetons */
}

/* Base des boutons */
.action-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ÉTAT ACTIF (cliquable) : jaune + pulsation */
.action-btn:not(:disabled) {
  background: #FFD23F;       /* jaune casino */
  color: #1a1a1a;
  border-color: #e6b800;
  animation: btn-pulse 1.4s ease-in-out infinite;
}

/* Un peu de feedback au survol/clic */
.action-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.action-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ÉTAT DÉSACTIVÉ : grisé, pas d’animation */
.action-btn:disabled {
  background: #3a3a3a;
  color: #999;
  border-color: #444;
  animation: none;
  cursor: not-allowed;
}

/* Pile de jetons en dessous des contrôles */

#chip-stack,
.flying-chips {
  position: relative;
  z-index: 1;               /* inférieur à .controls */
}

/* Pulsation douce */
@keyframes btn-pulse {
  0%   { transform: scale(1);       box-shadow: 0 0 0 rgba(255,210,63,0.0); }
  50%  { transform: scale(1.03);    box-shadow: 0 0 18px rgba(255,210,63,0.45); }
  100% { transform: scale(1);       box-shadow: 0 0 0 rgba(255,210,63,0.0); }
}

/* Respecte les préférences d’accessibilité */
@media (prefers-reduced-motion: reduce) {
  .action-btn { animation: none !important; }
}

.chip-area { position: relative; z-index: 1; }

.chip-reset {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: #ddd;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
  z-index: 20; /* au-dessus de la pile */
}
.chip-reset:hover {
  background: rgba(255,255,255,.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.chip-reset:active { transform: translateY(1px); }

/* État par défaut → tapis visible, roue cachée */
body:not(.rl-spin) .table-area { display: block; }
body:not(.rl-spin) .wheel-area { display: none;  }

/* En mode spin → on cache le tapis et on montre la roue + résultat */
body.rl-spin .table-area { display: none; }
body.rl-spin .wheel-area { display: grid; }   /* grid pour centrer */
body.rl-spin #rl-result  { display: block; }
body.rl-spin #rl-message { display: none; }   /* optionnel */
.roulette-layout { 
  display: grid; 
  grid-template-columns: 1fr; /* une colonne : soit la roue, soit le tapis */
  gap: 16px; 
  justify-items: center;
  align-items: start;
}

/* Tapis de mise */
.table-area { user-select: none; width: 100%; }

/* Grille des nombres 1–36 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* plein largeur, 12 parts égales */
  gap: 6px;
  justify-content: center;
}

/* Cases (inside) — carrées, s’adaptent à la largeur de colonne */
.cell {
  width: 100%;
  aspect-ratio: 1 / 1;                  /* carré */
  background: #0f5129;
  border: 1px solid #145c30;
  color: #eee;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; position: relative; font-weight: 600;
}
.cell.red   { background: #8a0e0e; }
.cell.black { background: #1c1c1c; }

/* Case “0” — s’étend sur toute la largeur, hauteur ~ une case */
.cell.zero {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: auto;                   /* pas carré */
  height: clamp(36px, 6vw, 48px);       /* adaptatif, max ~48px */
}

/* Lignes des mises “outside” : 6 colonnes fluides */
.outside {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 parts égales */
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}

/* Cases outside — 2:1 environ (deux nombres) */
.cell-out {
  width: 100%;
  aspect-ratio: 2 / 1;                  /* rectangle */
  background: #0f5129;
  border: 1px solid #145c30;
  color: #eee;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; position: relative; font-weight: 600;
}

/* Compteur mini-jetons */
.chip-mini {
  position: absolute; bottom: 2px; right: 2px;
  background: #cc3333; color: #fff; font-size: 12px;
  padding: 2px 6px; border-radius: 12px;
  box-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* Texte un poil plus petit sur très petit écran */
@media (max-width: 420px) {
  .cell, .cell-out { font-size: 0.9rem; }
}
/* petits écrans : le tapis prend toute la largeur */
@media (max-width: 740px) {
  .roulette-layout {
    grid-template-columns: 1fr; /* une seule colonne */
  }
  .wheel-area { justify-self:center; }
}

:root {
  --wheel-size: 440px;          /* desktop */
  --wheel-spin-duration: 5.6s;  /* ~5-6 s */
}

/* Centrer la roue et l’agrandir */
.wheel-area { justify-items: center; gap: 10px; }
.wheel-wrap { position: relative; width: var(--wheel-size); height: var(--wheel-size); }
#wheel     { width: 100%; height: 100%; transform: rotate(0deg);
             transition: transform var(--wheel-spin-duration) cubic-bezier(.18,.92,.15,1);
             will-change: transform; }
/* Pointeur centré en haut */
#pointer{
  position:absolute; left:50%; top:-10px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 12px solid transparent; 
  border-right: 12px solid transparent;
  border-top: 22px solid #ffd54f;   /* <-- au lieu de border-bottom */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Style des numéros dans le SVG */
.wheel-number{
  font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0,0,0,.55);
  stroke-width: .9px;
}

/* Responsive */
@media (max-width: 640px){
  :root{ --wheel-size: 320px; }
  .wheel-number{ font-size: 12px; }
}

/* Visibilité des messages selon l’état */
.rl-bet  #rl-result { display: none; }
.rl-spin .table-area { display: none; }
.rl-spin #rl-result { display: block; }

#wheel { cursor: pointer; }

.stack-label { display: none; }
#rl-balance.txt-win { color: #ffd54f; }
#rl-balance.txt-lose { color: #e57373; }

.logo-container { width: 100%; text-align: center; }

.games-grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
  gap:16px;
}

/* === Tuile de jeu – base === */
.game-tile{
  position:relative;
  display:flex;
  align-items:flex-end;
  aspect-ratio: 16 / 9;
  border-radius:16px;
  padding:16px;
  text-decoration:none;
  overflow:hidden;
  background: radial-gradient(circle at 30% 20%, #075626 0%, #033b15 40%, #012a0d 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,213,79,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  isolation:isolate; /* pour les pseudo-éléments */
}
.game-tile:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.5); }

/* léger reflet or au survol */
.game-tile::after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(120% 120% at 10% -10%, rgba(255,213,79,.28), transparent 55%);
  opacity:.35; transition: opacity .2s ease;
  z-index:0;
}
.game-tile:hover::after{ opacity:.55; }

/* logo 64bit en haut-gauche */
.tile-logo{
  position:absolute; top:10px; left:10px;
  width:64px; height:64px; object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
  z-index:2;
}

/* contenu texte */
.tile-body{
  position:relative; z-index:2;
  color:#fff; max-width: 70%;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.tile-title{ font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin:0 0 6px; }
.tile-sub{ font-size: .95rem; line-height:1.25; opacity:.95; margin:0 0 10px; }

/* CTA — on réutilise .action-btn existant, on ajuste juste la densité */
.tile-cta{ padding:8px 14px; border-radius:999px; }

/* cartes décoratives (optionnelles) */
.tile-card{
  position:absolute; width:72px; height:98px;
  background:#fff; color:#111; border-radius:10px;
  border:1px solid #d9d9d9;
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-weight:800; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  z-index:1; user-select:none; pointer-events:none;
}
.tile-card span{ font-size:1.1em; color:#111; }
.tile-card.ace  { right:16px; bottom:18px; transform: rotate(-8deg); }
.tile-card.king { right:64px; bottom:44px; transform: rotate(10deg); }

/* Variante de thème “BlackJack” : liseré or + motif de tapis */
.game-tile.blackjack{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,213,79,.08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.015) 10px 20px),
    radial-gradient(circle at 30% 20%, #075626 0%, #033b15 40%, #012a0d 100%);
  outline: 1px solid rgba(255,213,79,.35);
}
/* === Pavé Blackjack : cartes décoratives A♠ et K♦ === */
.card-bj{
  position:absolute;
  width:72px; height:98px;            /* même gabarit que .tile-card */
  background:#fff;
  color:#111;
  border-radius:10px;
  border:1px solid #d9d9d9;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-weight:800;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  z-index:1;
  user-select:none; pointer-events:none;  /* purement décoratif */
}
.card-bj span{ font-size:1.05em; }

/* positions et rotations des deux cartes */
.card-bj.a{ right:16px; bottom:18px; transform: rotate(-8deg); }
.card-bj.k{ right:64px; bottom:44px; transform: rotate(10deg); }

/* couleurs des enseignes */
.card-bj span{ color:#111; }           /* noir par défaut (♠/♣) */
.card-bj.k span{ color:#c62828; }      /* rouge pour le K♦ */

/* versions plus compactes dans le méga-menu */
.menu-tiles .card-bj{
  width:58px; height:80px;
}
.menu-tiles .card-bj.a{ right:14px; bottom:14px; }
.menu-tiles .card-bj.k{ right:54px; bottom:36px; }

/* très petits écrans */
@media (max-width:640px){
  .card-bj{ width:64px; height:88px; }
  .card-bj.k{ right:54px; bottom:38px; }
}

/* Responsive réglages fins */
@media (max-width:640px){
  .tile-logo{ width:52px; height:52px; }
  .tile-body{ max-width: 60%; position: absolute;
  top: 10px;
  right: 10px; }
  .tile-card{ width:64px; height:88px; }
  .tile-card.king{ right:54px; bottom:38px; }
}
/* ---- Variantes de thème ---- */

/* Bataille : vert profond + éclat or, deux cartes qui s’entrechoquent */
.game-tile.war{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,213,79,.10), transparent 60%),
    radial-gradient(circle at 70% 30%, #074b22 0%, #053a1a 45%, #032a12 100%);
  outline: 1px solid rgba(255,213,79,.35);
}
.game-tile.war .tile-card{
  width:70px; height:96px;
}
.game-tile.war .tile-card.left{
  right:18px; bottom:18px; transform: rotate(-10deg);
}
.game-tile.war .tile-card.right{
  right:64px; bottom:42px; transform: rotate(8deg);
}
.game-tile.war .tile-card span{ color:#c62828; } /* ♦ rouge */

/* Big2 : tapis texturé + éventail de cartes, mise en avant du 3♦ */
.game-tile.big2{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,213,79,.08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,.02) 10px 20px),
    radial-gradient(circle at 30% 20%, #0a5a2c 0%, #06441b 45%, #022e12 100%);
  outline: 1px solid rgba(255,213,79,.3);
}
.big2 .fan{
  position:absolute; right:12px; bottom:12px; display:flex; gap:6px; z-index:1;
}
.big2 .mini-card{
  width:44px; height:62px; background:#fff; border:1px solid #ddd; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#111;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.big2 .mini-card:nth-child(1){ transform: rotate(-12deg); }
.big2 .mini-card:nth-child(2){ transform: rotate(-6deg); }
.big2 .mini-card:nth-child(3){ transform: rotate(0); }
.big2 .mini-card:nth-child(4){ transform: rotate(6deg); }
.big2 .mini-card:nth-child(5){ transform: rotate(12deg); }
.big2 .mini-card .diamond{ color:#c62828; }

/* Roulette : halo doré + mini roue CSS */
.game-tile.roulette{
  background:
    radial-gradient(110% 110% at 20% -10%, rgba(255,213,79,.22), transparent 55%),
    radial-gradient(circle at 35% 30%, #075626 0%, #043a18 45%, #012a0d 100%);
  outline: 1px solid rgba(255,213,79,.35);
}
.wheel-mini{
  position:absolute; right:14px; bottom:14px; width:92px; height:92px; border-radius:50%;
  background:
    conic-gradient(#0a5f0a 0 9.73deg, #1c1c1c 0 19.46deg, #8a0e0e 0 29.19deg, #1c1c1c 0 38.92deg,
                   #8a0e0e 0 48.65deg, #1c1c1c 0 58.38deg, #8a0e0e 0 68.11deg, #1c1c1c 0 77.84deg,
                   #8a0e0e 0 87.57deg, #1c1c1c 0 97.3deg, #8a0e0e 0 107.03deg, #1c1c1c 0 116.76deg,
                   #8a0e0e 0 126.49deg, #1c1c1c 0 136.22deg, #8a0e0e 0 145.95deg, #1c1c1c 0 155.68deg,
                   #8a0e0e 0 165.41deg, #1c1c1c 0 175.14deg, #8a0e0e 0 184.87deg, #1c1c1c 0 194.6deg,
                   #8a0e0e 0 204.33deg, #1c1c1c 0 214.06deg, #8a0e0e 0 223.79deg, #1c1c1c 0 233.52deg,
                   #8a0e0e 0 243.25deg, #1c1c1c 0 252.98deg, #8a0e0e 0 262.71deg, #1c1c1c 0 272.44deg,
                   #8a0e0e 0 282.17deg, #1c1c1c 0 291.9deg, #8a0e0e 0 301.63deg, #1c1c1c 0 311.36deg,
                   #8a0e0e 0 321.09deg, #1c1c1c 0 330.82deg, #8a0e0e 0 340.55deg, #1c1c1c 0 350.28deg,
                   #8a0e0e 0 360deg);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.45);
}
.pointer-mini{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:14px solid #ffd54f; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

/* Sports : fond “stade” bleu-vert, badge LIVE + score */
.game-tile.sports{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,213,79,.12), transparent 60%),
    linear-gradient(135deg, #0b3a66 0%, #062742 45%, #052034 100%);
  outline: 1px solid rgba(255,213,79,.35);
}
.sports .score-pill{
  position:absolute; right:12px; bottom:12px;
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
  color:#ffd54f; font-weight:700; box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.sports .score-pill .live-dot{
  width:8px; height:8px; border-radius:50%; background:#ff5252; display:inline-block;
  box-shadow:0 0 8px rgba(255,82,82,.9);
}

/* ---- Ajustements responsive ---- */
@media (max-width:640px){
  .game-tile .tile-cta{ padding:7px 12px; }
  .game-tile.war .tile-card{ width:62px; height:86px; }
  .big2 .mini-card{ width:40px; height:56px; }
  .wheel-mini{ width:82px; height:82px; }
}
.mega-nav{
  width:100%;
  max-width:1100px;
  margin:0 auto 18px;
}
.mega-nav .brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:#ffd54f; font-weight:800; letter-spacing:.3px;
}
.mega-nav .brand span{ color:#ffd54f; }

/* root list */
.mega-nav .mega-root{
  list-style:none; display:flex; gap:10px; align-items:center; margin-left:auto;
}

/* simple links */
.mega-link{
  color:#ffd54f; text-decoration:none; font-weight:700; padding:8px 10px;
  border-radius:6px;
}
.mega-link:hover{ background:#005e20; }

/* burger mobile */
.mega-burger{
  display:none;
  width:42px; height:36px; border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05); border-radius:8px; cursor:pointer;
}
.mega-burger span{ display:block; height:2px; margin:6px 7px; background:#ffd54f; }

/* trigger “Jeux” */
.mega-trigger{
  background:transparent; color:#ffd54f; border:1px solid rgba(255,255,255,.25);
  padding:8px 12px; border-radius:8px; font-weight:800; cursor:pointer;
}
.mega-item{ position:relative; }

/* panel */
.mega-panel{
  position:absolute; left:0; top:calc(100% + 3px);
  width:min(100vw - 24px, 1040px);
  background:#033b15; border:1px solid #2b3a55; border-radius:12px;
  padding:16px; box-shadow:0 18px 36px rgba(0,0,0,.5);
  display:none; z-index:2000;
}
.mega-item:focus-within .mega-panel,
.mega-item:hover .mega-panel{ display:block; }

/* === grille du méga-menu : 3 colonnes -> 2 -> 1 === */
/* === HOTFIX iPhone 15+ : grille du méga-menu sans chevauchement === */
/* A COLLER TOUT EN BAS DU FICHIER */

.menu-tiles{
  display: grid;
  gap: 14px;
}

/* Mobile / tablette : laisse le navigateur décider si 1 ou 2 colonnes
   en fonction de la place disponible (auto-fit évite le chevauchement). */
@media (max-width: 900px){
  .menu-tiles{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Téléphones étroits (incluant iPhone 15 en zoom par défaut) :
   forcer une seule colonne plein écran. */
@media (max-width: 480px){
  .menu-tiles{
    grid-template-columns: 1fr;
  }
}


/* === Tuile CAISSE === */
.game-tile.cashier{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,213,79,.10), transparent 60%),
    radial-gradient(circle at 30% 20%, #0a5a2c 0%, #06441b 45%, #022e12 100%);
  outline: 1px solid rgba(255,213,79,.35);
}

/* déco: carte + flèches dépôt / retrait */
.cash-card{
  position:absolute; right:18px; bottom:18px;
  width:92px; height:60px; border-radius:10px; background:#0b2a55;
  box-shadow:0 10px 22px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12);
}
.cash-card::before, .cash-card::after{
  content:""; position:absolute; left:12px; right:12px; height:6px; border-radius:4px;
  background: rgba(255,255,255,.18);
}
.cash-card::before{ top:14px; }
.cash-card::after { top:28px; }

/* flèche verte (dépôt) */
.cash-arrow-in{
  position:absolute; right:117px; bottom:42px; width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-bottom:16px solid #2ecc71; transform: rotate(-90deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
/* flèche rouge (retrait) */
.cash-arrow-out{
  position:absolute; right:117px; bottom:18px; width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:16px solid #e57373; transform: rotate(-90deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}


/* Compacité des tuiles en menu */
.menu-tiles .game-tile{
  min-height: 180px;
  padding: 14px 14px 12px;
}
.menu-tiles .tile-title{ font-size:1.1rem; }
.menu-tiles .tile-sub{ font-size:.9rem; }
.menu-tiles .tile-cta{ padding:6px 12px; }

/* Petites décorations adaptées */
.menu-tiles .wheel-mini{ width:74px; height:74px; }
.menu-tiles .tile-card{ width:58px; height:80px; }
.menu-tiles .mini-card{ width:36px; height:50px; }

/* ==== Responsive ==== */
@media (max-width: 980px){
  .menu-tiles{ grid-template-columns: repeat(3,minmax(180px,1fr)); }
}
@media (hover: hover){
  .mega-item:hover .mega-panel{ display:block; }
}

/* Mobile/tactile */
@media (max-width: 900px){
  .mega-burger{ display:block; }

  .mega-root{
    position:fixed; inset:64px 12px auto 12px;
    background:#033b15; border:1px solid #2b3a55; border-radius:12px;
    padding:12px; display:none; flex-direction:column; gap:8px; z-index:2200;
    box-shadow:0 18px 36px rgba(0,0,0,.55);
  }
  .mega-root.open{ display:flex; }

  /* IMPORTANT: par défaut, fermé sur mobile */
  .has-panel > .mega-panel{
    position:static;
    display:none;        /* ⟵ fermé par défaut */
    padding:12px; box-shadow:none; width:auto;
    margin-top:6px;
  }

  /* Ouvre si le parent a .open OU si le bouton a aria-expanded=true */
  .has-panel.open > .mega-panel,
  .has-panel > .mega-trigger[aria-expanded="true"] + .mega-panel{
    display:block;
  }

  .menu-tiles{ grid-template-columns: repeat(2,minmax(160px,1fr)); }
  .menu-tiles .game-tile{ min-height:160px; }
}

/* très petit */
@media (max-width: 420px){
  .menu-tiles{ grid-template-columns: 1fr; }
}

/* --- Nettoyage : on n'utilise plus .mega-root / .mega-item / .mega-trigger --- */
.mega-root, .mega-item, .mega-trigger { display: none !important; }

/* Le panneau est caché via [hidden] par défaut */
.mega-panel[hidden] { display: none !important; }

/* Position du panneau */
.mega-nav { position: relative; }
.mega-panel{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 54px;                       /* sous le burger */
  width: min(100vw - 24px, 1040px);
  display: block;                  /* mais masqué par [hidden] */
}

/* Backdrop pour fermer en dehors */
.mega-backdrop[hidden]{ display:none; }
.mega-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1999;                   /* sous le panneau (2000) */
}

/* Mobile : le panneau se comporte comme un tiroir */
@media (max-width: 900px){
  .mega-panel{
    position: fixed;
    left: 12px; right: 12px; top: 64px;
    transform: none;
    max-height: calc(100vh - 80px);
    overflow:auto;
  }
  .tile-body p {
    float: right;
	text-align: right;
  }
    .tile-body h3 {
    float: right;
  }
}

/* Le burger toujours visible (desktop + mobile) */
.mega-burger{ display:block; position: relative; z-index: 2001; }



.mega-burger span {
  display: block;
  height: 4px;
  background: #ffc72c; /* couleur des lignes */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* État ouvert (classe .open ajoutée en JS) */
.mega-burger.open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.mega-burger.open span:nth-child(2) {
  opacity: 0;
}

.mega-burger.open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ===== Bandeau-jeux 64bit (remplace le burger en mobile paysage) ===== */
.games-ribbon{
  display:none; /* visible seulement en mobile paysage (voir media query plus bas) */
  
  height:64px;
  border-radius:14px;
  padding:8px 10px;
  background:
    radial-gradient(120% 120% at -10% -60%, rgba(255,213,79,.20), transparent 55%),
    #033b15;
  border:1px solid rgba(255,213,79,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  color:#ffd54f;
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  cursor:pointer;
}
.games-ribbon::-webkit-scrollbar{ display:none; } /* discret */

.ribbon-logo{
  width:36px; height:36px; flex:0 0 auto; object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.ribbon-title{
  font-weight:800; letter-spacing:.2px; margin-right:6px; white-space:nowrap;
}

/* CTA at the right edge */
.ribbon-cta{
  margin-left:auto; flex:0 0 auto;
  padding:6px 10px; border-radius:999px; background:#FFD23F; color:#14210f;
  font-weight:800; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.games-ribbon[aria-expanded="true"] .ribbon-cta{ content:"Fermer"; }
.games-ribbon[aria-expanded="true"] .ribbon-cta::after{ content:"Fermer"; }
.games-ribbon[aria-expanded="false"] .ribbon-cta::after{ content:"Ouvrir"; }
/* hide original text, rely on ::after so it changes */
.ribbon-cta{ position:relative; color:transparent; }
.ribbon-cta::after{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#14210f; }

/* items inside ribbon */
.rb-item{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.rb-item .card{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:38px; border-radius:6px; background:#fff; color:#111;
  font-weight:800; font-size:14px; border:1px solid #d9d9d9;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.rb-item .card.red{ color:#c62828; }
.rb-item.bj .card:first-child{ transform: rotate(-6deg); }
.rb-item.bj .card:last-child { transform: rotate( 6deg); }

/* War 9♣ 9♦ */
.rb-item.war .card:first-child{ transform: rotate(-10deg); }
.rb-item.war .card:last-child { transform: rotate( 8deg); }

/* Big2 badge */
.rb-item.big2 .pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 10px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  font-weight:900; letter-spacing:.3px;
}

/* Mini roulette wheel */
.rb-item.rou .wheel{
  width:40px; height:40px; border-radius:50%;
  display:inline-block;
  background:
    conic-gradient(#0a5f0a 0 9.73deg, #1c1c1c 0 19.46deg, #8a0e0e 0 29.19deg, #1c1c1c 0 38.92deg,
                   #8a0e0e 0 48.65deg, #1c1c1c 0 58.38deg, #8a0e0e 0 68.11deg, #1c1c1c 0 77.84deg,
                   #8a0e0e 0 87.57deg, #1c1c1c 0 97.3deg, #8a0e0e 0 107.03deg, #1c1c1c 0 116.76deg,
                   #8a0e0e 0 126.49deg, #1c1c1c 0 136.22deg, #8a0e0e 0 145.95deg, #1c1c1c 0 155.68deg,
                   #8a0e0e 0 165.41deg, #1c1c1c 0 175.14deg, #8a0e0e 0 184.87deg, #1c1c1c 0 194.6deg,
                   #8a0e0e 0 204.33deg, #1c1c1c 0 214.06deg, #8a0e0e 0 223.79deg, #1c1c1c 0 233.52deg,
                   #8a0e0e 0 243.25deg, #1c1c1c 0 252.98deg, #8a0e0e 0 262.71deg, #1c1c1c 0 272.44deg,
                   #8a0e0e 0 282.17deg, #1c1c1c 0 291.9deg, #8a0e0e 0 301.63deg, #1c1c1c 0 311.36deg,
                   #8a0e0e 0 321.09deg, #1c1c1c 0 330.82deg, #8a0e0e 0 340.55deg, #1c1c1c 0 350.28deg,
                   #8a0e0e 0 360deg);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45);
  animation: spinwheel 5.6s cubic-bezier(.18,.92,.15,1) infinite;
}
@keyframes spinwheel{
  0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); }
}

/* Sports LIVE pill */
.rb-item.sp .live-dot{
  width:8px; height:8px; border-radius:50%; background:#ff5252; display:inline-block;
  box-shadow:0 0 8px rgba(255,82,82,.9); margin-right:6px;
  animation: blink 1.2s ease-in-out infinite;
}
.rb-item.sp .live-text{ font-weight:900; letter-spacing:.5px; }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* Cashier arrows */
.rb-item.cash{ position:relative; }
.rb-item.cash .arr{
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  display:inline-block; margin-right:6px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.rb-item.cash .arr.in { border-bottom:14px solid #2ecc71; transform: rotate(-90deg); }
.rb-item.cash .arr.out{ border-top:14px solid #e57373; transform: rotate(-90deg); }

/* Affichage: mobile paysage => montrer le bandeau, cacher le burger */
@media (max-width: 900px) and (orientation: landscape){
  .mega-burger{ display:none !important; }
  .games-ribbon{ display:flex; }
}

.ribbon-label {display: flex;              /* déjà présent, on précise */
  flex-direction: column;     /* ⟵ clé: vertical */
  align-items: center;        /* centre horizontalement */
  justify-content: center; 
}
/* Quand le panel est ouvert, on garde le bandeau "collant" pour refermer vite */
@media (max-width: 900px){
  .games-ribbon.sticky{
    position: sticky; top: 8px; z-index: 2300;
  }
}
.ribbon-label {
  font-size: 14px;
  font-weight: 800;
  color: #ffd54f;
  text-align: center;
  margin-right: 10px;
}

.burger-icon {
  width: 24px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.burger-icon span {
  display: block;
  height: 3px;
  background: #ffd54f;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Quand le menu est ouvert, transforme le burger en X */
.games-ribbon.open .burger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.games-ribbon.open .burger-icon span:nth-child(2) {
  opacity: 0;
}
.games-ribbon.open .burger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

		
/* ===== Pagination ===== */
.sb-pagination{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
}
.sb-pagination button{
  padding:6px 10px; border-radius:8px; border:1px solid #145c30;
  background:#022c11; color:#ffd54f; cursor:pointer;
}
.sb-pagination button[disabled]{ opacity:.5; cursor:not-allowed; }
.sb-pagination .pg-info{ opacity:.9; }

/* ===== Sticky bar (en bas) ===== */
.sb-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  background:rgba(3,59,21,.96); backdrop-filter: blur(6px);
  border-top:1px solid #0e4a22; box-shadow:0 -8px 18px rgba(0,0,0,.5);
}
.sb-sticky .sb-sticky-inner{
  max-width:1100px; margin:0 auto; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
.sb-sticky .cluster{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sb-pill{
  padding:6px 10px; border-radius:999px; background:#0f5129; border:1px solid #145c30;
}
.sb-link{ color:#ffd54f; text-decoration:underline; cursor:pointer; }

/* ===== Modal “Paris ouverts” ===== */
.sb-modal-back{
  position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; z-index:2000;
}
.sb-modal{
  position:fixed; inset:auto 0 0 0; margin:auto; top:8%; max-width:780px; width:calc(100% - 24px);
  background:#033b15; border:1px solid #2b3a55; border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.6); display:none; z-index:2001;
}
.sb-modal header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #0e4a22;
}
.sb-modal .close{
  background:transparent; border:1px solid rgba(255,255,255,.25);
  color:#ffd54f; padding:4px 8px; border-radius:8px; cursor:pointer;
}
.sb-modal .body{ padding:12px; max-height:min(70vh,600px); overflow:auto; }

/* Mobile: quand ouvert, tout le pavé devient un bouton X */
@media (max-width: 900px){
  /* Le pavé devient un bouton X fixé en haut */
  .games-ribbon.open{
    position: fixed;
    top: 8px;           /* marge haut */
    left: 12px;
    right: 12px;
    z-index: 2400;      /* au-dessus du panneau et du backdrop */
    justify-content: center;
    align-items: center;
	width:92%;
	margin: auto;
  }

  /* Masquer le contenu et dessiner le X (reprend la logique précédente) */
  .games-ribbon.open > *{ visibility: hidden; pointer-events: none; }
  .games-ribbon.open::before,
  .games-ribbon.open::after{
    content: "";
    position: absolute;
    width: 28px; height: 3px;
    background: #ffd54f; border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .games-ribbon.open::before{ transform: rotate(45deg); }
  .games-ribbon.open::after { transform: rotate(-45deg); }

  /* Quand le bouton est fixé, on décale le panneau en dessous */
  .games-ribbon.open + .mega-panel{
    top: 73px; /* 8px (marge) + 64px (hauteur bouton) + ~12px d’air */
  }
}

  .games-ribbon{
width:100%;
  }


.sb-league-tabs .disabled{
color:555555;
  }
  
  /* === FIX iPhone 15+ : tuiles du méga-menu en UNE seule colonne === */
@media (max-width: 900px){
  .mega-panel .menu-tiles{
    display: grid;
    grid-template-columns: 1fr !important;  /* une seule colonne */
    gap: 14px;
  }

  /* on s'assure que chaque tuile prend bien toute la largeur */
  .mega-panel .menu-tiles .game-tile{
    width: 100% !important;
    max-width: none !important;
  }
}
.game-tile.slots .slot-mini {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 4px;
}

.game-tile.slots .slot-mini-reel {
  width: 20px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(180deg, #111827, #020617);
  border: 1px solid #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
}

@media (min-width: 769px) {
    /* Le vrai panneau du menu */
    #mega-games.mega-panel {
        width: min(960px, calc(100vw - 48px)) !important;
        max-width: none !important;
        max-height: calc(100vh - 135px) !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* La vraie grille : <div class="games-grid menu-tiles"> */
    #mega-games .games-grid.menu-tiles {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 230px !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    /* Les vraies cartes : <a class="game-tile ..."> */
    #mega-games .game-tile {
        position: relative !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 230px !important;
        height: 230px !important;
        padding: 18px 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Mise en page stable du contenu texte */
    #mega-games .game-tile .tile-logo {
        position: absolute !important;
        top: 16px !important;
        left: 16px !important;
        width: 58px !important;
        height: 58px !important;
        object-fit: contain !important;
        z-index: 4 !important;
    }

    #mega-games .game-tile .tile-body {
        position: absolute !important;
        top: 86px !important;
        left: 20px !important;
        width: 55% !important;
        max-width: 55% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        z-index: 4 !important;
    }

    #mega-games .game-tile .tile-title {
        margin: 0 0 6px !important;
        line-height: 1.15 !important;
    }

    #mega-games .game-tile .tile-sub {
        margin: 0 !important;
        line-height: 1.35 !important;
    }

    /* Le bouton ne se retrouve plus sous l'illustration */
    #mega-games .game-tile .tile-cta {
        position: absolute !important;
        left: 20px !important;
        right: auto !important;
        top: auto !important;
        bottom: 16px !important;
        z-index: 6 !important;
    }

    /* Les illustrations restent dans la moitié droite */
    #mega-games .game-tile .card-bj,
    #mega-games .game-tile .tile-card,
    #mega-games .game-tile .fan,
    #mega-games .game-tile .wheel-mini,
    #mega-games .game-tile .score-pill,
    #mega-games .game-tile .slot-mini {
        z-index: 3 !important;
    }
}

/* Symboles Machines à sous — desktop */
@media (min-width: 769px) {
    .game-tile.slots .slot-mini {
        position: absolute;
        right: 20px;
        bottom: 22px;
        z-index: 3;

        display: flex;
        align-items: center;
        gap: 10px;
    }

    .game-tile.slots .slot-mini-reel {
        width: 50px !important;
        height: 60px !important;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 2.5rem !important;
        line-height: 1 !important;

        border-radius: 10px;
        border: 1px solid rgba(255, 213, 79, 0.55);

        box-shadow:
            0 8px 15px rgba(0, 0, 0, 0.28),
            inset 0 0 8px rgba(0, 0, 0, 0.08);

        overflow: hidden;
    }
}