:root{
  --bg:#071227;
  --card:#0e1426;
  --muted:#9fb6c3;
  --text:#e6eef6;
  --primary:#22d3ee;
  --success:#10b981;
  --danger:#ef4444;
  --gold:#f59e0b;
  --toggle-on: #3b82f6; 
}
*{box-sizing:border-box;-webkit-tap-highlight-color: transparent}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 50% -10%,#0b213f 0%, var(--bg) 60%),
             linear-gradient(180deg,#071226 0%, #071226 100%);
  color:var(--text);
  font-family:Inter,system-ui,Arial,sans-serif;
}

/* Layout */
.app{min-height:100vh;display:flex;flex-direction:column;padding:12px}
.app__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top: 40px; max-width:720px;width:100%;margin:6px auto}
.game{margin:10px auto 0;max-width:720px;width:100%;display:grid;gap:10px}

/* Header wallet */
.wallet{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.14);padding:8px 12px;border-radius:14px}
.wallet__icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#fff;color:#202a44;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.35);font-size:16px}
.wallet strong{font-size:18px;letter-spacing:.2px}

/* Brand */
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#1a2a52,#0e1f3f);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,0.55)}
.brand__text h1{font-size:17px;margin:0;font-weight:900}
.brand__text p{margin:0;color:var(--muted);font-size:12px}

/* Panels */
.panel{}
.panel--board{padding:12px; margin-bottom: 15px;}

/* Board */
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;perspective:1200px;min-height:280px}
.card{position:relative;height:56px;border-radius:12px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.card__face{position:absolute;inset:0;border-radius:12px;display:grid;place-items:center;backface-visibility:hidden}
.card__face--front{
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,0.45);
}
.card__face--back{transform:rotateY(180deg);border:1px solid rgba(255,255,255,0.14)}
.card.revealed{transform:rotateY(180deg)}

/* Start cascade */
.board.starting .card{animation:popCard .35s cubic-bezier(.2,.9,.2,1) both}
@keyframes popCard{0%{transform:translateY(6px) scale(.96)}100%{transform:translateY(0) scale(1)}}

/* Tiles */
.tile--mine .card__face--back{background:linear-gradient(135deg, rgba(239,68,68,0.28), rgba(255,255,255,0.06));}
.tile--safe .card__face--back{background:linear-gradient(135deg, rgba(34,211,238,0.22), rgba(16,185,129,0.18));}
.tile--diamond .card__face--back{background:linear-gradient(135deg, rgba(245,158,11,0.28), rgba(34,211,238,0.22));}

.symbol{font-weight:900;font-size:18px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.symbol--mine{color:var(--danger)}
.symbol--safe{color:var(--primary)}
.symbol--diamond{color:var(--gold)}
.star-pop{animation:starPop .45s ease both}
@keyframes starPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}

/* Controls (compact) */
.panel--controls{padding:10px}
.panel--controls .row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.bet{flex:1;min-width:220px}
.settings{display:flex;flex-direction:column;gap:8px;align-items:flex-end}

.bet__row{display:flex;gap:6px;overflow:auto;padding-bottom:2px}
.chip{flex:0 0 auto;border:none;border-radius:12px;padding:8px 12px;font-weight:800;background:rgba(255,255,255,0.10);color:var(--text);cursor:pointer;border:1px solid rgba(255,255,255,0.12);font-size:14px}
.chip.active{background:linear-gradient(90deg,rgba(34,211,238,0.28),rgba(16,185,129,0.22));border-color:rgba(34,211,238,0.5)}

.bet__adjust{display:flex;align-items:center;gap:8px;margin-top:6px}
.btn-icon{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.08);font-size:22px;color:var(--text);cursor:pointer}
.bet__display{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:6px 10px}
.bet__display span{color:var(--muted);font-size:12px}
.bet__inputwrap{position:relative;display:flex;align-items:center}
#betInput{width:86px;background:transparent;border:none;outline:none;color:var(--text);font-weight:900;font-size:18px;text-align:right}
#betInput::-webkit-outer-spin-button,#betInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bet__currency{margin-left:4px;opacity:.9}

/* Mines choice */
.muted{font-size:12px;color:var(--muted);margin-bottom:6px}
.mine-options{display:flex;gap:6px}
.mine-btn{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.15);cursor:pointer;font-weight:800}
.mine-btn.active{background:linear-gradient(90deg, rgba(34,211,238,0.28), rgba(16,185,129,0.22));border-color:rgba(34,211,238,0.5)}

/* Ambiance toggle simple */
.sound-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.sound-toggle input{width:16px;height:16px}

/* Actions */
.actions{display:flex;gap:8px;margin-top:8px}
.btn{flex:1;min-height:44px;border:none;border-radius:14px;padding:10px 12px;font-weight:900;cursor:pointer;position:relative;overflow:hidden}
.btn--primary{color:#061a1f;background:linear-gradient(90deg, #22d3ee, #10b981)}
.btn__glow{position:absolute;inset:-60% -10%;background:radial-gradient(140px 40px at var(--x,50%) 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;pointer-events:none;opacity:.6}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Cashout bouton boost */
.btn--cashout{color:#dff; background:linear-gradient(90deg,#1e293b,#0f172a); border:1px solid rgba(255,255,255,0.14)}
.btn--cashout:not([disabled]){background:linear-gradient(90deg,#0ea5e9,#22d3ee); color:#05222e; animation:cashPulse 1.2s ease-in-out infinite}
@keyframes cashPulse{0%,100%{filter:saturate(1)}50%{filter:saturate(1.4)}}
.cashout__ring{position:absolute;inset:-10px;border-radius:16px;border:2px dashed rgba(255,255,255,0.12);pointer-events:none}

/* Stats */
.stats{display:flex;gap:8px;margin-top:8px}
.stat{flex:1;background:rgba(255,255,255,0.08);border-radius:12px;padding:8px;border:1px solid rgba(255,255,255,0.12)}
.stat span{color:var(--muted);font-size:12px}
.stat strong{font-size:18px;display:inline-block;transform-origin:center center;transition:transform .35s cubic-bezier(.2,.9,.25,1)}

/* Toast / Overlays */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.14);padding:10px 14px;border-radius:12px;backdrop-filter:blur(3px);display:none;z-index:60}
.toast.show{display:block;animation:pop .36s ease}
@keyframes pop{0%{transform:translateX(-50%) scale(.96);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

.lose-banner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);z-index:80}
.lose-banner.show{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6%)}to{opacity:1;transform:translateY(0)}}
.lose-card{background:rgba(16,23,40,0.98);border:1px solid rgba(255,255,255,0.16);border-radius:18px;padding:18px 22px;display:flex;gap:14px;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,0.6);max-width:520px;width:92%}
.lose-icon{font-size:36px}
.lose-text h2{margin:0 0 6px;font-size:26px}
.lose-text p{margin:0 0 12px;color:var(--muted)}
.lose-actions{display:flex;gap:10px}

.splash.announce{position:fixed;left:50%;top:18%;transform:translateX(-50%);padding:12px 16px;border-radius:14px;background:rgba(16,23,40,0.96);border:1px solid rgba(255,255,255,0.16);box-shadow:0 16px 60px rgba(0,0,0,.5);display:none;z-index:85}
.splash.show,.announce.show{display:block;animation:pop .28s ease}
.announce{top:26%;font-weight:800}

/* Float gain */
.float-gain{position:fixed;right:18px;top:18px;pointer-events:none;z-index:90}
.float-gain .plus{display:block;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#10b981,#22d3ee);color:#022;box-shadow:0 8px 28px rgba(16,185,129,0.16);transform:translateY(0);animation:floatUp .9s ease forwards}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.95)}40%{opacity:1}100%{opacity:0;transform:translateY(-36px) scale(1.06)}}

/* Win / Cashout overlays */
.win-banner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.32);z-index:70}
.win-banner.show{display:flex}
.win-banner__card{background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.18);border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:center}
.win-banner__icon{font-size:26px}
.win-banner__text h3{margin:0;font-size:18px}

.cashout-banner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);z-index:85}
.cashout-banner.show{display:flex}
.cashout-card{position:relative;background:rgba(16,23,40,0.98);border:1px solid rgba(255,255,255,0.16);border-radius:18px; padding:22px 26px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cashout-icon{font-size:40px;margin-bottom:8px;animation:pop .4s ease}
.cashout-amount{font-size:28px;font-weight:900;margin-top:8px;animation:pulse 1.1s ease infinite}
.cashout-card h3{margin:0;color:var(--muted)}
.cashout-ring{position:absolute;inset:-14px; border-radius:22px; border:2px dashed rgba(34,211,238,0.45); animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Responsive */
@media(min-width:520px){ .card{height:64px} }
/* ====== CASES GLOSSY CASINO ====== */

/* base */
.card{
  position:relative;
  height:62px; /* légèrement plus compact */
  border-radius:18px;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .25s ease;
  cursor:pointer;

  /* cadre dégradé via background-clip */
  --stroke1:#f6ad55;        /* défaut (non révélée) : orange doux */
  --stroke2:#f59e0b;
  border:2px solid transparent;
  background:
    linear-gradient(180deg, rgba(17,24,39,0.92), rgba(7,12,26,0.92)) padding-box,
    linear-gradient(135deg, var(--stroke1), var(--stroke2)) border-box;

  /* relief & glow soft */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 8px 22px rgba(0,0,0,0.45);
}

/* reflet vitre en haut-gauche */
.card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  background:
    radial-gradient(110px 70px at 18% 14%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%),
    radial-gradient(60px 40px at 82% 88%, rgba(255,255,255,0.06), rgba(255,255,255,0) 70%);
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:.75;
}

/* faces (on laisse la bordure gérer le cadre) */
.card__face{backface-visibility:hidden; border-radius:16px; position:absolute; inset:0; display:grid; place-items:center}
.card__face--front{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow:inset 0 -8px 16px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
}
.card__face--back{
  transform:rotateY(180deg);
  /* fond “ardoise” avec halo coin sup gauche */
  background:
    radial-gradient(140px 90px at 18% 12%, rgba(41,80,140,0.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0b1328, #070e21);
  border:1px solid rgba(255,255,255,0.12);
}
.card.revealed{transform:rotateY(180deg)}

/* ——— ÉTATS COLORÉS ——— */
/* Case sûre (⭐) : cadre bleu/cyan + glow doux */
.tile--safe{
  --stroke1:#33d2ff;
  --stroke2:#3ef0c8;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 8px 26px rgba(51,210,255,0.28),
    0 0 34px rgba(62,240,200,0.16);
}

/* Diamant : bleu > doré, glow un peu plus fort */
.tile--diamond{
  --stroke1:#6dd5ff;
  --stroke2:#f6c453;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 10px 28px rgba(109,213,255,0.28),
    0 0 40px rgba(246,196,83,0.18);
}

/* Mine : orange -> rouge, glow “danger” */
.tile--mine{
  --stroke1:#ff7a18;
  --stroke2:#ef4444;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 8px 26px rgba(239,68,68,0.28),
    0 0 34px rgba(255,122,24,0.16);
}

/* Hover discret tant que non révélée */
.card:not(.revealed):hover{ filter:saturate(1.06) brightness(1.02) }

/* ——— ICONES ——— */
.symbol{
  font-weight:900;
  font-size:26px;            /* + grand pour un rendu “tuile” */
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.tile--safe .symbol{           /* ⭐ bleu luminescent */
  color:#c9f7ff;
  text-shadow:
    0 0 10px rgba(51,210,255,.65),
    0 0 22px rgba(62,240,200,.45),
    0 0 34px rgba(62,240,200,.25);
}
.tile--diamond .symbol{        /* 💎 doré/bleu brillant */
  color:#ffe3a6;
  text-shadow:
    0 0 12px rgba(246,196,83,.6),
    0 0 26px rgba(109,213,255,.4),
    0 0 40px rgba(246,196,83,.25);
}
.tile--mine .symbol{           /* 💣 rouge/orange menaçant */
  color:#ff8b8b;
  text-shadow:
    0 0 12px rgba(239,68,68,.65),
    0 0 26px rgba(255,122,24,.35);
}

/* Légère cascade au démarrage (si tu l’utilises déjà) */
.board.starting .card{
  animation:popCard .35s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes popCard{0%{transform:translateY(6px) scale(.96)}100%{transform:translateY(0) scale(1)}}

/* tailles un peu plus grandes sur écrans plus larges */
@media(min-width:520px){ .card{height:72px} }
@media(min-width:720px){ .card{height:86px} }
/* ===== Top progress bar & controls ===== */
.panel--topbar{padding:8px; margin-bottom: 10px; margin-top: 10px;}
.topbar{display:flex;flex-direction:column;gap:8px}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* Mines select pill */
.select-mine{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px}
.select-mine .label{font-size:13px;color:var(--muted)}
.select-mine select{appearance:none;background:transparent;border:none;color:var(--text);font-weight:900;font-size:13px;padding-right:16px;outline:none}
.select-mine .chev{position:absolute;right:10px;pointer-events:none;opacity:.8}

/* Next multiplier pill */
.next-pill{font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg,#f59e0b,#f6c453);color:#1b1504;border:1px solid rgba(0,0,0,0.08);box-shadow:0 8px 18px rgba(245,158,11,0.28)}

/* Progress bar */
.progress{position:relative;height:14px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16)}
.progress__track{position:absolute;inset:0;background:radial-gradient(200px 40px at 20% 50%, rgba(255,255,255,0.08), rgba(255,255,255,0) 70%)}
.progress__fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#10b981);box-shadow:0 6px 20px rgba(34,211,238,0.28);transition:width .45s cubic-bezier(.2,.9,.2,1)}
.progress__label{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#e7fbff;text-shadow:0 1px 2px rgba(0,0,0,.45);mix-blend-mode:normal;pointer-events:none}
/* Groupe à droite du header (solde + bouton menu) */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Bouton menu (icône pro) */
.menu-btn{
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:var(--text);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}

.menu-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border-color:rgba(255,255,255,0.22);
}

.menu-btn:active{
  transform:translateY(1px) scale(0.98);
}

.menu-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(34,211,238,0.35);
}

/* Ajuste légèrement le padding de .wallet pour respirer à côté du bouton */
.wallet{ padding-right:14px; }
/* ===========================
   Menu latéral + Overlay
   =========================== */
:root{
  --menu-width: 80vw;
  --menu-bg: rgba(20,22,28,0.96);
  --menu-border: rgba(255,255,255,0.08);
  --overlay-bg: rgba(0,0,0,0.55);
  --muted: rgba(255,255,255,0.6);
  --accent: #ffd54a; /* Jaune pour Dépôt */
}

.menu-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 80;
}

.side-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--menu-width);
  max-width: 480px;
  height: 100dvh;
  background: rgb(20 22 28 / 91%);
  backdrop-filter: blur(8px);
  border-right: 1px solid var(--menu-border);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  z-index: 90;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  padding: 18px 16px 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

/* État ouvert */
body.menu-open .side-menu{
  transform: translateX(0);
}
body.menu-open .menu-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* Bouton fermer (X) */
.menu-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--menu-border);
  background: rgba(255,255,255,0.07);
  color: var(--text, #fff);
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.menu-close:hover{ background: rgba(255,255,255,0.1); }
.menu-close:active{ transform: scale(.98); }

/* Header profil */
.menu-header{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 6px 16px 6px;
  border-bottom: 1px dashed var(--menu-border);
  margin-bottom: 14px;
}
.profile-photo{
  width: 64px; height: 64px; border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  border: 1px solid var(--menu-border);
}
.profile-meta{ min-width: 0; }
.profile-name{
  font-weight: 700; font-size: 1.05rem; color: var(--text, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-level{
  display: inline-flex; gap: 6px; align-items: center;
  font-size: .85rem; color: var(--muted);
  margin-top: 2px;
}
.level-progress{
  position: relative; width: 100%; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin-top: 8px; overflow: hidden;
  border: 1px solid var(--menu-border);
}
.level-progress__bar{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, #51e1ff, #22d3ee);
  border-right: 1px solid rgba(255,255,255,0.25);
  transition: width .4s ease;
}
.level-progress__label{
  font-size: .78rem; color: var(--muted);
  margin-top: 6px;
}

/* Cartes de solde */
.balances{
  display: grid; gap: 10px;
  padding: 14px 2px 8px;
}
.balance-card{
  border: 1px solid var(--menu-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28) inset, 0 4px 14px rgba(0,0,0,.18);
}
.balance-card.ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.balance-card__title{
  font-size: .82rem; color: var(--muted); margin-bottom: 6px;
}
.balance-card__value{
  font-weight: 800; font-size: 1.24rem; letter-spacing: .2px;
}

/* Actions dépôt / retrait */
.menu-actions{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 2px 6px;
}
.action-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 10px;
  border-radius: 14px; border: 1px solid var(--menu-border);
  background: rgba(255,255,255,0.07);
  color: var(--text, #fff); font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.action-btn:hover{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.16); }
.action-btn:active{ transform: translateY(1px) scale(.99); }

.action-btn--deposit{
  background: var(--accent);
  color: #1a1a1a;
  border-color: rgba(0,0,0,0.08);
}
.action-btn--deposit:hover{
  background: #ffdf73;
}

/* Nav secondaire */
.menu-nav{
  margin-top: 8px; padding: 8px 2px 0;
  display: grid; gap: 8px;
}
.nav-item{
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--menu-border);
  background: rgba(255,255,255,0.05);
  color: var(--text, #fff); font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.nav-item:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.nav-item:active{ transform: translateY(1px); }

/* Petits écrans : 80% de la largeur (déjà via --menu-width) */
@media (min-width: 768px){
  :root{ --menu-width: 420px; } /* sur tablette/desktop, fixe ~420px */
}
/* Nav secondaire : style cartes comme sur la capture */
.menu-nav{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  color: var(--text, #fff);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.2);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

.nav-item:hover{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.12);
}

.nav-item:active{
  transform: translateY(1px) scale(.99);
}
/* === Version compacte des cartes Paramètres / Mes bonus === */
.side-menu .menu-nav{
  gap: 8px;           /* moins d'espace entre les cartes */
  margin-top: 10px;
}

.side-menu .nav-item{
  padding: 10px 12px; /* ↓ padding */
  min-height: 48px;   /* fixe une hauteur raisonnable */
  border-radius: 14px;
  font-size: .88rem;  /* texte un peu plus petit */
  line-height: 1.2;   /* évite que le texte “gonfle” la carte */
  gap: 10px;          /* espace icône-texte réduit */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 3px 10px rgba(0,0,0,0.18);
}

/* Icônes un peu plus petites */
.side-menu .nav-item svg{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
/* Cartes nav alignées sur la hauteur des boutons Dépôt / Retrait */
.side-menu .nav-item{
  height: 48px;                /* même hauteur que les action-btn */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* texte à gauche */
  padding: 0 14px;             /* réduit padding vertical */
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 3px 10px rgba(0,0,0,0.18);
}
/* Espacement réduit pour les boutons nav */
.side-menu .menu-nav{
  margin-top: 8px; /* avant: 14px */
  gap: 6px;        /* avant: 12px */
}
.side-menu{
  display: flex;
  flex-direction: column;
}
.brand__logo-img {
  height: 50px;
  display: block;
}/* ——— Aération contrôles ——— */
.panel--controls { padding: 16px; }
.panel--controls .row { gap: 14px; }

.bet__row { gap: 10px; padding-bottom: 6px; }
.bet__adjust { gap: 12px; margin-top: 10px; }
.bet__display { padding: 8px 12px; }

.actions { gap: 12px; margin-top: 12px; }
.stats { gap: 12px; margin-top: 12px; }

/* Si la colonne .settings a été supprimée, étire .bet */
.panel--controls .bet { flex: 1 1 100%; }
/* ===== Controls plus aérés ===== */
.panel--controls { padding: 18px 18px 16px; border-radius: 14px; }
.panel--controls .controls { display: grid; gap: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 8px 12px; border-radius: 10px; }
.chip.active { outline: 2px solid rgba(255,255,255,.18); }

.bet-line { display: flex; align-items: center; gap: 12px; }
.bet__display {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05);
}
#betInput {
  width: 70px; text-align: right; border: none; background: transparent; color: #fff;
  font-weight: 700; font-size: 16px; outline: none;
}
#minusBet, #plusBet {
  width: 38px; height: 38px; border-radius: 10px; border: none;
  background: rgba(255,255,255,.06); color: #fff; font-size: 18px;
}

.actions { display: flex; gap: 12px; margin-top: 4px; }
.btn { padding: 12px 16px; border-radius: 12px; }
.btn--primary { background: linear-gradient(135deg,#32e1b9,#10b981); color: #02151a; font-weight: 700; }
.btn--ghost { background: rgba(255,255,255,.06); color: #d6e3e7; }

/* Supprime l’ancienne ligne stats si elle traîne */
.stats { display: none !important; }

/* ===== Sections image séparées ===== */
.feature {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  padding: 20px; border-radius: 16px; background: rgba(255,255,255,.04);
  margin: 18px 0;
}
.feature__media img { width: 100%; height: auto; border-radius: 12px; display: block; }
.feature__body h3 { margin: 0 0 6px; font-size: 18px; }
.feature__body p  { margin: 0; opacity: .85; }

@media (min-width: 900px){
  .feature { grid-template-columns: 1.2fr .8fr; align-items: center; }
  .feature--3 { grid-template-columns: .8fr 1.2fr; }
}
/* ----- Nouvelle mise en page plus large ----- */
.panel--controls {
  padding: 16px;
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Ligne des boutons de mise rapide */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 10px;
}
.chip {
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px 0;
  font-weight: 600;
  text-align: center;
  transition: background .2s;
}
.chip.active { background: linear-gradient(135deg, #facc15, #f59e0b); color:#02151a; }

/* Ligne de saisie de mise */
.bet-line {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 10px;
  align-items: center;
}
.bet__display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px;
  font-weight: 600;
}
#betInput {
  background: transparent;
  border: none;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
}

/* Boutons - / + harmonisés */
#minusBet, #plusBet {
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 10px;
  font-size: 1.3rem;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
#minusBet:hover, #plusBet:hover { background: rgba(255,255,255,.12); }

/* Ligne actions : bouton start + cashout prennent 50% chacun */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.actions .btn {
  padding: 12px 0;
  font-weight: 700;
  border-radius: 12px;
  text-align: center;
}
.btn--primary { background: linear-gradient(135deg,#32e1b9,#10b981); color:#02151a; }
.btn--ghost { background: rgba(255,255,255,.06); color:#d6e3e7; }

/* Texte Cashout centré */
#cashoutBtn span { display: inline-block; margin-left: 4px; }
/* État visible quand cashout dispo */
#cashoutBtn.is-available {
  background: linear-gradient(135deg, #d4d12b, #b9b010);
  color: #062217;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(43,212,189,.25) inset, 0 6px 16px rgba(16,185,129,.25);
  transform: translateZ(0);
}

#cashoutBtn.is-available:hover {
  filter: brightness(1.04);
}

/* Désactivé = look gris et non cliquable (si pas déjà fait) */
#cashoutBtn:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: rgba(255,255,255,.06);
  color: #d6e3e7;
  box-shadow: none;
}
/* ===== WIN BANNER PREMIUM ===== */
.win-banner {
  position: fixed; inset: 0; display: none; z-index: 1000;
  align-items: center; justify-content: center;
}
.win-banner.show { display: flex; }

.win-banner__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(1200px 800px at 50% 20%, rgba(16,185,129,.18), transparent 60%),
              rgba(2,10,18,.75);
  backdrop-filter: blur(2px);
}

.win-banner__card {
  position: relative;
  width: min(520px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 22px 18px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: wb-pop .35s ease-out both;
}

@keyframes wb-pop {
  0% { transform: translateY(8px) scale(.96); opacity: 0; }
  100%{ transform: translateY(0)   scale(1);   opacity: 1; }
}

.win-banner__close {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: #fff; font-size: 16px;
}
.win-banner__close:hover { filter: brightness(1.1); }

.win-banner__header { text-align: center; position: relative; padding-top: 8px; }
.win-banner__icon { font-size: 40px; margin-bottom: 6px; filter: drop-shadow(0 6px 16px rgba(16,185,129,.4)); }
.win-banner__title { margin: 6px 0 2px; font-size: 22px; letter-spacing:.3px; }
.win-banner__subtitle { margin: 0; opacity: .8; }

.win-banner__amount {
  margin: 10px auto 6px;
  font-size: 34px; font-weight: 800;
  background: linear-gradient(90deg,#34e5c0,#0fd19a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 0 rgba(0,0,0,0);
}

.win-banner__burst {
  position: absolute; inset: 0; pointer-events: none;
}
.win-banner__burst::before,
.win-banner__burst::after {
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width: 260px; height: 260px; border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(43,212,189,.35), rgba(16,185,129,.2), transparent 60%);
  filter: blur(14px);
  animation: wb-rotate 6s linear infinite;
}
.win-banner__burst::after { animation-direction: reverse; opacity:.6; }
@keyframes wb-rotate { to { transform: translateX(-50%) rotate(360deg); } }

.win-banner__recap {
  margin: 12px 0 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.recap-item { 
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.recap-item--total {
  grid-column: 1 / -1; 
  background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.06));
  border-color: rgba(43,212,189,.25);
}
.recap-label { display:block; font-size: 12px; opacity:.8; margin-bottom: 4px;}
.recap-value { font-weight: 800; }

.win-banner__actions { display: flex; justify-content: center; margin-top: 8px; }
.win-banner .btn--primary{
  background: linear-gradient(135deg,#2bd4bd,#10b981); color: #062217;
  padding: 12px 16px; border-radius: 12px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(16,185,129,.28);
}
.win-banner .btn--primary:hover { filter: brightness(1.06); }
/* --- Win banner: robust responsive --- */
.win-banner__card{
  width: min(520px, 92vw);
  max-width: 92vw;          /* évite tout dépassement horizontal */
  box-sizing: border-box;
  overflow: hidden;         /* coupe tout débordement (glow, etc.) */
  padding: 20px 14px 14px;  /* un peu plus serré sur mobile */
}

.win-banner__recap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.win-banner__actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

/* Bouton 100% largeur dans la carte */
.win-banner__actions .btn{
  width: 100%;
  max-width: 100%;
}

/* Bouton close bien dans la carte */
.win-banner__close{
  right: 10px;
  top: 10px;
  transform: none;
}

/* Petits écrans: tout en 1 colonne, texte qui wrap, bouton plein écran */
@media (max-width: 420px){
  .win-banner__card{
    width: 94vw;
    max-width: 94vw;
    padding: 16px 12px 12px;
    border-radius: 16px;
  }
  .win-banner__recap{
    grid-template-columns: 1fr;   /* 1 colonne */
    gap: 8px;
  }
  .win-banner__amount{
    font-size: 28px;
  }
  .win-banner__title{ font-size: 18px; }
  .win-banner__icon{ font-size: 34px; }
  .win-banner .btn--primary{
    padding: 12px;
    font-size: 15px;
  }
}

/* Empêche le bouton de dépasser à cause d’ombres internes */
.win-banner .btn--primary{
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Si le texte du bouton est long, autorise retour ligne plutôt que dépassement */
@media (max-width: 360px){
  .win-banner .btn--primary{
    white-space: normal;
    line-height: 1.2;
  }
}
@media (max-width: 370px){
  #winRestartSame::after{
    content: "Recommencer";
  }
  #winRestartSame{ font-size: 14px; }
}
.win-banner__burst::before,
.win-banner__burst::after { filter: blur(10px); opacity: .5; }
/* ===== GAME MODAL ===== */
.game-modal{position:fixed;inset:0;display:none;z-index:1000}
.game-modal.show{display:block}
.game-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}

.game-modal__card{
  position:relative; z-index:1;
  width:min(560px,92vw); margin:6vh auto 0; padding:20px 18px 16px;
  border-radius:18px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.game-modal__close{
  position:absolute; right:10px; top:10px; width:40px;height:40px;
  border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
}
.game-modal__title{margin:8px 0 4px; font-size:20px; font-weight:900}
.game-modal__subtitle{margin:0 0 10px; color:var(--muted)}

.game-modal__recap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px;
}
.game-modal__recap .recap-item{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:12px; padding:10px;
}
.game-modal__recap .recap-item span{font-size:.82rem; color:var(--muted)}
.game-modal__recap .recap-item strong{display:block; font-size:1.12rem; margin-top:2px}

.game-modal__actions{display:flex; justify-content:center; margin-top:14px}

/* Art/FX zone */
.game-modal__art{
  position:absolute; inset:-30% -20% auto -20%; height:52%;
  background: radial-gradient(40% 50% at 50% 50%, rgba(34,211,238,.28), rgba(0,0,0,0) 60%);
  filter: saturate(1.2);
  pointer-events:none;
}

/* Modes */
#gameModal[data-mode="start"] .game-modal__art{
  animation: gmHue 6s linear infinite;
  background:
    radial-gradient(36% 50% at 40% 40%, rgba(34,211,238,.28), transparent 60%),
    radial-gradient(28% 40% at 70% 50%, rgba(16,185,129,.25), transparent 65%),
    radial-gradient(24% 36% at 30% 70%, rgba(245,158,11,.22), transparent 70%);
}
@keyframes gmHue{to{filter:hue-rotate(360deg)}}

#gameModal[data-mode="lose"] .game-modal__art{
  background:
    radial-gradient(10% 12% at 50% 40%, rgba(255,90,90,.85), rgba(255,90,90,0) 70%),
    radial-gradient(30% 34% at 50% 40%, rgba(255,180,80,.45), transparent 70%);
  animation: boom 700ms ease-out forwards;
}
@keyframes boom{
  0%{transform:scale(.6); opacity:.8; filter:blur(2px)}
  60%{transform:scale(1.4); opacity:1}
  100%{transform:scale(1.1); opacity:.0}
}

#gameModal[data-mode="mines"] .game-modal__art{
  background:
    radial-gradient(36% 44% at 60% 40%, rgba(99,102,241,.26), transparent 60%),
    radial-gradient(30% 36% at 40% 60%, rgba(34,211,238,.26), transparent 65%);
  animation: gmPulse 2s ease-in-out infinite;
}
@keyframes gmPulse{
  0%,100%{transform:scale(1); opacity:.8}
  50%{transform:scale(1.06); opacity:1}
}

/* Multipliers list chips */
.gm-mult-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.gm-chip{
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#10b981);
  color:#02151a; font-weight:800; font-size:.9rem;
  box-shadow:0 6px 18px rgba(34,211,238,.25);
}

/* mode-specific fields */
.gm-only-start{display:none}
.gm-only-lose{display:none}
.gm-only-mines{display:none}
#gameModal[data-mode="start"] .gm-only-start{display:block}
#gameModal[data-mode="lose"] .gm-only-lose{display:block}
#gameModal[data-mode="mines"] .gm-only-mines{display:block}
/* ===== GAME MODAL (centrée) ===== */
.game-modal{position:fixed;inset:0;display:none;z-index:1000}
.game-modal.show{display:flex;align-items:center;justify-content:center}
.game-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
.game-modal__card{
  position:relative; z-index:1;
  width:min(560px,92vw); margin:0; /* centré, plus de marge haut */
  padding:20px 18px 16px;
  border-radius:18px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.game-modal__close{
  position:absolute; right:10px; top:10px; width:40px;height:40px;
  border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
}

.game-modal__title{margin:8px 0 4px; font-size:20px; font-weight:900}
.game-modal__subtitle{margin:0 0 10px; color:var(--muted)}
.game-modal__recap{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px}
.game-modal__recap .recap-item{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); border-radius:12px; padding:10px}
.game-modal__recap .recap-item span{font-size:.82rem; color:var(--muted)}
.game-modal__recap .recap-item strong{display:block; font-size:1.12rem; margin-top:2px}
.game-modal__actions{display:flex; justify-content:center; margin-top:14px}

/* Art/FX */
.game-modal__art{position:absolute; inset:-30% -20% auto -20%; height:52%; pointer-events:none; filter:saturate(1.2)}
/* Début de partie : halo coloré doux */
#gameModal[data-mode="start"] .game-modal__art{
  animation: gmHue 6s linear infinite;
  background:
    radial-gradient(36% 50% at 40% 40%, rgba(34,211,238,.28), transparent 60%),
    radial-gradient(28% 40% at 70% 50%, rgba(16,185,129,.25), transparent 65%),
    radial-gradient(24% 36% at 30% 70%, rgba(245,158,11,.22), transparent 70%);
}
@keyframes gmHue{to{filter:hue-rotate(360deg)}}

/* Défaite : thème rouge + secousse + flash */
#gameModal[data-mode="lose"]{--boom: rgba(239,68,68,.65)}
#gameModal[data-mode="lose"] .game-modal__art{
  background:
    radial-gradient(12% 14% at 50% 40%, var(--boom), rgba(255,90,90,0) 70%),
    radial-gradient(32% 36% at 50% 40%, rgba(255,180,80,.42), transparent 70%);
  animation: boomPulse 900ms ease-out forwards;
}
#gameModal[data-mode="lose"] .game-modal__card{
  animation: shake .42s cubic-bezier(.36,.07,.19,.97) both;
}
#gameModal[data-mode="lose"]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 40%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  opacity:0; animation: flash .28s ease-out 1;
}

@keyframes boomPulse{
  0%{transform:scale(.7); opacity:.8; filter:blur(2px)}
  60%{transform:scale(1.4); opacity:1}
  100%{transform:scale(1.08); opacity:.0}
}
@keyframes shake{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

/* Mode mines (si tu l’utilises) */
#gameModal[data-mode="mines"] .game-modal__art{
  background:
    radial-gradient(36% 44% at 60% 40%, rgba(99,102,241,.26), transparent 60%),
    radial-gradient(30% 36% at 40% 60%, rgba(34,211,238,.26), transparent 65%);
  animation: gmPulse 2s ease-in-out infinite;
}
@keyframes gmPulse{0%,100%{transform:scale(1); opacity:.8} 50%{transform:scale(1.06); opacity:1}}

/* Masquer le bouton actions sur l’écran de début */
#gameModal[data-mode="start"] .game-modal__actions{display:none}

/* Champs visibles selon mode */
.gm-only-start{display:none}
.gm-only-lose{display:none}
.gm-only-mines{display:none}
#gameModal[data-mode="start"] .gm-only-start{display:block}
#gameModal[data-mode="lose"] .gm-only-lose{display:block}
#gameModal[data-mode="mines"] .gm-only-mines{display:block}
/* ——— MODALE : centrer + fond plus sombre et lisible ——— */
.game-modal{position:fixed;inset:0;display:none;z-index:1000}
.game-modal.show{display:flex;align-items:center;justify-content:center}

/* >>> FOND assombri + blur + vignette pour meilleure lisibilité */
.game-modal__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(65% 50% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
    rgba(0,0,0,.72);      /* ← plus sombre qu'avant */
  backdrop-filter: blur(4px) saturate(1.05);
}

/* Carte modale */
.game-modal__card{
  position:relative; z-index:1;
  width:min(560px,92vw);
  margin:0; padding:20px 18px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  box-shadow: 0 28px 90px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}

/* ——— FX de la zone "art" (les halos animés) ——— */
.game-modal__art{
  position:absolute; inset:-32% -22% auto -22%; height:56%;
  pointer-events:none; filter:saturate(1.15);
}

/* >>> DÉBUT DE PARTIE : anim d’entrée + halo coloré plus visible */
#gameModal[data-mode="start"] .game-modal__card{
  animation: gmPop .42s cubic-bezier(.2,.9,.2,1) both;
}
#gameModal[data-mode="start"] .game-modal__art{
  background:
    radial-gradient(40% 54% at 38% 42%, rgba(34,211,238,.38), transparent 62%),
    radial-gradient(34% 46% at 72% 52%, rgba(16,185,129,.36), transparent 68%),
    radial-gradient(28% 40% at 30% 72%, rgba(245,158,11,.28), transparent 72%);
  animation: gmHue 7s linear infinite;
}
/* petit reflet qui balaye la carte au spawn */
#gameModal[data-mode="start"] .game-modal__card::before{
  content:""; position:absolute; inset:-20%;
  background: linear-gradient(110deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-60%) rotate(6deg);
  filter: blur(6px);
  animation: gmSweep 0.8s 0.08s ease-out both;
}

/* >>> DÉFAITE : thème rouge + secousse + flash (garde si déjà présent) */
#gameModal[data-mode="lose"]{--boom: rgba(239,68,68,.68)}
#gameModal[data-mode="lose"] .game-modal__art{
  background:
    radial-gradient(14% 16% at 50% 40%, var(--boom), rgba(255,90,90,0) 70%),
    radial-gradient(34% 38% at 50% 40%, rgba(255,180,80,.42), transparent 70%);
  animation: boomPulse 900ms ease-out forwards;
}
#gameModal[data-mode="lose"] .game-modal__card{ animation: shake .42s cubic-bezier(.36,.07,.19,.97) both; }
#gameModal[data-mode="lose"]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 40%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  opacity:0; animation: flash .28s ease-out 1;
}

/* ——— KEYFRAMES ——— */
@keyframes gmHue { to { filter: hue-rotate(360deg); } }
@keyframes gmPop {
  0% { transform: scale(.92); opacity: 0; }
  60%{ transform: scale(1.035); opacity: 1; }
  100%{ transform: scale(1); }
}
@keyframes gmSweep {
  from { transform: translateX(-60%) rotate(6deg); opacity:.0; }
  40%  { opacity:.9; }
  to   { transform: translateX(40%) rotate(6deg); opacity:0; }
}
@keyframes boomPulse{
  0%{transform:scale(.7); opacity:.8; filter:blur(2px)}
  60%{transform:scale(1.4); opacity:1}
  100%{transform:scale(1.08); opacity:.0}
}
@keyframes shake{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX( 2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX( 4px); }
}
@keyframes flash { 0%{opacity:.9} 100%{opacity:0} }

/* Masquer les actions en mode start (pas de bouton) */
#gameModal[data-mode="start"] .game-modal__actions{display:none}
/* === Selecteur Mines (style premium) === */
.select-mine select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 20px 4px 0;
  line-height: 1.2;
}

/* Pour forcer le dropdown à hériter du thème */
.select-mine select option {
  background: #0e1426;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 12px;
}

/* Style du conteneur */
.select-mine {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  
}

/* Petite flèche stylisée */
.select-mine .chev {
  position: absolute;
  right: 10px;
  pointer-events: none;
  font-size: 12px;
  color: var(--muted);
}
/* ===== Selecteur Mines — custom (comme un bouton) ===== */
.select-mine--custom { position: relative; }

.select-mine--custom .sm-trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  color:#fff; font-weight:800; font-size:13px;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.35);
  cursor:pointer; outline:none;
}
.select-mine--custom .sm-trigger:hover{ filter:brightness(1.05); }
.select-mine--custom .sm-trigger:focus{ box-shadow:0 0 0 3px rgba(34,211,238,.28); }

.select-mine--custom .sm-value{ font-weight:900; }
.select-mine--custom .chev{ opacity:.85; transform:translateY(1px); }

/* Dropdown */
.select-mine--custom .sm-list{
  position:absolute; left:0; top:calc(100% + 6px);
  min-width:140px;
  background:linear-gradient(180deg, rgba(15,22,40,.98), rgba(7,12,26,.98));
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  list-style:none; margin:0;
  display:none; z-index:30;
}
.select-mine--custom.open .sm-list{ display:block; animation:smDrop .16s ease-out both; }
@keyframes smDrop{
  0%{ opacity:0; transform:translateY(-6px) scale(.98); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

.select-mine--custom .sm-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 10px; border-radius:10px;
  color:#e8f6fb; font-weight:800; font-size:14px; cursor:pointer;
}
.select-mine--custom .sm-list li:hover{ background:rgba(255,255,255,.06); }
.select-mine--custom .sm-list li[aria-selected="true"]{
  background:linear-gradient(135deg,#32e1b9,#10b981); color:#02151a;
}

/* désactive le select natif qu’on a caché ailleurs */
.select-mine select{ display:none!important; }
/* ====== MINES MODAL — look & anim ====== */

/* Pop-in de la carte (comme un vrai jeu) */
#gameModal[data-mode="mines"] .game-modal__card{
  animation: gmPop .38s cubic-bezier(.2,.9,.2,1) both;
}

/* Halo animé bleu/violet + respiration */
#gameModal[data-mode="mines"] .game-modal__art{
  background:
    radial-gradient(42% 52% at 34% 38%, rgba(99,102,241,.30), transparent 62%),
    radial-gradient(36% 48% at 70% 58%, rgba(34,211,238,.28), transparent 68%);
  animation: gmPulse 2s ease-in-out infinite, gmHue 9s linear infinite;
}

/* Balayage speculaire rapide au spawn */
#gameModal[data-mode="mines"] .game-modal__card::before{
  content:""; position:absolute; inset:-20%;
  background: linear-gradient(110deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-60%) rotate(6deg);
  filter: blur(6px);
  animation: gmSweep .7s .06s ease-out both;
}

/* On cache le bouton d’actions en mode mines */
#gameModal[data-mode="mines"] .game-modal__actions{ display:none; }

/* Un peu plus de contraste pour la ligne des multiplicateurs */
#gmMultList{ margin-top: 10px; }
#gmMultList .gm-chip{
  box-shadow: 0 6px 18px rgba(34,211,238,.25), inset 0 0 0 1px rgba(255,255,255,.15);
  font-weight: 900;
}

/* Animations réutilisées */
@keyframes gmPop{
  0%{ transform: scale(.92); opacity:0 }
  60%{ transform: scale(1.035); opacity:1 }
  100%{ transform: scale(1) }
}
@keyframes gmSweep{
  from{ transform: translateX(-60%) rotate(6deg); opacity:0 }
  35% { opacity:.85 }
  to  { transform: translateX(40%)  rotate(6deg); opacity:0 }
}
/* (tu as déjà gmPulse et gmHue ; on les réutilise) */
.game-modal__backdrop{
  background:
    radial-gradient(65% 50% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
    rgba(0,0,0,.75);
  backdrop-filter: blur(4px) saturate(1.05);
}
#gmMultList .gm-chip{
  padding:6px 10px;
  font-weight:700;
  font-size:0.85rem;
}
/* Fenêtre MINES : pas de puces ni champ multiplicateur */
#gameModal[data-mode="mines"] .gm-only-mines,
#gameModal[data-mode="mines"] #gmMultList { display: none !important; }

/* Sélecteur de mines désactivé pendant une partie */
#mineCustom.disabled .sm-trigger{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}
#mineCustom.disabled .sm-list{ display: none !important; }
/* ===== MODALE DÉPÔT ===== */
.deposit-modal{position:fixed;inset:0;display:none;z-index:120}
.deposit-modal.show{display:flex;align-items:center;justify-content:center}
.deposit__backdrop{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,0) 90%),
  rgba(0,0,0,.85); backdrop-filter: blur(4px);}

.deposit__card{
  position:relative; z-index:1; width:min(680px,94vw);
  border-radius:18px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:0 28px 90px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.06);
  padding:16px 16px 18px; overflow:hidden; animation:depPop .34s ease both;
}
@keyframes depPop{0%{transform:scale(.94);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}

.deposit__close{
  position:absolute; right:10px; top:10px; width:40px;height:40px;
  border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
}

.deposit__header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.deposit__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(90deg,#22d3ee,#10b981); color:#04181b; font-weight:900}
.deposit__title{margin:0;font-size:20px;font-weight:900}
.deposit__subtitle{margin:0;color:var(--muted)}

/* Étape 1 : cartes crypto */
.crypto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.crypto-card{
  display:grid; place-items:center; gap:6px; padding:14px 10px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  cursor:pointer; transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.crypto-card:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); transform:translateY(-1px)}
.crypto-card strong{font-size:.98rem; color: rgb(255, 255, 255);}
.crypto-card small{color:var(--muted)}
.crypto-logo{width:34px;height:34px;border-radius:999px;display:inline-block}

/* Logos stylisés */
.crypto-btc{background: radial-gradient(circle at 30% 30%, #fff 0, #fff 28%, transparent 29%), linear-gradient(180deg,#ffb341,#ff8a00)}
.crypto-eth{background: conic-gradient(from 180deg at 50% 60%, #9be9ff, #5cc8ff, #5696ff, #9be9ff); mask: polygon(50% 6%, 80% 46%, 50% 64%, 20% 46%); -webkit-mask: polygon(50% 6%, 80% 46%, 50% 64%, 20% 46%); border-radius:6px}
.crypto-sol{background:linear-gradient(135deg,#9945FF,#14F195)}

/* Étape 2 : loader */
.dep-loader{display:grid; place-items:center; gap:10px; padding:20px 10px}
.dep-spinner{width:38px;height:38px;border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:#22d3ee; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Étape 3 */
.dep-row{display:grid; gap:12px}
@media(min-width:560px){ .dep-row{grid-template-columns:220px 1fr; align-items:center} }

.dep-qr{display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:8px}
.dep-info{display:grid; gap:12px}

.dep-coinline{display:flex; align-items:center; gap:8px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#10b981); color:#061a1f; font-weight:900; font-size:.85rem}

.dep-address label{font-size:.9rem;color:var(--muted)}
.dep-address__line{display:flex;gap:8px;align-items:center;margin-top:6px}
#depAddress{
  flex:1; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; padding:0 10px; font-weight:800; letter-spacing:.2px;
}
.btn--copy{flex:0 0 auto; min-width:110px}

/* État expiré */
.deposit-modal.expired .badge{background:rgba(239,68,68,.22); color:#fff; border:1px solid rgba(239,68,68,.4)}
.deposit-modal.expired #depAddress{opacity:.65}
.deposit-modal.expired .btn--copy{opacity:.65; cursor:not-allowed}

/* Ouverture via bouton du menu */
.menu-open .action-btn--deposit:focus{outline:2px solid rgba(34,211,238,.4)}

/* Réutilise tes classes .btn existantes */
/* Icône header dépôt (fond dégradé cohérent) */
.deposit__icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(90deg,#22d3ee,#10b981); color:#04181b; font-weight:900;
  box-shadow:0 8px 22px rgba(16,185,129,.25);
}

/* Logos en PNG / SVG */
.crypto-logo-img{
  width:34px;height:34px;display:block;
 
  object-fit:contain; 
}

/* QR propre (la lib insère un <canvas> ou <img> dedans) */
#depQr canvas, #depQr img{
  width:220px;height:220px;display:block;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#0b1224;
}
/* ===== QR premium ===== */
.dep-qr{
  position: relative;
  display: grid; place-items: center;
  border-radius: 16px;
  padding: 12px;                     /* quiet zone autour du QR */
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 16px 50px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Le conteneur que la lib remplit (on crée un fond clair et arrondi) */
#depQr{
  background: #f8fbff;               /* fond clair pour lisibilité */
  border-radius: 12px;
  padding: 8px;                       /* marge blanche supplémentaire */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Le canvas/img ajouté par la lib s'adapte */
#depQr canvas, #depQr img{
  display:block;
  width: 220px; height: 220px;        /* taille QR */
}

/* Logo de la crypto au centre (petit + disque blanc de sécurité) */
.qr-logo{
  position: absolute;
  width: 44px; height: 44px;          /* ~20% de 220px */
  border-radius: 999px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.06);
  pointer-events: none;               /* ne bloque pas le scan */
}
/* ===== MODALE RETRAIT ===== */
.wd-modal{position:fixed;inset:0;display:none;z-index:120}
.wd-modal.show{display:flex;align-items:center;justify-content:center}
.wd__backdrop{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
  rgba(0,0,0,.85); backdrop-filter: blur(4px);}

.wd__card{
  position:relative; z-index:1; width:min(720px,94vw);
  border-radius:18px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:0 28px 90px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.06);
  padding:16px 16px 18px; overflow:hidden; animation:depPop .34s ease both;
}
.wd__close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.wd__header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wd__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(90deg,#22d3ee,#10b981);color:#04181b;box-shadow:0 8px 22px rgba(16,185,129,.25)}
.wd__title{margin:0;font-size:20px;font-weight:900}
.wd__subtitle{margin:0;color:var(--muted)}

.wd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wd-card{display:grid;place-items:center;gap:6px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);cursor:pointer}
.wd-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.wd-card strong{font-size:1rem; color: #ffffff;}
.wd-card small{color:var(--muted)}
.wd-card__icon{font-size:22px}

.wd-fields{display:grid;gap:10px;margin-top:6px}
.field{display:grid;gap:6px}
.field input, .field select{
  height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;padding:0 10px;font-weight:800;letter-spacing:.2px;outline:none
}
.row2{display:grid;gap:10px}
@media(min-width:560px){ .row2{grid-template-columns:1fr 1fr} }

.crypto-grid{display:flex;gap:10px;flex-wrap:wrap}
.cc{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);cursor:pointer}
.cc img{width:22px;height:22px}

.wd-actions{display:flex;gap:8px;margin-top:6px}
.wd-error{color:#ffd1d1;margin:8px 0 0;font-weight:700;min-height:1em}

.wd-success{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:14px;font-weight:700
}
.app__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:720px;
  width:100%;
  margin:90px auto 6px; /* top = 40px, left/right = auto, bottom = 6px */
}
.side-menu {
  /* ... tout ton code existant ... */
  padding: 90px 16px 24px; /* ← remplace l'ancien padding */
}
/* Empêche le scroll du document (le WebView ne reçoit plus d'overscroll) */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;          /* évite le “rebond” (supporté iOS récents) */
}

/* On scrolle uniquement à l’intérieur de l’app */
.app {
  height: 100dvh;                      /* plein écran vrai, sensible au notch */
  overflow: auto;
  -webkit-overflow-scrolling: touch;   /* inertie iOS, sans rebond externe */
  overscroll-behavior: contain;        /* bloque la propagation d’overscroll */
}
/* === Toggle Son (bgSoundToggle) === */
.sound-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;            /* ajuste si besoin */
  user-select:none;
  margin-left:auto;
}

.sound-toggle label{
  font-size:14px;
  line-height:1;
  cursor:pointer;
  opacity:.9;
}

/* Bouton toggle custom (on stylise la checkbox elle-même) */
.sound-toggle input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  width:48px;
  height:28px;
  border-radius:999px;
  background:var(--toggle-bg, #e5e7eb); /* gris clair */
  outline:none;
  cursor:pointer;
  transition:background-color .2s ease, box-shadow .2s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Le "knob" rond */
.sound-toggle input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--toggle-knob, #fff);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform .2s ease;
  will-change: transform;
}

/* État activé */
.sound-toggle input[type="checkbox"]:checked{
  background:var(--toggle-on, #22c55e); /* vert par défaut */
}

.sound-toggle input[type="checkbox"]:checked::after{
  transform:translateX(20px);
}

/* Accessibilité focus clavier */
.sound-toggle input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 3px rgba(34,197,94,.35);
}

/* États désactivés (si jamais tu désactives le toggle) */
.sound-toggle input[type="checkbox"]:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Mode sombre optionnel : si tu as une classe .dark sur <body> */
.dark .sound-toggle input[type="checkbox"]{
  background:var(--toggle-bg-dark, #374151);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.dark .sound-toggle label{ opacity:.95; }

/* Réduction d’animations pour les personnes sensibles */
@media (prefers-reduced-motion: reduce){
  .sound-toggle input[type="checkbox"],
  .sound-toggle input[type="checkbox"]::after{
    transition:none;
  }
}
:root{
  --bg: #0b0f1a;
  --panel: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.14);
  --text: #eaf4ff;
  --muted: #9db3c7;
  --primary: #25d0a4;
}

/* Overlays génériques */
.overlay{position:fixed;inset:0;z-index:9999;display:none;}
.overlay.show{display:grid;}
.overlay--center{place-items:center;background:rgba(2,8,23,.86);backdrop-filter: blur(6px);}

/* Fenêtre inscription (responsive, pas de débordement) */
.card-lg.form-card{
  width:min(560px, 92vw);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 30px 120px rgba(0,0,0,.6);
}
.card-lg h3{margin:0 0 6px;}
.card-lg .muted{margin:0 0 14px;display:block;color:var(--muted);}

.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-bottom:14px;
}
.form-grid .full{grid-column:1 / -1;}
@media (min-width: 520px){
  .form-grid{grid-template-columns:1fr 1fr;}
  .form-grid .full{grid-column:1 / 3;}
}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:0;}
.form-grid input{
  height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);color:var(--text);padding:0 12px;font-size:15px;min-width:0;width:100%;
  box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;
}
.form-grid input[readonly]{opacity:.7;}
.btn{border:0;border-radius:12px;padding:12px 16px;cursor:pointer;}
.btn--primary{background:var(--primary);color:#041316;font-weight:700;}
.btn-lg{min-height:48px;font-size:16px;width:100%;}

/* ====== GAME LOADER (plein écran, style “jeu mobile”) ====== */
/* ====== GAME LOADER (plein écran, style “jeu mobile”) ====== */
/* par défaut: caché (hérite de .overlay {display:none}) */
.overlay--game-loader{
  /* NE METS PAS display:grid ici ! */
  place-items:center;
  background:#070a12;
}

/* visible quand .show est présent */
.overlay--game-loader.show{
  display:grid;
}

.gl__stage{
  position:relative;
  width:min(720px, 92vw);
  padding:28px 20px 22px;
  border-radius:22px;
  background:
    radial-gradient(600px 280px at 50% -80px, rgba(255,255,255,0.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 40px 140px rgba(0,0,0,0.7);
  overflow:hidden;
}

.gl__logo{font-weight:900;letter-spacing:.5px;font-size:28px;text-align:center;margin-bottom:6px;}

/* Étoiles scintillantes */
.gl__stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.gl__stars i{
  position:absolute;display:block;width:3px;height:3px;background:#fff;border-radius:50%;opacity:.8;
  animation: twinkle 2.2s ease-in-out infinite;
}
.gl__stars i:nth-child(1){top:12%;left:22%;animation-delay:.1s}
.gl__stars i:nth-child(2){top:38%;left:78%;animation-delay:.4s}
.gl__stars i:nth-child(3){top:62%;left:12%;animation-delay:.9s}
.gl__stars i:nth-child(4){top:24%;left:54%;animation-delay:1.2s}
.gl__stars i:nth-child(5){top:76%;left:68%;animation-delay:.6s}
.gl__stars i:nth-child(6){top:48%;left:36%;animation-delay:1.5s}
.gl__stars i:nth-child(7){top:14%;left:86%;animation-delay:1.8s}
.gl__stars i:nth-child(8){top:84%;left:8%;animation-delay:.2s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}

/* Bombes qui tombent */
.gl__bombs{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.bomb{
  position:absolute;top:-40px;width:14px;height:18px;background:#2a2f3a;border-radius:8px 8px 4px 4px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25);
}
.bomb::before{content:"";position:absolute;width:10px;height:10px;background:#232735;border-radius:50%;top:-6px;left:2px}
.bomb::after{content:"";position:absolute;width:2px;height:10px;background:#f5c84b;top:-14px;left:6px;animation: fuse 1s linear infinite;}
@keyframes fuse{0%{opacity:1}100%{opacity:.2}}
.bomb:nth-child(1){left:15%;animation: drop 2.4s linear infinite;animation-delay:0s}
.bomb:nth-child(2){left:40%;animation: drop 2.6s linear infinite;animation-delay:.4s}
.bomb:nth-child(3){left:65%;animation: drop 2.5s linear infinite;animation-delay:.8s}
.bomb:nth-child(4){left:30%;animation: drop 2.3s linear infinite;animation-delay:1.2s}
.bomb:nth-child(5){left:80%;animation: drop 2.7s linear infinite;animation-delay:1.6s}
@keyframes drop{0%{transform:translateY(-60px)}80%{transform:translateY(280px)}100%{transform:translateY(280px)}}

/* Barre de progression */
.gl__progress{margin-top:160px}
.gl__progress-bar{
  width:100%;height:12px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}
.gl__progress-fill{
  height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#25d0a4,#f6c453);
  transition: width .25s ease;
}
.gl__progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--muted);}

/* Free Bet modal */
.freebet-card{
  position: relative;
  width: min(520px, 92vw);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 40px 140px rgba(0,0,0,0.65);
  overflow: hidden;
}
.freebet-card .burst{
  position:absolute; inset:-20%;
  background:
    radial-gradient(400px 220px at 50% -10%, rgba(34,211,238,.28), rgba(0,0,0,0) 70%),
    radial-gradient(300px 240px at 80% 120%, rgba(246,196,83,.22), rgba(0,0,0,0) 70%);
  filter: blur(8px);
  animation: burstPulse 2.6s ease-in-out infinite;
}
@keyframes burstPulse { 0%,100%{ transform: scale(1); opacity: .9; } 50%{ transform: scale(1.06); opacity: 1; } }
.freebet-card h3{ margin: 0 0 6px; font-size: 22px; }
.freebet-card .subtitle{ margin: 0 0 12px; color: var(--muted); }
.freebet-card .amount{
  font-size: 34px; font-weight: 900;
  background: linear-gradient(90deg,#22d3ee,#f6c453);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 8px 0 16px;
  animation: amountPop .8s ease both;
}
@keyframes amountPop { 0%{ transform: scale(.94); opacity: 0 } 100%{ transform: scale(1); opacity: 1 } }
/* ====== Paramètres : Modale ====== */
:root{
  --surface: rgba(20, 22, 28, 0.7);      /* fond backdrop */
  --card: rgba(28, 32, 40, 0.85);        /* carte verre */
  --border: rgba(255, 255, 255, 0.08);   /* bordure douce */
  --text: #e9edf1;
  --muted: #98a2b3;
  --accent: #5b8cff; /* adapte à ta couleur de marque */
  --shadow: 0 10px 40px rgba(0,0,0,0.45);
  --radius: 16px;
}

.btn-settings{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border:1px solid var(--border);
  border-radius:12px; background:rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  color:var(--text); cursor:pointer;
  transition: transform .08s ease, border-color .2s ease;
}
.btn-settings:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }
.btn-settings .icon-gear{ display:block; }

.modal-backdrop{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: var(--surface);
  backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
  z-index: 1000;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }

.modal-card{
  width:min(780px, 92vw);
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.modal-backdrop.is-open .modal-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-header, .modal-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.modal-footer{ border-top:1px solid var(--border); border-bottom:none; justify-content:flex-end; }

.modal-header h2{ font-size:1.05rem; letter-spacing:.2px; }

.modal-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer;
}
.modal-close:hover{ border-color: rgba(255,255,255,0.18); }

.modal-content{ padding:18px; }

.account-header{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.avatar{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border); object-fit:cover;
}
.name-line{ display:flex; align-items:baseline; gap:8px; }
.title{ font-weight:600; font-size:1rem; }
.muted{ color: var(--muted); font-size:.92rem; }
.id-line{ margin-top:2px; }

.grid-2{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:14px; margin-top:12px;
}
@media (max-width: 640px){
  .grid-2{ grid-template-columns: 1fr; }
}

.field label{
  display:block; color: var(--muted); font-size:.78rem; margin-bottom:6px;
}
.value{ font-size:.98rem; }
.value.strong{ font-weight:600; color: var(--text); }

.btn.ghost{
  background:transparent; border:1px solid var(--border);
  padding:.55rem .9rem; border-radius:12px; color:var(--text); cursor:pointer;
}
.btn.ghost:hover{ border-color: rgba(255,255,255,0.18); }
/* ==== Wallet select popup ==== */
.wallet { position: relative; } /* ancre le popup */
.wallet-select{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: rgba(16,23,40,0.98);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  padding:6px;
  display:none;
  z-index: 70;
}
.wallet-select.show{ display:block; animation: pop .2s ease; }

.wallet-option{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:#e6eef6; cursor:pointer;
}
.wallet-option + .wallet-option{ margin-top:6px; }
.wallet-option:hover{ background:rgba(255,255,255,0.10); }
.wallet-option.active{
  background:linear-gradient(90deg,#22d3ee33,#10b98133);
  border-color: rgba(34,211,238,0.45);
}

.wo-left{ display:flex; flex-direction:column; }
.wo-title{ font-weight:800; font-size:14px; }
.wo-desc{ font-size:12px; color:var(--muted); }
.wallet-option strong{ font-weight:900; font-size:14px; }
/* Popup sélection de solde */
.wallet-select {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: rgba(16, 23, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  padding: 6px;
  display: none;
  z-index: 99;
}
.wallet-select.show {
  display: block;
  animation: pop .2s ease;
}

.wallet-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  color: #e6eef6;
  transition: background .15s;
}
.wallet-option:hover {
  background: rgba(255, 255, 255, 0.1);
}
.wallet-option.active {
  background: linear-gradient(90deg,#22d3ee33,#10b98133);
  border-color: rgba(34,211,238,0.45);
}
.wo-left { display: flex; flex-direction: column; }
.wo-title { font-weight: 800; font-size: 14px; }
.wo-desc  { font-size: 12px; color: var(--muted); }
/* === Mini sélecteur de solde === */
.wallet-select {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  width: 260px;
  background: rgba(16, 23, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  padding: 8px;
  z-index: 99;
}
.wallet-select.show { display: block; animation: pop .22s ease; }

.wallet-option {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  margin: 4px 0;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wallet-option:hover { background: rgba(255,255,255,0.1); }
.wallet-option.active {
  background: linear-gradient(90deg,#22d3ee33,#10b98133);
  border-color: rgba(34,211,238,0.45);
}
.wo-left { display: flex; flex-direction: column; gap: 2px; }
.wo-title {
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 6px;
}
.badge-demo {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: linear-gradient(90deg,#f59e0b,#f6c453);
  color: #1b1504;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wo-desc { font-size: 12px; color: var(--muted); }
/* Le solde est cliquable et sert d’ancre au popup */
.wallet {
  position: relative;
  cursor: pointer;
}

/* Popup */
.wallet-select{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: rgba(16,23,40,0.98);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  padding:6px;
  display:none;
  z-index: 99;
}
.wallet-select.show{ display:block; animation: pop .2s ease; }

.wallet-option{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:#e6eef6; cursor:pointer;
}
.wallet-option:hover{ background:rgba(255,255,255,0.10); }
.wallet-option.active{
  background:linear-gradient(90deg,#22d3ee33,#10b98133);
  border-color: rgba(34,211,238,0.45);
}

/* Autocollant "pro" pour le mode démo */
.badge-demo{
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px;
  background: linear-gradient(90deg,#f59e0b,#f6c453);
  color:#1b1504; text-transform:uppercase; letter-spacing:.5px;
}
/* ancre + clic */
.wallet{ position: relative; cursor: pointer; }  /* s'assure que le popup s'ancre ici */

/* popup stable + transition fluide */
.wallet-select{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: rgba(16,23,40,0.98);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  padding:6px;
  display:block;            /* <- évite le reflow display none->block */
  opacity:0;                /* on gère la visibilité avec opacity/visibilty */
  visibility:hidden;
  transform: translateY(6px);
  transform-origin: top right;   /* évite le “saut” à gauche */
  transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
  z-index: 99;
}
.wallet-select.show{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s; /* visible tout de suite */
}
.wallet { position: relative; cursor: pointer; }
.wallet-select{
  position:absolute; top:calc(100% + 8px); right:0;
  width:260px; z-index:99;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.wallet-select.show{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s 0s;
}
/* === Icônes animées (loop) === */
.ico { display:block; pointer-events:none; }

/* étoile : légère rotation + twinkle */
.ico-star { animation: starSpin 6s linear infinite, starTwinkle 1.6s ease-in-out infinite alternate; }
@keyframes starSpin   { to { transform: rotate(360deg); } }
@keyframes starTwinkle{ 0%{filter:drop-shadow(0 0 6px rgba(255,233,120,.4))}
                        100%{filter:drop-shadow(0 0 16px rgba(255,233,120,.9))} }

/* diamant : breathing + reflets */
.ico-diamond { animation: diaBreath 1.8s ease-in-out infinite; }
@keyframes diaBreath { 0%{ transform: scale(1); } 50%{ transform: scale(1.06); } 100%{ transform: scale(1); } }

/* bombe : mèche qui grésille + étincelle */
.ico-bomb .fuse  { animation: fuseFlick 0.8s ease-in-out infinite alternate; }
.ico-bomb .spark { animation: sparkPulse 0.35s ease-in-out infinite alternate; }
@keyframes fuseFlick { 0%{ stroke:#ffb74d } 100%{ stroke:#ff7043 } }
@keyframes sparkPulse{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.4); opacity:.3 } }

/* === Tuiles : idle “breathing” + hover/press === */
.card:not(.revealed){
  animation: tileIdle 3.2s ease-in-out infinite;
}
@keyframes tileIdle{
  0%,100%{ box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.06),
            0 8px 22px rgba(0,0,0,.45); }
  50%{ box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.08),
            0 10px 28px rgba(16,185,129,.18); }
}
.card:active { transform: scale(.98); }

/* Ripple tactile (au tap) */
.card { position: relative; overflow: hidden; }
.card .ripple {
  position:absolute; border-radius:999px; width:12px; height:12px;
  background:rgba(255,255,255,.25); transform:translate(-50%,-50%) scale(1);
  animation:ripple .6s ease-out forwards; pointer-events:none;
}
@keyframes ripple{ to { transform:translate(-50%,-50%) scale(22); opacity:0; } }
/* === Icônes SVG animées === */
.ico { display:block; pointer-events:none; }

/* Étoile : rotation lente + twinkle */
.ico-star { animation: starSpin 6s linear infinite, starTwinkle 1.6s ease-in-out infinite alternate; }
@keyframes starSpin { to { transform: rotate(360deg); } }
@keyframes starTwinkle {
  0%  { filter: drop-shadow(0 0 6px rgba(255,233,120,.35)); }
  100%{ filter: drop-shadow(0 0 16px rgba(255,233,120,.9)); }
}

/* Diamant : “breathing” */
.ico-diamond { animation: diaBreath 1.8s ease-in-out infinite; }
@keyframes diaBreath { 0%{transform:scale(1);} 50%{transform:scale(1.06);} 100%{transform:scale(1);} }

/* Bombe : mèche qui grésille */
.ico-bomb .fuse  { animation: fuseFlick .8s ease-in-out infinite alternate; }
.ico-bomb .spark { animation: sparkPulse .35s ease-in-out infinite alternate; }
@keyframes fuseFlick { 0%{ stroke:#ffb74d } 100%{ stroke:#ff7043 } }
@keyframes sparkPulse{ 0%{ transform:scale(1);   opacity:.8 }
                       100%{ transform:scale(1.4); opacity:.3 } }
/* --- Forcer la face arrière + SVG visibles au reveal --- */
.card { position: relative; transform-style: preserve-3d; }
.card__face { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; }

/* Avant = visible par défaut */
.card__face--front { opacity:1; transform: rotateY(0deg) scale(1); transition: opacity .22s, transform .22s; }

/* Arrière = cachée avant le reveal */
.card__face--back  { opacity:0; transform: rotateY(0deg) scale(.7); transition: opacity .22s, transform .22s; }

/* Quand la case est révélée, on cache l’avant et on montre l’arrière */
.card.revealed .card__face--front { opacity:0; transform: rotateY(0deg) scale(.85); }
.card.revealed .card__face--back  { opacity:1; transform: rotateY(0deg) scale(1); }

/* Reset si ton ancien CSS ciblait .symbol uniquement (les SVG ont .ico) */
.card__face--back .symbol { display:none; }

/* Taille/centrage des SVG */
.card__face--back svg.ico { width:38px; height:38px; display:block; }

/* (déjà présents plus haut) animations des icônes : */
.ico { display:block; pointer-events:none; }
.ico-star { animation: starSpin 6s linear infinite, starTwinkle 1.6s ease-in-out infinite alternate; }
@keyframes starSpin { to { transform: rotate(360deg); } }
@keyframes starTwinkle { 0%{filter:drop-shadow(0 0 6px rgba(255,233,120,.35))} 100%{filter:drop-shadow(0 0 16px rgba(255,233,120,.9))} }
.ico-diamond { animation: diaBreath 1.8s ease-in-out infinite; }
@keyframes diaBreath { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
.ico-bomb .fuse{ animation:fuseFlick .8s ease-in-out infinite alternate; }
.ico-bomb .spark{ animation:sparkPulse .35s ease-in-out infinite alternate; }
@keyframes fuseFlick { 0%{stroke:#ffb74d} 100%{stroke:#ff7043} }
@keyframes sparkPulse{ 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.4);opacity:.3} }
/* === BONUS MODAL === */
.bonus-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.95);
  z-index: 100;
}
.bonus-modal.show { display: flex; animation: fadeIn .25s ease; }

.bonus__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 20px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: pop .3s ease;
}

.bonus__close {
  position: absolute;
 
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.bonus__image img {
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  margin-bottom: 14px;
}

.bonus__title {
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.bonus__text {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 14px;
}

.bonus__text .highlight {
  color: var(--primary);
  font-weight: 700;
}

.bonus__cta button {
  width: 100%;
  font-size: 1rem;
}

.bonus__smallprint {
  font-size: .7rem;
  color: var(--muted);
  margin-top: 10px;
}
/* ===== MODALE DÉPÔT (PRO) ===== */
.deposit-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:100}
.deposit-modal.show{display:flex;animation:fadeIn .25s ease}

.deposit__backdrop{position:absolute;inset:0}

.deposit__card{
  position:relative;
  width:92%;max-width:460px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  animation:pop .25s ease;
}

.deposit__close{
  position:absolute;top:10px;right:10px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:var(--text);cursor:pointer;
}

.deposit__header{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.deposit__icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  color:#05222e;
  background:linear-gradient(90deg,#22d3ee,#10b981);
  box-shadow:0 10px 24px rgba(34,211,238,.25);
}
.deposit__titles{min-width:0}
.deposit__title{margin:0;font-size:1.05rem;font-weight:900}
.deposit__subtitle{margin:2px 0 0;color:var(--muted);font-size:.85rem}

.deposit__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:8px;border-radius:14px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
}

.crypto-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:10px;border-radius:12px;width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.crypto-card:hover{transform:translateY(-1px);border-color:rgba(34,211,238,.45);box-shadow:0 10px 26px rgba(34,211,238,.12)}
.crypto-card.is-selected{outline:2px solid rgba(34,211,238,.7)}

.crypto-card__logo{
  width:34px;height:34px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.crypto-card__logo img{width:22px;height:22px;object-fit:contain}

.crypto-card__name{font-weight:800;font-size:.95rem; color: #d6e3e7;}
.crypto-card__ticker{
  font-size:.7rem;opacity:1; color: #d6e3e7; padding:2px 6px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}

.deposit__steps{margin-top:12px}
.steps__chip{
  display:inline-block;margin-bottom:8px;padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#10b981);color:#05222e;font-weight:900;font-size:.82rem;
}
.steps__list{margin:0 0 12px 18px;padding:0;color:var(--muted);font-size:.92rem}
.steps__list li{margin:4px 0}

.amount{margin:10px 0 12px}
.amount label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.amount__field{
  position:relative;display:flex;align-items:center;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:8px 10px;
}
#depAmount{
  width:100%;background:transparent;border:none;outline:none;
  color:var(--text);font-weight:800;font-size:1rem;
}
.amount__suffix{margin-left:6px;color:var(--muted);font-weight:700}

.deposit__cta{margin-top:6px}

.deposit__security{
  margin-top:10px;font-size:.78rem;color:var(--muted);display:flex;gap:6px;align-items:center;justify-content:center
}
.deposit__security .shield{font-size:1rem}

/* Petits écrans */
@media (max-width:360px){
  .deposit__grid{grid-template-columns:repeat(2,1fr)}
}
/* Icônes des boutons dépôt/retrait */
.icon-deposit, .icon-withdraw {
  width: 26px;
  height: 26px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Effet glow au survol */
.action-btn--deposit:hover svg {
  filter: drop-shadow(0 0 6px rgba(255, 213, 74, 0.7));
}

.action-btn--withdraw:hover svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* Texte et icône mieux alignés */
.action-btn svg {
  margin-right: 6px;
}
/* Icônes dans la fenêtre de retrait */
.wd-card__icon svg {
  display: block;
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Couleurs différentes pour chaque type */
.wd-card[data-wd="bank"] .wd-card__icon svg {
  color: #a5b4fc; /* Violet pastel (bancaire) */
  filter: drop-shadow(0 0 6px rgba(165, 180, 252, 0.5));
}

.wd-card[data-wd="crypto"] .wd-card__icon svg {
  color: #fbbf24; /* Or (crypto) */
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}
.wd-card__icon svg{width:32px;height:32px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.wd-card[data-wd="bank"]  .wd-card__icon svg{color:#a5b4fc;filter:drop-shadow(0 0 6px rgba(165,180,252,.5))}
.wd-card[data-wd="crypto"].wd-card__icon svg{color:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.45))}
.menu-nav .nav-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Glow léger au survol */
.menu-nav .nav-item:hover svg {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}
/***** ======== BOUTONS CASINO GLASS-LIQUID ======== *****/
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: .2px;
  border: none;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  isolation: isolate; /* pour les pseudo-éléments */
  transform: translateZ(0);
}

/* --- START (cyan/émeraude) --- */
.btn--start{
  color: #031b1f;
  /* Bordure liquide + fond verre via layers */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, #30e7ff, #10b981) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -10px 22px rgba(0,0,0,.35),
    0 14px 34px rgba(16,185,129,.22),
    0 6px 20px rgba(48,231,255,.16);
  backdrop-filter: saturate(1.2) blur(2px);
}

/* Gloss blanc (verre) */
.btn--start::before,
.btn--cash::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    linear-gradient( to bottom, rgba(255,255,255,.35), rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 60% );
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:0;
}

/* Sheen qui glisse au survol */
.btn--start::after,
.btn--cash.is-available::after{
  content:"";
  position:absolute; top:-120%; left:-40%;
  width:60%; height:300%;
  transform: rotate(18deg);
  background: radial-gradient(120px 220px at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
  opacity:.0; transition: opacity .25s ease, transform .7s ease;
  pointer-events:none;
  z-index:1;
}
.btn--start:hover::after,
.btn--cash.is-available:hover::after{ opacity:.65; transform: rotate(18deg) translateX(40%); }

/* Hover/active */
.btn--start:hover{ filter: brightness(1.04) saturate(1.06); }
.btn--start:active{ transform: translateY(1px); }

/* --- CASHOUT --- */
/* État par défaut (désactivé) : verre sombre */
.btn--cash{
  color: #cfe8f1;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 22px rgba(0,0,0,.45);
  opacity: .75;
}

/* Disponible : or/miel avec glow casino */
.btn--cash.is-available,
#cashoutBtn.is-available{ /* compat avec ton sélecteur existant */
  opacity:1;
  color:#1a1305;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, #ffe167, #f59e0b) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -12px 24px rgba(0,0,0,.35),
    0 16px 34px rgba(245,158,11,.28),
    0 0 34px rgba(245,158,11,.22);
  animation: cashPulse 1.4s ease-in-out infinite alternate;
}

/* Petit pulse doux */
@keyframes cashPulse{
  0%   { filter: saturate(1.0); transform: translateZ(0) }
  100% { filter: saturate(1.12); transform: translateZ(0) }
}

.btn--cash:hover{ filter: brightness(1.03); }
.btn--cash:active{ transform: translateY(1px); }

/* Accessibilité : état disabled explicite */
.btn--cash:disabled{
  cursor: not-allowed;
  filter: grayscale(.15);
}

/* Taille responsive (ton layout est déjà grid 1fr/1fr) */
@media (min-width: 720px){
  .btn{ min-height: 56px; }
}
/***** ======== STYLE CASINO GOLD ======== *****/

/* --- START (bouton principal doré) --- */
.btn--start {
  color: #4b2e12; /* marron foncé */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) padding-box,
    radial-gradient(circle at 30% 20%, #fff7dc, #ffe066 70%) border-box;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.6),
    inset 0 -10px 20px rgba(170,120,0,.35),
    0 8px 25px rgba(255,214,90,.3);
  backdrop-filter: saturate(1.15) blur(2px);
}

/* --- CASHOUT --- */
.btn--cash {
  color: #6e540e;
  border: 1px solid rgba(255,255,255,.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) padding-box,
    radial-gradient(circle at 30% 20%, #f7f3e0, #b9b9b9 70%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 22px rgba(0,0,0,.3);
  opacity: .75;
}

/* Disponible : bouton gold qui attire l’œil */
.btn--cash.is-available,
#cashoutBtn.is-available {
  opacity: 1;
  color: #3e2a0b;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) padding-box,
    radial-gradient(circle at 30% 20%, #fff7dc, #ffd24a 70%) border-box;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -10px 20px rgba(140,100,0,.35),
    0 8px 25px rgba(255,214,90,.35);
  animation: cashPulse 1.4s ease-in-out infinite alternate;
}
/* ===== Boutons ronds “casino gold” ===== */
.actions--round{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:center;
}

/* base du bouton rond */
.round-btn{
  position:relative;
  height:84px;           /* taille principale */
  border-radius:999px;
  border:0;
  cursor:pointer;
  isolation:isolate;
  display:grid;
  place-items:center;
  padding:0;
  background: none;
  /* anneaux & glow violet autour (outer ring) */
  box-shadow:
    0 0 0 2px rgba(129, 13, 143, .45) inset, /* fin anneau interne violet */
    0 0 0 6px rgba(70, 0, 90, .35),          /* anneau externe violet */
    0 14px 30px rgba(0,0,0,.35);             /* ombre portée */
}

/* pastille dorée (corps) */
.round-btn::before{
  content:"";
  position:absolute; inset:8px;
  border-radius:inherit;
  background:
    radial-gradient(120% 100% at 30% 20%, #fff8da 0%, #ffe68f 38%, #f7cd49 68%, #e2b43a 100%);
  box-shadow:
    inset 0 8px 18px rgba(255,255,255,.65),   /* halo haut clair */
    inset 0 -16px 28px rgba(150,100,0,.35);   /* ombre bas chaude */
  z-index:0;
}

/* gloss verre (lueur blanche en haut) */
.round-btn::after{
  content:"";
  position:absolute; inset:8px;
  border-radius:inherit;
  background:
    linear-gradient( to bottom, rgba(255,255,255,.55), rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 62%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:2;
}

/* icône au centre */
.round-btn .rb__icon{
  position:relative; z-index:3;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4))
          drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* montant Cashout à l’intérieur */
.round-btn .rb__amount{
  position:absolute;
  bottom:10px; left:50%; transform:translateX(-50%);
  z-index:3;
  font-weight:900;
  font-size:13px;
  color:#3a2a1a;           /* marron lisible sur or */
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  pointer-events:none;
}

/* interactions */
.round-btn:hover{ filter:brightness(1.04) saturate(1.04); }
.round-btn:active{ transform:translateY(1px); }

/* états Cashout */
.round-btn--cash[disabled]{
  opacity:.65; filter:saturate(.8) grayscale(.03);
  cursor:not-allowed;
}
.round-btn--cash.is-available,
#cashoutBtn.is-available{         /* compat avec ton JS existant */
  opacity:1; filter:none;
  animation:rbPulse 1.4s ease-in-out infinite alternate;
  box-shadow:
    0 0 0 2px rgba(169, 48, 186, .55) inset,
    0 0 0 6px rgba(97, 0, 125, .48),
    0 18px 40px rgba(255,203,66,.35);
}
@keyframes rbPulse{
  from{ transform:translateZ(0) scale(1); }
  to  { transform:translateZ(0) scale(1.03); }
}

/* responsive : un peu plus grand sur grands écrans */
@media (min-width: 720px){
  .round-btn{ height:96px; }
  .round-btn .rb__amount{ font-size:14px; }
}
/* ===== Bouton rond casino gold ===== */
.actionbar{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap:14px; align-items:center;
}

.action-round{
  position:relative; width:84px; height:84px;
  border-radius:999px; border:0; cursor:pointer; isolation:isolate;
  background:none; padding:0; display:grid; place-items:center;
  /* anneaux violets + ombre */
  box-shadow:
   0 0 0 2px rgb(53 53 53 / 45%) inset, 0 0 0 6px rgb(0 0 0 / 35%), 0 12px 28px rgba(0, 0, 0, .35)
}
/* corps doré */
.action-round::before{
  content:""; position:absolute; inset:8px; border-radius:inherit;
  background:
    radial-gradient(120% 100% at 30% 20%, #fff8da 0%, #ffe48a 42%, #f4c449 72%, #e0b03a 100%);
  box-shadow:
    inset 0 8px 18px rgba(255,255,255,.65),
    inset 0 -16px 28px rgba(150,100,0,.35);
  z-index:0;
}
/* gloss verre */
.action-round::after{
  content:""; position:absolute; inset:8px; border-radius:inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 62%);
  mix-blend-mode:screen; z-index:2; pointer-events:none;
}
.action-round:hover{ filter:brightness(1.04) saturate(1.03) }
.action-round:active{ transform:translateY(1px) }

/* Icônes */
.ar__icon{ position:absolute; z-index:3; filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.ar__icon--play{ display:block; }
.ar__icon--cash{ display:none; }

/* Montant au centre (quand playing) */
.ar__amount{
  position:absolute; z-index:3; display:none;
  font-weight:900; font-size:13px; color:#3b2a19; text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* États : idle / playing */
.action-round[data-state="idle"] .ar__icon--play{ display:block }
.action-round[data-state="idle"] .ar__icon--cash,
.action-round[data-state="idle"] .ar__amount{ display:none }

.action-round[data-state="playing"] .ar__icon--play{ display:none }
.action-round[data-state="playing"] .ar__icon--cash{ display:block }
.action-round[data-state="playing"] .ar__amount{ display:block }

/* ===== Panneau gain potentiel ===== */
.gainpanel{
  min-height:84px; border-radius:16px; padding:10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.28);
  display:flex; flex-direction:column; justify-content:center;
}
.gp__label{ font-size:12px; letter-spacing:.4px; color:#ffdb77; text-transform:uppercase; opacity:.9; }
.gp__value{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.gp__value #gpAmount{ font-size:22px; font-weight:900; }
.gp__value #gpMult{ font-size:14px; opacity:.9; color:#ffe08f; }
/* Cacher les contrôles de mise quand une partie est en cours */
body.is-playing .chips,
body.is-playing .bet-line {
  display: none !important;
}
#actionBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#actionBtn .ar__amount {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
}

#actionBtn .ar__label {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--text);
  opacity: 0.9;
}
/* ===== Confirmation Retrait — Ultra Pro ===== */
.wd-success .conf-card{
  position: relative;
  border-radius: 18px;
  padding: 18px 16px;
  background:
    radial-gradient(220px 120px at 10% 0%, rgba(34,211,238,.14), rgba(255,255,255,0) 70%),
    radial-gradient(260px 160px at 100% 20%, rgba(16,185,129,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}

.conf-head{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.conf-ico{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(90deg, #22d3ee, #10b981);
  display:grid; place-items:center; color:#052229;
  box-shadow: 0 10px 26px rgba(34,211,238,.25);
}
.conf-title{
  margin:0; font-size:18px; font-weight:900;
}
.conf-sub{
  margin:0; color:var(--muted); font-size:.92rem;
}

.conf-amount{
  margin:10px 0 12px;
  font-weight:900; font-size:28px; letter-spacing:.2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.conf-row{
  display:grid; grid-template-columns: 120px 1fr; gap:8px;
  padding:10px 0; border-top:1px dashed rgba(255,255,255,.12);
}
.conf-row:first-of-type{ border-top:none; padding-top:0; }
.conf-label{ color:var(--muted); font-size:.9rem; }
.conf-value{ font-weight:700; }

.conf-badges{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.badge-soft{
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.82rem;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.conf-note{
  margin-top:12px; font-size:.92rem; color:var(--muted);
}
.conf-note b{ color:#eafcff; }

@media (max-width:420px){
  .conf-row{ grid-template-columns: 1fr; }
  .conf-label{ opacity:.9; }
}
@media (max-width:480px){
  .panel, .card{
    box-shadow:none;
  }
  .cashout-amount{ animation:none }
  .progress__fill{ transition:width .2s linear } /* moins coûteux */
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}
/* --- Mode mobile : couper toutes les anims lourdes --- */
@media (max-width: 480px){
  /* pas d’animations ni transitions coûteuses sur mobile */
  .board.starting .card,
  .cashout-icon,
  .cashout-amount,
  .cashout-ring,
  .float-gain .plus {
    animation: none !important;
  }
  .progress__fill,
  .card,
  .stat strong {
    transition: none !important;
  }
  /* ombres light pour éviter le jank */
  .card,
  .panel,
  .wallet,
  .side-menu {
    box-shadow: none !important;
  }
}

/* Icônes remplacées par <span class="symbol">…</span> : garde un style soft et fixe */
.symbol{
  font-weight:900;
  font-size:26px;
  filter:none;             /* retire drop-shadow coûteux */
  text-shadow:none;        /* pas de glow animé */
}
/* ——— KILL SWITCH PERF MOBILE ——— */
@media (max-width: 768px){
  /* plus aucune animation/transitions lourdes */
  .ico-star, .ico-diamond, .ico-bomb { animation: none !important; }
  .card:not(.revealed){ animation: none !important; }      /* stop idle breathing */
  .card, .progress__fill, .stat strong { transition: none !important; }
  .card .ripple { display: none !important; }
  /* ombres soft pour éviter le jank */
  .panel, .card, .wallet, .side-menu { box-shadow: none !important; }
}

/* Nos icônes passent en <span class="symbol">…</span> */
.symbol{ font-weight:900; font-size:26px; filter:none; text-shadow:none; }
/* ——— BUG SECRET (sélecteur de texte) ——— */
.board ::selection { background: transparent; }      /* pas de fond bleu de sélection */
.cheat-hint{
  position:absolute; inset:6px;
  font: 800 18px/1.05 monospace;
  white-space:pre; letter-spacing:2px;
  color: transparent;                 /* invisible normalement */
  user-select:text; -webkit-user-select:text;
  pointer-events:none;                /* clics inchangés */
}
.cheat-safe::selection    { color:#22d3ee; }  /* safe → cyan */
.cheat-diamond::selection { color:#f6c453; }  /* diamant → doré */
.cheat-mine::selection    { color:#ef4444; }  /* mine → rouge */
.card.revealed .cheat-hint{ display:none; }   /* ne s’affiche plus une fois révélée */
/* ——— BUG D'AFFICHAGE (sélection de texte) ——— */
.board ::selection{ background: transparent; }   /* pas de fond bleu natif */

.cheat-hint{
  position:absolute; left:8px; right:8px; top:6px; height:12px;
  color:transparent;                        /* invisible normalement */
  user-select:text; -webkit-user-select:text;
  pointer-events:none;
  font:900 10px/1 monospace;
  white-space:pre; letter-spacing:1px;
  opacity:.95; filter:blur(.2px);           /* léger “glitch” */
}

/* Couleur révélée uniquement pendant la sélection */
.cheat-safe::selection    { color: rgba(34,211,238,.95); } /* cyan */
.cheat-diamond::selection { color: rgba(246,196,83,.95); } /* doré */
.cheat-mine::selection    { color: rgba(239,68,68,.95); }  /* rouge */

/* Une fois une case révélée, on cache l’indice */
.card.revealed .cheat-hint{ display:none; }
/* ——— BUG SECRET (sélecteur de texte) ——— */
.board ::selection { background: transparent; }      /* pas de fond bleu de sélection */
.cheat-hint{
  position:absolute; inset:6px;
  font: 800 18px/1.05 monospace;
  white-space:pre; letter-spacing:2px;
  color: transparent;                 /* invisible normalement */
  user-select:text; -webkit-user-select:text;
  pointer-events:none;                /* clics inchangés */
}
.cheat-safe::selection    { color:#22d3ee; }  /* safe → cyan */
.cheat-diamond::selection { color:#f6c453; }  /* diamant → doré */
.cheat-mine::selection    { color:#ef4444; }  /* mine → rouge */
.card.revealed .cheat-hint{ display:none; }   /* ne s’affiche plus une fois révélée */
/* Fallback mobile : révéler les hints pendant un appui long */
@media (pointer: coarse) {
  .board.show-hints .cheat-safe    { color: #22d3ee; }
  .board.show-hints .cheat-diamond { color: #f6c453; }
  .board.show-hints .cheat-mine    { color: #ef4444; }
}
/* Révélation furtive quand .show-hints est présent */
.board.show-hints .cheat-safe    { color: #22d3ee; }
.board.show-hints .cheat-diamond { color: #f6c453; }
.board.show-hints .cheat-mine    { color: #ef4444; }

/* Empêche tout indice via la sélection sur mobile */
@media (pointer: coarse) {
  .board ::selection { background: transparent; color: inherit; }
}
/* Désactive la sélection et le callout iOS dans la zone de jeu */
#board, #board * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* évite scroll/zoom pendant le touch */
}

/* Laisse les champs de formulaire utilisables ailleurs */
input, textarea {
  -webkit-user-select: auto;
  user-select: text;
}
.cheat-hint { pointer-events: none; }
.gl__logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
/* --- Fond rose/violet + halo flou --- */
body{
  margin:0;
  min-height:100%;
  position: relative;            /* crée un contexte pour ::before */
  background:
    /* base violette sombre */
    linear-gradient(180deg, #3b0d3c 0%, #4d1f63 40%, #1b0f2e 100%);
  color: var(--text);
  font-family: Inter,system-ui,Arial,sans-serif;
}

/* Halo rose/violet flou (au-dessus du background, sous le contenu) */
body::before{
  content:"";
  position: fixed;
  inset: -15% -10% -10% -10%;
  background:
    /* lueur principale en haut (rose) */
    radial-gradient(900px 420px at 50% 0%, rgba(255, 102, 204, 0.55), rgba(255,102,204,0) 60%),
    /* lueurs secondaires */
    radial-gradient(520px 320px at 20% 35%, rgba(255, 180, 220, 0.28), rgba(255,180,220,0) 60%),
    radial-gradient(520px 320px at 80% 55%, rgba(180, 120, 255, 0.24), rgba(180,120,255,0) 60%);
  filter: blur(26px) saturate(1.15);
  pointer-events: none;
  z-index: 0;
}

/* Assure que l’app passe devant le halo */
.app{ position: relative; z-index: 1; }
/* Supprimer visuellement la topbar */
.panel--topbar{ display:none !important; }
/* Zone de jeu un peu plus étroite */
.game{
  margin: 10px auto 0;
  max-width: 460px;   /* <— au lieu de 720px */
  width: 100%;
  display: grid;
  gap: 10px;
}

/* Panneau de la grille un peu plus compact */
.panel--board{
  padding: 10px;
  margin-bottom: 12px;
}

/* === Grille compacte (cases fixes, centrées) === */
.board{
  --tile: 68px;   /* taille d'une case */
  --gap: 5px;    /* espace entre cases */
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  gap: var(--gap);
  justify-content: center;   /* centre la grille */
  perspective: 1200px;
  min-height: auto;          /* plus de contrainte inutile */
}

/* Les cartes prennent la largeur de la cellule et restent carrées */
.card{
  width: var(--tile);
  height: auto;         /* on remplace les hauteurs fixes existantes */
  aspect-ratio: 1 / 1;  /* carré parfait */
  border-radius: 16px;
}

/* Ajuste la taille des reflets/bords si besoin (optionnel) */
/* .card::after{ border-radius:16px } */

/* Responsive : très petits écrans */
@media (max-width: 360px){
  .board{ --tile: 52px; --gap: 8px; }
}

/* Tablettes/desktop : un peu plus grandes si tu veux */
@media (min-width: 520px){
  .board{ --tile: 62px; }
}
@media (min-width: 720px){
  .board{ --tile: 64px; }
}
/* === Style des cases (tiles) === */
.card {
  position: relative;
  width: var(--tile);
  aspect-ratio: 1/1;
  border-radius: 14px;
  background: linear-gradient(145deg, #a94ed1, #6d1fa0);
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.4),
    inset -3px -3px 6px rgba(255,255,255,0.15),
    0 0 12px rgba(180,0,255,0.4);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet glossy (reflet diagonal) */
.card::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.05) 40%,
    transparent 60%
  );
  transform: rotate(20deg);
  pointer-events: none;
}

/* Liseré externe lumineux */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid rgba(255, 180, 255, 0.35);
  pointer-events: none;
}

/* Animation au hover/click */
.card:hover {
  transform: scale(1.05);
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,0.5),
    0 0 18px rgba(200,50,255,0.7);
}
.card:active {
  transform: scale(0.96);
}
/* === TILES — style "photo 2" (violet + stries + bevel) === */

/* Gabarit de tuile */
.card{
  position: relative;
  width: 100%;                /* s'adapte à la cellule de la grille */
  aspect-ratio: 1 / 1;        /* carré parfait */
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform .22s ease, filter .22s ease;
  cursor: pointer;
}

/* Faces (ne pas toucher au back si tu utilises tes états mine/safe/diamond) */
.card__face{
  position: absolute; inset: 0;
  border-radius: 18px;
  display: grid; place-items: center;
  backface-visibility: hidden;
}

/* ——— Face AVANT (tuile fermée) ———
   - Base violet dégradé
   - Reflet doux en haut-gauche
   - Vignettage sombre en bas
   - Liseré rose + ombre interne (bevel)
   - Stries diagonales en overlay
*/
.card__face--front{
  background:
    /* reflet doux haut-gauche */
    radial-gradient(120% 110% at 28% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 46%),
    /* vignette sombre bas/droite */
    radial-gradient(120% 130% at 74% 78%, rgba(0,0,0,.32), rgba(0,0,0,0) 55%),
    /* base violet */
    linear-gradient(155deg, #c06cff 0%, #7c2fd4 100%);
  border: 1.5px solid rgba(255,140,255,.45);
  box-shadow:
    inset 0 1px 8px rgba(255,255,255,.22),   /* arête claire (bevel) */
    inset 0 -10px 16px rgba(0,0,0,.35),      /* ombre interne bas */
    0 4px 10px rgba(0,0,0,.35);              /* ombre externe douce */
}

/* Stries diagonales (135°) */
.card__face--front::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.18) 0 6px,
      rgba(255,255,255,.04) 6px 16px);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* Liseré/halo rose interne */
.card__face--front::after{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  box-shadow:
    inset 0 0 0 2px rgba(255,120,255,.35),
    inset 0 0 18px rgba(255,120,255,.22);
  pointer-events:none;
}

/* Petites interactions */
.card:not(.revealed):hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.card:active{ transform: scale(.98); }

/* Laisse tes styles de .card__face--back et des états .tile--mine/.tile--safe/.tile--diamond tels quels */
/* Conteneur de la grille */
.board-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25052d; /* violet très foncé */
  border: 2px solid #a85de8; /* contour violet clair */
  border-radius: 20px;
  padding: 18px;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.08),
    inset 0 -4px 10px rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.45);
  margin: 0 auto 18px;
  max-width: fit-content;
}

/* Ajuste la grille pour qu’elle rentre bien dans le conteneur */
.board {
  --tile: 58px;   /* taille des cases */
  --gap: 10px;    /* espace entre cases */
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  gap: var(--gap);
  justify-content: center;
}
.board-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a0520; /* violet très foncé au centre */
  border-radius: 22px;
  padding: 13px;
  margin: 0 auto 1px;
  max-width: fit-content;
  position: relative;
  overflow: hidden;
}

/* Effet contour dégradé */
.board-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 2px; /* épaisseur du contour */
  background: linear-gradient(145deg, #ff7af5, #9f5bff, #4c1a8a);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Halo diffus autour du conteneur */
.board-container::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(200,100,255,0.25), transparent 70%);
  filter: blur(16px);
  z-index: -1;
}
.board {
  --tile: 74px;   /* taille plus grande */
  --gap: 6px;     /* espace réduit */
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  gap: var(--gap);
  justify-content: center;
}
html, body, .app { overflow-x: hidden; }
/* === FIX OVERFLOW MOBILE === */

/* Empêche tout scroll horizontal parasite */
html, body, .app { overflow-x: hidden; }

/* La grille ne force plus une hauteur mini sur mobile */
.board { 
  min-height: unset;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* tracks bien flexibles */
}

/* Les cases deviennent carrées, sans hauteur fixe */
.card{
  height: auto !important;
  aspect-ratio: 1 / 1;               /* carré responsive */
}

/* Un peu de marge/padding de sécurité sur très petits écrans */
@media (max-width: 380px){
  .panel--board { padding: 8px; }
  .app { padding: 8px; }
}

/* On réactive la min-height d'origine seulement quand il y a de la place */
@media (min-width: 420px){
  .board { min-height: 280px; }
}

/* Evite qu’un panneau hors écran (menu latéral) crée du scroll */
.side-menu, .menu-overlay { max-width: 100vw; }
/* === Fix arrondi trop ovale sur les faces === */
.card,
.card__face,
.card__face--front,
.card__face--back {
  border-radius: 8px !important;   /* arrondi carré, plus net */
}

/* Option : si tu veux encore plus carré */
@media (min-width: 480px) {
  .card,
  .card__face,
  .card__face--front,
  .card__face--back {
    border-radius: 6px !important;
  }
}
/* --- Forcer toutes les couches à suivre le carré --- */
.card,
.card__face,
.card__face--front,
.card__face--back,
.card__face::before,
.card__face::after {
  border-radius: 8px !important;  /* même valeur partout */
  overflow: hidden;               /* coupe ce qui dépasse */
}
.card {
  height: 90px; /* avant 62px */
  border-radius: 18px;
}
.board {
  min-height: 400px; /* avant 280px */
  gap: 3px; /* espace plus large entre les cases */
}
.game {
  margin:10px auto 0;
  max-width: 960px; /* avant 720px */
  width:100%;
  display:grid;
  gap:12px;
}
/* Icône d’indice “tap” sur les cartes non révélées */
.board.show-hints .card:not(.revealed)::before{
  content: "";
  position: absolute; inset: 20%;
  background: url("assets/ui/tap.png") center/contain no-repeat;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: hintBlink 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

@keyframes hintBlink{
  0%, 55%   { opacity: 0; transform: scale(.96); }
  60%, 70%  { opacity: .95; transform: scale(1); }
  100%      { opacity: 0; transform: scale(.98); }
}
/* Supprimer le carré ■ par défaut */
.card .symbol {
  display: none !important;
}
/* Icône d’indice “tap” (réagit à show-hints ET hints-on) */
.board.show-hints .card:not(.revealed)::before,
.board.hints-on   .card:not(.revealed)::before{
  content:"";
  position:absolute; inset:20%;
  background:url("tap.png") center/contain no-repeat; /* voir point 2 */
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  animation:hintBlink 2.4s ease-in-out infinite;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
@keyframes hintBlink{
  0%,55%{opacity:0; transform:scale(.96)}
  60%,70%{opacity:.95; transform:scale(1)}
  100%{opacity:0; transform:scale(.98)}
}
.board.show-hints .card:not(.revealed) .card__face--front::after,
.board.hints-on   .card:not(.revealed) .card__face--front::after{
  background:
    url("tap.png") center/38% no-repeat,
    var(--front-after-bg, transparent);
}
/* Icône “tap” centrée après 1er clic */
.board.show-hints .card:not(.revealed) .card__face--front::after,
.board.hints-on   .card:not(.revealed) .card__face--front::after{
  content: "";
  position: absolute;
  inset: 18%;
  background: url("tap.png") center/contain no-repeat; /* mets le bon chemin si besoin */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: hintBlink 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  z-index: 3; /* au-dessus des reflets */
}

@keyframes hintBlink{
  0%,55% { opacity: 0; transform: scale(.96); }
  60%,75%{ opacity: .95; transform: scale(1); }
  100%   { opacity: 0; transform: scale(.98); }
}
/* ===== Icône TAP : centrée + heartbeat (sans clignotement) ===== */
.board.show-hints .card:not(.revealed) .card__face--front::after,
.board.hints-on   .card:not(.revealed) .card__face--front::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;             /* ← un peu plus grand */
  transform: translate(-50%, -50%);    /* parfaitement centré */
  background-image: url("tap.png");     /* ⚠️ image SANS fond */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 3;

  /* remet tout à zéro pour éviter un “carré” ajouté par d’autres règles */
  background-color: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: .92;

  /* animation battement — pas de blink */
  animation: tapHeartbeat 2.2s ease-in-out infinite;
}

@keyframes tapHeartbeat{
  0%, 60%   { transform: translate(-50%,-50%) scale(.92); opacity: .85; }
  75%       { transform: translate(-50%,-50%) scale(1.10); opacity: 1;   }
  100%      { transform: translate(-50%,-50%) scale(.92);  opacity: .85; }
}
/* Fond bleu/noir pour les cases SAFE (remplace le vert) */
.tile--safe .card__face--back{
  background:
    radial-gradient(140% 120% at 50% 35%, rgba(0,102,204,.35), rgba(0,0,0,.88) 62%),
    linear-gradient(180deg, #0b1328, #040815);
  border:1px solid rgba(255,255,255,0.12);
}

/* Le sprite diamant, centré dans la case */
.gem-spin{
  position: absolute;
  left: 50%; top: 50%;
  width: 74%;              /* augmente/diminue la taille ici (ex: 80%) */
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background-image: url("assets/gems/gem_spn_0_w960.png");
  background-repeat: no-repeat;
  background-size: 500% 500%;   /* 5 colonnes × 5 lignes */
  background-position: 0% 0%;
  image-rendering: auto;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 6px 18px rgba(0, 140, 255, .25));
}

/* Petit “heartbeat” très léger, continu (sans disparaître) */
.gem-spin{
  animation: gemPulse 2.2s ease-in-out infinite;
}

@keyframes gemPulse{
  0%   { transform: translate(-50%,-50%) scale(1);    }
  30%  { transform: translate(-50%,-50%) scale(1.08); }
  60%  { transform: translate(-50%,-50%) scale(0.98); }
  100% { transform: translate(-50%,-50%) scale(1);    }
}
/* Diamant quasi plein cadre */
.gem-spin{
  width: 100%;
  height: 100%;
}
/* Coupe toute rotation/flip au survol */
.board{ perspective: none !important; }     /* annule la perspective 3D */
.card:hover{ transform: none !important; }  /* pas de transform au hover */
.card{ transition: box-shadow .25s ease, filter .25s ease !important; } 
/* ↑ on retire la transition sur transform pour éviter tout micro-mouvement */
/* Désactiver le flip au hover */
.card:hover {
  transform: none !important;
}

/* Empêcher l'effet 3D de bouger au survol */
.card:hover .card__face--front,
.card:hover .card__face--back {
  transform: none !important;
}
.gem-spin{
  position:absolute; left:50%; top:50%;
  width: 92%; height: 92%;
  transform: translate3d(-50%,-50%,0); /* couche GPU */
  background-image: url("assets/gems/gem_spn_0_w960.png");
  background-repeat: no-repeat;
  background-size: 500% 500%;  /* 5x5 frames */
  will-change: background-position, transform; /* hint perf */
  pointer-events:none; z-index:3;
  filter: drop-shadow(0 6px 16px rgba(0,140,255,.2)); /* léger */
}

/* heartbeat doux sans opacité (évite jank) */
.gem-spin{
  animation: gemPulse 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes gemPulse{
  0%{ transform: translate3d(-50%,-50%,0) scale(1); }
  30%{ transform: translate3d(-50%,-50%,0) scale(1.08); }
  60%{ transform: translate3d(-50%,-50%,0) scale(0.98); }
  100%{ transform: translate3d(-50%,-50%,0) scale(1); }
}

/* Respecte l’accessibilité */
@media (prefers-reduced-motion: reduce){
  .gem-spin{ animation: none; }
}
/* ===== Effet explosion sur une case ===== */
.card .boom {
  position: absolute;
  inset: -6%;
  background: url("explosion.png") center/contain no-repeat; /* mets ici ton visuel "explosion" */
  pointer-events: none;
  z-index: 10;
  animation: boomPop 650ms cubic-bezier(.22,.61,.36,1) forwards;
  filter: drop-shadow(0 10px 30px rgba(255,80,40,.45));
  mix-blend-mode: screen;
}
@keyframes boomPop {
  0%   { transform: scale(.4); opacity: .0; filter: blur(2px) brightness(1); }
  35%  { transform: scale(1.05); opacity: 1;  filter: blur(0)  brightness(1.05); }
  100% { transform: scale(1.6); opacity: 0;  filter: blur(6px) brightness(1.2); }
}

/* Flash rapide sur toute la grille */
.board.flash::after{
  content:"";
  position:absolute; inset:-1%;
  border-radius: 18px;
  pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,220,200,.85), rgba(255,80,40,.28) 35%, rgba(0,0,0,0) 70%);
  animation: boardFlash .28s ease-out forwards;
  z-index: 9;
}
@keyframes boardFlash { from{opacity:.0} to{opacity:0} }

/* (sécurité) on ne montre plus jamais la fenêtre de défaite */
.lose-banner { display: none !important; }
/* --- Fond mine: rouge/noir discret --- */
.tile--mine .card__face--back,
.card.is-mine .card__face--back,
.card[data-mine="1"] .card__face--back{
  background:
    radial-gradient(130% 110% at 50% 40%, rgba(255,90,50,.28), rgba(0,0,0,.92) 62%),
    linear-gradient(180deg, #12070a, #060205);
}

/* --- Icône bombe centrée et grande --- */
.tile--mine .card__face--back::after,
.card.is-mine .card__face--back::after,
.card[data-mine="1"] .card__face--back::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 86%; height: 86%;                  /* ~presque toute la case */
  transform: translate(-50%,-50%);
  background: url("assets/ui/8511.jpg") center/contain no-repeat;
  pointer-events:none; z-index:3;
  /* éclat léger sur la mèche (si PNG transparent) */
  filter: drop-shadow(0 6px 18px rgba(255,180,60,.25));
}

/* Optionnel : petit “heartbeat” très léger pour la bombe */
.tile--mine .card__face--back::after{
  animation: bombPulse 2s ease-in-out infinite;
}
@keyframes bombPulse{
  0%   { transform: translate(-50%,-50%) scale(1); }
  30%  { transform: translate(-50%,-50%) scale(1.06); }
  60%  { transform: translate(-50%,-50%) scale(0.98); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
.card { height: 12vw; }
.app__header, .game {
  max-width: 100%;
}
@media(min-width:720px){
  .app__header, .game {
    max-width:720px;
  }
}

/* ==== FIX MOBILE – forcer une grille carrée et fluide ==== */
.board {
  width: 100%;
  /* taille d’une case : prend 16vw (mobile) mais ne dépasse pas 72px */
  --tile: min(16vw, 72px);
  --gap: min(2.2vw, 8px);
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  gap: var(--gap);
  justify-content: center;
  min-height: unset !important; /* annule les min-height hérités */
}

.card {
  width: var(--tile) !important;
  height: var(--tile) !important;     /* assure le carré même sans aspect-ratio */
  aspect-ratio: 1 / 1 !important;     /* carré parfait si supporté */
  border-radius: 12px !important;     /* évite l’ovale géant vu sur mobile */
}

/* Conteneur de la grille : pas de largeur forcée ni overflow */
.board-container {
  max-width: 100%;
  overflow: visible;
}

/* Empêche un autre bloc de remettre des hauteurs fixes */
@media (min-width: 520px){
  .card { height: var(--tile) !important; }
}

/* iOS : évite le zoom « auto » sur focus des inputs */
input, select, textarea { font-size: 16px; }

/* Safety: aucune règle ne doit repasser la carte à 90px ou la board à 400px */
.card[style*="height:90px"], .card[style*="height: 90px"] { height: var(--tile) !important; }
/* ===== Controlbar façon iOS / Telegram ===== */
.controlbar{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 26px rgba(0,0,0,.35);
}

.cb__group{display:flex;flex-direction:column;gap:8px;min-width:0}
.cb__label{font-size:11px;letter-spacing:.5px;color:var(--muted);font-weight:800}
.cb__group--next{align-items:flex-end;text-align:right}

/* Stepper (flèches + valeur) */
.stepper{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center}
.stepper__btn{
  height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:#eaf6ff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;touch-action:manipulation;
}
.stepper__btn:active{transform:translateY(1px)}

.stepper__value{
  height:42px;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);font-weight:900;
}
.stepper__value input{
  width:100%;max-width:120px;text-align:center;border:none;background:transparent;
  color:#fff;font-size:16px;font-weight:800;outline:none;
}
.stepper__value--mines{font-size:16px;font-weight:900}
.currency{opacity:.9}

/* Bloc NEXT GEM avec effet “chrome” jaune */
.chrome-yellow{
  font-weight:900;font-size:18px;line-height:1;border-radius:12px;padding:10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;min-width:96px;
}
.chrome-yellow span{
  background:
   linear-gradient(90deg,#fff7a1 0%,#ffd86b 30%,#f6c453 50%,#ffd86b 70%,#fff7a1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Optionnel: masquer la petite pastille “Prochain : …” de la topbar */
.next-pill{ display:none; }
/* Même contenant que la grille pour le bloc contrôles */
.board-container--controls{
  margin-top: 12px;
  display: grid;
  gap: 12px;
  padding: 12px;                /* même respiration que la grille */
}

/* Grille responsive : 3 colonnes dès que possible, 2 sur petits écrans */
.controlbar{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mobile par défaut */
  gap: 12px;
}
.cb__group--next{ grid-column: 1 / -1; text-align: center; align-items: center; }

@media (min-width: 420px){
  .controlbar{ grid-template-columns: 1fr 1fr 1fr; }
  .cb__group--next{ grid-column: auto; text-align: right; align-items: flex-end; }
}

/* Stepper : laisse respirer la valeur de mise sur mobile */
.stepper{ grid-template-columns: 36px minmax(0,1fr) 36px; }
.stepper__value input{
  width: 7.5ch;                 /* toujours lisible (100 / 1000…) */
  max-width: none;
  font-size: clamp(15px, 4.6vw, 18px);
  text-align: center;
}

/* Valeur de mines bien visible */
.stepper__value--mines{
  font-size: clamp(15px, 4.6vw, 18px);
}

/* Pastille NEXT GEM – effet chrome jaune */
.chrome-yellow{
  font-weight: 900;
  font-size: clamp(16px, 4.6vw, 18px);
  line-height: 1;
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
}
.chrome-yellow span{
  background:
    linear-gradient(90deg,#fff7a1 0%,#ffd86b 30%,#f6c453 50%,#ffd86b 70%,#fff7a1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* === Lisibilité mobile : stepper compact + valeur XXL === */

/* Sur mobile : 2 colonnes, et "BET AMOUNT" prend toute la largeur */
.controlbar{
  grid-template-columns: 1fr 1fr;           /* 2 colonnes par défaut */
}
.controlbar .cb__group:first-child{         /* BET AMOUNT */
  grid-column: 1 / -1;                      /* occupe 2 colonnes */
}

/* A partir de 480px : 3 colonnes classiques */
@media (min-width: 480px){
  .controlbar{ grid-template-columns: 1fr 1fr 1fr; }
  .controlbar .cb__group:first-child{ grid-column: auto; }
}

/* Stepper : flèches plus petites, valeur plus grande et plus large */
.stepper{
  grid-template-columns: 32px minmax(110px,1fr) 32px; /* + d'espace au centre */
  gap: 6px;
}
.stepper__btn{
  height: 32px;                /* avant 42 */
  border-radius: 10px;
  padding: 0 6px;
}
.stepper__value{
  height: 40px;                /* avant 42 */
  padding: 0 8px;
}
.stepper__value input{
  width: 8.5ch;                /* affiche 100,00 facilement */
  max-width: none;
  font-size: clamp(18px, 5.6vw, 22px);  /* plus gros sur mobile */
  font-variant-numeric: tabular-nums;   /* chiffres bien alignés */
}
.stepper__value--mines{
  padding: 0 12px;
  font-size: clamp(18px, 5.6vw, 22px);  /* chiffre de mines plus grand */
}
.currency{ margin-right: 4px; }

/* NEXT GEM : laisse respirer sur 2 colonnes si besoin */
.cb__group--next{ justify-self: end; }
@media (max-width: 360px){
  .cb__group--next{ grid-column: 1 / -1; justify-self: center; }
}
.card {
  height: 52px;
}
@media(min-width:520px){ .card{height:58px} }
@media(min-width:720px){ .card{height:66px} }
.board {
  min-height: 240px;
}
.panel--board {
  padding: 8px;
  margin-bottom: 10px;
}
html, body {
  overflow-y: hidden;
}
/* --- TOUT SUR 1 ÉCRAN, SANS SCROLL --- */
html, body {
  height: 100%;
}

/* Utilise les unités “safe” pour le viewport mobile (évite le scroll fantôme) */
.app {
  min-height: 100svh;  /* svh = safe viewport height */
}

/* Pas de scroll vertical sur l’écran de jeu */
body {
  overflow-y: hidden;
}

/* Compacter les panneaux du board + contrôles */
.panel--board {
  padding: 6px !important;
  margin-bottom: 8px !important;
}

/* Réduire encore la grille */
.board {
  gap: 6px !important;
  min-height: 220px !important;  /* était 280/240 : on descend encore */
}

/* Taille des tuiles basée sur une variable → facile à ajuster */
:root { --tile: 48px; }
.card { height: var(--tile) !important; }

@media (min-width: 520px){
  :root { --tile: 54px; }
}
@media (min-width: 720px){
  :root { --tile: 62px; }
}

/* Légère compaction de la zone de contrôles */
.board-container--controls {
  padding-top: 10 !important;
}
.controlbar { row-gap: 8px !important; }
.actionbar { margin-top: 6px !important; }

/* Un peu moins d’espace global dans la grille principale */
.game {
  gap: 8px !important;
  margin-top: 6px !important;
}
/* Accessibilité cachée */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Conteneur simple */
.actionbar--single{display:block;margin-top:8px}

/* ======= CASINO CTA ======= */
.casino-cta{
  --bd1:#6a5cff;      /* bordure violet */
  --bd2:#22d3ee;      /* bordure cyan */
  --idleTop:#0e1320;  /* fond start */
  --idleBot:#0a0f1a;
  --playTop:#052a1d;  /* fond cashout */
  --playBot:#041a14;
  --glow:rgba(34,211,238,.35);

  position:relative;
  width:100%;
  height:56px;
  padding:0 14px 0 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:
    linear-gradient(var(--idleTop),var(--idleBot)) padding-box,
    linear-gradient(120deg,var(--bd1),var(--bd2)) border-box;
  display:flex;align-items:center;gap:10px;
  color:#e9f7ff;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .25s ease, filter .2s ease, background .25s ease;
}
.casino-cta::after{ /* léger gloss */
  content:"";position:absolute;inset:1px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  pointer-events:none;mix-blend-mode:soft-light;
}
.casino-cta:hover{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 20px 2px var(--glow);filter:brightness(1.04)}
.casino-cta:active{transform:translateY(1px) scale(.998)}

/* Icône */
.cta__icon{
  width:32px;height:32px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  color:#cfe7ff;
}
.cta__icon--cash{display:none}

/* Libellé au centre */
.cta__label{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;line-height:1}
.cta__text{font-size:15px;text-transform:none}
.casino-cta[data-state="idle"] .cta__text--cash{display:none}
.casino-cta[data-state="playing"] .cta__text--start{display:none}

/* Subtle underline “casino” */
.casino-cta .cta__sub{
  margin-top:6px;width:42px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
}

/* Montant à droite (pill) */
.cta__amount{
  display:none;
  font-weight:900;font-size:14px;
  padding:6px 10px;border-radius:10px;
  color:#052217;
  background:linear-gradient(90deg,#34e39a,#22d3ee);
  box-shadow:0 4px 14px rgba(52,227,154,.35);
}
.casino-cta[data-state="playing"] .cta__amount{display:inline-flex}

/* État PLAYING -> style vert sobre premium */
.casino-cta[data-state="playing"]{
  background:
    linear-gradient(var(--playTop),var(--playBot)) padding-box,
    linear-gradient(120deg,#34e39a,#22d3ee) border-box;
}
.casino-cta[data-state="playing"] .cta__icon--play{display:none}
.casino-cta[data-state="playing"] .cta__icon--cash{display:grid;color:#d9fff0}

/* Animation légère de bordure en jeu */
@keyframes borderFlow{to{background:linear-gradient(var(--playTop),var(--playBot)) padding-box,
                              linear-gradient(420deg,#34e39a,#22d3ee) border-box}}
.casino-cta[data-state="playing"]{animation:borderFlow 3s linear infinite}

/* Version plus compacte sur mobile étroit */
@media (max-width:380px){
  .casino-cta{height:52px;border-radius:12px}
  .cta__icon{width:30px;height:30px;border-radius:9px}
  .cta__text{font-size:14px}
  .cta__amount{font-size:13px;padding:5px 8px}
}
/* ===== BOUTON STYLE CASE VIOLETTE ===== */
.tile-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:52px;
  padding:12px 18px;

  border-radius:16px;
  border:1px solid rgba(255,255,255,0.15);

  background:
    linear-gradient(135deg, #9c4dcc, #7e22ce); /* violet glossy */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.12),
    inset 0 -4px 8px rgba(0,0,0,0.25),
    0 8px 22px rgba(126,34,206,0.45);

  color:#fff;
  font-weight:900;
  letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
  cursor:pointer;

  transition:transform .1s ease, filter .15s ease;
}

.tile-btn__icon {
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:rgba(255,255,255,0.12);
}

.tile-btn__label {
  font-size:1rem;
}

/* Hover / Active */
.tile-btn:hover { filter:brightness(1.08) saturate(1.05); }
.tile-btn:active { transform:translateY(1px) scale(0.98); }

/* Disabled */
.tile-btn:disabled {
  opacity:.65;
  cursor:not-allowed;
}
/* BET → CASH OUT : on masque l’icône, libellé plus lisible */
.tile-btn.is-cash .tile-btn__icon { display: none; }
.tile-btn.is-cash .tile-btn__label { font-weight: 900; letter-spacing: .3px; }
/* Quand on est en mode CASH OUT, on s'assure que le bouton reste cliquable */
.tile-btn.is-cash {
  pointer-events: auto;
}
.tile-btn.is-cash[disabled] {
  pointer-events: auto; /* ceinture et bretelles si un script remet disabled */
}
/* Option : garder le même style mais cacher l’icône */
.tile-btn.is-cash .tile-btn__icon { display: none; }
.tile-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}
/* Wallet avec style "carte de la grille" */
.wallet--glossy {
  position: relative;
  border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(17,24,39,0.92), rgba(7,12,26,0.92)) padding-box,
    linear-gradient(135deg, #33d2ff, #3ef0c8) border-box; /* même principe que .card */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 8px 22px rgba(0,0,0,0.45);
  padding: 10px 16px;
}

/* Reflets vitre comme les cases */
.wallet--glossy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    radial-gradient(110px 70px at 18% 14%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%),
    radial-gradient(60px 40px at 82% 88%, rgba(255,255,255,0.06), rgba(255,255,255,0) 70%);
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .75;
}
/* === Wallet avec le MÊME style que .board-container === */
.wallet--panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  /* mêmes arrondis + fond que le conteneur de la grille */
  border-radius: 22px;
  background: #1a0520;                 /* comme .board-container */
  padding: 10px 16px;

  /* mêmes ombres internes/externes */
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.08),
    inset 0 -4px 10px rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.45);
}

/* Liseré dégradé identique (technique mask comme .board-container::before) */
.wallet--panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 2px; /* épaisseur du contour */
  background: linear-gradient(145deg, #ff7af5, #9f5bff, #4c1a8a);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Halo diffus comme .board-container::after */
.wallet--panel::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(200,100,255,0.25), transparent 70%);
  filter: blur(16px);
  z-index: -1;
}

/* Petites retouches internes pour que tout reste propre */
.wallet--panel .wallet__ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 900;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.wallet--panel .wallet__body { display: flex; flex-direction: column; line-height: 1.05; }
.wallet--panel .wallet__label { font-size: .70rem; letter-spacing: .12em; color: var(--muted); }
.wallet--panel .wallet__amount { font-size: 1.05rem; font-weight: 900; letter-spacing: .2px; }

@media (max-width:420px){
  .wallet--panel{ padding: 8px 12px; }
}
/* Présélection avant partie */
.card.preselected {
  /* halo doux + bordure mise en avant */
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.24),
    0 0 22px rgba(34,211,238,0.28);
  border-color: rgba(255,255,255,0.28);
}
.card.preselected .card__face--front{
  background: linear-gradient(180deg, rgb(238 34 34), rgba(255, 255, 255, 0.06));
}
/* Assure l'empilement pour le pseudo-élément */
.card { position: relative; }

/* Présélection : anneau or dégradé + glow façon chrome */
.card.preselected::after{
  content: "";
  position: absolute;
  inset: -3px;                  /* déborde un peu pour que ça se voie bien */
  border-radius: inherit;
  background: linear-gradient(135deg,
              #fff6b7 0%,
              #f7ce68 22%,
              #f0b90b 45%,
              #d4a014 60%,
              #ffe8a3 80%,
              #fff6b7 100%);
  padding: 3px;                 /* épaisseur de l’anneau */
  /* On “creuse” le centre pour ne garder que le contour (anneau) */
  -webkit-mask: 
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* Effet chrome + glow */
  box-shadow:
    0 0 22px rgba(255, 207, 64, 0.55),
    0 0 10px rgba(255, 207, 64, 0.65) inset,
    0 1px 0 rgba(255,255,255,0.65) inset;
  pointer-events: none;         /* on ne bloque pas les clics */
}

/* On renforce aussi la lecture de la case sélectionnée */
.card.preselected {
  transform: translateZ(0) scale(1.02);
}
.card.preselected .card__face--front{
  filter: brightness(1.12) saturate(1.25);
}
/* ===== HUD multiplicateur ===== */
#multHud{
  display:none;               /* caché par défaut */
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.14);
}

.gp__label{font-size:12px;color:var(--muted)}
.gp__value{display:flex;align-items:center;gap:14px;font-weight:800}
.current-mult{color:#fff;font-weight:900;font-size:28px;letter-spacing:.2px}

/* Affichage pendant la partie */
body.is-playing .controlbar{ display:none !important; }   /* masque le bloc de mise */
body.is-playing #multHud{ display:flex; }                 /* montre le HUD */
/* ===== HUD minimal (2 cases) ===== */
#multHud{ display:none; }                    /* caché hors partie */
body.is-playing #multHud{ display:flex; }

body.is-playing .controlbar{ display:none !important; } /* masque mise en partie */

.mult-row{
  gap:12px;
  margin-top:12px;
  width:100%;
}

.mult-box{
  flex:1;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:74px;
}

.mult-title{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
}

.mult-value{
  font-weight:900;
  font-size:32px;
  line-height:1;
  color:#fff;
}

.mult-value.next{
  color:#ffd479;               /* doré doux pour “prochain” */
  font-size:30px;
}

@media (max-width: 480px){
  .mult-row{ flex-direction:column; }
}
/* ===== HUD minimal (2 cases en ligne) ===== */
#multHud{ 
  display:none; 
  width:100%;
}
body.is-playing #multHud{ 
  display:flex; 
  flex-direction:row;   /* toujours en ligne */
  justify-content:center;
  gap:12px;
}

body.is-playing .controlbar{ display:none !important; }

.mult-box{
  flex:1;
  min-width: 120px;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.mult-title{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
}

.mult-value{
  font-weight:900;
  font-size:28px;
  line-height:1;
  color:#fff;
}

.mult-value.next{
  color:#ffd479;  /* doré pour prochain */
}
.nextgem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.nextgem span { font-weight: 800; }
.nextgem .first-mult { color: #fff; }     /* premier multiplicateur en blanc */
.nextgem .sep        { opacity: .7; }     /* la flèche séparatrice */
#nextMult            { color: #ffd479; }  /* prochain multiplicateur en doré */
.nextgem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

#nextMult {
  font-weight: 900;
  font-size: 22px;
  color: #ffd479;  /* jaune doré */
}
/* S'assurer que la grille est positionnée comme référence */
#board, .board {
  position: relative;
}

/* Le petit rectangle en bas à droite */
.board-counter{
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(10, 8, 20, 0.55);       /* discret */
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  user-select: none;
  pointer-events: none;                     /* ne gêne pas les clics */
}
/* Icône TAP – heartbeat fluide et continu */
.board.show-hints .card:not(.revealed) .card__face--front::after,
.board.hints-on   .card:not(.revealed) .card__face--front::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:70%; height:70%;
  transform:translate(-50%,-50%);
  background:url("tap.png") center/contain no-repeat;
  pointer-events:none; z-index:3;
  opacity:.92; will-change:transform, opacity;
  animation: tapHeartbeat 2.2s ease-in-out infinite;
}
@keyframes tapHeartbeat{
  0%,60% { transform:translate(-50%,-50%) scale(.92);  opacity:.85; }
  75%    { transform:translate(-50%,-50%) scale(1.10); opacity:1;    }
  100%   { transform:translate(-50%,-50%) scale(.92);  opacity:.85; }
}
/* ===== Toggle Réel / Démo ===== */
.wallet-toggle {
  display: flex;
  align-items: center;
  gap: 8px;

  justify-content: center;
  font-size: 13px;
  color: var(--muted);
}

/* Switch style */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #555;
  transition: .3s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
input:checked + .slider {
  background: linear-gradient(135deg, #9c4dcc, #7e22ce);
}
input:checked + .slider:before {
  transform: translateX(20px);
}

/* Label à côté */
.wallet-toggle-label {
  font-weight: 600;
  font-size: 13px;
}
/* Couleur du label quand solde fictif */
body[data-wallet="fake"] #wallet .wallet__label { color: #ffd54a; } /* exemple doré */
/* ===== Boot splash (statique, sans animation) ===== */
.boot-splash{
  position: fixed;
  inset: 0;
  background: #000;                /* fond noir */
  display: none;                   /* caché par défaut */
  align-items: center;
  justify-content: center;
  z-index: 200;                    /* au-dessus de tout */
}
.boot-splash.show{ display: flex; }

.boot-splash__logo{
  max-width: 260px;                /* discret */
  width: 60%;
  height: auto;
}
/* Masquer le toggle de portefeuille pendant la partie */
.wallet-toggle{
  transition: opacity .18s ease, transform .18s ease;
}
body.is-playing .wallet-toggle{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px); /* petit fondu/slide discret */
}

/* Et on s'assure que le menu popup est fermé en jeu */
body.is-playing #walletSelect{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.card, .board, .symbol {
  will-change: transform, opacity;
}
.card {
  transform: translateZ(0);
}
/* Input + rendu plus snappy */
.board, .card, .symbol {
  touch-action: manipulation;       /* supprime les délais liés au double-tap */
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;  /* hint GPU */
}

.card {
  /* forcer pipeline GPU */
  transform: translateZ(0);
  /* transition plus courte = ressenti plus vif */
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease;
}
/* dans style.css */
.lowfx .card { 
  box-shadow: none; 
  transition: transform .26s ease; 
}
.lowfx .tile--safe, 
.lowfx .tile--diamond, 
.lowfx .tile--mine {
  box-shadow: none;
}
.card.peek .symbol { filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.gem-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 92%;
  transform: translate3d(-50%, -50%, 0);
  background-image: url("assets/gems/gem_spn_0_w960.png");
  background-repeat: no-repeat;
  background-size: 500% 500%;  /* sprite 5x5 frames */
  will-change: background-position, transform;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 6px 16px rgba(0,140,255,.2));
}