/* ═══════════════════════════════════════════════════════════
   RIXE DE PANAME — habillage des jeux
   ═══════════════════════════════════════════════════════════ */

/* ─────────── LE MANCHOT ─────────── */
.slots{display:flex;flex-direction:column;align-items:center;gap:18px}
.slots-glass{
  display:flex;gap:10px;padding:18px;background:var(--ink-900);
  border:1px solid var(--line-2);box-shadow:inset 0 6px 26px rgba(0,0,0,.85);
}
.reel{
  width:clamp(64px,17vw,96px);aspect-ratio:1;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#141419,#0A0A0D);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.reel::before,.reel::after{
  content:'';position:absolute;left:0;right:0;height:26%;z-index:2;pointer-events:none;
}
.reel::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.85),transparent)}
.reel::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.reel span{font-size:clamp(32px,8vw,48px);line-height:1;display:block}
.reel.is-spinning span{animation:reelRoll 130ms linear infinite;filter:blur(1.5px)}
.reel.is-hit{border-color:var(--sodium);box-shadow:inset 0 0 26px rgba(255,165,31,.3)}
@keyframes reelRoll{0%{transform:translateY(-46%)}100%{transform:translateY(46%)}}
.slots-paytable{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:5px;width:100%;max-width:520px;
}
.pay{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;
  background:var(--ink-700);border:1px solid var(--line);
}
.pay-sym{font-size:19px;line-height:1}
.pay-mult{font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--sodium)}
.pay-note{
  grid-column:1/-1;text-align:center;font-family:var(--f-ui);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);padding-top:5px;
}

/* ─────────── LA DESCENTE ─────────── */
.plinko{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
#plinko-canvas{width:100%;max-width:620px;height:auto;aspect-ratio:640/520;display:block}
.plinko-buckets{display:flex;gap:3px;width:100%;max-width:620px}
.bucket{
  flex:1;min-width:0;text-align:center;padding:6px 1px;overflow:hidden;
  font-family:var(--f-num);font-size:clamp(7px,1.5vw,11px);font-weight:700;
  color:var(--ink-900);background:var(--ash);
  transition:transform var(--t-fast),filter var(--t-fast);
}
.bucket.tier-0{background:#4A4A55;color:var(--bone)}
.bucket.tier-1{background:var(--ash);color:var(--ink-900)}
.bucket.tier-2{background:var(--sodium)}
.bucket.tier-3{background:var(--blood);color:#fff}
.bucket.is-hit{transform:translateY(6px) scale(1.14);filter:brightness(1.35);z-index:2;position:relative}

/* ─────────── LE PALIER ─────────── */
.limbo{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0}
.limbo-result{
  font-size:clamp(56px,16vw,124px);font-weight:700;line-height:1;color:var(--ash);
  transition:color var(--t-fast),text-shadow var(--t-fast);
}
.limbo-result.win{color:var(--sodium);text-shadow:0 0 60px rgba(255,165,31,.5)}
.limbo-result.lose{color:var(--blood-hi);text-shadow:0 0 60px rgba(213,17,31,.4)}
.limbo-result.is-rolling{color:var(--smoke)}
.limbo-target{font-family:var(--f-ui);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.limbo-target .num{color:var(--bone);letter-spacing:0}

/* ─────────── LE BARILLET ─────────── */
.wheel{position:relative;width:min(100%,420px);margin:0 auto;aspect-ratio:1}
#wheel-canvas{width:100%;height:100%;display:block;transition:transform 3.6s cubic-bezier(.15,.85,.2,1)}
.wheel-needle{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:24px solid var(--bone);filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));
}
.wheel-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:34%;aspect-ratio:1;border-radius:50%;background:var(--ink-800);
  border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font-size:clamp(18px,5vw,30px);font-weight:700;color:var(--bone);
}
.wheel-hub.win{color:var(--sodium);border-color:var(--sodium)}
.wheel-hub.lose{color:var(--blood-hi);border-color:var(--blood)}

/* ─────────── LA RAFLE ─────────── */
.keno-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-width:560px;margin:0 auto;width:100%}
.keno-n{
  aspect-ratio:1;background:var(--ink-700);border:1px solid var(--line);
  color:var(--ash);font-family:var(--f-num);font-size:14px;font-weight:700;
  cursor:pointer;transition:all var(--t-fast);
}
.keno-n:hover:not(:disabled){border-color:var(--blood);color:var(--bone)}
.keno-n.is-picked{background:var(--blood);border-color:var(--blood-hi);color:#fff}
.keno-n.is-drawn{background:var(--ink-500);border-color:var(--ash);color:var(--bone)}
.keno-n.is-hit{background:var(--sodium);border-color:var(--sodium-hi);color:#140C00;animation:pop 320ms var(--snap)}
.keno-n:disabled{cursor:default}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.16)}100%{transform:scale(1)}}
.keno-bar{
  display:flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--f-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);
}
.keno-pay{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.keno-pay-cell{
  padding:5px 9px;background:var(--ink-700);border:1px solid var(--line);
  font-family:var(--f-num);font-size:11.5px;color:var(--ash);
}
.keno-pay-cell b{color:var(--sodium)}
.keno-pay-cell.is-on{border-color:var(--sodium);background:rgba(255,165,31,.12)}

/* ─────────── PILE OU FACE ─────────── */
.coin-stage{display:flex;justify-content:center;padding:24px 0;perspective:900px}
.coin{width:clamp(96px,26vw,132px);aspect-ratio:1;position:relative;transform-style:preserve-3d}
.coin-face{
  position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:clamp(38px,10vw,54px);color:#140C00;
  box-shadow:inset 0 0 22px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.6);
}
.coin-face--p{background:radial-gradient(circle at 33% 28%,var(--sodium-hi),var(--sodium),#8A5200)}
.coin-face--f{background:radial-gradient(circle at 33% 28%,#F0DED8,#B9AFA8,#5C544E);transform:rotateY(180deg)}

/* ─────────── LES OSSELETS ─────────── */
.dice-stage{display:flex;justify-content:center;gap:22px;padding:22px 0}
.die{
  width:clamp(62px,16vw,86px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:clamp(44px,12vw,64px);line-height:1;color:var(--bone);
  background:var(--ink-900);border:1px solid var(--line-2);
}
.die.is-rolling{animation:dieRoll 480ms var(--snap)}
@keyframes dieRoll{
  0%{transform:rotate(0) scale(1)}30%{transform:rotate(19deg) scale(1.14)}
  60%{transform:rotate(-14deg) scale(1.06)}100%{transform:rotate(0) scale(1)}
}

/* ─────────── LA ROULETTE ─────────── */
.roul-head{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.roul-ball{
  width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:700;background:var(--ink-900);border:2px solid var(--line-2);
  transition:all var(--t-mid);
}
.roul-ball.rouge{border-color:var(--blood);color:var(--blood-hi);background:rgba(213,17,31,.14)}
.roul-ball.noir{border-color:var(--bone);color:var(--bone)}
.roul-ball.vert{border-color:var(--sodium);color:var(--sodium);background:rgba(255,165,31,.12)}
.roul-recent{display:flex;gap:4px;flex-wrap:wrap;max-width:230px}
.roul-chip{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-num);font-size:11px;font-weight:700;
  background:var(--ink-600);border:1px solid var(--line);color:var(--ash);
}
.roul-chip.rouge{border-color:var(--blood);color:var(--blood-hi)}
.roul-chip.vert{border-color:var(--sodium);color:var(--sodium)}
.roul-table{display:flex;flex-direction:column;gap:5px;max-width:640px;margin:0 auto;width:100%}
.roul-numbers{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.roul-outside{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.roul-evens{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:4px}
.rbet{
  background:var(--ink-700);border:1px solid var(--line);color:var(--ash);
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:8px 4px;cursor:pointer;transition:all var(--t-fast);
}
.rbet:hover{border-color:var(--bone);color:var(--bone)}
.rbet.is-on{background:var(--blood);border-color:var(--blood-hi);color:#fff}
.rbet--n{padding:7px 2px;font-family:var(--f-num);font-size:12px}
.rbet--n.c-rouge{border-color:rgba(213,17,31,.5);color:var(--blood-hi)}
.rbet--n.c-vert{border-color:rgba(255,165,31,.5);color:var(--sodium);grid-column:span 12}
.rbet--n.is-on{background:var(--blood);border-color:var(--blood-hi);color:#fff}
.rbet.is-landed{animation:landed 900ms var(--snap)}
@keyframes landed{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px var(--sodium)}}

/* ─────────── LE TERRAIN ─────────── */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:440px;margin:0 auto;width:100%}
.tile{
  aspect-ratio:1;background:var(--ink-600);border:1px solid var(--line-2);
  font-size:clamp(22px,6vw,30px);cursor:pointer;color:var(--bone);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.45);
  transition:transform var(--t-fast) var(--snap),background var(--t-fast),border-color var(--t-fast);
}
.tile:hover:not(:disabled){background:var(--ink-500);border-color:var(--blood);transform:translateY(-2px)}
.tile:disabled{cursor:default;box-shadow:none}
.tile.is-safe{background:rgba(255,165,31,.16);border-color:var(--sodium);animation:pop 260ms var(--snap)}
.tile.is-mine{background:rgba(213,17,31,.22);border-color:var(--blood);animation:pop 260ms var(--snap)}
.tile.is-ghost{opacity:.28;filter:grayscale(1)}

/* ─────────── LES ÉTAGES ─────────── */
.tower-grid{display:flex;flex-direction:column-reverse;gap:5px;max-width:440px;margin:0 auto;width:100%}
.tower-row{display:grid;gap:5px}
.tower-row[data-blocks="2"]{grid-template-columns:repeat(2,1fr)}
.tower-row[data-blocks="3"]{grid-template-columns:repeat(3,1fr)}
.tower-row[data-blocks="4"]{grid-template-columns:repeat(4,1fr)}
.tower-row.is-current .brick{border-color:var(--line-2);background:var(--ink-500)}
.brick{
  height:38px;background:var(--ink-700);border:1px solid var(--line);
  font-size:17px;color:var(--bone);cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);transition:all var(--t-fast);
}
.brick:hover:not(:disabled){background:var(--ink-400);border-color:var(--blood);transform:translateY(-2px)}
.brick:disabled{cursor:default}
.brick.is-safe{background:rgba(255,165,31,.16);border-color:var(--sodium)}
.brick.is-mine{background:rgba(213,17,31,.22);border-color:var(--blood)}
.brick.is-ghost{opacity:.25;filter:grayscale(1);box-shadow:none}
.tower-mult{
  font-family:var(--f-num);font-size:11px;color:var(--smoke);
  display:flex;align-items:center;padding-left:8px;
}

/* ─────────── LA FUITE ─────────── */
.crash{position:relative;width:100%}
#crash-canvas{
  width:100%;height:auto;aspect-ratio:900/440;display:block;
  background:var(--ink-900);border:1px solid var(--line);
}
.crash-multi{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(38px,9vw,74px);font-weight:700;color:var(--bone);
  text-shadow:0 0 50px rgba(0,0,0,.9);pointer-events:none;transition:color var(--t-fast);
}
.crash-multi.is-live{color:var(--sodium)}
.crash-multi.is-dead{color:var(--blood-hi);animation:shake 320ms var(--snap)}
.crash-history{display:flex;gap:4px;flex-wrap:wrap;margin-top:9px}
.crash-tag{
  font-family:var(--f-num);font-size:11px;font-weight:700;padding:3px 7px;
  background:var(--ink-700);border:1px solid var(--line);color:var(--ash);
}
.crash-tag.hot{border-color:var(--sodium);color:var(--sodium)}
.crash-tag.cold{border-color:rgba(213,17,31,.5);color:var(--blood-hi)}

/* ─────────── CARTES (21 + plus ou moins) ─────────── */
.card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:74px;background:var(--bone);color:#14140F;
  border:1px solid #B9AFA8;box-shadow:0 4px 14px rgba(0,0,0,.5);
  font-family:var(--f-body);font-weight:600;animation:deal 260ms var(--snap);
}
.card-v{font-size:19px;font-weight:700;line-height:1}
.card-s{font-size:17px;line-height:1}
.card.is-red{color:var(--blood)}
.card.is-back{
  background:repeating-linear-gradient(45deg,var(--blood-deep) 0 6px,#3E040A 6px 12px);
  border-color:var(--blood-deep);color:transparent;
}
.card--xl{width:clamp(92px,24vw,124px);height:clamp(132px,34vw,176px)}
.card--xl .card-v{font-size:clamp(34px,9vw,46px)}
.card--xl .card-s{font-size:clamp(28px,7vw,38px)}
@keyframes deal{from{transform:translateY(-22px) rotate(-7deg);opacity:0}to{transform:none;opacity:1}}

/* ─────────── LE 21 ─────────── */
.felt{display:flex;flex-direction:column;gap:16px;align-items:center}
.felt-side{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.felt-label{
  font-family:var(--f-ui);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--smoke);
}
.felt-label b{font-size:17px;color:var(--bone);margin-left:7px}
.felt-split{width:100%;max-width:340px;height:1px;background:linear-gradient(90deg,transparent,var(--blood),transparent)}
.hand{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;min-height:74px}

/* ─────────── PLUS OU MOINS ─────────── */
.hilo{display:flex;flex-direction:column;align-items:center;gap:18px}
.hilo-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;max-width:420px}
.hilo-actions .chip--wide{grid-column:1/-1}
.hilo-pc{font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;color:var(--smoke)}
.hilo-deck{font-family:var(--f-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}

/* ─────────── LA BASTON ─────────── */
.baston{display:flex;flex-direction:column;align-items:center;gap:22px;padding:12px 0}
.baston-foe{display:flex;flex-direction:column;align-items:center;gap:7px}
.baston-round{font-family:var(--f-ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--smoke)}
.baston-name{
  font-family:var(--f-display);font-size:clamp(28px,7vw,52px);text-transform:uppercase;
  color:var(--bone);line-height:1;text-shadow:0 0 40px rgba(213,17,31,.3);
}
.baston-hp{display:flex;gap:4px}
.baston-pip{width:26px;height:5px;background:var(--ink-500)}
.baston-pip.is-on{background:var(--blood)}
.baston-moves{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;max-width:520px}
.move{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:15px 8px;
  background:var(--ink-700);border:1px solid var(--line-2);color:var(--bone);cursor:pointer;
  transition:all var(--t-fast) var(--snap);
}
.move:hover:not(:disabled){border-color:var(--blood);background:rgba(213,17,31,.12);transform:translateY(-3px)}
.move:disabled{opacity:.45;cursor:not-allowed}
.move-i{font-size:26px;line-height:1}
.move-l{font-family:var(--f-ui);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.move-m{font-family:var(--f-num);font-size:16px;font-weight:700;color:var(--sodium)}
.move-p{font-family:var(--f-ui);font-size:11px;letter-spacing:.1em;color:var(--smoke)}
.baston.is-hit{animation:shake 320ms var(--snap)}

/* ─────────── jauge partagée ─────────── */
.gauge{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:440px;margin:0 auto;
}
.gauge>div{
  display:flex;flex-direction:column;gap:3px;padding:9px 11px;
  background:var(--ink-700);border:1px solid var(--line);text-align:center;
}
.gauge-k{font-family:var(--f-ui);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.gauge b{font-size:17px;font-weight:700}

@media (max-width:520px){
  .keno-grid{grid-template-columns:repeat(5,1fr)}
  .baston-moves{grid-template-columns:1fr}
  .move{flex-direction:row;justify-content:space-between;padding:12px 14px}
  .hilo-actions{grid-template-columns:1fr}
  .roul-numbers{grid-template-columns:repeat(6,1fr)}
  .card{width:44px;height:63px}
  .card-v{font-size:16px}.card-s{font-size:14px}
}