/* ==================================================================== */
/* SOLSERV — Thème casino v2                                            */
/* Palette : vert feutre, bordeaux, or/laiton, noir mat                 */
/* Typo : Bebas Neue (titres/montants) + Inter (texte courant)         */
/* Pas de glassmorphism généralisé, pas de glow néon systématique      */
/* ==================================================================== */

/* --- Import Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600&family=Inter:wght@400;500;600&display=swap');

/* --- Variables CSS centralisées --- */
:root {
  /* Palette tapis */
  --felt-deep: #0d3b2e;
  --felt-mid: #145c42;
  --felt-light: #1a6b4d;
  --felt-rail: #0a2a20;

  /* Accents */
  --bordeaux: #7a1f2b;
  --bordeaux-light: #9c2a39;
  --gold: #c9a44c;
  --gold-bright: #e0bf5e;
  --gold-dark: #a08436;

  /* Fonds */
  --charcoal: #161616;
  --charcoal-light: #1e1e1e;
  --charcoal-dark: #0d0d0d;
  --panel-bg: #1a1a1a;

  /* Texte */
  --text-primary: #e8e4d8;
  --text-secondary: #9a9488;
  --text-muted: #5a554c;

  /* Statut */
  --win: #4a9e5f;
  --loss: #c0392b;
  --push: #b3a050;

  /* Liseré or pour éléments actifs */
  --gold-line: 1px solid var(--gold);
  --gold-relief: inset 0 1px 0 rgba(201,164,76,0.15), inset 0 -1px 0 rgba(0,0,0,0.3);

  /* Typo */
  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --font-condensed: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Rayons */
  --radius-btn: 5px;
  --radius-card: 6px;
  --radius-panel: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--charcoal);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Texture de bruit subtile (overlay SVG) --- */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none !important;
  z-index: 1;
  opacity: 0.5;
}

/* === NAVBAR === */
nav {
  background: var(--charcoal-dark);
  padding: .8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a2a2a;
  position: relative;
  z-index: 10;
}
nav .brand { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 3px; color: var(--gold); }
nav .brand a { color: var(--gold); text-decoration: none; }
nav .links { display: flex; gap: 1rem; align-items: center; }
nav .links a { color: var(--text-secondary); font-size: .9rem; font-family: var(--font-condensed); letter-spacing: .5px; text-transform: uppercase; }
nav .links a:hover { color: var(--gold); text-decoration: none; }
nav .links .user { color: var(--text-muted); font-size: .85rem; font-family: var(--font-condensed); }

/* === LAYOUT === */
.container { max-width: 900px; margin: 0 auto; padding: 2rem; flex: 1; position: relative; z-index: 2; }
.center { text-align: center; }

/* === BOUTONS === */
.btn {
  display: inline-block;
  padding: .6rem 1.2rem;
  background: var(--charcoal-light);
  color: var(--text-primary);
  border: 1px solid #333;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-family: var(--font-condensed);
  font-size: .95rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: border-color .2s, box-shadow .2s;
}
.btn:hover { border-color: var(--gold); box-shadow: var(--gold-relief); }
.btn-primary { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.btn-primary:hover { background: var(--bordeaux-light); border-color: var(--gold); }
.btn-lg { padding: .8rem 2rem; font-size: 1.1rem; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* === CARTES (panneaux) === */
.card-panel {
  background: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel);
  padding: 2rem;
  margin: 1rem 0;
}

/* === FORMULAIRES === */
input[type=text], input[type=email], input[type=password], input[type=number] {
  width: 100%;
  padding: .7rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
}
input:focus { outline: none; border-color: var(--gold); box-shadow: var(--gold-relief); }
label { display: block; margin-bottom: .4rem; color: var(--text-secondary); font-size: .85rem; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .5px; }
.form-group { margin-bottom: 1.2rem; }

/* === ALERTES === */
.alert { padding: .8rem 1rem; border-radius: var(--radius-btn); margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: rgba(192,57,43,.12); border: 1px solid var(--loss); color: #e07060; }
.alert-success { background: rgba(74,158,95,.12); border: 1px solid var(--win); color: var(--win); }
.alert-info { background: rgba(201,164,76,.12); border: 1px solid var(--gold); color: var(--gold); }
.alert-danger {
  background: rgba(192,57,43,.12);
  border: 2px solid var(--loss);
  color: #e07060;
  text-align: center;
  margin-bottom: .8rem;
}
.alert ul { list-style: none; }

/* === SOLDE === */
.balance-box {
  background: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}
.balance-box .label { color: var(--text-muted); font-size: .8rem; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 1px; }
.balance-box .value { font-family: var(--font-display); font-size: 2.5rem; color: var(--gold); letter-spacing: 2px; }

/* === TABLEAUX === */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid #2a2a2a; }
th { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; font-family: var(--font-condensed); letter-spacing: 1px; }
td.empty { text-align: center; color: var(--text-muted); padding: 2rem; }
.sig { font-family: monospace; font-size: .8rem; color: var(--text-muted); }

/* === BADGES & STATUTS === */
.badge { padding: .15rem .5rem; border-radius: 10px; font-size: .7rem; text-transform: uppercase; font-family: var(--font-condensed); letter-spacing: .5px; }
.badge-deposit { background: rgba(201,164,76,.15); color: var(--gold); }
.badge-purchase { background: rgba(122,31,43,.15); color: var(--bordeaux-light); }

.status { padding: .15rem .5rem; border-radius: 3px; font-size: .72rem; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .5px; }
.status-pending { background: rgba(201,164,76,.15); color: var(--gold); }
.status-confirmed { background: rgba(74,158,95,.15); color: var(--win); }
.status-expired { background: rgba(192,57,43,.15); color: var(--loss); }
.status-failed { background: rgba(192,57,43,.25); color: var(--loss); }
.status-approved { background: rgba(74,158,95,.15); color: var(--win); }
.status-rejected { background: rgba(192,57,43,.15); color: var(--loss); }
.status-sent { background: rgba(201,164,76,.15); color: var(--gold); }

/* Resultat partie casino */
.status-won, .status-blackjack { background: rgba(74,158,95,.15); color: var(--win); }
.status-lost, .status-busted { background: rgba(192,57,43,.15); color: var(--loss); }
.status-push { background: rgba(179,160,80,.15); color: var(--push); }

/* === PAGINATION === */
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 1.5rem; }
.pagination a { padding: .3rem .7rem; background: var(--charcoal-light); border: 1px solid #2a2a2a; border-radius: 3px; color: var(--text-secondary); font-family: var(--font-condensed); font-size: .85rem; }
.pagination a:hover { border-color: var(--gold); text-decoration: none; }
.pagination a.active { background: var(--bordeaux); border-color: var(--gold); color: #fff; }

/* === ONGLETS DEPOT === */
.tabs { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; }
.tab {
  padding: .5rem 1rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-condensed);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tab:hover { border-color: var(--gold); color: var(--text-primary); }
.tab.active { background: var(--bordeaux); border-color: var(--gold); color: #fff; }
.tab-content { margin-bottom: 1.5rem; }
.tab-desc { color: var(--text-secondary); margin-bottom: 1rem; font-size: .9rem; }

/* === DEPOT MANUEL === */
.manual-info { background: var(--charcoal-dark); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.manual-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid #2a2a2a; gap: 1rem; }
.manual-row:last-child { border-bottom: none; }
.manual-label { font-size: .85rem; color: var(--text-secondary); white-space: nowrap; font-family: var(--font-condensed); text-transform: uppercase; }
.manual-copy { display: flex; align-items: center; gap: .5rem; }
.manual-copy code { font-size: .8rem; background: var(--charcoal-light); padding: .2rem .5rem; border-radius: 3px; word-break: break-all; max-width: 260px; }

/* === QR === */
.qr-container { margin: 1.5rem auto; text-align: center; }
.qr-container img { border-radius: 8px; background: #fff; padding: 1rem; max-width: 250px; }

/* === POLLING === */
.polling { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--text-muted); margin-top: 1rem; }
.spinner { width: 14px; height: 14px; border: 2px solid #2a2a2a; border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* === FOOTER === */
footer { padding: 1rem 2rem; text-align: center; color: var(--text-muted); border-top: 1px solid #2a2a2a; font-size: .85rem; font-family: var(--font-condensed); }

/* === HISTORIQUE PARTIES === */
.game-history-filters {
  display: flex;
  gap: 1rem;
  align-items: end;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.game-history-filters .form-group { margin-bottom: 0; }
.game-history-filters label { font-size: .75rem; }
.game-history-filters input[type=date] {
  width: auto;
  padding: .4rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: .85rem;
}
.game-history-filters .btn { padding: .4rem .8rem; font-size: .85rem; }

/* ===== BLACKJACK — TABLE DE CASINO ===== */

/* --- Header casino --- */
.casino-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.5rem;
  background: var(--charcoal-dark);
  border-bottom: 1px solid #2a2a2a;
  flex-wrap: wrap;
  gap: .5rem;
}
.casino-header-left, .casino-header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.casino-header-center { flex: 1; text-align: center; }

.casino-btn {
  padding: .4rem .8rem;
  background: var(--charcoal-light);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  font-family: var(--font-condensed);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.casino-btn:hover { border-color: var(--gold); color: var(--gold); box-shadow: var(--gold-relief); }
.casino-btn-primary { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.casino-btn-primary:hover { background: var(--bordeaux-light); border-color: var(--gold); color: #fff; }
.casino-btn-action {
  background: var(--gold-dark);
  border-color: var(--gold);
  color: #000;
  font-weight: 600;
}
.casino-btn-action:hover { background: var(--gold); color: #000; }
.casino-btn-sm { font-size: .8rem; padding: .3rem .6rem; }
.casino-btn-sec { border-color: rgba(201,164,76,.3); color: var(--gold); }

.casino-toggle {
  display: flex;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.toggle-btn {
  padding: .3rem .6rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-condensed);
  font-size: .85rem;
  cursor: pointer;
  text-transform: uppercase;
}
.toggle-btn.active { background: var(--bordeaux); color: #fff; }

.casino-balance {
  display: inline-flex;
  flex-direction: column;
  background: var(--charcoal-light);
  padding: .3rem .8rem;
  border-radius: var(--radius-btn);
  border: 1px solid #2a2a2a;
}
.casino-balance .balance-label { font-size: .7rem; color: var(--text-muted); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 1px; }
.casino-balance .balance-amount { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); letter-spacing: 1px; }

/* --- Pseudo modal --- */
.casino-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(13,13,13,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
/* Seul element avec un effet de verre dépoli (exception) */
.casino-modal {
  background: rgba(26,26,26,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gold);
  border-radius: var(--radius-panel);
  padding: 2rem;
  text-align: center;
  max-width: 400px;
  box-shadow: var(--gold-relief), 0 4px 20px rgba(0,0,0,.5);
}
.casino-modal h2 { color: var(--gold); font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 2px; margin-bottom: 1rem; }
.casino-modal p { color: var(--text-secondary); margin-bottom: 1.2rem; font-size: .9rem; }
.casino-modal input {
  width: 100%;
  padding: .7rem;
  background: rgba(13,13,13,.6);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-family: var(--font-body);
  margin-bottom: 1rem;
}
.casino-modal input:focus { outline: none; border-color: var(--gold); }
.casino-modal .btn { width: 100%; }

/* --- Layout horizontal : sidebar a gauche, table a droite --- */
.casino-layout {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: flex-start;
  min-height: calc(100vh - 120px);
}

.casino-sidebar {
  width: 240px;
  min-width: 220px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel);
  padding: 1rem;
}

/* --- Conteneur table --- */
.casino-table-wrap {
  display: flex;
  justify-content: center;
  flex: 1;
  perspective: 1400px;
  padding: 1rem 0;
}

.casino-table {
  width: 100%;
  max-width: 700px;
  transform: rotateX(6deg);
}

/* --- Tapis : vert feutre texturé avec bordure bois/cuir --- */
.casino-table-felt {
  position: relative;
  background:
    /* Texture feutre via gradients repetes pour effet tissu */
    repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center,
      var(--felt-light) 0%,
      var(--felt-mid) 50%,
      var(--felt-deep) 85%,
      var(--felt-rail) 100%);
  border-radius: 50% 50% 45% 45% / 38% 38% 62% 62%;
  /* Bordure simulant le bois/cuir du tour de table */
  border: 6px solid;
  border-image: linear-gradient(to bottom, var(--gold-dark), #3a2810, var(--gold-dark)) 1;
  box-shadow:
    0 0 0 4px #2a1a08,
    0 0 0 6px var(--gold-dark),
    inset 0 0 100px rgba(0,0,0,0.4),
    inset 0 0 40px rgba(10,42,32,0.6),
    0 10px 40px rgba(0,0,0,0.6);
  padding: 3rem 1.5rem 4rem;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* Texture de bruit sur le tapis */
.casino-table-felt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.06'/%3E%3C/svg%3E");
  border-radius: inherit;
  pointer-events: none !important;
  z-index: 0;
}

/* Texte filigrane sur le tapis */
.casino-table-text {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: rgba(201,164,76,0.15);
  letter-spacing: 6px;
  text-align: center;
  pointer-events: none;
  width: 100%;
}
.casino-table-text-sub {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: var(--font-condensed);
  font-size: .9rem;
  color: rgba(201,164,76,0.1);
  letter-spacing: 4px;
  pointer-events: none;
}

/* --- Sabot de cartes (shoe) : boîtier rectangulaire incliné --- */
.casino-shoe {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  transform: rotate(-5deg);
}
.casino-shoe-box {
  width: 60px;
  height: 48px;
  background: linear-gradient(160deg, #2a1a08 0%, #1a1004 100%);
  border: 1px solid var(--gold-dark);
  border-radius: 4px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,164,76,0.1);
  position: relative;
  padding: 4px;
}
/* Fente de distribution */
.casino-shoe-box::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: #000;
  border-radius: 2px;
}
/* Cartes visibles dans le sabot */
.shoe-card {
  width: 28px;
  height: 40px;
  border-radius: 3px;
  /* Dos de carte avec motif (voir plus bas) */
  background:
    repeating-linear-gradient(45deg, var(--bordeaux) 0 4px, var(--bordeaux-light) 4px 8px);
  border: 1px solid var(--gold-dark);
  margin-left: -18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
.shoe-card:first-child { margin-left: 2px; }

/* --- Croupier --- */
.casino-dealer {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}
.casino-dealer-label {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 5px;
  margin-bottom: .5rem;
}
.casino-cooldown {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-top: .6rem;
  min-height: 1.5rem;
}

/* --- Cartes à jouer --- */
.bj-cards {
  display: flex;
  gap: .4rem;
  justify-content: center;
  min-height: 80px;
  flex-wrap: wrap;
}

/* Carte face */
.bj-card {
  width: 52px;
  height: 72px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #fafaf5 0%, #f0eee5 100%);
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px;
  font-family: var(--font-condensed);
  font-weight: 600;
  box-shadow: 2px 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 1px solid #c8c4b8;
  position: relative;
}
.bj-card.red { color: #b01e1e; }
.bj-card .bj-card-rank { font-size: 1.1rem; line-height: 1; }
.bj-card .bj-card-suit { font-size: 1rem; line-height: 1; }
.bj-card .bj-card-corner-tl {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: .65rem;
  text-align: center;
}
.bj-card .bj-card-corner-br {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: .65rem;
  text-align: center;
  transform: rotate(180deg);
}

/* Dos de carte avec motif illustré (losanges bordeaux + liseré or) */
.bj-card.back {
  background:
    repeating-linear-gradient(45deg,
      var(--bordeaux) 0 6px,
      var(--bordeaux-light) 6px 12px);
  border: 2px solid var(--gold-dark);
  box-shadow: 2px 2px 6px rgba(0,0,0,.6), inset 0 0 0 2px rgba(201,164,76,0.15);
}
.bj-card.back::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid rgba(201,164,76,0.3);
  border-radius: 3px;
}

.bj-score {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-top: .3rem;
  min-height: 1.2rem;
  letter-spacing: 1px;
}

/* --- Sièges en arc de cercle (avec désalignement organique) --- */
.casino-seats {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  margin-top: 2rem;
  position: relative;
  z-index: 15;
}
.casino-seat {
  text-align: center;
  width: 140px;
  transition: all .3s;
  pointer-events: auto;
  z-index: 20;
  position: relative;
  /* Léger désalignement organique par siège */
}
/* Decalage vertical asymétrique pour casser la symetrie */
.casino-seat:nth-child(1) { transform: translateY(8px) rotate(-1deg); }
.casino-seat:nth-child(2) { transform: translateY(-4px) rotate(0.5deg); }
.casino-seat:nth-child(3) { transform: translateY(6px) rotate(-0.5deg); }
.casino-seat:nth-child(4) { transform: translateY(-2px) rotate(1deg); }
.casino-seat:nth-child(5) { transform: translateY(10px) rotate(-1.5deg); }

.seat-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--charcoal-light);
  border: 2px solid transparent;
  border-radius: 50% 50% 20% 20%;
  padding: .4rem;
  margin-bottom: .3rem;
  transition: border-color .3s, box-shadow .3s;
}
.casino-seat.occupied .seat-circle { border-color: #3a3a3a; }
/* Mon siège : liseré or fin + relief subtil (pas de glow néon) */
.casino-seat.my-seat .seat-circle { border-color: var(--gold); box-shadow: var(--gold-relief); }
/* Tour actif : liseré or + relief plus marqué */
.casino-seat.turn .seat-circle {
  border-color: var(--gold);
  box-shadow: var(--gold-relief), 0 0 0 2px rgba(201,164,76,0.15);
  animation: seatPulse 2s infinite;
}
@keyframes seatPulse {
  0%, 100% { box-shadow: var(--gold-relief), 0 0 0 2px rgba(201,164,76,0.1); }
  50% { box-shadow: var(--gold-relief), 0 0 0 3px rgba(201,164,76,0.25); }
}
.casino-seat.won .seat-circle { border-color: var(--win); box-shadow: inset 0 1px 0 rgba(74,158,95,0.2); }
.casino-seat.lost .seat-circle { border-color: var(--loss); box-shadow: inset 0 1px 0 rgba(192,57,43,0.2); }

.seat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bordeaux), var(--gold-dark));
  margin-bottom: .3rem;
  border: 1px solid #333;
}
.casino-seat.occupied .seat-avatar {
  background: linear-gradient(135deg, var(--bordeaux), var(--gold-dark));
}
.seat-info {
  display: flex;
  flex-direction: column;
  font-size: .8rem;
  gap: .15rem;
}
.seat-name { color: var(--text-primary); font-family: var(--font-condensed); font-weight: 600; font-size: .85rem; }
.seat-bet { color: var(--gold); font-family: var(--font-display); font-size: .9rem; letter-spacing: 1px; }
.seat-result { font-family: var(--font-display); min-height: 1.1rem; font-size: .9rem; letter-spacing: 1px; }
.result-won { color: var(--win); }
.result-lost { color: var(--loss); }
.result-push { color: var(--push); }

/* Bouton "Open Seat" — style badge pilule (exception pour badges de statut) */
.open-seat-btn {
  padding: .25rem .6rem;
  background: rgba(201,164,76,0.08);
  border: 1px solid var(--gold-dark);
  border-radius: 20px;
  color: var(--gold);
  font-family: var(--font-condensed);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s;
  pointer-events: auto;
  position: relative;
  z-index: 30;
}
.open-seat-btn:hover {
  background: rgba(201,164,76,0.2);
  border-color: var(--gold);
}

.seat-cards { margin: .3rem 0; }
.seat-score { min-height: 1rem; }

/* --- Zones de mise sur le tapis (cercles dessinés) --- */
.bet-zones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  margin: .5rem 0 .3rem;
  min-height: 30px;
}
.bet-zone-circle {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(201,164,76,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(0,0,0,0.1);
}
.bet-zone-circle.bet-main { border-color: rgba(201,164,76,0.4); }
.bet-zone-circle.bet-pp { border-color: rgba(122,31,43,0.4); width: 36px; height: 36px; }
.bet-zone-circle.bet-tp { border-color: rgba(74,158,95,0.4); width: 36px; height: 36px; }
.bet-zone-label {
  position: absolute;
  bottom: -13px;
  font-size: .55rem;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(201,164,76,0.4);
  white-space: nowrap;
  pointer-events: none;
}
/* Conteneur de jetons dans la zone */
.zone-chips {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}
/* Jetons dans les cercles : plus petits et empilés verticalement */
.zone-chips .chip {
  width: 22px;
  height: 22px;
  font-size: .5rem;
  border-width: 2px;
  margin-top: -16px;
  position: relative;
  z-index: 1;
}
.zone-chips .chip:first-child {
  margin-top: 0;
}
.bet-zone-circle.bet-pp .zone-chips .chip,
.bet-zone-circle.bet-tp .zone-chips .chip {
  width: 18px;
  height: 18px;
  font-size: .45rem;
  margin-top: -14px;
}
.bet-zone-circle.bet-pp .zone-chips .chip:first-child,
.bet-zone-circle.bet-tp .zone-chips .chip:first-child {
  margin-top: 0;
}
/* Cache le label quand il y a des jetons */
.bet-zone-circle.has-chips .bet-zone-label {
  opacity: 0;
}

/* --- Statut (texte centre) --- */
.casino-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(201,164,76,0.25);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-align: center;
  pointer-events: none;
  z-index: 0;
}

.casino-shoe { pointer-events: none; }
.casino-table-text, .casino-table-text-sub { pointer-events: none; }

/* --- Panneau d'actions (dans le sidebar a gauche) --- */
.casino-actions { display: none; }
.bj-bet-area, .bj-play-area {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .5rem;
}
.bj-bet-area input { width: 100%; max-width: none; }
.bet-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bet-row label {
  min-width: 0;
  text-align: left;
  color: var(--gold);
  font-family: var(--font-condensed);
  font-size: .75rem;
}
.bet-row input { width: 100%; }

/* --- Side bets --- */
.sidebets-area {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.sidebet-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.sidebet-group label {
  font-size: 0.8rem;
  color: var(--gold);
  font-family: var(--font-condensed);
  letter-spacing: 1px;
}
.sidebet-group input {
  width: 100px;
  padding: 0.4rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  text-align: center;
}
.sidebet-group input:disabled { opacity: 0.3; cursor: not-allowed; }
.sidebet-group input:not(:disabled):focus { outline: none; border-color: var(--gold); }
.sidebet-win { border-color: var(--win) !important; }

/* --- Jetons de casino (ronds, bord cranté, valeur au centre, empilés) --- */
.chip-stack {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: flex-end;
  margin: 0.3rem 0;
  min-height: 32px;
  flex-wrap: wrap;
}
.chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Bord cranté via border-style dashed + box-shadow pour effet 3D */
  border: 3px dashed rgba(255,255,255,0.25);
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: chipDrop 0.4s ease-out;
  position: relative;
  margin-left: -6px;
}
.chip:first-child { margin-left: 0; }
/* Anneau interieur pour effet jeton réel */
.chip::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Couleurs des jetons (basées sur les vrais casinos) */
.chip-001 { background: #2d6a4f; }    /* 0.01 — vert foncé */
.chip-01  { background: #1b4332; }     /* 0.1 — vert plus foncé */
.chip-05  { background: #6f1d1b; }     /* 0.5 — bordeaux */
.chip-1   { background: #1a3a5c; }     /* 1 — bleu marine */
.chip-5   { background: #7a1f2b; }     /* 5 — bordeaux clair */
.chip-10  { background: #2a2a2a; }     /* 10 — noir */
/* Side bets : couleur différente pour les distinguer */
.chip-pp  { background: #4a2a5c; }     /* Perfect Pairs — violet sombre */
.chip-tp  { background: #5c3a1a; }     /* 21+3 — brun/orange sombre */

@keyframes chipDrop {
  from { opacity: 0; transform: translateY(-25px) scale(0.5) rotate(-15deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* --- Side bet result display --- */
.sidebet-result {
  font-size: 0.75rem;
  font-weight: bold;
  min-height: 1rem;
  margin-top: 0.2rem;
  font-family: var(--font-condensed);
}
.sidebet-result-win { color: var(--win); }
.sidebet-result-loss { color: var(--loss); }

/* --- Animations --- */
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(-30px) rotate(-12deg) scale(.8); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.card-deal { animation: cardDeal .45s ease-out; }

/* Animation de retournement de carte (dealer reveal) */
@keyframes cardFlip {
  0% { transform: rotateY(180deg) scale(.9); opacity: 0.5; }
  50% { transform: rotateY(90deg) scale(.95); opacity: 0.8; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.card-flip { animation: cardFlip .6s ease-out; }

/* --- Messages résultat --- */
.bj-result-msg {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  padding: 1rem;
  border-radius: var(--radius-panel);
  margin: 1rem auto;
  max-width: 500px;
}
.result-win { background: rgba(74,158,95,.12); border: 1px solid var(--win); color: var(--win); }
.result-loss { background: rgba(192,57,43,.12); border: 1px solid var(--loss); color: var(--loss); }
.result-push { background: rgba(179,160,80,.12); border: 1px solid var(--push); color: var(--push); }

/* === TIMERS CIRCULAIRES (cooldowns visuels) === */

/* Timer phase de mise (barre circulaire autour du bouton) */
.bet-timer-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
}
.bet-timer-ring svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.bet-timer-ring .timer-bg {
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 4;
}
.bet-timer-ring .timer-progress {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.bet-timer-ring.urgent .timer-progress { stroke: var(--loss); }
.bet-timer-ring .timer-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 1px;
  z-index: 1;
}
.bet-timer-ring.urgent .timer-text { color: var(--loss); }

/* Timer action individuel (autour du siège) */
.action-timer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 5;
}
.action-timer svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.action-timer .timer-bg {
  fill: none;
  stroke: rgba(201,164,76,0.1);
  stroke-width: 3;
}
.action-timer .timer-progress {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.action-timer.urgent .timer-progress { stroke: var(--loss); }

/* Timer text sous le siège */
.action-timer-text {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 1px;
  text-align: center;
  margin-top: .2rem;
  min-height: 1.2rem;
}
.action-timer-text.urgent { color: var(--loss); }

/* Encart résultat side bet (temporaire à côté du siège) */
.sidebet-popup {
  position: absolute;
  top: -30px;
  right: -100px;
  background: var(--charcoal-dark);
  border: 1px solid var(--gold);
  border-radius: var(--radius-btn);
  padding: .3rem .6rem;
  font-size: .75rem;
  font-family: var(--font-condensed);
  white-space: nowrap;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  animation: popupFade 4s ease-out forwards;
}
.sidebet-popup.win { border-color: var(--win); color: var(--win); }
.sidebet-popup.loss { border-color: var(--loss); color: var(--loss); }
@keyframes popupFade {
  0% { opacity: 0; transform: translateY(10px); }
  10%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* === RULEBOOK MODAL === */
.rules-section {
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2a2a2a;
}
.rules-section:last-of-type {
  border-bottom: none;
}
.rules-section h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: .5rem;
}
.rules-desc {
  font-size: .85rem;
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.rules-table {
  width: 100%;
  font-size: .85rem;
}
.rules-table th {
  color: var(--text-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rules-table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid #1a1a1a;
}
.rules-table td:first-child {
  color: var(--text-primary);
  font-family: var(--font-condensed);
}
.rules-table td:nth-child(2) {
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: 1px;
}
.rules-table td:nth-child(3) {
  color: var(--text-secondary);
  font-size: .8rem;
}
.rules-list {
  list-style: none;
  padding: 0;
}
.rules-list li {
  padding: .3rem 0;
  font-size: .85rem;
  color: var(--text-secondary);
  padding-left: 1rem;
  position: relative;
}
.rules-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gold);
}
.rules-list li strong {
  color: var(--text-primary);
  font-family: var(--font-condensed);
}

/* === CONTROLE AUDIO === */
.audio-controls {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
}
.audio-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--charcoal-light);
  border: 1px solid var(--gold-dark);
  color: var(--gold);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.audio-btn:hover { border-color: var(--gold); box-shadow: var(--gold-relief); }
.audio-btn.muted { opacity: .5; }

/* === KENO === */
.keno-page { padding: 0; }

/* === ROULETTE === */
.roulette-page { padding: 0; font-size: 1.05rem; }
.roulette-layout {
  display: flex;
  gap: 1.2rem;
  padding: 1rem;
  align-items: flex-start;
  min-height: calc(100vh - 120px);
}
.roulette-sidebar {
  width: 280px;
  min-width: 260px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel);
  padding: 1.2rem;
  font-size: 1rem;
}
.roulette-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: .2rem;
}
.roulette-subtitle {
  font-size: .9rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 1rem;
  font-family: var(--font-condensed);
}

/* Timer */
.roulette-timer-section { text-align: center; margin-bottom: 1rem; }
.roulette-status { font-family: var(--font-condensed); font-size: .95rem; color: var(--text-secondary); text-transform: uppercase; margin-top: .5rem; }

/* Bet type */
.roulette-bet-type-section { margin-bottom: 1rem; }
.roulette-select {
  width: 100%;
  padding: .6rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
}
.roulette-input {
  width: 100%;
  padding: .5rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
}
.roulette-input:focus, .roulette-select:focus { outline: none; border-color: var(--gold); }

/* Bet controls */
.roulette-bet-section { margin-bottom: 1rem; }
.roulette-bet-controls { display: flex; gap: .3rem; align-items: center; }
.roulette-bet-btn {
  padding: .5rem .7rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-family: var(--font-condensed);
  font-size: .9rem;
  cursor: pointer;
}
.roulette-bet-btn:hover { border-color: var(--gold); }
.roulette-bet-controls input { flex: 1; text-align: center; }
.roulette-quick-bets { display: flex; gap: .3rem; margin-top: .4rem; }
.roulette-quick-btn {
  flex: 1;
  padding: .4rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-condensed);
  font-size: .85rem;
  cursor: pointer;
}
.roulette-quick-btn:hover { border-color: var(--gold-dark); color: var(--gold); }

/* Total mise */
.roulette-total-bet {
  font-family: var(--font-condensed);
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: .5rem;
  padding: .4rem .6rem;
  background: var(--charcoal-dark);
  border-radius: 4px;
}
.roulette-total-bet span:last-child { color: var(--gold); font-family: var(--font-display); font-size: 1rem; }

/* My bets */
.roulette-my-bets { margin-top: 1rem; margin-bottom: 1rem; }
.roulette-my-bets-list { max-height: 150px; overflow-y: auto; }
.roulette-my-bet-item {
  font-size: .85rem;
  padding: .35rem .5rem;
  background: var(--charcoal-dark);
  border-radius: 4px;
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.roulette-bet-win { color: var(--win); font-weight: 600; }
.roulette-bet-lose { color: var(--loss); }
.roulette-bet-pending { color: var(--gold); }
.roulette-no-bets { font-size: .85rem; color: var(--text-muted); }

/* Balance */
.roulette-balance {
  display: flex; flex-direction: column; align-items: center;
  padding: .7rem; background: var(--charcoal-dark);
  border-radius: var(--radius-btn); border: 1px solid #2a2a2a;
}
.roulette-balance .balance-label { font-size: .75rem; color: var(--text-muted); font-family: var(--font-condensed); text-transform: uppercase; }
.roulette-balance .balance-amount { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); }

/* Main area */
.roulette-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Historique */
.roulette-history {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 36px;
}
.roulette-hist-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem; color: #fff;
  border: 1px solid #333;
}
.roulette-hist-num.red { background: var(--loss); }
.roulette-hist-num.black { background: #1a1a1a; }
.roulette-hist-num.green { background: var(--win); }

/* Roue avec chiffres */
.roulette-wheel-container {
  position: relative;
  width: 300px; height: 300px;
  margin: .5rem 0;
}
.roulette-wheel-outer {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 8px solid var(--gold-dark);
  box-shadow: 0 6px 30px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.5);
  overflow: hidden;
  position: relative;
}
.roulette-wheel {
  width: 100%; height: 100%;
  border-radius: 50%;
  position: relative;
  transform-origin: center center;
  /* Le background conic-gradient est defini en JS */
}
/* Numeros sur la roue (positionnes par trigonometrie en JS) */
.roulette-seg-num {
  position: absolute;
  font-family: var(--font-display);
  font-size: .85rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.roulette-wheel-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, var(--gold-dark) 100%);
  border: 3px solid #2a1a08;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  z-index: 5;
}
.roulette-pointer {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid var(--gold);
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

/* Resultat */
.roulette-result { text-align: center; }
.roulette-result-number {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 2rem; color: #fff;
  border: 3px solid var(--gold);
  margin-bottom: .5rem;
}
.roulette-result-number.red { background: var(--loss); }
.roulette-result-number.black { background: #1a1a1a; }
.roulette-result-number.green { background: var(--win); }
.roulette-result-text {
  font-family: var(--font-display);
  font-size: 1.4rem; letter-spacing: 1px;
}
.roulette-result-text.win { color: var(--win); }
.roulette-result-text.lose { color: var(--loss); }
.roulette-result-text.push { color: var(--push); }

/* Table de roulette */
.roulette-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 720px;
  width: 100%;
}
.roulette-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  border: 1px solid #333;
  padding: .5rem;
  min-height: 44px;
  position: relative;
}
.roulette-cell:hover { border-color: var(--gold); box-shadow: var(--gold-relief); transform: scale(1.05); }
.roulette-cell.red { background: var(--loss); color: #fff; }
.roulette-cell.black { background: #1a1a1a; color: #fff; }
.roulette-cell.green { background: var(--win); color: #fff; }
.roulette-cell.roulette-outside { background: var(--charcoal-light); color: var(--text-primary); font-size: 1rem; }

/* Zero prend toute la largeur */
.roulette-table > .roulette-cell.green { width: 100%; min-height: 48px; font-size: 1.3rem; }

/* Grille principale 12 colonnes x 3 lignes */
.roulette-grid-main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.roulette-col {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}
.roulette-col .roulette-cell {
  min-height: 44px;
  font-size: 1rem;
}

/* Douzaines */
.roulette-dozens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.roulette-dozens .roulette-cell { min-height: 40px; }

/* Outside row */
.roulette-outside-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.roulette-outside-row .roulette-cell { min-height: 40px; }

/* Jeton pose sur une case du plateau */
.roulette-chip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bordeaux);
  border: 2px dashed rgba(255,255,255,0.3);
  color: #fff;
  font-family: var(--font-condensed);
  font-size: .7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  z-index: 5;
  pointer-events: none;
}
.chip-drop {
  animation: chipDropRoulette 0.4s ease-out;
}
@keyframes chipDropRoulette {
  from { opacity: 0; transform: translate(-50%, -150%) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Tous les paris */
.roulette-all-bets { width: 100%; max-width: 720px; margin-top: .5rem; }
.roulette-all-bets label { font-family: var(--font-condensed); font-size: .9rem; color: var(--text-muted); text-transform: uppercase; }
.roulette-all-bets-list {
  max-height: 120px;
  overflow-y: auto;
  margin-top: .3rem;
}
.roulette-all-bet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem .6rem;
  background: var(--charcoal-dark);
  border-radius: 4px;
  margin-bottom: .2rem;
  font-size: .9rem;
}
.roulette-all-bet-item.me { border-left: 3px solid var(--gold); }
.roulette-bet-user { color: var(--text-secondary); font-family: var(--font-condensed); }
.roulette-bet-desc { color: var(--gold); font-family: var(--font-condensed); }
.roulette-bet-amt { color: var(--text-primary); font-family: var(--font-display); }
.keno-layout {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: flex-start;
  min-height: calc(100vh - 120px);
}
.keno-sidebar {
  width: 240px;
  min-width: 220px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel);
  padding: 1rem;
}
.keno-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: .2rem;
}
.keno-subtitle {
  font-size: .8rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 1.2rem;
  font-family: var(--font-condensed);
}

/* Risk buttons */
.keno-risk-section { margin-bottom: 1rem; }
.keno-risk-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
}
.keno-risk-btn {
  padding: .4rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--text-muted);
  font-family: var(--font-condensed);
  font-size: .8rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
}
.keno-risk-btn:hover { border-color: var(--gold-dark); color: var(--text-primary); }
.keno-risk-btn.active { background: var(--bordeaux); border-color: var(--gold); color: #fff; }

/* Bet controls */
.keno-bet-section { margin-bottom: 1rem; }
.keno-bet-controls {
  display: flex;
  gap: .3rem;
  align-items: center;
}
.keno-bet-btn {
  padding: .4rem .6rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-family: var(--font-condensed);
  font-size: .8rem;
  cursor: pointer;
}
.keno-bet-btn:hover { border-color: var(--gold); }
.keno-bet-controls input {
  flex: 1;
  text-align: center;
  padding: .4rem;
}
.keno-quick-bets {
  display: flex;
  gap: .3rem;
  margin-top: .4rem;
}
.keno-quick-btn {
  flex: 1;
  padding: .3rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-condensed);
  font-size: .75rem;
  cursor: pointer;
}
.keno-quick-btn:hover { border-color: var(--gold-dark); color: var(--gold); }

/* Picks info */
.keno-picks-info {
  margin-bottom: 1rem;
  padding: .6rem;
  background: var(--charcoal-dark);
  border-radius: var(--radius-btn);
  border: 1px solid #2a2a2a;
}
.keno-picks-count {
  font-family: var(--font-condensed);
  font-size: .85rem;
  color: var(--text-secondary);
  margin-bottom: .3rem;
}
.keno-picks-count span:nth-child(2) { color: var(--gold); font-weight: 600; }
.keno-payout-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.keno-payout-label { font-size: .72rem; color: var(--text-muted); font-family: var(--font-condensed); text-transform: uppercase; }
.keno-payout-value { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); letter-spacing: 1px; }

/* Actions */
.keno-actions { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.keno-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem;
  background: var(--charcoal-dark);
  border-radius: var(--radius-btn);
  border: 1px solid #2a2a2a;
}
.keno-balance .balance-label { font-size: .7rem; color: var(--text-muted); font-family: var(--font-condensed); text-transform: uppercase; }
.keno-balance .balance-amount { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); }

/* Main area */
.keno-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Payout table */
.keno-payout-table {
  width: 100%;
  max-width: 600px;
  min-height: 50px;
}
.keno-payout-header {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: .3rem;
}
.keno-payout-empty {
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
  display: block;
  padding: 1rem;
}
.keno-payout-row {
  display: flex;
  gap: .3rem;
  justify-content: center;
  flex-wrap: wrap;
}
.keno-payout-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .3rem .5rem;
  background: var(--charcoal-dark);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  min-width: 42px;
  transition: all .3s;
}
.keno-payout-cell.max { border-color: var(--gold-dark); }
.keno-payout-cell.active-hit {
  background: var(--bordeaux);
  border-color: var(--gold);
  box-shadow: var(--gold-relief);
}
.keno-payout-hits { font-size: .7rem; color: var(--text-muted); font-family: var(--font-condensed); }
.keno-payout-mult { font-family: var(--font-display); font-size: .9rem; color: var(--gold); }
.keno-payout-cell.active-hit .keno-payout-hits { color: #fff; }
.keno-payout-cell.active-hit .keno-payout-mult { color: #fff; }

/* Grille 40 numeros */
.keno-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .4rem;
  max-width: 600px;
  width: 100%;
}
.keno-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal-light);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  position: relative;
}
.keno-cell:hover {
  border-color: var(--gold-dark);
  color: var(--gold);
}
/* Numero selectionne par le joueur */
.keno-cell.selected {
  background: var(--bordeaux);
  border-color: var(--gold);
  color: #fff;
  box-shadow: var(--gold-relief);
  transform: scale(0.95);
}
/* Numero tire par le croupier (pas selectionne) */
.keno-cell.drawn {
  border-color: var(--gold-dark);
  animation: kenoDraw 0.4s ease-out;
}
/* Numero tire ET selectionne = hit */
.keno-cell.hit {
  background: var(--win);
  border-color: var(--gold);
  color: #fff;
  animation: kenoHit 0.5s ease-out;
  transform: scale(1.1);
}
/* Numero selectionne mais pas tire = miss */
.keno-cell.miss {
  background: rgba(192,57,43,0.2);
  border-color: var(--loss);
  color: var(--loss);
  opacity: 0.5;
}
@keyframes kenoDraw {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes kenoHit {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); box-shadow: 0 0 20px var(--gold); }
  100% { transform: scale(1.1); }
}

/* Resultat */
.keno-result {
  text-align: center;
  padding: 1rem;
}
.keno-result-hits {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  margin-bottom: .3rem;
}
.keno-result-hits.win { color: var(--win); }
.keno-result-hits.lose { color: var(--loss); }
.keno-result-hits.push { color: var(--push); }
.keno-result-payout {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
}
.keno-result-payout.win { color: var(--win); }
.keno-result-payout.lose { color: var(--loss); }

/* Tirage affiche */
.keno-draw-display {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.keno-draw-label {
  font-family: var(--font-condensed);
  font-size: .85rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
.keno-draw-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--charcoal-light);
  border: 1px solid #2a2a2a;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
  animation: kenoDraw 0.4s ease-out;
}
.keno-draw-num.hit {
  background: var(--win);
  border-color: var(--gold);
  color: #fff;
}

/* === SLOTS & LIVE PLACEHOLDER === */
.slot-card {
  width: 160px;
  height: 200px;
  background: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.slot-card .slot-coming {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: rgba(201,164,76,0.3);
  letter-spacing: 3px;
  border: 2px solid rgba(201,164,76,0.2);
  padding: .2rem 1rem;
  border-radius: 4px;
  pointer-events: none;
}
.slot-card .slot-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin-top: auto;
  margin-bottom: .2rem;
}
.slot-card .slot-provider {
  font-family: var(--font-condensed);
  font-size: .75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

/* === CRAZY WHEEL === */
.cw-page { padding: 0; font-size: 1.05rem; }
.cw-layout {
  display: flex; gap: 1.2rem; padding: 1rem;
  align-items: flex-start; min-height: calc(100vh - 120px);
}
.cw-sidebar {
  width: 280px; min-width: 260px; flex-shrink: 0;
  background: var(--panel-bg); border: 1px solid #2a2a2a;
  border-radius: var(--radius-panel); padding: 1.2rem; font-size: 1rem;
}
.cw-title {
  font-family: var(--font-display); font-size: 1.8rem; color: var(--gold);
  letter-spacing: 3px; text-align: center; margin-bottom: .2rem;
}
.cw-subtitle {
  font-size: .85rem; color: var(--text-secondary); text-align: center;
  margin-bottom: 1rem; font-family: var(--font-condensed);
}
.cw-timer-section { text-align: center; margin-bottom: .8rem; }
.cw-status { font-family: var(--font-condensed); font-size: .9rem; color: var(--text-secondary); text-transform: uppercase; margin-top: .4rem; }

/* Top slot */
.cw-topslot {
  background: var(--charcoal-dark); border: 1px solid var(--gold-dark);
  border-radius: var(--radius-btn); padding: .6rem; text-align: center; margin-bottom: .8rem;
}
.cw-topslot-label { font-family: var(--font-condensed); font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.cw-topslot-mult { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); }
.cw-topslot-seg { font-size: .8rem; color: var(--text-secondary); }

/* Segments grid */
.cw-bet-section { margin-bottom: .8rem; }
.cw-segments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.cw-seg-btn {
  padding: .4rem; background: var(--charcoal-dark); border: 2px solid #333;
  border-radius: var(--radius-btn); cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.cw-seg-btn:hover { box-shadow: var(--gold-relief); }
.cw-seg-btn.selected { border-color: var(--gold) !important; box-shadow: var(--gold-relief); }
.cw-seg-btn.bonus { border-width: 2px; }
.cw-seg-btn-label { font-family: var(--font-display); font-size: 1rem; color: var(--text-primary); }
.cw-seg-btn-mult { font-size: .7rem; color: var(--gold); font-family: var(--font-condensed); }
.cw-seg-btn-type { font-size: .6rem; color: var(--text-muted); font-family: var(--font-condensed); text-transform: uppercase; }

/* Bet amount */
.cw-bet-amount-section { margin-bottom: .8rem; }
.cw-bet-controls { display: flex; gap: .3rem; align-items: center; }
.cw-bet-btn {
  padding: .5rem .7rem; background: var(--charcoal-dark); border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn); color: var(--gold); font-family: var(--font-condensed); font-size: .9rem; cursor: pointer;
}
.cw-bet-btn:hover { border-color: var(--gold); }
.cw-input {
  flex: 1; padding: .5rem; background: var(--charcoal-dark); border: 1px solid #2a2a2a;
  border-radius: var(--radius-btn); color: var(--text-primary); font-family: var(--font-body); font-size: .9rem; text-align: center;
}
.cw-quick-bets { display: flex; gap: .3rem; margin-top: .3rem; }
.cw-quick-btn {
  flex: 1; padding: .3rem; background: var(--charcoal-dark); border: 1px solid #2a2a2a;
  border-radius: 4px; color: var(--text-secondary); font-family: var(--font-condensed); font-size: .8rem; cursor: pointer;
}
.cw-quick-btn:hover { border-color: var(--gold-dark); color: var(--gold); }

/* Total */
.cw-total-bet { font-family: var(--font-condensed); font-size: .85rem; color: var(--text-secondary); margin-bottom: .4rem; padding: .3rem .5rem; background: var(--charcoal-dark); border-radius: 4px; }
.cw-total-bet span:last-child { color: var(--gold); font-family: var(--font-display); }

/* My bets */
.cw-my-bets { margin-top: .8rem; margin-bottom: .8rem; }
.cw-my-bets-list { max-height: 120px; overflow-y: auto; }
.cw-my-bet-item { font-size: .8rem; padding: .3rem .4rem; background: var(--charcoal-dark); border-radius: 4px; margin-bottom: .2rem; }
.cw-no-bets { font-size: .8rem; color: var(--text-muted); }

/* Balance */
.cw-balance { display: flex; flex-direction: column; align-items: center; padding: .6rem; background: var(--charcoal-dark); border-radius: var(--radius-btn); border: 1px solid #2a2a2a; }
.cw-balance .balance-label { font-size: .7rem; color: var(--text-muted); font-family: var(--font-condensed); text-transform: uppercase; }
.cw-balance .balance-amount { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); }

/* Main */
.cw-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Historique */
.cw-history { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; min-height: 30px; }
.cw-hist-item { padding: .2rem .5rem; border-radius: 4px; font-family: var(--font-display); font-size: .8rem; color: #fff; }

/* Roue */
.cw-wheel-container { position: relative; width: 340px; height: 340px; margin: .5rem 0; }
.cw-wheel-outer {
  width: 100%; height: 100%; border-radius: 50%; border: 8px solid var(--gold-dark);
  box-shadow: 0 6px 30px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.5);
  overflow: hidden; position: relative;
}
.cw-wheel { width: 100%; height: 100%; border-radius: 50%; position: relative; transform-origin: center center; }
.cw-seg-label {
  position: absolute; font-family: var(--font-display); font-size: .75rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9); z-index: 2; pointer-events: none;
  white-space: nowrap; transform: translate(-50%, -50%); line-height: 1;
}
.cw-wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, var(--gold-dark) 100%);
  border: 3px solid #2a1a08; box-shadow: 0 2px 10px rgba(0,0,0,.5); z-index: 5;
}
.cw-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 20px solid var(--gold); z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

/* Resultat */
.cw-result { text-align: center; }
.cw-result-label { font-family: var(--font-display); font-size: 2rem; letter-spacing: 2px; margin-bottom: .3rem; }
.cw-result-mult { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); }

/* Bonus generique */
.cw-bonus-title { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); letter-spacing: 3px; text-align: center; margin-bottom: 1rem; }

/* Coin Flip */
.cw-bonus-coinflip { text-align: center; }
.cw-coinflip-coins { display: flex; gap: 2rem; justify-content: center; margin: 1.5rem 0; }
.cw-coin {
  width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; color: #fff; border: 4px solid var(--gold-dark);
  animation: coinFlip 0.6s ease-in-out infinite alternate;
}
.cw-coin-red { background: var(--loss); }
.cw-coin-blue { background: #2980b9; }
@keyframes coinFlip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.cw-coinflip-result { font-family: var(--font-display); font-size: 1.5rem; margin-top: 1rem; }
.cw-coinflip-result.red { color: var(--loss); }
.cw-coinflip-result.blue { color: #2980b9; }

/* Cash Hunt */
.cw-bonus-cashhunt { text-align: center; }
.cw-cashhunt-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  max-width: 600px; margin: 1rem auto;
}
.cw-ch-cell {
  aspect-ratio: 1; background: var(--charcoal-light); border: 1px solid #333;
  border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .7rem; color: var(--text-muted); cursor: default;
  transition: all .3s;
}
.cw-ch-cell.revealed { background: var(--bordeaux); color: #fff; border-color: var(--gold); transform: scale(1.1); }
.cw-cashhunt-result { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); margin-top: 1rem; }

/* Plinko */
.cw-bonus-plinko { text-align: center; }
.cw-plinko-board { margin: 1rem auto; max-width: 500px; }
.cw-plinko-mults { display: flex; gap: 2px; justify-content: center; }
.cw-plinko-mult {
  flex: 1; padding: .4rem; background: var(--charcoal-light); border: 1px solid #333;
  border-radius: 3px; font-family: var(--font-display); font-size: .8rem; color: var(--gold); text-align: center;
}
.cw-plinko-result { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); margin-top: 1rem; }

/* Mega Wheel */
.cw-bonus-megawheel { text-align: center; }
.cw-megawheel-container { position: relative; width: 200px; height: 200px; margin: 1rem auto; }
.cw-megawheel-wheel {
  width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--gold-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.cw-megawheel-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 14px solid var(--gold); z-index: 10;
}
.cw-mega-bounce { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); margin: .3rem 0; }
.cw-megawheel-result { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); margin-top: 1rem; }

/* All bets */
.cw-all-bets { width: 100%; max-width: 700px; margin-top: .5rem; }
.cw-all-bets label { font-family: var(--font-condensed); font-size: .85rem; color: var(--text-muted); text-transform: uppercase; }
.cw-all-bets-list { max-height: 120px; overflow-y: auto; margin-top: .3rem; }
.cw-all-bet-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .3rem .5rem; background: var(--charcoal-dark); border-radius: 4px; margin-bottom: .2rem; font-size: .85rem;
}
.cw-all-bet-item.me { border-left: 3px solid var(--gold); }
.cw-bet-user { color: var(--text-secondary); font-family: var(--font-condensed); }
.cw-bet-seg { color: var(--gold); font-family: var(--font-condensed); }
.cw-bet-amt { color: var(--text-primary); font-family: var(--font-display); }