/* ═══════════════════════════════════════════════════════════════════════════
   roulette.css - Machine à sous BFFR (/boutique-economie/roulette)
   Portage fidèle du design "Premium slot machine" (DA cinématique du site) :
   fond #070709, violet #A78BFF, accent teal #2EE9CD, or #FFD87A, grain, aurora.
   Scène 1920×1080 mise à l'échelle JS (var --s), machine 500×660 ancrée en bas.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body { margin: 0; padding: 0; background: #070709; overflow: hidden; height: 100%; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; -webkit-tap-highlight-color: transparent; }
a { color: #A78BFF; text-decoration: none; }
a:hover { color: #C9B6FF; }
button { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }

/* ── Keyframes (reprises telles quelles du design) ─────────────────────────── */
@keyframes dvBob { from { transform: translateY(-9px) } to { transform: translateY(9px) } }
@keyframes dvBreathe { from { opacity: .55 } to { opacity: 1 } }
@keyframes dvRiseA { 0% { transform: translateY(30px); opacity: 0 } 20% { opacity: .38 } 78% { opacity: .38 } 100% { transform: translateY(-74px); opacity: 0 } }
@keyframes dvRiseB { 0% { transform: translateY(30px); opacity: 0 } 20% { opacity: .7 } 78% { opacity: .7 } 100% { transform: translateY(-74px); opacity: 0 } }
@keyframes dvSweepX { 0% { transform: translateX(-170%) skewX(-16deg) } 55% { transform: translateX(440%) skewX(-16deg) } 100% { transform: translateX(440%) skewX(-16deg) } }
@keyframes dvLineFlash { 0% { opacity: 0; transform: scaleX(.25) } 22% { opacity: 1; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1) } }
@keyframes dvWinGlow { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 0 } }
@keyframes dvFlashFull { 0% { opacity: 0 } 16% { opacity: 1 } 100% { opacity: 0 } }
@keyframes dvShake { 0%, 100% { transform: translateX(-50%) } 18% { transform: translateX(calc(-50% - 6px)) } 36% { transform: translateX(calc(-50% + 6px)) } 54% { transform: translateX(calc(-50% - 4px)) } 72% { transform: translateX(calc(-50% + 3px)) } }
@keyframes dvBurst { 0% { transform: translate(-50%,-50%) translate(0px, 0px) scale(.35) rotate(0deg); opacity: 0 } 10% { opacity: 1 } 55% { transform: translate(-50%,-50%) translate(var(--mx), var(--my)) scale(1) rotate(var(--br)); opacity: 1 } 100% { transform: translate(-50%,-50%) translate(var(--ex), var(--ey)) scale(.85) rotate(var(--br)); opacity: 0 } }
@keyframes smToast { 0% { opacity: 0; transform: translate(-50%, 12px) } 12% { opacity: 1; transform: translate(-50%, 0) } 88% { opacity: 1 } 100% { opacity: 0 } }

/* ── Scène ─────────────────────────────────────────────────────────────────── */
.sm-viewport { position: fixed; inset: 0; background: #070709; overflow: hidden; }
.sm-stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  margin-left: -960px; margin-top: -540px;
  transform: scale(var(--s, 1)) translateY(var(--sy, 0px));
}
.sm-aurora, .sm-floaters { position: absolute; inset: 0; pointer-events: none; }

.fl-coin { position: relative; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFF3C9 0%, #FFD87A 30%, #DDA23F 58%, #92621A 100%); }
.fl-coin.ring { box-shadow: inset 0 0 0 2px rgba(122,80,22,.5); }
.fl-coin.big { box-shadow: 0 0 0 2px rgba(255,222,140,.28), 0 8px 16px rgba(0,0,0,.55), 0 0 20px rgba(255,190,80,.22); }
.fl-coin.big::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(122,80,22,.6), inset 0 2px 5px rgba(255,255,255,.4); }
.fl-coin.big::after { content: ""; position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; background: linear-gradient(155deg, #C79136 0%, #8F5E16 100%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.fl-spark { position: absolute; border-radius: 50%; background: #CBB8FF; box-shadow: 0 0 10px 2px rgba(167,139,255,.55); }

/* ── Machine ───────────────────────────────────────────────────────────────── */
.sm-machine { position: absolute; left: 50%; bottom: 126px; transform: translateX(-50%); width: 500px; height: 660px; }
.sm-machine.shake { animation: dvShake .55s ease-in-out .05s; }

/* Levier */
.sm-lever {
  position: absolute; right: -48px; top: -4px; width: 56px; height: 262px;
  transform-origin: 50% 100%; cursor: pointer; z-index: 3;
  transform: rotate(-2deg); transition: transform .7s cubic-bezier(.3,1.9,.4,1);
}
.sm-lever.pull { transform: rotate(42deg); transition: transform .16s cubic-bezier(.55,0,.8,.4); }
.sm-lever .rod {
  position: absolute; left: 50%; top: 40px; width: 12px; height: 222px; margin-left: -6px; border-radius: 6px;
  background: linear-gradient(180deg, #34343F 0%, #16161D 75%);
  box-shadow: inset -1.5px 0 0 rgba(255,255,255,.14), inset 1.5px 0 0 rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,255,.22), 0 0 12px rgba(124,92,255,.18);
}
.sm-lever .knob {
  position: absolute; left: 50%; top: 0; width: 46px; height: 46px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #EFFFFB 0%, #2EE9CD 45%, #12564C 100%);
  box-shadow: 0 0 20px rgba(46,233,205,.6), 0 0 52px rgba(46,233,205,.25), 0 4px 10px rgba(0,0,0,.5);
}
.sm-lever .halo { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(46,233,205,.22) 0%, transparent 70%); animation: dvBreathe 2.6s ease-in-out infinite alternate; pointer-events: none; }
.sm-lever .spec { position: absolute; left: 22%; top: 16%; width: 26%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(1px); }
.sm-lever-mount {
  position: absolute; right: -46px; top: 248px; width: 54px; height: 100px; border-radius: 14px;
  background: linear-gradient(180deg, #17171F 0%, #0C0C11 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.22), 0 0 14px rgba(124,92,255,.14), inset 0 1px 0 rgba(255,255,255,.06); z-index: 4;
}
.sm-lever-mount .dot { position: absolute; left: 50%; bottom: 12px; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: #2EE9CD; box-shadow: 0 0 8px 2px rgba(46,233,205,.55); }

/* Couronne */
.sm-crown {
  position: absolute; left: 16px; right: 16px; top: 0; height: 96px; border-radius: 36px 36px 12px 12px;
  background: linear-gradient(180deg, #191924 0%, #0E0E15 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.3), 0 0 22px rgba(124,92,255,.18), inset 0 1px 0 rgba(255,255,255,.07); z-index: 2;
}
.sm-crown .marquee {
  position: absolute; left: 14px; right: 14px; top: 14px; height: 44px; border-radius: 26px 26px 8px 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(167,139,255,.16) 0%, rgba(124,92,255,.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(167,139,255,.18);
}
.sm-crown .sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(90deg, transparent, rgba(201,182,255,.32), transparent); animation: dvSweepX 6.5s ease-in-out infinite; }
.sm-crown .bar { position: absolute; left: 50%; bottom: 14px; width: 56%; height: 4px; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(90deg, rgba(167,139,255,0) 0%, #C9B6FF 30%, #C9B6FF 70%, rgba(167,139,255,0) 100%); box-shadow: 0 0 14px 3px rgba(167,139,255,.5); }

/* Corps */
.sm-body {
  position: absolute; left: 0; right: 0; top: 86px; height: 400px; border-radius: 24px;
  background: linear-gradient(180deg, #15151E 0%, #0E0E15 52%, #0B0B10 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.26), 0 0 26px rgba(124,92,255,.16), inset 0 1px 0 rgba(255,255,255,.06),
    inset 8px 0 20px -10px rgba(167,139,255,.2), inset -8px 0 20px -10px rgba(167,139,255,.2), 0 26px 60px rgba(0,0,0,.6);
  z-index: 2;
}

/* Fenêtre des rouleaux */
.sm-window {
  position: absolute; left: 30px; right: 30px; top: 40px; height: 264px; border-radius: 18px; background: #050508;
  box-shadow: 0 0 0 1px rgba(167,139,255,.32), inset 0 0 26px rgba(124,92,255,.18), 0 0 22px rgba(124,92,255,.1);
  padding: 14px; display: flex; gap: 12px;
}
.sm-reel { position: relative; flex: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #060609 0%, #14141D 18%, #1B1B25 50%, #14141D 82%, #060609 100%); }
.sm-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.sm-cell { height: 118px; display: flex; align-items: center; justify-content: center; }
.sm-reel .fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2,2,4,.96) 0%, rgba(2,2,4,0) 30%, rgba(2,2,4,0) 70%, rgba(2,2,4,.96) 100%); }
.sm-reel .anticip {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(46,233,205,.65), inset 0 0 24px rgba(46,233,205,.28);
  animation: dvBreathe .45s ease-in-out infinite alternate;
}
.payline-mark { position: absolute; top: 50%; width: 9px; height: 14px; margin-top: -7px; background: rgba(167,139,255,.55); pointer-events: none; }
.payline-mark.l { left: 5px; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }
.payline-mark.r { right: 5px; clip-path: polygon(100% 0%, 0% 50%, 100% 100%); }
.sm-winline {
  position: absolute; left: 20px; right: 20px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #2EE9CD 20%, #2EE9CD 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(46,233,205,.55); animation: dvLineFlash 1.4s ease-out both; pointer-events: none;
}
.sm-winglow { position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(60% 40% at 50% 50%, rgba(46,233,205,.12), transparent 75%); animation: dvWinGlow 1.4s ease-out both; pointer-events: none; }
.sm-glass { position: absolute; inset: 14px; border-radius: 12px; overflow: hidden; pointer-events: none; }
.sm-glass .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 26%, rgba(255,255,255,0) 42%); }
.sm-glass .sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 24%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); animation: dvSweepX 9s ease-in-out -3s infinite; }
.sm-glass .topline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.14); }

/* Console */
.sm-console {
  position: absolute; left: 30px; right: 30px; top: 322px; height: 58px; border-radius: 14px;
  background: linear-gradient(180deg, #0C0C12 0%, #10101A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(167,139,255,.14), inset 0 6px 14px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
}
.sm-console .meter {
  width: 100px; height: 40px; border-radius: 9px; background: #050508;
  box-shadow: inset 0 0 0 1px rgba(167,139,255,.18), inset 0 3px 8px rgba(0,0,0,.8);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.sm-console .meter.bet { width: 58px; }
.sm-console .lbl { font: 600 8px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em; color: rgba(201,182,255,.5); white-space: nowrap; }
.sm-console .val { font: 700 16px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; }
.sm-console .meter.bet .val { font-size: 15px; letter-spacing: .08em; }
.sm-console .val.accent { color: #2EE9CD; text-shadow: 0 0 10px rgba(46,233,205,.55); }
.sm-console .val.violet { color: #C9B6FF; text-shadow: 0 0 10px rgba(167,139,255,.5); }
.sm-console .val.gold { color: #FFD87A; text-shadow: 0 0 10px rgba(255,190,80,.5); }
.sm-console .mid { display: flex; align-items: center; gap: 12px; }
.sm-console .bet-group { display: flex; align-items: center; gap: 8px; }
.bet-btn {
  position: relative; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #1A1A24, #0E0E14);
  box-shadow: 0 0 0 1px rgba(167,139,255,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.bet-btn:active { transform: translateY(1px); filter: brightness(1.5); }
.bet-btn .h { position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; transform: translate(-50%,-50%); background: #C9B6FF; border-radius: 1px; }
.bet-btn .v { position: absolute; left: 50%; top: 50%; width: 2px; height: 8px; transform: translate(-50%,-50%); background: #C9B6FF; border-radius: 1px; }
.spin-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0%, #2EE9CD 42%, #10574C 100%);
  box-shadow: 0 0 16px rgba(46,233,205,.55), 0 0 34px rgba(46,233,205,.22), inset 0 -4px 8px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.6);
}
.spin-btn:active { transform: translateY(1px); filter: brightness(1.25); }
.spin-btn .halo { position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(46,233,205,.2) 0%, transparent 70%); animation: dvBreathe 2.2s ease-in-out infinite alternate; pointer-events: none; }
.spin-btn .tri { position: absolute; left: 50%; top: 50%; width: 12px; height: 14px; transform: translate(-40%,-50%); background: rgba(6,35,30,.75); clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }
.x10-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 46px; height: 40px; border-radius: 10px;
  background: linear-gradient(180deg, #241a3f, #14102a);
  box-shadow: 0 0 0 1px rgba(167,139,255,.45), 0 0 14px rgba(124,92,255,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.x10-btn b { font: 800 13px/1 ui-monospace, Menlo, monospace; color: #D3C0FF; text-shadow: 0 0 10px rgba(167,139,255,.5); }
.x10-btn small { font: 600 7.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: rgba(201,182,255,.55); }
.x10-btn:active { transform: translateY(1px); filter: brightness(1.3); }
.x10-btn:disabled, .spin-btn:disabled { opacity: .55; cursor: default; filter: saturate(.6); }
.dock-btn .slash { position: absolute; width: 20px; height: 2px; background: rgba(201,182,255,.85); transform: rotate(-45deg); border-radius: 2px; }
.dock-btn.on { box-shadow: 0 0 0 1px rgba(46,233,205,.7), 0 0 14px rgba(46,233,205,.35); }

/* (panneau .sm-multi supprimé - remplacé par le rail + récap BUTIN) */

/* Socle */
.sm-base {
  position: absolute; left: -18px; right: -18px; top: 478px; height: 182px; border-radius: 24px 24px 18px 18px;
  background: linear-gradient(180deg, #12121A 0%, #0C0C12 40%, #07070B 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.2), 0 30px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05), 0 0 30px rgba(124,92,255,.12);
  z-index: 2;
}
.sm-base .topbar { position: absolute; left: 50%; top: 6px; width: 78%; height: 3px; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(90deg, transparent, #A78BFF 30%, #A78BFF 70%, transparent); box-shadow: 0 0 16px 3px rgba(147,110,255,.5); opacity: .9; }
.sm-base .tray { position: absolute; left: 50%; top: 78px; width: 250px; height: 38px; transform: translateX(-50%); border-radius: 11px; background: linear-gradient(180deg, #030305, #0A0A10); box-shadow: inset 0 4px 10px rgba(0,0,0,.9), inset 0 0 0 1px rgba(167,139,255,.14), inset 0 -5px 12px rgba(255,186,80,.12); }

.sm-rim { position: absolute; top: 140px; width: 2px; height: 300px; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(226,217,255,.45) 30%, rgba(167,139,255,.65) 60%, transparent); filter: blur(.6px); z-index: 2; }
.sm-rim.l { left: -2px; } .sm-rim.r { right: -2px; }

.sm-burst { position: absolute; left: 50%; top: 575px; pointer-events: none; z-index: 5; }
.sm-burst .bc {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF3C9 0%, #FFD87A 32%, #DDA23F 60%, #92621A 100%);
  box-shadow: inset 0 0 0 2px rgba(122,80,22,.55), 0 4px 10px rgba(0,0,0,.4);
}

/* Bannière du lot gagné */
@keyframes smPrize {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.92) }
  10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02) }
  14% { transform: translateX(-50%) translateY(0) scale(1) }
  86% { opacity: 1 }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) }
}
.sm-prize {
  position: absolute; left: 50%; top: 500px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; max-width: 640px; width: max-content;
  padding: 13px 22px; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,10,.96), rgba(12,11,6,.96));
  box-shadow: 0 0 0 1px rgba(255,216,122,.5), 0 0 30px rgba(255,190,80,.25), 0 16px 44px rgba(0,0,0,.6);
  animation: smPrize 3.6s ease both;
}
.sm-prize .ico { font-size: 20px; }
.sm-prize .txt {
  font: 700 15px/1.35 ui-monospace, Menlo, monospace; letter-spacing: .06em;
  color: #FFD87A; text-shadow: 0 0 12px rgba(255,190,80,.45); white-space: nowrap;
}
.sm-prize.imujackpot { box-shadow: 0 0 0 1px rgba(245,196,81,.85), 0 0 44px rgba(245,196,81,.4), 0 16px 44px rgba(0,0,0,.6); }
.sm-prize.fruit .txt, .sm-prize.doyengear .txt { color: #D3C0FF; text-shadow: 0 0 12px rgba(167,139,255,.5); }
.sm-prize.fruit, .sm-prize.doyengear, .sm-prize.doyenpack { box-shadow: 0 0 0 1px rgba(167,139,255,.6), 0 0 34px rgba(147,110,255,.3), 0 16px 44px rgba(0,0,0,.6); }
.sm-prize.materials .txt, .sm-prize.vipweek .txt { color: #7FF4E0; text-shadow: 0 0 12px rgba(46,233,205,.45); }
.sm-prize.materials, .sm-prize.vipweek { box-shadow: 0 0 0 1px rgba(46,233,205,.55), 0 0 30px rgba(46,233,205,.22), 0 16px 44px rgba(0,0,0,.6); }
.sm-prize.extreme .txt { color: #A9E7FF; text-shadow: 0 0 12px rgba(91,224,255,.5); }
.sm-prize.extreme { box-shadow: 0 0 0 1px rgba(91,224,255,.6), 0 0 34px rgba(91,224,255,.28), 0 16px 44px rgba(0,0,0,.6); }


/* ── Teintes serveur (hue) : bannière + table des lots ─────────────────────── */
.sm-prize.h-gold .txt { color: #FFD87A; text-shadow: 0 0 12px rgba(255,190,80,.45); }
.sm-prize.h-gold { box-shadow: 0 0 0 1px rgba(255,216,122,.5), 0 0 30px rgba(255,190,80,.25), 0 16px 44px rgba(0,0,0,.6); }
.sm-prize.h-teal .txt { color: #7FF4E0; text-shadow: 0 0 12px rgba(46,233,205,.45); }
.sm-prize.h-teal { box-shadow: 0 0 0 1px rgba(46,233,205,.55), 0 0 30px rgba(46,233,205,.22), 0 16px 44px rgba(0,0,0,.6); }
.sm-prize.h-violet .txt { color: #D3C0FF; text-shadow: 0 0 12px rgba(167,139,255,.5); }
.sm-prize.h-violet { box-shadow: 0 0 0 1px rgba(167,139,255,.6), 0 0 34px rgba(147,110,255,.3), 0 16px 44px rgba(0,0,0,.6); }
.sm-prize.h-astral .txt { color: #A9E7FF; text-shadow: 0 0 12px rgba(91,224,255,.55); }
.sm-prize.h-astral { box-shadow: 0 0 0 1px rgba(91,224,255,.7), 0 0 44px rgba(91,224,255,.35), 0 16px 44px rgba(0,0,0,.6); }
.pt-row.h-gold .prize-lbl { color: #FFD87A; text-shadow: 0 0 10px rgba(255,190,80,.3); }
.pt-row.h-teal .prize-lbl { color: #7FF4E0; text-shadow: 0 0 10px rgba(46,233,205,.35); }
.pt-row.h-violet .prize-lbl { color: #D3C0FF; text-shadow: 0 0 10px rgba(167,139,255,.4); }
.pt-row.h-astral .prize-lbl { color: #A9E7FF; text-shadow: 0 0 12px rgba(91,224,255,.45); }

/* ── Symboles (icônes du jeu - app-emojis, glow par rareté) ────────────────── */
.sym { position: relative; display: grid; place-items: center; }
.sym img { width: 80px; height: 80px; object-fit: contain; image-rendering: -webkit-optimize-contrast; user-select: none; -webkit-user-drag: none; }
.sym .fb { font-size: 56px; line-height: 1; }
.sym-coin img   { filter: drop-shadow(0 0 14px rgba(255,190,80,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sym-ame img    { filter: drop-shadow(0 0 14px rgba(255,92,138,.38)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sym-fruit img  { filter: drop-shadow(0 0 14px rgba(167,139,255,.42)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sym-ticket img { filter: drop-shadow(0 0 14px rgba(46,233,205,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sym-doyen img  { filter: drop-shadow(0 0 16px rgba(138,92,255,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sym-imu img    { filter: drop-shadow(0 0 18px rgba(91,224,255,.6)) drop-shadow(0 0 40px rgba(91,224,255,.25)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }

/* ── Overlays plein écran ──────────────────────────────────────────────────── */
.sm-bigflash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(52% 62% at 50% 55%, rgba(46,233,205,.13) 0%, rgba(255,190,80,.07) 40%, transparent 72%); animation: dvFlashFull 1.1s ease-out both; z-index: 30; }
.sm-vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 130% at 50% 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%); z-index: 20; }
.sm-grain { position: fixed; inset: 0; opacity: .2; mix-blend-mode: overlay; pointer-events: none; z-index: 21; }

/* ── Chrome (haut-gauche, HUD, dock) ──────────────────────────────────────── */
.sm-topbar { position: fixed; left: 18px; top: 16px; display: flex; gap: 8px; z-index: 40; }
.sm-topbar .chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px;
  background: rgba(10,10,15,.78); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(167,139,255,.3);
  font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: #C9B6FF;
}
.sm-topbar .chip:hover { box-shadow: 0 0 0 1px rgba(167,139,255,.6), 0 0 14px rgba(124,92,255,.3); color: #E4DBFF; }
.sm-topbar .chip.onyx .dia { color: #A78BFF; font-size: 13px; }
.sm-topbar .chip.onyx .plus { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(167,139,255,.18); box-shadow: inset 0 0 0 1px rgba(167,139,255,.4); color: #E4DBFF; font-size: 11px; }
.sm-hud { position: fixed; left: 24px; bottom: 20px; font: 500 11px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: rgba(201,182,255,.38); pointer-events: none; z-index: 40; }
.sm-dock { position: fixed; right: 22px; bottom: 18px; display: flex; gap: 8px; z-index: 40; }
.dock-btn {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,10,15,.75); box-shadow: 0 0 0 1px rgba(167,139,255,.3);
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 ui-monospace, Menlo, monospace; color: rgba(201,182,255,.85);
}
.dock-btn:hover { box-shadow: 0 0 0 1px rgba(167,139,255,.6), 0 0 12px rgba(124,92,255,.3); }
.dock-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: #2EE9CD; box-shadow: 0 0 8px rgba(46,233,205,.6); }
.dock-btn .slash { position: absolute; width: 20px; height: 2px; background: rgba(201,182,255,.85); transform: rotate(-45deg); border-radius: 2px; }

/* ── Feed des gros gains ───────────────────────────────────────────────────── */
.sm-feed {
  position: fixed; right: 18px; bottom: 62px; width: 258px; max-height: 46vh; overflow: auto; z-index: 41;
  border-radius: 16px; background: linear-gradient(180deg, #101018 0%, #0A0A10 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.35), 0 0 40px rgba(124,92,255,.2), 0 20px 60px rgba(0,0,0,.6);
  padding: 14px 14px 10px;
}
.sm-feed .head { font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .22em; color: #C9B6FF; margin-bottom: 10px; }
.sm-feed .row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(167,139,255,.1); }
.sm-feed .row:first-child { border-top: 0; }
.sm-feed img { width: 26px; height: 26px; border-radius: 50%; background: #14141E; box-shadow: 0 0 0 1px rgba(167,139,255,.25); }
.sm-feed .who { flex: 1; min-width: 0; }
.sm-feed .name { font: 600 11px/1.3 ui-monospace, Menlo, monospace; color: #E4DBFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-feed .when { font: 500 9px/1.3 ui-monospace, Menlo, monospace; color: rgba(201,182,255,.4); }
.sm-feed .amt { text-align: right; font: 700 12px/1.2 ui-monospace, Menlo, monospace; color: #FFD87A; text-shadow: 0 0 8px rgba(255,190,80,.35); }
.sm-feed .amt .x { display: block; font-size: 9px; color: rgba(201,182,255,.55); }
.sm-feed .empty { font: 500 10.5px/1.6 ui-monospace, Menlo, monospace; color: rgba(201,182,255,.45); padding: 6px 0 8px; }

/* ── Modales (table des gains / connexion) ────────────────────────────────── */
.sm-modal { position: fixed; inset: 0; z-index: 50; }
.sm-modal .backdrop { position: absolute; inset: 0; background: rgba(4,4,8,.72); backdrop-filter: blur(6px); cursor: pointer; }
.sm-modal .panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto;
  border-radius: 20px; background: linear-gradient(180deg, #101018 0%, #0A0A10 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.35), 0 0 40px rgba(124,92,255,.25), 0 30px 80px rgba(0,0,0,.7);
  padding: 26px 32px 22px;
}
.pt-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.pt-head span { font: 700 13px/1 ui-monospace, Menlo, monospace; letter-spacing: .22em; color: #C9B6FF; }
.pt-head .sub { font: 500 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: rgba(201,182,255,.45); }
.pt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(167,139,255,.1); }
.pt-row:last-of-type { border-bottom: 0; }
.pt-row .combo { display: flex; align-items: center; gap: 8px; flex: none; }
.pt-row .note { font: 500 10px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: rgba(201,182,255,.55); margin-left: 4px; }
.pt-row .pct { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: rgba(167,139,255,.12); box-shadow: inset 0 0 0 1px rgba(167,139,255,.25); font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: rgba(201,182,255,.75); white-space: nowrap; }
.pt-row .prize-lbl { flex: 1; text-align: right; font: 700 11.5px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #FFD87A; text-shadow: 0 0 10px rgba(255,190,80,.3); }
.pt-row.tier-fruit .prize-lbl, .pt-row.tier-doyengear .prize-lbl, .pt-row.tier-doyenpack .prize-lbl { color: #D3C0FF; text-shadow: 0 0 10px rgba(167,139,255,.4); }
.pt-row.tier-materials .prize-lbl, .pt-row.tier-vipweek .prize-lbl { color: #7FF4E0; text-shadow: 0 0 10px rgba(46,233,205,.35); }
.pt-row.tier-extreme .prize-lbl { color: #A9E7FF; text-shadow: 0 0 10px rgba(91,224,255,.4); }
.pt-row.tier-imujackpot .prize-lbl { color: #F5C451; text-shadow: 0 0 12px rgba(245,196,81,.45); }
.pt-row.nothing { opacity: .82; }
.pt-row.nothing .prize-lbl { color: rgba(201,182,255,.5); text-shadow: none; font-weight: 600; }
.pt-row.nothing .nothing-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(201,182,255,.25); font: 700 13px/1 ui-monospace, Menlo, monospace; color: rgba(201,182,255,.55); }
.pt-mini { width: 22px; height: 22px; position: relative; overflow: visible; flex: none; }
.pt-mini .sym { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pt-mini .sym img { width: 22px; height: 22px; }
.pt-mini .sym .fb { font-size: 16px; }
.pt-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(167,139,255,.18); }
.pt-foot .session { font: 500 10.5px/1.7 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: rgba(201,182,255,.6); text-align: center; }
.pt-foot .fine { font: 500 9.5px/1.7 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: rgba(201,182,255,.35); text-align: center; }
.pt-foot .fine a { color: rgba(201,182,255,.6); text-decoration: underline; }

.panel.login { text-align: center; padding: 38px 32px 30px; }
.panel.login .big { font-size: 44px; }
.panel.login h2 { margin: 10px 0 8px; font: 700 18px/1.3 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: #E4DBFF; }
.panel.login p { margin: 0 0 20px; font: 500 12px/1.7 ui-monospace, Menlo, monospace; color: rgba(201,182,255,.6); }
.panel.login .cta {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 26px; border-radius: 999px;
  background: linear-gradient(180deg, #B69CFF, #8E66F0); color: #0B0714; font: 700 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  box-shadow: 0 10px 26px rgba(167,139,255,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.panel.login .cta:hover { filter: brightness(1.08); color: #0B0714; }
.panel.login .ghost { display: block; margin-top: 14px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: rgba(201,182,255,.5); }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.sm-toast {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 60;
  max-width: min(420px, calc(100vw - 40px)); padding: 12px 18px; border-radius: 12px;
  background: rgba(12,12,18,.94); box-shadow: 0 0 0 1px rgba(167,139,255,.4), 0 14px 40px rgba(0,0,0,.6);
  font: 600 12px/1.5 ui-monospace, Menlo, monospace; color: #E4DBFF; text-align: center;
  animation: smToast 3.4s ease both;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sm-hud { display: none; }
  .sm-topbar { left: 12px; top: 12px; }
  .sm-topbar .chip { height: 32px; padding: 0 12px; font-size: 10px; }
  .sm-dock { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .dock-btn { width: 38px; height: 38px; }
  .sm-feed { right: 12px; left: 12px; width: auto; bottom: 64px; }
  .sm-modal .panel { padding: 22px 18px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ×10 v2 - rail de butin (.smx-), récap BUTIN (.smr-), icônes de lots (.ptr-),
   fixes console (prescriptions du directeur artistique) + mobile (.smm-).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fixes console (DA) : play centré sur l'axe des rouleaux, ×10 discret au repos ── */
.sm-console { display: grid; grid-template-columns: 1fr auto 1fr; }
.sm-console .meter:first-child { justify-self: start; }
.sm-console .meter:last-child { justify-self: end; }
.x10-btn {
  box-shadow: 0 0 0 1px rgba(167,139,255,.30), 0 0 8px rgba(124,92,255,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.x10-btn:hover, .x10-btn:focus-visible {
  box-shadow: 0 0 0 1px rgba(167,139,255,.55), 0 0 14px rgba(124,92,255,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.x10-btn small { font: 600 8px/1 ui-monospace, Menlo, monospace; letter-spacing: .18em; }

/* ── Icône de la récompense dans la table des lots (.ptr-) ─────────────────── */
.pt-row .ptr-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1; min-width: 0; }
.pt-row .ptr-right .prize-lbl { flex: 0 1 auto; min-width: 0; }
.ptr-ico {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(167,139,255,.18);
}
.ptr-ico img { width: 28px; height: 28px; object-fit: contain; image-rendering: -webkit-optimize-contrast; user-select: none; -webkit-user-drag: none; }
.ptr-ico .ptr-fb { font-size: 19px; line-height: 1; }
.pt-row.h-gold   .ptr-ico { box-shadow: inset 0 0 0 1px rgba(255,216,122,.4); }
.pt-row.h-gold   .ptr-ico img { filter: drop-shadow(0 0 7px rgba(255,190,80,.45)); }
.pt-row.h-teal   .ptr-ico { box-shadow: inset 0 0 0 1px rgba(46,233,205,.4); }
.pt-row.h-teal   .ptr-ico img { filter: drop-shadow(0 0 7px rgba(46,233,205,.42)); }
.pt-row.h-violet .ptr-ico { box-shadow: inset 0 0 0 1px rgba(167,139,255,.45); }
.pt-row.h-violet .ptr-ico img { filter: drop-shadow(0 0 7px rgba(167,139,255,.48)); }
.pt-row.h-astral .ptr-ico { box-shadow: inset 0 0 0 1px rgba(91,224,255,.5), 0 0 10px rgba(91,224,255,.14); }
.pt-row.h-astral .ptr-ico img { filter: drop-shadow(0 0 8px rgba(91,224,255,.55)); }
@media (max-width: 720px) { .ptr-ico { width: 28px; height: 28px; } .ptr-ico img { width: 24px; height: 24px; } }

/* ═══ RAIL DE BUTIN ×10 (.smx-) - pile de jetons bas -> haut, vol FLIP ═══════ */
.smx-chip.h-gold   { --smx-c: 255,216,122; --smx-txt: #FFD87A; }
.smx-chip.h-teal   { --smx-c: 46,233,205;  --smx-txt: #7FF4E0; }
.smx-chip.h-violet { --smx-c: 167,139,255; --smx-txt: #D3C0FF; }
.smx-chip.h-astral { --smx-c: 91,224,255;  --smx-txt: #A9E7FF; }

.smx-rail {
  position: absolute; left: 1300px; bottom: 126px; width: 220px;
  z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.smx-rail.smx-on { opacity: 1; }
.smx-rail[hidden] { display: none; }
.smx-track { position: relative; height: 612px; }
.smx-track::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; filter: blur(.4px);
  background: linear-gradient(180deg, transparent, rgba(167,139,255,.32) 30%, rgba(167,139,255,.32) 70%, transparent);
}
.smx-base {
  position: relative; margin-top: 10px; height: 26px; padding: 0 10px; border-radius: 9px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #101018 0%, #0A0A10 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.smx-base::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(167,139,255,.7) 30%, rgba(167,139,255,.7) 70%, transparent);
  box-shadow: 0 0 10px 2px rgba(147,110,255,.32);
}
.smx-base span { font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .26em; color: rgba(201,182,255,.55); }
.smx-base b    { font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: #C9B6FF; text-shadow: 0 0 10px rgba(167,139,255,.4); }

.smx-chip {
  position: absolute; left: 0; right: 0; height: 54px;
  bottom: calc(var(--smx-i, 0) * 62px);
  transform: translateX(var(--smx-jx, 0px)) rotate(var(--smx-rot, 0deg));
  will-change: transform;
}
.smx-chip .smx-in {
  position: relative; height: 100%;
  display: flex; align-items: center; gap: 9px; padding: 0 12px 0 8px;
  border-radius: 13px;
  background: linear-gradient(180deg, #14141E 0%, #0D0D14 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--smx-c), .42),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.5),
    0 0 12px rgba(var(--smx-c), .10);
}
.smx-chip .smx-in::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 30%, transparent 46%);
}
.smx-chip .smx-in::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 16px rgba(var(--smx-c), .38), 0 0 36px rgba(var(--smx-c), .16);
  opacity: 0;
}
.smx-chip.smx-big .smx-in { box-shadow: inset 0 0 0 1.5px rgba(var(--smx-c), .65), inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.55), 0 0 16px rgba(var(--smx-c), .16); }
.smx-chip.smx-big .smx-in::after { opacity: .55; }
.smx-chip.h-astral .smx-in::after { opacity: 1; animation: smxGlowBreathe 2.1s ease-in-out infinite alternate; }

.smx-chip .smx-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.smx-chip .smx-ico img { width: 38px; height: 38px; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 0 8px rgba(var(--smx-c), .45)) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.smx-chip.smx-big .smx-ico img { width: 42px; height: 42px; }
.smx-chip .smx-ico .fb { font-size: 26px; line-height: 1; filter: drop-shadow(0 0 8px rgba(var(--smx-c), .45)); }
.smx-chip .smx-lbl {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 10.5px/1.3 ui-monospace, Menlo, monospace; letter-spacing: .04em;
  color: var(--smx-txt); text-shadow: 0 0 10px rgba(var(--smx-c), .3);
}
.smx-chip.smx-big .smx-lbl { font-weight: 700; }

.smx-chip .smx-flash {
  position: absolute; inset: -3px; border-radius: 15px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--smx-c), .9), 0 0 26px rgba(var(--smx-c), .55), inset 0 0 22px rgba(var(--smx-c), .28);
}
.smx-chip.smx-landed .smx-flash { animation: smxFlash .55s ease-out both; }
.smx-chip.smx-landed .smx-in    { animation: smxLand .32s cubic-bezier(.3,1.6,.5,1) both; }

.smx-sparkle {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: rgb(var(--smx-c)); box-shadow: 0 0 10px 2px rgba(var(--smx-c), .55); pointer-events: none;
}
.smx-dust {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #8A8A96; opacity: 0; filter: blur(.5px); pointer-events: none;
  animation: smxDust .7s ease-in both;
}
@keyframes smxLand  { 0% { transform: scale(1) } 38% { transform: scale(1.07, .88) } 72% { transform: scale(.965, 1.05) } 100% { transform: none } }
@keyframes smxFlash { 0% { opacity: 0 } 16% { opacity: 1 } 100% { opacity: 0 } }
@keyframes smxGlowBreathe { from { opacity: .45 } to { opacity: 1 } }
@keyframes smxDust  { 0% { transform: translateY(0); opacity: 0 } 16% { opacity: .32 } 100% { transform: translateY(64px); opacity: 0 } }

/* Rail mobile : bande horizontale posée sur le socle (le butin tombe dans le bac) */
@media (max-width: 720px) {
  .smx-rail { left: 50%; margin-left: -232px; width: 464px; bottom: 168px; }
  .smx-base, .smx-track::before { display: none; }
  .smx-track {
    height: 56px; overflow-x: auto; overflow-y: hidden;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .smx-track::-webkit-scrollbar { display: none; }
  .smx-chip {
    left: calc(var(--smx-i, 0) * 62px); right: auto; bottom: 0;
    width: 56px; height: 56px;
  }
  .smx-chip .smx-in { justify-content: center; padding: 0; }
  .smx-chip .smx-lbl { display: none; }
  .smx-chip .smx-ico img, .smx-chip.smx-big .smx-ico img { width: 32px; height: 32px; }
  .smx-chip .smx-ico .fb { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .smx-chip .smx-in::after, .smx-chip.smx-landed .smx-in, .smx-dust { animation: none !important; }
  .smx-chip.smx-landed .smx-flash { animation-duration: .01s; }
}

/* ═══ RÉCAP "BUTIN" (.smr-) - l'écran de dopamine de fin de séquence ═════════ */
@keyframes smrFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes smrPanelIn { from { opacity: 0; transform: translateY(14px) scale(.95) } to { opacity: 1; transform: none } }
@keyframes smrHeroIn { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
@keyframes smrTileIn { from { opacity: 0; transform: translateY(10px) scale(.94) } to { opacity: 1; transform: none } }
@keyframes smrRaysSpin { to { transform: translate(-50%,-50%) rotate(360deg) } }
@keyframes smrBreathe { from { opacity: .45 } to { opacity: 1 } }
@keyframes smrSweep { 0% { transform: translateX(-170%) skewX(-18deg) } 46% { transform: translateX(440%) skewX(-18deg) } 100% { transform: translateX(440%) skewX(-18deg) } }
@keyframes smrAstralPulse {
  from { box-shadow: inset 0 0 0 1px rgba(91,224,255,.5), 0 0 8px rgba(91,224,255,.08) }
  to   { box-shadow: inset 0 0 0 1px rgba(91,224,255,.85), 0 0 22px rgba(91,224,255,.3) }
}

.smr-overlay { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 20px; overflow: hidden; }
.smr-backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(4,4,8,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: smrFade .35s ease both;
}
.smr-rays {
  display: block; position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax;
  transform: translate(-50%,-50%); pointer-events: none;
  background: repeating-conic-gradient(from -8deg,
    rgba(255,216,122,.06) 0deg 5deg, transparent 5deg 22deg,
    rgba(167,139,255,.055) 22deg 27deg, transparent 27deg 45deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.5) 38%, transparent 66%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.5) 38%, transparent 66%);
  animation: smrRaysSpin 36s linear infinite, smrFade .9s ease .15s both;
}
.smr-panel {
  position: relative; width: min(600px, 100%); max-height: min(860px, calc(100dvh - 32px));
  overflow: auto; outline: none; border-radius: 22px;
  background: linear-gradient(180deg, #101018 0%, #0A0A10 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.4), 0 0 44px rgba(124,92,255,.28), 0 30px 80px rgba(0,0,0,.7);
  padding: 20px 22px 18px;
  animation: smrPanelIn .42s cubic-bezier(.2,.9,.27,1.04) both;
}
.smr-empty .smr-panel { width: min(420px, 100%); }
.smr-head { display: flex; align-items: center; gap: 12px; }
.smr-title { font: 800 14px/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; color: #E4DBFF; text-shadow: 0 0 14px rgba(167,139,255,.35); }
.smr-sub { margin-left: auto; font: 600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em; color: rgba(201,182,255,.45); }
.smr-x {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(167,139,255,.3);
  color: rgba(201,182,255,.8); font: 700 12px/1 ui-monospace, Menlo, monospace;
}
.smr-x:hover { box-shadow: inset 0 0 0 1px rgba(167,139,255,.6); color: #E4DBFF; }
.smr-bar {
  height: 2px; margin: 12px 0 16px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(167,139,255,.55) 30%, rgba(167,139,255,.55) 70%, transparent);
  box-shadow: 0 0 12px rgba(147,110,255,.3);
}
.smr-tile.h-gold,   .smr-hero.h-gold   { --smr-c: #FFD87A; --smr-line: rgba(255,216,122,.45); --smr-glow: rgba(255,190,80,.28); }
.smr-tile.h-teal,   .smr-hero.h-teal   { --smr-c: #7FF4E0; --smr-line: rgba(46,233,205,.45);  --smr-glow: rgba(46,233,205,.24); }
.smr-tile.h-violet, .smr-hero.h-violet { --smr-c: #D3C0FF; --smr-line: rgba(167,139,255,.5);  --smr-glow: rgba(147,110,255,.3); }
.smr-tile.h-astral, .smr-hero.h-astral { --smr-c: #A9E7FF; --smr-line: rgba(91,224,255,.6);   --smr-glow: rgba(91,224,255,.32); }
.smr-hero {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 20px 16px 16px;
  border-radius: 16px; text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 70%),
    radial-gradient(110% 85% at 50% -12%, var(--smr-glow), transparent 70%),
    linear-gradient(180deg, #0E0E16, #0A0A10);
  box-shadow: inset 0 0 0 1px var(--smr-line), 0 0 30px -8px var(--smr-glow);
  animation: smrHeroIn .5s cubic-bezier(.2,.9,.3,1.1) .08s both;
}
.smr-hero-rays {
  display: block; position: absolute; left: 50%; top: 68px; width: 320px; height: 320px;
  transform: translate(-50%,-50%); pointer-events: none; opacity: .32;
  background: repeating-conic-gradient(from 0deg, var(--smr-glow) 0deg 7deg, transparent 7deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 70%);
  mask-image: radial-gradient(closest-side, #000, transparent 70%);
  animation: smrRaysSpin 22s linear infinite;
}
.smr-hero-ico { position: relative; width: 96px; height: 96px; margin: 0 auto 10px; display: grid; place-items: center; }
.smr-hero-ico::before {
  content: ""; position: absolute; inset: -34px; border-radius: 50%;
  background: radial-gradient(circle, var(--smr-glow) 0%, transparent 66%);
  animation: smrBreathe 2.4s ease-in-out infinite alternate;
}
.smr-hero-ico img { position: relative; width: 88px; height: 88px; object-fit: contain; -webkit-user-drag: none; user-select: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px var(--smr-glow)); }
.smr-hero-ico .fb { position: relative; font-size: 68px; line-height: 1; filter: drop-shadow(0 0 18px var(--smr-glow)); }
.smr-hero-name { position: relative; font: 700 15.5px/1.35 ui-monospace, Menlo, monospace; letter-spacing: .05em; color: var(--smr-c); text-shadow: 0 0 14px var(--smr-glow); }
.smr-hero-sub { position: relative; margin-top: 3px; font: 600 10.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: rgba(228,219,255,.72); }
.smr-hero-tag {
  position: relative; display: inline-flex; align-items: center; height: 20px; margin-top: 9px; padding: 0 11px;
  border-radius: 999px; font: 700 8.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .24em;
  color: var(--smr-c); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--smr-line);
}
.smr-hero-sweep {
  display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: smrSweep 3.8s ease-in-out 1.1s infinite;
}
.smr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.smr-tile {
  position: relative; padding: 12px 10px 11px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  box-shadow: inset 0 0 0 1px var(--smr-line, rgba(167,139,255,.16));
  animation: smrTileIn .38s cubic-bezier(.2,.8,.3,1.05) both;
}
.smr-tile.h-astral { animation: smrTileIn .38s cubic-bezier(.2,.8,.3,1.05) both, smrAstralPulse 2s ease-in-out infinite alternate; }
.smr-ico { width: 38px; height: 38px; margin: 0 auto 8px; display: grid; place-items: center; }
.smr-ico img { width: 34px; height: 34px; object-fit: contain; -webkit-user-drag: none; filter: drop-shadow(0 0 10px var(--smr-glow, rgba(124,92,255,.25))) drop-shadow(0 5px 8px rgba(0,0,0,.5)); }
.smr-ico .fb { font-size: 26px; line-height: 1; }
.smr-qty { font: 800 19px/1.1 ui-monospace, Menlo, monospace; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--smr-c, #E4DBFF); text-shadow: 0 0 12px var(--smr-glow, transparent); }
.smr-lbl { margin-top: 4px; font: 600 8.5px/1.35 ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(201,182,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smr-void { padding: 24px 10px 6px; text-align: center; }
.smr-void-ico {
  width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(167,139,255,.28);
  font: 700 24px/1 ui-monospace, Menlo, monospace; color: rgba(201,182,255,.55);
}
.smr-void-txt { font: 700 15px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #E4DBFF; }
.smr-void-sub { margin-top: 6px; font: 500 10.5px/1.7 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: rgba(201,182,255,.55); }
.smr-stats { margin-top: 14px; text-align: center; font: 600 10px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .2em; color: rgba(201,182,255,.5); animation: smrFade .4s ease both; }
.smr-actions { display: flex; gap: 10px; margin-top: 14px; animation: smrFade .4s ease both; }
.smr-btn { flex: 1; height: 46px; border-radius: 999px; font: 700 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; transition: filter .15s ease, box-shadow .15s ease; }
.smr-btn:active { transform: translateY(1px); }
.smr-ghost { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(167,139,255,.3); color: rgba(201,182,255,.85); }
.smr-ghost:hover { box-shadow: inset 0 0 0 1px rgba(167,139,255,.55); color: #E4DBFF; }
.smr-accent { background: linear-gradient(180deg, #56F2DB 0%, #1CC0A6 100%); color: #04231D; box-shadow: 0 10px 26px rgba(46,233,205,.26), inset 0 1px 0 rgba(255,255,255,.45); }
.smr-accent:hover { filter: brightness(1.07); }
@media (max-width: 720px) {
  .smr-overlay { padding: 10px; }
  .smr-panel { width: 100%; max-height: calc(100dvh - 20px); border-radius: 18px; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); }
  .smr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smr-actions { flex-direction: column-reverse; }
  .smr-btn { flex: none; width: 100%; }
  .smr-hero-ico { width: 84px; height: 84px; }
  .smr-hero-ico img { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .smr-overlay, .smr-overlay * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ═══ Mobile (.smm-) : bouton ×10 flottant (la console scalée est trop petite) ═══ */
.smm-x10 { display: none; }
@media (max-width: 720px) {
  .x10-btn { display: none; }
  .smm-x10 {
    position: fixed; z-index: 40; left: 14px; bottom: max(14px, env(safe-area-inset-bottom));
    height: 48px; padding: 0 18px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #241a3f, #14102a);
    box-shadow: 0 0 0 1px rgba(167,139,255,.45), 0 0 16px rgba(124,92,255,.3), 0 10px 26px rgba(0,0,0,.5);
    color: #D3C0FF; font: 800 14px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em;
  }
  .smm-x10 small { font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: rgba(201,182,255,.6); }
  .smm-x10:active { transform: translateY(1px); filter: brightness(1.25); }
  .smm-x10:disabled { opacity: .55; filter: saturate(.6); cursor: default; }
  .dock-btn { width: 44px; height: 44px; }
}
.smm-x10[hidden], .smx-rail[hidden] { display: none; }

/* ── Polish v9.1 : hint passer, icônes réelles bannière/feed ────────────────── */
.smx-skiphint {
  position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 44;
  font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .22em;
  color: rgba(201,182,255,.0); pointer-events: none; transition: color .5s ease;
}
.smx-skiphint.on { color: rgba(201,182,255,.5); }
.smx-skiphint[hidden] { display: none; }
.sm-prize .ico img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 8px rgba(255,190,80,.35)); }
.sm-feed .amt img.lot-ico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* ═══ v10 : logo Onyx + panneaux permanents (la page UTILISE son espace) ═════ */
.onyx-logo { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 6px rgba(167,139,255,.5)); }
.mlogo { width: 10px; height: 10px; object-fit: contain; vertical-align: -1px; filter: drop-shadow(0 0 4px rgba(167,139,255,.45)); }
.smm-x10 .onyx-logo { width: 18px; height: 18px; }

/* Panneau latéral gauche : table des lots TOUJOURS visible (>=1280px) */
.side-lots { display: none; }
@media (min-width: 1280px) {
  .side-lots {
    display: flex; flex-direction: column;
    position: fixed; left: 18px; top: 64px; bottom: 64px; width: 344px; z-index: 39;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(16,16,24,.92) 0%, rgba(10,10,16,.92) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(167,139,255,.28), 0 20px 60px rgba(0,0,0,.5);
    padding: 14px 6px 10px 14px;
  }
  .side-lots .head { flex: none; display: flex; align-items: baseline; justify-content: space-between; padding: 0 14px 10px 2px; }
  .side-lots .head span { font: 700 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .22em; color: #C9B6FF; }
  .side-lots .head .sub { font: 500 8px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: rgba(201,182,255,.4); }
  .side-lots .rows { overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(167,139,255,.25) transparent; }
  .side-lots .rows::-webkit-scrollbar { width: 5px; }
  .side-lots .rows::-webkit-scrollbar-thumb { background: rgba(167,139,255,.25); border-radius: 999px; }
  /* lignes plus compactes dans le panneau latéral */
  .side-lots .pt-row { padding: 7px 0; gap: 10px; }
  .side-lots .pt-row .prize-lbl { font-size: 10px; line-height: 1.45; text-align: right; white-space: normal; }
  .side-lots .pt-row .note { display: none; }   /* le détail complet reste dans la modale i */
  .side-lots .pt-row .pct { margin-left: 4px; }
  .side-lots .ptr-ico { width: 28px; height: 28px; }
  .side-lots .ptr-ico img { width: 24px; height: 24px; }

  /* Feed : panneau permanent en haut à droite */
  .sm-feed { right: 18px; left: auto; top: 64px; bottom: auto; width: clamp(240px, 16vw, 300px); max-height: 34vh; }
  /* la machine reste la star : dock allégé (la table et le feed sont déjà à l'écran) */
  #ptBtn, #feedBtn { display: none; }
}

/* ═══ v11 design : feed sous le bouton menu + table des lots compacte ═════════ */
@media (min-width: 1280px) {
  /* le bouton menu (fixe top:22 right:26, 46px) reste dégagé */
  .sm-feed { top: 86px; max-height: 38vh; }
  .side-lots { width: 356px; }
}

/* Rangées compactes de la table latérale */
.slr-group {
  margin: 12px 2px 6px; padding-top: 10px;
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; color: rgba(201,182,255,.42);
  border-top: 1px solid rgba(167,139,255,.14);
}
.slr-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.side-lots .slr {
  display: grid; grid-template-columns: auto 26px minmax(0,1fr) auto;
  align-items: center; gap: 9px;
  padding: 6px 8px 6px 6px; margin: 1px 0; border-radius: 10px;
  transition: background .18s ease;
}
.side-lots .slr:hover { background: rgba(167,139,255,.08); }
.slr-combo { display: flex; gap: 3px; }
.slr-mini {
  width: 26px; height: 26px; border-radius: 7px; position: relative; overflow: visible; flex: none;
  background: linear-gradient(180deg, rgba(52,48,74,.85) 0%, rgba(28,26,42,.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(167,139,255,.16);
}
.slr-mini .sym { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.slr-mini .sym img { width: 20px; height: 20px; }
.slr-mini .sym .fb { font-size: 14px; }
.slr-ico { display: grid; place-items: center; font-size: 15px; }
.slr-ico img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.slr-lbl {
  font: 600 11px/1.3 'Chakra Petch', ui-monospace, monospace; color: #E8E4F5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.slr.h-gold .slr-lbl { color: #FFDf9E; }
.slr.h-teal .slr-lbl { color: #9FF0E2; }
.slr.h-violet .slr-lbl { color: #D8C9FF; }
.slr.h-astral .slr-lbl { color: #EFE9FF; text-shadow: 0 0 12px rgba(167,139,255,.5); }
.slr-pct {
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em;
  color: rgba(201,182,255,.75); background: rgba(167,139,255,.10);
  border: 1px solid rgba(167,139,255,.22); border-radius: 999px; padding: 3px 7px;
  white-space: nowrap;
}
.slr.nothing { opacity: .55; grid-template-columns: 26px minmax(0,1fr) auto; }
.slr-x { font-size: 15px; text-align: center; color: #8A86A0; }

/* ═══ Toast "plus assez d'Onyx" premium ═══════════════════════════════════════ */
.sm-toast.onyx {
  max-width: min(500px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(26,20,44,.97) 0%, rgba(14,12,24,.97) 100%);
  box-shadow: 0 0 0 1px rgba(167,139,255,.55), 0 0 34px rgba(124,92,255,.28), 0 18px 50px rgba(0,0,0,.65);
  animation-duration: 8s;
  text-align: left;
}
.sm-toast.onyx .ot-row { display: flex; align-items: center; gap: 13px; }
.sm-toast.onyx .ot-logo {
  width: 38px; height: 38px; flex: none; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(167,139,255,.75));
  animation: otLogo 2.2s ease-in-out infinite;
}
@keyframes otLogo { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.sm-toast.onyx .ot-txt { display: grid; gap: 3px; min-width: 0; }
.sm-toast.onyx .ot-txt b { font: 700 14px/1.2 'Chakra Petch', ui-monospace, monospace; color: #F2EDFF; letter-spacing: .02em; }
.sm-toast.onyx .ot-txt span { font: 600 11px/1.45 ui-monospace, Menlo, monospace; color: rgba(216,201,255,.75); }
.sm-toast.onyx .ot-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 13px; padding: 12px 16px; border-radius: 12px; text-decoration: none;
  font: 700 13px/1 'Chakra Petch', ui-monospace, monospace; letter-spacing: .14em; color: #241500;
  background: linear-gradient(180deg, #FFE9AE 0%, #FFC95C 45%, #F0A93C 100%);
  box-shadow: 0 0 0 1px rgba(255,214,130,.65), 0 0 22px rgba(255,190,80,.45), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65);
  animation: otPulse 1.6s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}
.sm-toast.onyx .ot-cta:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.07); }
.sm-toast.onyx .ot-cta .ot-arr { font-size: 15px; transform: translateY(-.5px); }
@keyframes otPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,214,130,.65), 0 0 18px rgba(255,190,80,.38), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65); }
  50% { box-shadow: 0 0 0 1px rgba(255,224,150,.9), 0 0 36px rgba(255,200,90,.65), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65); }
}

/* ═══ Rideau d'ouverture ══════════════════════════════════════════════════════ */
.sm-curtain { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; }
.sm-curtain .c-half {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 3px, rgba(0,0,0,0) 3px 30px, rgba(0,0,0,.36) 30px 56px),
    linear-gradient(180deg, #241B44 0%, #16112E 55%, #0D0A1E 100%);
  box-shadow: inset 0 -80px 120px rgba(0,0,0,.55);
  transition: transform 1.05s cubic-bezier(.65,.02,.28,1);
}
.sm-curtain .c-half.left  { left: 0;  border-right: 3px solid rgba(255,214,130,.55); box-shadow: inset -30px 0 60px rgba(0,0,0,.5), 8px 0 30px rgba(255,190,80,.14); }
.sm-curtain .c-half.right { right: 0; border-left: 3px solid rgba(255,214,130,.55); box-shadow: inset 30px 0 60px rgba(0,0,0,.5), -8px 0 30px rgba(255,190,80,.14); }
.sm-curtain .c-emblem {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 10px; text-align: center;
  transition: opacity .5s ease, transform .55s ease;
}
.sm-curtain .c-emblem img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 26px rgba(167,139,255,.85)); animation: otLogo 2.2s ease-in-out infinite; }
.sm-curtain .c-emblem span { font: 700 20px/1 'Chakra Petch', ui-monospace, monospace; letter-spacing: .34em; color: #FFDf9E; text-shadow: 0 0 24px rgba(255,190,80,.5); }
.sm-curtain .c-emblem small { font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .5em; color: rgba(216,201,255,.55); }
.sm-curtain.open .c-emblem { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
.sm-curtain.open .c-half.left  { transform: translateX(-104%); }
.sm-curtain.open .c-half.right { transform: translateX(104%); }
.sm-curtain.open .c-half { transition-delay: .22s; }

/* La scène s'allume derrière le rideau */
.sm-stage { animation: smBootFade 1.1s ease .45s backwards; }
@keyframes smBootFade { from { opacity: 0; filter: brightness(.35) saturate(.6); } }

/* ═══ Cadeau fantôme : [hidden] gagne TOUJOURS sur display:flex ═══════════════ */
.sm-prize[hidden] { display: none !important; }

/* ═══ Icônes de la table latérale agrandies ═══════════════════════════════════ */
.side-lots .slr { grid-template-columns: auto 30px minmax(0,1fr) auto; gap: 10px; padding: 7px 8px 7px 6px; }
.slr-mini { width: 30px; height: 30px; border-radius: 8px; }
.slr-mini .sym img { width: 24px; height: 24px; }
.slr-mini .sym .fb { font-size: 16px; }
.slr-ico { font-size: 18px; }
.slr-ico img { width: 27px; height: 27px; }
.slr-lbl { font-size: 12px; }
.slr.nothing { grid-template-columns: 30px minmax(0,1fr) auto; }

/* ═══ Fond : la bannière du serveur, floutée façon cinéma ═════════════════════ */
body::before {
  content: ""; position: fixed; inset: -48px; z-index: -2;
  background: url('/boutique-economie/assets/bffr_banner.png?v=1') center 32% / cover no-repeat;
  filter: blur(11px) brightness(.46) saturate(.92);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(56% 66% at 50% 56%, rgba(7,7,10,.80) 0%, rgba(7,7,10,.46) 55%, rgba(9,8,16,.10) 100%),
    linear-gradient(180deg, rgba(11,9,22,.42) 0%, rgba(11,9,24,.30) 45%, rgba(8,7,16,.78) 100%);
}

/* Émojis flottants (remplacent les ronds CSS) */
.fl-emo { display: block; user-select: none; pointer-events: none; image-rendering: auto; }