/* BUT IT'S MATH — direction artistique commune (scène 720×1280, mise à l'échelle par JS) */
:root {
  --pink: #e8274c;
  --cyan: #8ff6ff;
  --blue: #2a6ccb;
  --yellow: #fad03f;
  --red: #ff3d5e;
  --gold: #ffcf3d;
  --ink: #e9eee8;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #040806; overflow: hidden;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #040806; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 720px; height: 1280px;
  margin: -640px 0 0 -360px; transform-origin: 50% 50%; overflow: hidden;
  color: var(--ink); font-family: 'Barlow Semi Condensed', system-ui, sans-serif; background: #07100c;
}
.hidden { display: none !important; }

/* ---------- fond ---------- */
#bg { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 62% at 50% 47%, #12251c 0%, #0b1813 46%, #050a08 100%); }
#bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(140,200,160,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(140,200,160,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 72%);
}
#tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s; mix-blend-mode: screen; }
#tint.flash { transition: none; }
#tint.blue { opacity: 1; background: radial-gradient(ellipse at 50% 55%, rgba(25,75,110,.55), rgba(8,35,55,.55)); }
#tint.red  { opacity: 1; background: radial-gradient(ellipse at 50% 55%, rgba(150,18,32,.55), rgba(85,8,14,.62)); }
#tint.gold { opacity: 1; background: radial-gradient(ellipse at 50% 50%, rgba(130,115,20,.5), rgba(45,40,5,.5)); }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 66% at 50% 50%, transparent 52%, rgba(0,0,0,.7) 100%); }
.screen { position: absolute; inset: 0; }

/* ---------- barre du haut ---------- */
#topbar { position: absolute; top: 34px; left: 30px; right: 30px; height: 56px; display: flex; justify-content: space-between; align-items: center; z-index: 20; }
.round {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,20,15,.55); color: #c9d4cc; font: 700 40px/1 Montserrat; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0 0 4px;
}
.round svg { width: 28px; height: 28px; }
#bMute .x { display: none; }
#bMute.muted .x { display: block; }
#bMute.muted .w { display: none; }
#bMute.muted { color: #ff3d5e; }

/* ---------- titres ---------- */
.title {
  position: absolute; left: 50%; top: 196px; z-index: 3;
  transform: translateX(-50%) perspective(700px) rotateX(7deg) rotate(-1.1deg);
  background: linear-gradient(180deg, #ee2c55, #d61f47); color: #f1f1ea;
  font: 900 60px/1 Montserrat, sans-serif; padding: 14px 26px 11px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 8px 44px rgba(230,39,76,.28), inset 0 -4px 0 rgba(0,0,0,.12); text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.sub {
  position: absolute; left: 50%; top: 278px; z-index: 4; transform: translateX(-50%);
  background: #f3f3ee; color: #121212; font: 800 25px/1 Montserrat, sans-serif; padding: 7px 12px 6px; border-radius: 5px; white-space: nowrap;
}
.sub.alert { background: #e8274c; color: #fff; text-transform: uppercase; font-size: 21px; padding: 7px 12px; }
.pop { animation: pop .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: translateX(-50%) scale(.82); } to { transform: translateX(-50%) scale(1); } }

/* ---------- HUD gauche ---------- */
#hudL { position: absolute; left: 44px; top: 330px; width: 150px; display: flex; flex-direction: column; align-items: center; }
.lab { font: 700 17px/1 'Barlow Semi Condensed'; letter-spacing: 1px; color: #cfd6d0; margin: 12px 0 6px; }
.lab:first-child { margin-top: 0; }
.seg { display: inline-flex; gap: 2px; padding: 5px 6px; background: #1c0404; border: 2px solid #3f0b0b; border-radius: 4px; box-shadow: inset 0 0 12px rgba(0,0,0,.85), 0 0 18px rgba(255,30,30,.08); }
.seg svg { width: 19px; height: 34px; display: block; }
.seg .on { fill: #ff2b2b; filter: drop-shadow(0 0 3px rgba(255,40,40,.85)); }
.seg .off { fill: #380707; }
.seg.green { background: #03170a; border-color: #0b3a1a; box-shadow: inset 0 0 12px rgba(0,0,0,.85), 0 0 18px rgba(60,240,120,.08); }
.seg.green .on { fill: #5cf08a; filter: drop-shadow(0 0 3px rgba(80,240,130,.8)); }
.seg.green .off { fill: #0c3016; }
.hands { display: grid; grid-template-columns: repeat(4, 24px); gap: 6px; }
.hands i {
  width: 24px; height: 24px; border-radius: 3px; font: 800 15px/24px Montserrat; text-align: center; color: #fff; font-style: normal;
  background: linear-gradient(#45554c, #2b3832); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px #000;
}
.hands i.w { background: #3d8df0; }
.hands i.l { background: #e8274c; }
.hands i.p { background: #7d8a83; }
.hands i.b { background: #f2c230; color: #111; }
.hands i.cur { outline: 2px solid var(--yellow); outline-offset: 1px; }

/* ---------- table (le "plateau") ---------- */
#table {
  position: absolute; left: 224px; top: 322px; width: 272px; height: 262px; border-radius: 4px;
  border: 1px solid rgba(110,170,130,.38); background-color: rgba(14,26,19,.78);
  background-image: linear-gradient(rgba(120,180,140,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,180,140,.06) 1px, transparent 1px);
  background-size: 30px 30px; background-position: 6px 6px;
  box-shadow: 0 0 34px rgba(0,0,0,.55), inset 0 0 0 4px rgba(0,0,0,.25);
}
.rowlab { position: absolute; left: 10px; font: 700 15px/22px 'Barlow Semi Condensed'; letter-spacing: 1px; color: #9fb2a6; }
.rowlab b { color: #fff; font-size: 22px; margin-left: 6px; }
.rowlab b.bust { color: var(--red); }
.rowlab small { font: 600 13px 'Barlow Semi Condensed'; color: var(--cyan); margin-left: 5px; letter-spacing: .5px; }
#dLab { top: 6px; }
#pLab { top: 132px; }
.row { position: absolute; left: 10px; width: 252px; height: 90px; }
#dRow { top: 32px; }
#pRow { top: 158px; }

.card { position: absolute; top: 0; width: 58px; height: 84px; perspective: 400px; transition: left .25s cubic-bezier(.2,.9,.3,1.15); }
.card .face {
  position: absolute; inset: 0; border-radius: 5px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .32s cubic-bezier(.3,.8,.3,1.1);
}
.card .back {
  background: linear-gradient(160deg, #57705f, #3a4e43); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; transform: rotateY(180deg);
}
.card .back span { font: 800 34px Montserrat; color: #8ef0de; text-shadow: 0 0 12px rgba(120,240,220,.8); }
.card .front {
  background: linear-gradient(#1a271f, #111a15); border: 1px solid #3b5444; box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 14px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.card.down .front { transform: rotateY(-180deg); }
.card.down .back { transform: rotateY(0deg); }
.card .front b { font: 800 38px/1 'Barlow Semi Condensed'; color: #eef2ec; text-shadow: 0 0 10px currentColor; }
.card .front i { position: absolute; font-style: normal; font-size: 15px; color: #cfd8d0; }
.card .front.redsuit i { color: #ff5a6e; }
.card .s1 { left: 5px; top: 3px; }
.card .s2 { right: 5px; bottom: 3px; transform: rotate(180deg); }
.card .front b.v1 { color: #ffcf3d; }
.card .front b.v2 { color: #6fe08a; }
.card .front b.v3 { color: #ff6b6b; }
.card .front b.v4 { color: #7aa8ff; }
.card .front b.v5 { color: #ff8fd0; }
.card .front b.v6 { color: #6ff0f0; }
.card .front b.v7 { color: #f4f4ee; }
.card .front b.v8 { color: #b9c4bd; }
.card .front b.v9 { color: #ffe066; }
.card .front b.v10 { color: #f1e6c8; font-size: 32px; }
.card.bust .front { border-color: var(--red); box-shadow: 0 0 18px rgba(255,61,94,.55); }
.card.bust .front b { color: var(--red); }
.card.dealt { animation: dealIn .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes dealIn { from { transform: translate(40px,-140px) rotate(20deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.card.scatter { transform: rotate(var(--r)); animation: scatterIn .45s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes scatterIn { from { transform: translateY(-260px) rotate(0) scale(.5); opacity: 0; } }
.card.scatter.away { transition: transform .35s ease-in, opacity .35s; transform: translateY(-300px) rotate(var(--r)); opacity: 0; }
.payout { position: absolute; right: 12px; top: 130px; font: 800 26px Montserrat; color: var(--gold); opacity: 0; text-shadow: 0 0 14px rgba(255,207,61,.6); pointer-events: none; }
.payout.show { animation: payout 1.8s ease-out; }
@keyframes payout { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

/* ---------- HUD droite ---------- */
#hudR { position: absolute; left: 506px; top: 356px; width: 184px; text-align: center; }
.pct { font: 800 50px/1 'Barlow Semi Condensed'; color: #6bbcf7; text-shadow: 0 0 20px currentColor; transition: color .3s; }
.pctlab { font: 800 20px/1.1 'Barlow Semi Condensed'; color: #e9eee8; margin-top: 8px; letter-spacing: .5px; }
.tiny { font: 500 13px/1.2 'Barlow Semi Condensed'; color: #7f9187; margin-top: 8px; }
.stat2 { margin-top: 20px; font: 700 15px 'Barlow Semi Condensed'; color: #aab8b0; letter-spacing: .5px; }
.stat2 b { color: #fff; font-size: 18px; }
.mathsays { margin-top: 12px; font: 800 14px/1.25 Montserrat; color: #9fb2a6; letter-spacing: .3px; }
.mathsays b { color: #fff; }
.mathsays span { font: 600 12px 'Barlow Semi Condensed'; color: #8a9a91; letter-spacing: 0; }
.mathsays.ok b { color: #5cf08a; }
.mathsays.ok { color: #5cf08a; }
.mathsays.ko b { color: var(--red); }
.mathsays.ko { color: var(--red); }

/* ---------- état + compte à rebours ---------- */
.pill {
  position: absolute; left: 50%; top: 594px; z-index: 3; transform: translateX(-50%);
  font: 800 25px/1 Montserrat; padding: 7px 13px 6px; border-radius: 6px; white-space: nowrap;
  background: rgba(8,14,11,.82); color: #fff; letter-spacing: .3px; transition: background-color .2s, opacity .2s;
}
.pill.hide { opacity: 0; }
.pill.blue { background: #2a6ccb; }
.pill.red { background: #ef274d; }
.pill.gold { background: #f2c230; color: #111; }
.pill.grey { background: #56635d; }
#prog { position: absolute; left: 50%; top: 632px; width: 150px; height: 4px; margin-left: -75px; background: rgba(255,255,255,.1); border-radius: 2px; opacity: 0; transition: opacity .2s; }
#progFill { height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #ff9a3c, #ff3d5e); box-shadow: 0 0 8px rgba(255,80,80,.7); }

/* ---------- oscilloscope ---------- */
#scope { position: absolute; left: 30px; top: 640px; width: 660px; height: 212px; }
.big { position: absolute; left: 370px; top: 690px; width: 300px; text-align: center; opacity: 0; pointer-events: none; }
.big.show { animation: bigIn .3s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes bigIn { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
.big div:first-child { font: 800 66px/1 'Barlow Semi Condensed'; text-shadow: 0 0 22px currentColor; }
.big div:last-child { font: 800 24px/1.2 'Barlow Semi Condensed'; letter-spacing: 1px; opacity: .8; }

.intro { position: absolute; left: 0; right: 0; top: 690px; text-align: center; opacity: 0; pointer-events: none; }
.intro.show { opacity: 1; }
.intro .l1 { font: 900 60px/1 Montserrat; animation: introIn .3s cubic-bezier(.2,1.5,.4,1); }
.intro .l1 .r { color: var(--red); text-shadow: 0 0 24px rgba(255,61,94,.6); }
.intro .l1 .c { color: var(--cyan); text-shadow: 0 0 24px rgba(143,246,255,.55); }
.intro .l1 small { font-size: 30px; color: #fff; }
.intro .l2 { font: 900 30px/1 Montserrat; color: #fff; margin-top: 14px; animation: introIn .3s cubic-bezier(.2,1.5,.4,1); }
.intro .l3 { font: 900 32px/1 Montserrat; color: var(--red); margin-top: 12px; text-shadow: 0 0 20px rgba(255,61,94,.8); animation: introIn .25s cubic-bezier(.2,1.5,.4,1); }
@keyframes introIn { from { transform: scale(1.6); opacity: 0; } }

/* ---------- formules ---------- */
.f { position: absolute; left: 10px; right: 10px; text-align: center; color: #f3f3ee; white-space: nowrap; }
.f1 { top: 856px; font-size: 36px; }
.f2 { top: 913px; font-size: 18px; color: #c9cfc9; }
.f3 { top: 939px; font-size: 18px; color: #c9cfc9; }
.f4 { top: 966px; font-size: 22px; }
.f { transform-origin: 50% 50%; }
.f .katex { font-size: 1em; }
.cap {
  position: absolute; left: 50%; top: 1004px; transform: translateX(-50%);
  background: var(--yellow); color: #111; font: 800 24px/1 Montserrat; padding: 8px 12px; border-radius: 5px; white-space: nowrap;
}

/* ---------- boutons ---------- */
#actions { position: absolute; left: 36px; right: 36px; top: 1066px; height: 150px; z-index: 6; }
.arow { display: flex; gap: 14px; align-items: stretch; height: 112px; }
.btn {
  flex: 1; border: 0; border-radius: 16px; font: 900 40px/1 Montserrat; color: #fff; letter-spacing: .5px; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 34px var(--glow); transition: transform .08s, opacity .2s, filter .2s;
  touch-action: manipulation;
}
.btn small { display: block; font: 700 15px 'Barlow Semi Condensed'; opacity: .85; margin-top: 7px; letter-spacing: 1px; }
.btn:active { transform: translateY(3px) scale(.97); }
.btn.hit { background: linear-gradient(#f0335a, #d21e44); --glow: rgba(232,39,76,.32); }
.btn.stand { background: linear-gradient(#3a82e6, #2860bd); --glow: rgba(60,140,240,.32); }
.btn.dbl { flex: .7; background: linear-gradient(#ffd84a, #e8b51e); color: #141414; --glow: rgba(250,208,63,.28); }
.btn.deal { flex: 1.1; background: linear-gradient(#ffd84a, #e8b51e); color: #141414; --glow: rgba(250,208,63,.3); }
.btn[disabled] { opacity: .3; filter: grayscale(.7); pointer-events: none; }
.btn.chosen { opacity: 1; filter: none; box-shadow: 0 0 0 4px #fff, 0 0 40px var(--glow); }
#actEnd .btn { font-size: 30px; }
.betbox { flex: 1.2; display: flex; align-items: center; justify-content: space-between; background: rgba(8,14,11,.8); border: 1px solid rgba(110,170,130,.3); border-radius: 16px; padding: 0 10px; }
.chip { width: 66px; height: 66px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.35); background: radial-gradient(#2a3a31, #18241e); color: #fff; font: 800 34px/1 Montserrat; cursor: pointer; }
.chip:active { transform: scale(.94); }
.betval { text-align: center; }
.betval span { display: block; font: 700 15px 'Barlow Semi Condensed'; letter-spacing: 2px; color: #9fb2a6; }
.betval b { font: 900 38px/1.1 Montserrat; color: var(--gold); text-shadow: 0 0 14px rgba(255,207,61,.4); }

/* ---------- anneaux / secousse ---------- */
#rings { position: absolute; inset: 0; pointer-events: none; }
.ring { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 3px solid var(--gold); border-radius: 50%; opacity: 0; animation: ring 1.4s ease-out forwards; box-shadow: 0 0 18px currentColor; }
@keyframes ring { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(18); } }
#game.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate(-3px, 1px); } 20%, 80% { transform: translate(6px, -2px); }
  30%, 50%, 70% { transform: translate(-10px, 3px); } 40%, 60% { transform: translate(10px, -3px); }
}

/* ---------- hub ---------- */
.hubsub { top: 278px; }
.glist { position: absolute; left: 50px; right: 50px; top: 360px; display: flex; flex-direction: column; gap: 16px; }
.gcard {
  display: flex; align-items: center; gap: 18px; height: 102px; padding: 0 20px; border-radius: 10px; text-align: left; color: var(--ink);
  border: 1px solid rgba(110,170,130,.3); background: rgba(12,22,17,.82); box-shadow: 0 0 30px rgba(0,0,0,.45);
  background-image: linear-gradient(rgba(120,180,140,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,180,140,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
button.gcard { cursor: pointer; font: inherit; }
button.gcard:active { transform: scale(.98); }
.gcard.live { border-color: rgba(232,39,76,.7); box-shadow: 0 0 30px rgba(232,39,76,.18); }
.gcard.soon { opacity: .5; }
.gico { width: 76px; height: 76px; flex: none; border-radius: 8px; background: #16211b; border: 1px solid #3b5444; display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 28px/1 'Barlow Semi Condensed'; color: #8ef0de; text-align: center; }
.gico span:first-child { color: var(--gold); }
.gico span:last-child { color: #f1e6c8; }
.gico.mine { color: var(--red); font-size: 42px; }
.gico.crash { color: #5cf08a; font-size: 44px; }
.gico.plinko { color: var(--cyan); font-size: 22px; line-height: 1.1; }
.gico.shell span { width: 10px; height: 34px; border-radius: 3px; background: linear-gradient(#e8274c 70%, #c9a43a 70%); }
.gico.shell span:nth-child(2) { background: linear-gradient(#3d8df0 70%, #c9a43a 70%); }
.gtxt { flex: 1; }
.gtxt b { display: block; font: 900 30px/1 Montserrat; letter-spacing: .3px; }
.gtxt i { display: inline-block; margin-top: 8px; font: 700 17px/1 Montserrat; font-style: normal; background: #f3f3ee; color: #121212; padding: 4px 7px; border-radius: 4px; }
.gplay { font: 900 22px/1 Montserrat; background: var(--pink); color: #fff; padding: 12px 14px; border-radius: 8px; }
.gsoon { font: 800 16px/1 'Barlow Semi Condensed'; letter-spacing: 2px; color: #9fb2a6; border: 1px solid #3b5444; padding: 8px 10px; border-radius: 6px; }
.hubcap { top: 1150px; }

/* ---------- écran "tap to start" ---------- */
.tap { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(3,7,5,.82); cursor: pointer; transition: opacity .45s; }
.tap div { font: 900 44px Montserrat; color: #fff; animation: blink 1.2s infinite; }
.tap small { margin-top: 14px; font: 600 20px 'Barlow Semi Condensed'; color: #9fb2a6; letter-spacing: 1px; }
.tap.gone { opacity: 0; pointer-events: none; }
@keyframes blink { 50% { opacity: .45; } }

/* ---------- sound lab ---------- */
.arow.lab { gap: 18px; }
.labcol { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.labcol span { font: 700 15px 'Barlow Semi Condensed'; letter-spacing: 2px; color: #9fb2a6; text-align: center; }
.labcol div { display: flex; gap: 8px; }
.labcol .btn { height: 80px; font-size: 28px; padding: 0; min-width: 0; }
.gcard.lab { height: 92px; border-color: rgba(143,246,255,.45); }
.gcard.lab .gico { color: var(--cyan); font-size: 40px; }
.gcard.lab .gplay { background: #2a6ccb; }
.glist { gap: 12px; }

/* ---------- pièces ---------- */
.coin { position: absolute; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; z-index: 30;
  background: radial-gradient(circle at 35% 35%, #fff6b0, #f2c230 55%, #a07a10); box-shadow: 0 0 12px rgba(255,207,61,.9);
  transition: transform .75s cubic-bezier(.45,-0.35,.7,1), opacity .75s ease-in; }

/* ---------- paramètres son ---------- */
#cfg { position: absolute; inset: 0; z-index: 40; background: rgba(3,7,5,.94); display: flex; flex-direction: column; align-items: center; padding-top: 140px; }
#cfg h2 { font: 900 44px Montserrat; color: #fff; margin: 0 0 6px; }
#cfg .hint { font: 600 18px 'Barlow Semi Condensed'; color: #9fb2a6; margin-bottom: 26px; letter-spacing: 1px; }
.cfgrow { width: 640px; margin-bottom: 24px; }
.cfgrow > span { display: block; font: 800 18px 'Barlow Semi Condensed'; letter-spacing: 2px; color: #cfd6d0; margin-bottom: 10px; }
.cfgrow div { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { border: 1px solid rgba(110,170,130,.4); background: rgba(14,26,19,.9); color: #e9eee8; font: 800 19px Montserrat; padding: 12px 14px; border-radius: 10px; cursor: pointer; }
.opt.on { background: #e8274c; border-color: #e8274c; color: #fff; box-shadow: 0 0 20px rgba(232,39,76,.4); }
.cfgrow.win .opt.on { background: #2a6ccb; border-color: #2a6ccb; box-shadow: 0 0 20px rgba(60,140,240,.4); }
#cfgClose { margin-top: 16px; }

/* ---------- skip ---------- */
.skipbtn { position: absolute; right: 30px; top: 588px; z-index: 8; border: 1px solid rgba(255,255,255,.35); background: rgba(8,14,11,.8);
  color: #fff; font: 800 20px Montserrat; padding: 10px 16px; border-radius: 22px; cursor: pointer; animation: pop .25s; }
.skipbtn:active { transform: scale(.95); }

/* ---------- un écran de jeu, plusieurs jeux ---------- */
#game.ms .bjOnly { display: none !important; }
#game:not(.ms) .msOnly { display: none !important; }

/* ---------- démineur ---------- */
#msHud { position: absolute; left: 44px; top: 330px; width: 150px; display: flex; flex-direction: column; align-items: center; }
.lives { display: flex; gap: 6px; }
.lives i { width: 26px; height: 13px; border-radius: 2px; background: #5fd27a; box-shadow: 0 0 9px rgba(95,210,122,.7); transition: background .3s, box-shadow .3s; }
.lives i.off { background: #3a1010; box-shadow: none; }
#msBoard {
  position: absolute; left: 224px; top: 322px; width: 272px; height: 262px; padding: 5px 10px; border-radius: 4px;
  display: grid; grid-template-columns: repeat(9, 28px); grid-auto-rows: 28px;
  border: 1px solid rgba(110,170,130,.38); background: rgba(14,26,19,.78); box-shadow: 0 0 34px rgba(0,0,0,.55);
}
.mc {
  width: 28px; height: 28px; border: 1px solid #22372b; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #5d7766, #3f5548); box-shadow: inset 0 2px 0 rgba(255,255,255,.17), inset 0 -2px 0 rgba(0,0,0,.35);
  font: 800 18px/1 'Barlow Semi Condensed'; position: relative;
}
.mc.rev { background: #111b15; box-shadow: none; border-color: #1b2a21; }
.mc.n1 { color: #e8f0ea; } .mc.n2 { color: #6fe08a; } .mc.n3 { color: #ff6b6b; } .mc.n4 { color: #7aa8ff; }
.mc.n5 { color: #ff8fd0; } .mc.n6 { color: #6ff0f0; } .mc.n7 { color: #fff; } .mc.n8 { color: #bbb; }
.mc.flag { background: linear-gradient(#ef2c55, #b51d3a); box-shadow: 0 0 10px rgba(239,44,85,.6); }
.mc.flag::after { content: '!'; color: #fff; font-weight: 900; }
.mc.boom { background: radial-gradient(#ff8a9b, #c0152f 70%); box-shadow: 0 0 14px rgba(255,61,94,.9); }
.mc.boom::after { content: '✱'; color: #fff; font-size: 20px; }
.mc.tgt { outline: 3px solid #ffd23f; outline-offset: -3px; z-index: 2; animation: tgt .5s ease-in-out infinite alternate; }
.mc.tgt::before { content: ''; position: absolute; right: -9px; bottom: -11px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid #fff; transform: rotate(-35deg); filter: drop-shadow(0 1px 1px #000); }
@keyframes tgt { from { box-shadow: 0 0 4px rgba(255,210,63,.4); } to { box-shadow: 0 0 16px rgba(255,210,63,.95); } }
.mc.pop { animation: mcPop .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes mcPop { from { transform: scale(.5); } to { transform: scale(1); } }
#msActions { position: absolute; left: 36px; right: 36px; top: 1066px; height: 150px; z-index: 6; }
.title.long { font-size: 47px; padding: 13px 22px 10px; }

/* =====================================================================
   ASSETS v2 — cartes, table, cases, mines, drapeaux, jetons
   ===================================================================== */

/* ---------- table de blackjack : feutre éclairé ---------- */
#table {
  background-color: #0c1812;
  background-image:
    radial-gradient(ellipse 85% 70% at 50% 45%, rgba(46,110,72,.55), rgba(12,26,18,0) 75%),
    linear-gradient(rgba(120,180,140,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,140,.05) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
  border: 1px solid rgba(140,200,160,.35);
  box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(255,207,61,.12), inset 0 0 50px rgba(0,0,0,.5);
  border-radius: 10px;
}
.tbl-rule { position: absolute; left: 12px; right: 12px; top: 124px; height: 0; border-top: 1px dashed rgba(255,207,61,.28); }
.tbl-rule span { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); padding: 0 8px; background: #0f1d15;
  font: 700 10px/16px 'Barlow Semi Condensed'; letter-spacing: 1.5px; color: rgba(255,207,61,.7); white-space: nowrap; }

/* ---------- cartes ---------- */
.card { width: 58px; height: 84px; }
.card .face { border-radius: 7px; }
.card .front {
  display: block; overflow: hidden; color: #e3ece6;
  background: linear-gradient(155deg, #223229 0%, #121c16 55%, #0d1511 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(160,230,200,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.card .front.red { color: #ff4d6d; box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,77,109,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.card .front::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.09), transparent 40%); pointer-events: none; }
.cf-idx { position: absolute; display: flex; flex-direction: column; align-items: center; width: 16px; line-height: 1; }
.cf-idx b { font: 800 15px/1 'Barlow Semi Condensed'; letter-spacing: -.5px; text-shadow: 0 0 6px currentColor; }
.cf-idx .cf-s { width: 10px; height: 10px; fill: currentColor; margin-top: 1px; }
.cf-idx.tl { left: 3px; top: 4px; }
.cf-idx.br { right: 3px; bottom: 4px; transform: rotate(180deg); }
.cf-pip { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; fill: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.cf-ace { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid #ffcf3d; box-shadow: 0 0 10px rgba(255,207,61,.5), inset 0 0 8px rgba(255,207,61,.3); }
.cf-ace .cf-pip { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.cf-face { position: absolute; left: 50%; top: 50%; width: 34px; height: 40px; margin: -20px 0 0 -17px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #ffe08a, #c9962a); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cf-face span { font: 900 17px/1 Montserrat; color: #1a1306; }
.cf-face .cf-mini { width: 10px; height: 10px; fill: #1a1306; margin-top: 1px; }
.cf-val { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 9px 'Barlow Semi Condensed'; letter-spacing: .5px; color: rgba(255,207,61,.85); }
.card.bust .front { border-color: #ff3d5e; box-shadow: 0 0 18px rgba(255,61,94,.65), inset 0 0 0 1.5px rgba(255,61,94,.6); }
/* dos : motif de grille + losanges, anneau néon, "?" */
.card .back {
  overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(155deg, #1d3b2f, #0f2219);
  box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 0 0 3px #0c1a13, inset 0 0 0 4.5px rgba(255,77,109,.55);
}
.cb-pat { position: absolute; inset: 6px; border-radius: 4px; opacity: .55;
  background:
    repeating-linear-gradient(45deg, rgba(143,246,255,.16) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(143,246,255,.16) 0 1px, transparent 1px 7px); }
.cb-ring { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #8ef0de; background: #0c1a13;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(142,240,222,.55); }
.cb-ring span { font: 900 20px/1 Montserrat; color: #8ef0de; text-shadow: 0 0 10px rgba(142,240,222,.9); }
.card .back span { font-size: 20px; }

/* ---------- démineur : cases en relief, mines, drapeaux, viseur ---------- */
#msBoard { grid-template-columns: repeat(9, 26px); grid-auto-rows: 26px; gap: 2px; padding: 5px 10px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,90,60,.35), rgba(10,20,14,.92) 75%), #0b1510;
  box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(143,246,255,.1); }
.mc { width: 26px; height: 26px; border: 0; border-radius: 4px; font: 800 17px/1 'Barlow Semi Condensed';
  background: linear-gradient(150deg, #6f8a79 0%, #4d6658 45%, #3a4f43 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.45); }
.mc.rev { background: linear-gradient(#0e1813, #111d17); box-shadow: inset 0 1px 3px rgba(0,0,0,.8), inset 0 0 0 1px rgba(143,246,255,.05); }
.mc.rev[class*="n"] { text-shadow: 0 0 7px currentColor; }
.mc.n1 { color: #9fd8ff; } .mc.n2 { color: #6fe08a; } .mc.n3 { color: #ff6b7d; } .mc.n4 { color: #b18cff; }
.mc.n5 { color: #ffb15a; } .mc.n6 { color: #6ff0f0; } .mc.n7 { color: #ffffff; } .mc.n8 { color: #c3ccc6; }
.mc.flag { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 3.5v15' stroke='%23e9eee8' stroke-width='2' stroke-linecap='round'/><path d='M9 4l10 4.2L9 12.4z' fill='%23ff3d5e'/><path d='M4.5 20.5h9' stroke='%23e9eee8' stroke-width='2.2' stroke-linecap='round'/></svg>") center / 18px no-repeat, linear-gradient(150deg, #5a2a35, #3a1820);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,61,94,.6), 0 0 10px rgba(255,61,94,.45); }
.mc.flag::after, .mc.boom::after { content: none; }
.mc.boom { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g stroke='%23101611' stroke-width='2.2' stroke-linecap='round'><path d='M12 2.5v3.5M12 18v3.5M2.5 12H6M18 12h3.5M5.3 5.3l2.5 2.5M16.2 16.2l2.5 2.5M5.3 18.7l2.5-2.5M16.2 7.8l2.5-2.5'/></g><circle cx='12' cy='12' r='6.2' fill='%23101611'/><circle cx='9.8' cy='9.8' r='1.9' fill='%23ffffff' opacity='.85'/></svg>") center / 20px no-repeat, radial-gradient(circle, #ff8a9b 0%, #e8274c 45%, #7a0f20 100%);
  box-shadow: 0 0 16px rgba(255,61,94,.95), inset 0 0 0 1px rgba(255,255,255,.25); }
/* viseur : 4 coins jaunes + curseur */
.mc.tgt { outline: none; animation: none; z-index: 3;
  background-image:
    linear-gradient(#ffd23f, #ffd23f), linear-gradient(#ffd23f, #ffd23f), linear-gradient(#ffd23f, #ffd23f), linear-gradient(#ffd23f, #ffd23f),
    linear-gradient(#ffd23f, #ffd23f), linear-gradient(#ffd23f, #ffd23f), linear-gradient(#ffd23f, #ffd23f), linear-gradient(#ffd23f, #ffd23f),
    linear-gradient(150deg, #8aa696 0%, #5f7c6b 45%, #476052 100%);
  background-size: 8px 2.5px, 2.5px 8px, 8px 2.5px, 2.5px 8px, 8px 2.5px, 2.5px 8px, 8px 2.5px, 2.5px 8px, auto;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 14px rgba(255,210,63,.75), inset 0 1.5px 0 rgba(255,255,255,.3);
  animation: tgt2 .55s ease-in-out infinite alternate; }
@keyframes tgt2 { from { transform: scale(1); } to { transform: scale(1.09); } }
.mc.tgt.rev, .mc.tgt.flag, .mc.tgt.boom { animation: none; transform: none; }
.mc.tgt.rev { background-image: none; background: linear-gradient(#0e1813, #111d17); box-shadow: 0 0 0 2px #ffd23f, inset 0 1px 3px rgba(0,0,0,.8); }

/* ---------- jetons : pièces de casino striées ---------- */
.coin { width: 20px; height: 20px; border: 2px solid #9a6f0c;
  background:
    radial-gradient(circle, #ffe9a0 0 34%, #d9a82c 35% 44%, transparent 45%),
    repeating-conic-gradient(#f2c230 0 18deg, #fff3c4 18deg 36deg);
  box-shadow: 0 0 12px rgba(255,207,61,.85), inset 0 0 0 1px rgba(255,255,255,.4); }

/* ---------- icônes du menu ---------- */
.gico svg { width: 56px; height: 56px; }
.gico { background: radial-gradient(circle at 50% 40%, #1e2d24, #111a15); }

/* =====================================================================
   ASSETS v3 — le langage visuel des vidéos d'origine, amélioré
   ardoise vert-gris en relief · chiffres lumineux bleu/vert/saumon · mines métalliques à rayons · curseur blanc
   ===================================================================== */
:root { --tile-hi: #55705f; --tile-mid: #3d5348; --tile-lo: #2d4036; --n1: #8fd0ff; --n2: #6fe08a; --n3: #ff7a6e; }

/* ---------- plateau du démineur ---------- */
#msBoard {
  grid-template-columns: repeat(9, 25px); grid-auto-rows: 25px; gap: 3px; padding: 6px 11px; border-radius: 9px;
  background: linear-gradient(#111c17, #0d1612); border: 1px solid rgba(150,220,190,.38);
  box-shadow: 0 0 34px rgba(0,0,0,.55), inset 0 0 26px rgba(0,0,0,.6);
}
.mc {
  width: 25px; height: 25px; border-radius: 3px; border: 0;
  background: linear-gradient(145deg, var(--tile-hi) 0%, var(--tile-mid) 50%, var(--tile-lo) 100%);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.17), inset -1.5px -1.5px 0 rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.5);
  font: 800 17px/1 'Barlow Semi Condensed';
}
.mc.rev { background: transparent; box-shadow: none; }
.mc.rev[class*="n"] { text-shadow: 0 0 8px currentColor; }
.mc.n1 { color: var(--n1); } .mc.n2 { color: var(--n2); } .mc.n3 { color: var(--n3); } .mc.n4 { color: #b48cff; }
.mc.n5 { color: #ffb15a; } .mc.n6 { color: #6ff0f0; } .mc.n7 { color: #ffffff; } .mc.n8 { color: #c3ccc6; }
.mc.flag {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12 7v15' stroke='%23f2f4f3' stroke-width='2.2' stroke-linecap='round'/><path d='M13 7.5l9 3.6-9 3.6z' fill='%23ff3b4f'/><path d='M8 23.5h9' stroke='%23f2f4f3' stroke-width='2.6' stroke-linecap='round'/></svg>") center / 25px no-repeat, linear-gradient(145deg, var(--tile-hi) 0%, var(--tile-mid) 50%, var(--tile-lo) 100%);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.17), inset -1.5px -1.5px 0 rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.5);
}
.mc.boom {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='g' cx='38%' cy='34%' r='70%'><stop offset='0' stop-color='%23f2f4f3'/><stop offset='.35' stop-color='%23a9b1ad'/><stop offset='.75' stop-color='%23545b57'/><stop offset='1' stop-color='%232a2f2c'/></radialGradient></defs><g stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' opacity='.95'><line x1='25.20' y1='16.00' x2='29.20' y2='16.00'/><line x1='23.97' y1='20.60' x2='27.43' y2='22.60'/><line x1='20.60' y1='23.97' x2='22.60' y2='27.43'/><line x1='16.00' y1='25.20' x2='16.00' y2='29.20'/><line x1='11.40' y1='23.97' x2='9.40' y2='27.43'/><line x1='8.03' y1='20.60' x2='4.57' y2='22.60'/><line x1='6.80' y1='16.00' x2='2.80' y2='16.00'/><line x1='8.03' y1='11.40' x2='4.57' y2='9.40'/><line x1='11.40' y1='8.03' x2='9.40' y2='4.57'/><line x1='16.00' y1='6.80' x2='16.00' y2='2.80'/><line x1='20.60' y1='8.03' x2='22.60' y2='4.57'/><line x1='23.97' y1='11.40' x2='27.43' y2='9.40'/></g><circle cx='16' cy='16' r='7.4' fill='url(%23g)'/><circle cx='13.4' cy='13' r='1.7' fill='%23ffffff' opacity='.9'/></svg>") center / 25px no-repeat, linear-gradient(145deg, #e0324a, #b31f35);
  box-shadow: 0 0 14px rgba(255,59,79,.75), inset 1.5px 1.5px 0 rgba(255,255,255,.2), inset -1.5px -1.5px 0 rgba(0,0,0,.3);
}
/* case visée : légère surbrillance + curseur blanc (comme dans la vidéo) */
.mc.tgt {
  background-image: linear-gradient(145deg, #7a9886 0%, #587263 50%, #435a4e 100%);
  background-size: auto; background-position: 0 0;
  box-shadow: 0 0 0 1.5px rgba(255,210,63,.9), 0 0 14px rgba(255,210,63,.55), inset 1.5px 1.5px 0 rgba(255,255,255,.25);
  animation: tgt3 .6s ease-in-out infinite alternate;
}
@keyframes tgt3 { from { box-shadow: 0 0 0 1.5px rgba(255,210,63,.6), 0 0 6px rgba(255,210,63,.3), inset 1.5px 1.5px 0 rgba(255,255,255,.25); } to { box-shadow: 0 0 0 1.5px rgba(255,210,63,1), 0 0 16px rgba(255,210,63,.7), inset 1.5px 1.5px 0 rgba(255,255,255,.25); } }
.mc.tgt::before {
  content: ''; position: absolute; left: 13px; top: 11px; width: 15px; height: 21px; border: 0; transform: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'><path d='M1.5 1.5v16l4-3.8 2.8 6.3 2.6-1.1-2.7-6.2h5.6z' fill='%23ffffff' stroke='%23101611' stroke-width='1.3' stroke-linejoin='round'/></svg>") center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); z-index: 4;
}
.mc.tgt.rev { background-image: none; background: transparent; }
.mc.tgt.flag { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12 7v15' stroke='%23f2f4f3' stroke-width='2.2' stroke-linecap='round'/><path d='M13 7.5l9 3.6-9 3.6z' fill='%23ff3b4f'/><path d='M8 23.5h9' stroke='%23f2f4f3' stroke-width='2.6' stroke-linecap='round'/></svg>") center / 25px no-repeat, linear-gradient(145deg, #7a9886, #435a4e); }
.mc.tgt.boom { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='g' cx='38%' cy='34%' r='70%'><stop offset='0' stop-color='%23f2f4f3'/><stop offset='.35' stop-color='%23a9b1ad'/><stop offset='.75' stop-color='%23545b57'/><stop offset='1' stop-color='%232a2f2c'/></radialGradient></defs><g stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' opacity='.95'><line x1='25.20' y1='16.00' x2='29.20' y2='16.00'/><line x1='23.97' y1='20.60' x2='27.43' y2='22.60'/><line x1='20.60' y1='23.97' x2='22.60' y2='27.43'/><line x1='16.00' y1='25.20' x2='16.00' y2='29.20'/><line x1='11.40' y1='23.97' x2='9.40' y2='27.43'/><line x1='8.03' y1='20.60' x2='4.57' y2='22.60'/><line x1='6.80' y1='16.00' x2='2.80' y2='16.00'/><line x1='8.03' y1='11.40' x2='4.57' y2='9.40'/><line x1='11.40' y1='8.03' x2='9.40' y2='4.57'/><line x1='16.00' y1='6.80' x2='16.00' y2='2.80'/><line x1='20.60' y1='8.03' x2='22.60' y2='4.57'/><line x1='23.97' y1='11.40' x2='27.43' y2='9.40'/></g><circle cx='16' cy='16' r='7.4' fill='url(%23g)'/><circle cx='13.4' cy='13' r='1.7' fill='%23ffffff' opacity='.9'/></svg>") center / 25px no-repeat, linear-gradient(145deg, #e0324a, #b31f35); animation: none; }

/* ---------- table de blackjack : même panneau que le plateau ---------- */
#table {
  background: linear-gradient(#111c17, #0d1612); border: 1px solid rgba(150,220,190,.38); border-radius: 9px;
  box-shadow: 0 0 34px rgba(0,0,0,.55), inset 0 0 26px rgba(0,0,0,.6);
}
.tbl-rule { border-top: 1px solid rgba(150,220,190,.16); }
.tbl-rule span { background: #0f1914; color: rgba(150,220,190,.55); }

/* ---------- cartes : face sombre à liseré, dos = case ardoise avec "?" turquoise ---------- */
.card .face { border-radius: 6px; }
.card .front {
  color: var(--n1);
  background: linear-gradient(160deg, #1b2a22, #111a15);
  border: 1px solid rgba(150,220,190,.42);
  box-shadow: 0 3px 10px rgba(0,0,0,.6), inset 1.5px 1.5px 0 rgba(255,255,255,.07), inset -1.5px -1.5px 0 rgba(0,0,0,.4);
}
.card .front.red { color: var(--n3); box-shadow: 0 3px 10px rgba(0,0,0,.6), inset 1.5px 1.5px 0 rgba(255,255,255,.07), inset -1.5px -1.5px 0 rgba(0,0,0,.4); }
.card .front::before { background: linear-gradient(125deg, rgba(255,255,255,.06), transparent 45%); }
.cf-pip { filter: drop-shadow(0 0 7px currentColor); }
.card .back {
  border: 0;
  background: linear-gradient(145deg, var(--tile-hi) 0%, var(--tile-mid) 50%, var(--tile-lo) 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.17), inset -2px -2px 0 rgba(0,0,0,.38), 0 3px 10px rgba(0,0,0,.6);
}
.cb-pat { inset: 7px; opacity: 1; border-radius: 4px; background: linear-gradient(#1a2620, #141e19); box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }
.cb-ring { width: auto; height: auto; border: 0; background: none; box-shadow: none; }
.cb-ring span { font: 900 24px/1 Montserrat; color: #5fe0c4; text-shadow: 0 0 10px rgba(95,224,196,.8); }
.card.bust .front { border-color: #ff3b4f; box-shadow: 0 0 16px rgba(255,59,79,.6), inset 0 0 0 1px rgba(255,59,79,.6); }

/* ---------- cartouches (Buckshot) : rouge = réelle, bleue = à blanc, "?" = inconnue ---------- */
.shell { position: relative; display: inline-block; width: 22px; height: 52px; }
.shell .sb { position: absolute; left: 0; right: 0; top: 0; bottom: 12px; border-radius: 3px 3px 1px 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px), linear-gradient(90deg, #8e1626, #e0324a 45%, #a81c30); }
.shell.blank .sb { background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px), linear-gradient(90deg, #1f3f8a, #3d74d8 45%, #26489a); }
.shell.unk .sb { background: linear-gradient(90deg, #26302b, #3b4842 45%, #26302b); }
.shell.unk .sb::after { content: '?'; position: absolute; left: 0; right: 0; top: 30%; text-align: center; font: 900 14px Montserrat; color: #5fe0c4; text-shadow: 0 0 6px rgba(95,224,196,.8); }
.shell .sh { position: absolute; left: -1px; right: -1px; bottom: 0; height: 13px; border-radius: 2px; background: linear-gradient(90deg, #8a6a1c, #f0c24a 45%, #a07a22); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.shell.cur { filter: drop-shadow(0 0 8px rgba(255,210,63,.9)); }
.gico.shells { gap: 3px; } .gico.shells .shell { width: 15px; height: 40px; } .gico.shells .shell .sb { bottom: 9px; } .gico.shells .shell .sh { height: 10px; } .gico.shells .shell.unk .sb::after { font-size: 10px; }
/* index de carte : priorité sur l'ancienne règle ".card .front b" */
.card .front .cf-idx b { font: 800 15px/1 'Barlow Semi Condensed'; color: inherit; text-shadow: 0 0 6px currentColor; }
.card .front .cf-idx { position: absolute; }
.card .front .cf-val { color: rgba(255,207,61,.85); }
.card .front .cf-face span { font: 900 17px/1 Montserrat; color: #1a1306; text-shadow: none; }

/* =====================================================================
   MINES v4 — "Démineur d'époque, modernisé" (assets/mine*.svg)
   ===================================================================== */
.mc.boom {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='b' cx='36%' cy='32%' r='75%'><stop offset='0' stop-color='%238d9792'/><stop offset='.28' stop-color='%234a524e'/><stop offset='.7' stop-color='%231d2220'/><stop offset='1' stop-color='%230b0d0c'/></radialGradient><radialGradient id='k' cx='35%' cy='30%' r='80%'><stop offset='0' stop-color='%236f7873'/><stop offset='1' stop-color='%23151917'/></radialGradient><radialGradient id='x' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='%23fff4c2'/><stop offset='.35' stop-color='%23ffb03a'/><stop offset='.7' stop-color='%23ff4b2b' stop-opacity='.85'/><stop offset='1' stop-color='%23ff2b4a' stop-opacity='0'/></radialGradient><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='.45' stop-color='%23ff3b4f' stop-opacity='.55'/><stop offset='1' stop-color='%23ff3b4f' stop-opacity='0'/></radialGradient><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%239aa49f'/><stop offset='.5' stop-color='%234b534f'/><stop offset='1' stop-color='%231b201d'/></linearGradient><linearGradient id='r' x1='0' y1='0' x2='1' y2='1'><stop offset='.5' stop-color='%238ff6ff' stop-opacity='0'/><stop offset='1' stop-color='%238ff6ff' stop-opacity='.75'/></linearGradient></defs><polygon points='16.00,0.50 18.20,7.79 23.75,2.58 22.01,9.99 29.42,8.25 24.21,13.80 31.50,16.00 24.21,18.20 29.42,23.75 22.01,22.01 23.75,29.42 18.20,24.21 16.00,31.50 13.80,24.21 8.25,29.42 9.99,22.01 2.58,23.75 7.79,18.20 0.50,16.00 7.79,13.80 2.58,8.25 9.99,9.99 8.25,2.58 13.80,7.79' fill='url(%23x)'/><ellipse cx='16.8' cy='17.6' rx='9' ry='9' fill='%23000' opacity='.28'/><polygon points='22.80,18.10 29.60,16.55 29.60,15.45 22.80,13.90' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='29.60' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='19.61,22.01 23.95,24.73 24.73,23.95 22.01,19.61' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='13.90,22.80 15.45,29.60 16.55,29.60 18.10,22.80' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='29.60' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.99,19.61 7.27,23.95 8.05,24.73 12.39,22.01' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.20,13.90 2.40,15.45 2.40,16.55 9.20,18.10' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='2.40' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='12.39,9.99 8.05,7.27 7.27,8.05 9.99,12.39' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='18.10,9.20 16.55,2.40 15.45,2.40 13.90,9.20' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='2.40' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='22.01,12.39 24.73,8.05 23.95,7.27 19.61,9.99' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><circle cx='16' cy='16' r='8.8' fill='url(%23b)' stroke='%230b0d0c' stroke-width='.6'/><circle cx='16' cy='16' r='8.3' fill='none' stroke='url(%23r)' stroke-width='1.1'/><ellipse cx='16' cy='16.8' rx='8.4' ry='2.3' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='.9'/><rect x='10.8' y='10.2' width='4.4' height='3.3' rx='1.2' fill='%23ffffff' opacity='.88' transform='rotate(-12 13 11.8)'/><circle cx='18.8' cy='11' r='.8' fill='%23ffffff' opacity='.45'/></svg>") center / 30px no-repeat, radial-gradient(circle, #ff5a6e 0%, #d42740 55%, #8e1426 100%);
  box-shadow: 0 0 16px rgba(255,59,79,.85), inset 1.5px 1.5px 0 rgba(255,255,255,.22), inset -1.5px -1.5px 0 rgba(0,0,0,.35);
  animation: boom .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes boom { 0% { transform: scale(.4); filter: brightness(2.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); filter: none; } }
.mc.tgt.boom { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='b' cx='36%' cy='32%' r='75%'><stop offset='0' stop-color='%238d9792'/><stop offset='.28' stop-color='%234a524e'/><stop offset='.7' stop-color='%231d2220'/><stop offset='1' stop-color='%230b0d0c'/></radialGradient><radialGradient id='k' cx='35%' cy='30%' r='80%'><stop offset='0' stop-color='%236f7873'/><stop offset='1' stop-color='%23151917'/></radialGradient><radialGradient id='x' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='%23fff4c2'/><stop offset='.35' stop-color='%23ffb03a'/><stop offset='.7' stop-color='%23ff4b2b' stop-opacity='.85'/><stop offset='1' stop-color='%23ff2b4a' stop-opacity='0'/></radialGradient><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='.45' stop-color='%23ff3b4f' stop-opacity='.55'/><stop offset='1' stop-color='%23ff3b4f' stop-opacity='0'/></radialGradient><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%239aa49f'/><stop offset='.5' stop-color='%234b534f'/><stop offset='1' stop-color='%231b201d'/></linearGradient><linearGradient id='r' x1='0' y1='0' x2='1' y2='1'><stop offset='.5' stop-color='%238ff6ff' stop-opacity='0'/><stop offset='1' stop-color='%238ff6ff' stop-opacity='.75'/></linearGradient></defs><polygon points='16.00,0.50 18.20,7.79 23.75,2.58 22.01,9.99 29.42,8.25 24.21,13.80 31.50,16.00 24.21,18.20 29.42,23.75 22.01,22.01 23.75,29.42 18.20,24.21 16.00,31.50 13.80,24.21 8.25,29.42 9.99,22.01 2.58,23.75 7.79,18.20 0.50,16.00 7.79,13.80 2.58,8.25 9.99,9.99 8.25,2.58 13.80,7.79' fill='url(%23x)'/><ellipse cx='16.8' cy='17.6' rx='9' ry='9' fill='%23000' opacity='.28'/><polygon points='22.80,18.10 29.60,16.55 29.60,15.45 22.80,13.90' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='29.60' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='19.61,22.01 23.95,24.73 24.73,23.95 22.01,19.61' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='13.90,22.80 15.45,29.60 16.55,29.60 18.10,22.80' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='29.60' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.99,19.61 7.27,23.95 8.05,24.73 12.39,22.01' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.20,13.90 2.40,15.45 2.40,16.55 9.20,18.10' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='2.40' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='12.39,9.99 8.05,7.27 7.27,8.05 9.99,12.39' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='18.10,9.20 16.55,2.40 15.45,2.40 13.90,9.20' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='2.40' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='22.01,12.39 24.73,8.05 23.95,7.27 19.61,9.99' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><circle cx='16' cy='16' r='8.8' fill='url(%23b)' stroke='%230b0d0c' stroke-width='.6'/><circle cx='16' cy='16' r='8.3' fill='none' stroke='url(%23r)' stroke-width='1.1'/><ellipse cx='16' cy='16.8' rx='8.4' ry='2.3' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='.9'/><rect x='10.8' y='10.2' width='4.4' height='3.3' rx='1.2' fill='%23ffffff' opacity='.88' transform='rotate(-12 13 11.8)'/><circle cx='18.8' cy='11' r='.8' fill='%23ffffff' opacity='.45'/></svg>") center / 30px no-repeat, radial-gradient(circle, #ff5a6e 0%, #d42740 55%, #8e1426 100%); }
/* mine dévoilée en fin de partie : posée sur la case ouverte, sans drame */
.mc.mine { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='b' cx='36%' cy='32%' r='75%'><stop offset='0' stop-color='%238d9792'/><stop offset='.28' stop-color='%234a524e'/><stop offset='.7' stop-color='%231d2220'/><stop offset='1' stop-color='%230b0d0c'/></radialGradient><radialGradient id='k' cx='35%' cy='30%' r='80%'><stop offset='0' stop-color='%236f7873'/><stop offset='1' stop-color='%23151917'/></radialGradient><radialGradient id='x' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='%23fff4c2'/><stop offset='.35' stop-color='%23ffb03a'/><stop offset='.7' stop-color='%23ff4b2b' stop-opacity='.85'/><stop offset='1' stop-color='%23ff2b4a' stop-opacity='0'/></radialGradient><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='.45' stop-color='%23ff3b4f' stop-opacity='.55'/><stop offset='1' stop-color='%23ff3b4f' stop-opacity='0'/></radialGradient><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%239aa49f'/><stop offset='.5' stop-color='%234b534f'/><stop offset='1' stop-color='%231b201d'/></linearGradient><linearGradient id='r' x1='0' y1='0' x2='1' y2='1'><stop offset='.5' stop-color='%238ff6ff' stop-opacity='0'/><stop offset='1' stop-color='%238ff6ff' stop-opacity='.75'/></linearGradient></defs><ellipse cx='16.8' cy='17.6' rx='9' ry='9' fill='%23000' opacity='.28'/><polygon points='22.80,18.10 29.60,16.55 29.60,15.45 22.80,13.90' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='29.60' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='19.61,22.01 23.95,24.73 24.73,23.95 22.01,19.61' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='13.90,22.80 15.45,29.60 16.55,29.60 18.10,22.80' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='29.60' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.99,19.61 7.27,23.95 8.05,24.73 12.39,22.01' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.20,13.90 2.40,15.45 2.40,16.55 9.20,18.10' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='2.40' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='12.39,9.99 8.05,7.27 7.27,8.05 9.99,12.39' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='18.10,9.20 16.55,2.40 15.45,2.40 13.90,9.20' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='2.40' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='22.01,12.39 24.73,8.05 23.95,7.27 19.61,9.99' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><circle cx='16' cy='16' r='8.8' fill='url(%23b)' stroke='%230b0d0c' stroke-width='.6'/><circle cx='16' cy='16' r='8.3' fill='none' stroke='url(%23r)' stroke-width='1.1'/><ellipse cx='16' cy='16.8' rx='8.4' ry='2.3' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='.9'/><rect x='10.8' y='10.2' width='4.4' height='3.3' rx='1.2' fill='%23ffffff' opacity='.88' transform='rotate(-12 13 11.8)'/><circle cx='18.8' cy='11' r='.8' fill='%23ffffff' opacity='.45'/></svg>") center / 24px no-repeat, linear-gradient(#0e1813, #111d17); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
/* intro : les mines se montrent un instant avec un halo rouge (comme au début de la vidéo) */
.mc.peek { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='b' cx='36%' cy='32%' r='75%'><stop offset='0' stop-color='%238d9792'/><stop offset='.28' stop-color='%234a524e'/><stop offset='.7' stop-color='%231d2220'/><stop offset='1' stop-color='%230b0d0c'/></radialGradient><radialGradient id='k' cx='35%' cy='30%' r='80%'><stop offset='0' stop-color='%236f7873'/><stop offset='1' stop-color='%23151917'/></radialGradient><radialGradient id='x' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='%23fff4c2'/><stop offset='.35' stop-color='%23ffb03a'/><stop offset='.7' stop-color='%23ff4b2b' stop-opacity='.85'/><stop offset='1' stop-color='%23ff2b4a' stop-opacity='0'/></radialGradient><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='.45' stop-color='%23ff3b4f' stop-opacity='.55'/><stop offset='1' stop-color='%23ff3b4f' stop-opacity='0'/></radialGradient><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%239aa49f'/><stop offset='.5' stop-color='%234b534f'/><stop offset='1' stop-color='%231b201d'/></linearGradient><linearGradient id='r' x1='0' y1='0' x2='1' y2='1'><stop offset='.5' stop-color='%238ff6ff' stop-opacity='0'/><stop offset='1' stop-color='%238ff6ff' stop-opacity='.75'/></linearGradient></defs><circle cx='16' cy='16' r='16' fill='url(%23g)'/><ellipse cx='16.8' cy='17.6' rx='9' ry='9' fill='%23000' opacity='.28'/><polygon points='22.80,18.10 29.60,16.55 29.60,15.45 22.80,13.90' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='29.60' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='19.61,22.01 23.95,24.73 24.73,23.95 22.01,19.61' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='13.90,22.80 15.45,29.60 16.55,29.60 18.10,22.80' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='29.60' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.99,19.61 7.27,23.95 8.05,24.73 12.39,22.01' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='24.34' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='9.20,13.90 2.40,15.45 2.40,16.55 9.20,18.10' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='2.40' cy='16.00' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='12.39,9.99 8.05,7.27 7.27,8.05 9.99,12.39' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='7.66' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='18.10,9.20 16.55,2.40 15.45,2.40 13.90,9.20' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.00' cy='2.40' r='1.35' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><polygon points='22.01,12.39 24.73,8.05 23.95,7.27 19.61,9.99' fill='url(%23s)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='24.34' cy='7.66' r='1.15' fill='url(%23k)' stroke='%230b0d0c' stroke-width='.4'/><circle cx='16' cy='16' r='8.8' fill='url(%23b)' stroke='%230b0d0c' stroke-width='.6'/><circle cx='16' cy='16' r='8.3' fill='none' stroke='url(%23r)' stroke-width='1.1'/><ellipse cx='16' cy='16.8' rx='8.4' ry='2.3' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='.9'/><rect x='10.8' y='10.2' width='4.4' height='3.3' rx='1.2' fill='%23ffffff' opacity='.88' transform='rotate(-12 13 11.8)'/><circle cx='18.8' cy='11' r='.8' fill='%23ffffff' opacity='.45'/></svg>") center / 30px no-repeat, linear-gradient(145deg, var(--tile-hi) 0%, var(--tile-mid) 50%, var(--tile-lo) 100%);
  animation: peek .26s ease-in-out both; z-index: 2; }
@keyframes peek { 0% { transform: scale(.3) rotate(-60deg); opacity: 0; } 50% { transform: scale(1.15) rotate(0); opacity: 1; } 100% { transform: scale(.8) rotate(60deg); opacity: .6; } }
.gico.mine svg { width: 58px; height: 58px; }

/* =====================================================================
   ASSETS v5 — drapeau, cartouches, jeton, bille (assets/*.svg)
   ===================================================================== */
.mc.flag { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='st' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%232a302d'/><stop offset='.35' stop-color='%23a7b1ac'/><stop offset='.6' stop-color='%235d6762'/><stop offset='1' stop-color='%231d221f'/></linearGradient><linearGradient id='fl' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ff6a78'/><stop offset='.55' stop-color='%23ff2f45'/><stop offset='1' stop-color='%23b5162b'/></linearGradient><linearGradient id='fd' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23c41d33'/><stop offset='1' stop-color='%238c1020'/></linearGradient></defs><ellipse cx='16.5' cy='27.6' rx='8.6' ry='1.6' fill='%23000' opacity='.35'/><rect x='8' y='24.4' width='17' height='3.2' rx='1.1' fill='url(%23st)' stroke='%230b0d0c' stroke-width='.5'/><rect x='11' y='21.8' width='11' height='3' rx='1' fill='url(%23st)' stroke='%230b0d0c' stroke-width='.5'/><rect x='15.2' y='5' width='2.4' height='17.4' rx='.9' fill='url(%23st)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.4' cy='4.9' r='1.6' fill='%23d9dfdc' stroke='%230b0d0c' stroke-width='.5'/><path d='M17.6 6.2 L27.4 9.6 L21.8 11 Z' fill='url(%23fl)'/><path d='M17.6 6.2 L21.8 11 L27.4 9.6 L17.6 15.2 Z' fill='url(%23fd)'/><path d='M17.6 6.2 L27.4 9.6 L17.6 15.2 Z' fill='none' stroke='%235a0812' stroke-width='.6' stroke-linejoin='round'/><path d='M18.4 7.4 L25 9.7' stroke='%23ffd0d6' stroke-width='.8' stroke-linecap='round' opacity='.8'/><path d='M17.8 21.4 V6' stroke='%238ff6ff' stroke-opacity='.45' stroke-width='.6'/></svg>") center / 26px no-repeat, linear-gradient(145deg, var(--tile-hi) 0%, var(--tile-mid) 50%, var(--tile-lo) 100%); }
.mc.tgt.flag { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='st' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%232a302d'/><stop offset='.35' stop-color='%23a7b1ac'/><stop offset='.6' stop-color='%235d6762'/><stop offset='1' stop-color='%231d221f'/></linearGradient><linearGradient id='fl' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ff6a78'/><stop offset='.55' stop-color='%23ff2f45'/><stop offset='1' stop-color='%23b5162b'/></linearGradient><linearGradient id='fd' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23c41d33'/><stop offset='1' stop-color='%238c1020'/></linearGradient></defs><ellipse cx='16.5' cy='27.6' rx='8.6' ry='1.6' fill='%23000' opacity='.35'/><rect x='8' y='24.4' width='17' height='3.2' rx='1.1' fill='url(%23st)' stroke='%230b0d0c' stroke-width='.5'/><rect x='11' y='21.8' width='11' height='3' rx='1' fill='url(%23st)' stroke='%230b0d0c' stroke-width='.5'/><rect x='15.2' y='5' width='2.4' height='17.4' rx='.9' fill='url(%23st)' stroke='%230b0d0c' stroke-width='.5'/><circle cx='16.4' cy='4.9' r='1.6' fill='%23d9dfdc' stroke='%230b0d0c' stroke-width='.5'/><path d='M17.6 6.2 L27.4 9.6 L21.8 11 Z' fill='url(%23fl)'/><path d='M17.6 6.2 L21.8 11 L27.4 9.6 L17.6 15.2 Z' fill='url(%23fd)'/><path d='M17.6 6.2 L27.4 9.6 L17.6 15.2 Z' fill='none' stroke='%235a0812' stroke-width='.6' stroke-linejoin='round'/><path d='M18.4 7.4 L25 9.7' stroke='%23ffd0d6' stroke-width='.8' stroke-linecap='round' opacity='.8'/><path d='M17.8 21.4 V6' stroke='%238ff6ff' stroke-opacity='.45' stroke-width='.6'/></svg>") center / 26px no-repeat, linear-gradient(145deg, #7a9886, #435a4e); }
.mc.flag { animation: flagIn .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes flagIn { from { transform: translateY(-8px) scale(.6); } to { transform: none; } }
.coin { border: 0; width: 22px; height: 22px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='c' cx='38%' cy='32%' r='75%'><stop offset='0' stop-color='%23fff1b0'/><stop offset='.45' stop-color='%23f2c230'/><stop offset='1' stop-color='%239a6f0c'/></radialGradient></defs><circle cx='16' cy='16' r='14.6' fill='url(%23c)' stroke='%235c430c' stroke-width='.8'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(0 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(45 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(90 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(135 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(180 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(225 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(270 16 16)'/><rect x='14.4' y='1.2' width='3.2' height='4.6' rx='.8' fill='%23fff6d6' transform='rotate(315 16 16)'/><circle cx='16' cy='16' r='9.4' fill='none' stroke='%23fff6d6' stroke-width='.9' stroke-dasharray='2 1.6'/><circle cx='16' cy='16' r='7.6' fill='%23d9a82c' stroke='%239a6f0c' stroke-width='.6'/><path d='M12.6 11.6h6.8M12.6 11.6l4 4.4-4 4.4h6.8' fill='none' stroke='%234a3508' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/><ellipse cx='11' cy='9' rx='4' ry='2' fill='%23fff' opacity='.35' transform='rotate(-30 11 9)'/></svg>") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 6px rgba(255,207,61,.8)); }
.shell { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'><defs><linearGradient id='h' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%237a1020'/><stop offset='.32' stop-color='%23ff8a98'/><stop offset='.55' stop-color='%23e8344c'/><stop offset='1' stop-color='%237a1020'/></linearGradient><linearGradient id='br' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%236e5212'/><stop offset='.3' stop-color='%23ffe08a'/><stop offset='.55' stop-color='%23d9a82c'/><stop offset='1' stop-color='%235c430c'/></linearGradient></defs><rect x='2' y='2.4' width='12' height='27' rx='2.2' fill='url(%23h)' stroke='%230b0d0c' stroke-width='.5'/><line x1='4.4' y1='4.6' x2='4.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='6.4' y1='4.6' x2='6.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='8.4' y1='4.6' x2='8.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='10.4' y1='4.6' x2='10.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='12.4' y1='4.6' x2='12.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='8' y1='3.2' x2='11.60' y2='3.20' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='9.80' y2='4.41' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='6.20' y2='4.41' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='4.40' y2='3.20' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='6.20' y2='1.99' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='9.80' y2='1.99' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><rect x='1.4' y='27.6' width='13.2' height='8.6' rx='1.2' fill='url(%23br)' stroke='%233b2a06' stroke-width='.5'/><rect x='.8' y='35.2' width='14.4' height='2.6' rx='.9' fill='url(%23br)' stroke='%233b2a06' stroke-width='.5'/><line x1='1.6' y1='30.6' x2='14.4' y2='30.6' stroke='%233b2a06' stroke-opacity='.45' stroke-width='.5'/><rect x='4' y='3.6' width='1.3' height='24' rx='.6' fill='%23ffffff' opacity='.22'/></svg>") center / contain no-repeat; }
.shell.blank { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'><defs><linearGradient id='h' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%2316336f'/><stop offset='.32' stop-color='%239cc0ff'/><stop offset='.55' stop-color='%233f7be0'/><stop offset='1' stop-color='%2316336f'/></linearGradient><linearGradient id='br' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%236e5212'/><stop offset='.3' stop-color='%23ffe08a'/><stop offset='.55' stop-color='%23d9a82c'/><stop offset='1' stop-color='%235c430c'/></linearGradient></defs><rect x='2' y='2.4' width='12' height='27' rx='2.2' fill='url(%23h)' stroke='%230b0d0c' stroke-width='.5'/><line x1='4.4' y1='4.6' x2='4.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='6.4' y1='4.6' x2='6.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='8.4' y1='4.6' x2='8.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='10.4' y1='4.6' x2='10.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='12.4' y1='4.6' x2='12.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='8' y1='3.2' x2='11.60' y2='3.20' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='9.80' y2='4.41' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='6.20' y2='4.41' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='4.40' y2='3.20' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='6.20' y2='1.99' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='9.80' y2='1.99' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><rect x='1.4' y='27.6' width='13.2' height='8.6' rx='1.2' fill='url(%23br)' stroke='%233b2a06' stroke-width='.5'/><rect x='.8' y='35.2' width='14.4' height='2.6' rx='.9' fill='url(%23br)' stroke='%233b2a06' stroke-width='.5'/><line x1='1.6' y1='30.6' x2='14.4' y2='30.6' stroke='%233b2a06' stroke-opacity='.45' stroke-width='.5'/><rect x='4' y='3.6' width='1.3' height='24' rx='.6' fill='%23ffffff' opacity='.22'/></svg>"); }
.shell.unk { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'><defs><linearGradient id='h' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%231c2420'/><stop offset='.32' stop-color='%236f7c76'/><stop offset='.55' stop-color='%233e4b45'/><stop offset='1' stop-color='%231c2420'/></linearGradient><linearGradient id='br' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%236e5212'/><stop offset='.3' stop-color='%23ffe08a'/><stop offset='.55' stop-color='%23d9a82c'/><stop offset='1' stop-color='%235c430c'/></linearGradient></defs><rect x='2' y='2.4' width='12' height='27' rx='2.2' fill='url(%23h)' stroke='%230b0d0c' stroke-width='.5'/><line x1='4.4' y1='4.6' x2='4.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='6.4' y1='4.6' x2='6.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='8.4' y1='4.6' x2='8.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='10.4' y1='4.6' x2='10.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='12.4' y1='4.6' x2='12.4' y2='28.4' stroke='%23000' stroke-opacity='.18' stroke-width='.5'/><line x1='8' y1='3.2' x2='11.60' y2='3.20' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='9.80' y2='4.41' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='6.20' y2='4.41' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='4.40' y2='3.20' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='6.20' y2='1.99' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><line x1='8' y1='3.2' x2='9.80' y2='1.99' stroke='%23000' stroke-opacity='.35' stroke-width='.45'/><circle cx='8' cy='15.6' r='5' fill='%235fe0c4' opacity='.12'/><path d='M6.2 13.2a1.9 1.9 0 1 1 2.7 1.7c-.7.4-.9.9-.9 1.6' fill='none' stroke='%235fe0c4' stroke-width='1.4' stroke-linecap='round'/><circle cx='8' cy='19.2' r='.85' fill='%235fe0c4'/><rect x='1.4' y='27.6' width='13.2' height='8.6' rx='1.2' fill='url(%23br)' stroke='%233b2a06' stroke-width='.5'/><rect x='.8' y='35.2' width='14.4' height='2.6' rx='.9' fill='url(%23br)' stroke='%233b2a06' stroke-width='.5'/><line x1='1.6' y1='30.6' x2='14.4' y2='30.6' stroke='%233b2a06' stroke-opacity='.45' stroke-width='.5'/><rect x='4' y='3.6' width='1.3' height='24' rx='.6' fill='%23ffffff' opacity='.22'/></svg>"); }
.shell .sb, .shell .sh { display: none; }
.ball { display: inline-block; width: 22px; height: 22px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='g' cx='35%' cy='30%' r='75%'><stop offset='0' stop-color='%23ffffff'/><stop offset='.25' stop-color='%23bff9ff'/><stop offset='.7' stop-color='%233fc6d8'/><stop offset='1' stop-color='%230d5160'/></radialGradient></defs><ellipse cx='17' cy='29' rx='9' ry='1.8' fill='%23000' opacity='.35'/><circle cx='16' cy='15.6' r='12' fill='url(%23g)' stroke='%2306333c' stroke-width='.6'/><ellipse cx='11.6' cy='10.4' rx='4.2' ry='2.6' fill='%23fff' opacity='.85' transform='rotate(-30 11.6 10.4)'/><path d='M24.4 20.4a12 12 0 0 1-12 7' fill='none' stroke='%23ffffff' stroke-opacity='.4' stroke-width='1'/></svg>") center / contain no-repeat; }

/* ---------- CASH OUT ---------- */
#game.cr .bjOnly, #game.cr .msOnly { display: none !important; }
#game:not(.cr) .crOnly { display: none !important; }
#crHud { position: absolute; left: 44px; top: 330px; width: 150px; display: flex; flex-direction: column; align-items: center; }
#crPanel {
  position: absolute; left: 224px; top: 322px; width: 272px; height: 262px; border-radius: 9px; text-align: center;
  background: linear-gradient(#111c17, #0d1612); border: 1px solid rgba(150,220,190,.38);
  box-shadow: 0 0 34px rgba(0,0,0,.55), inset 0 0 26px rgba(0,0,0,.6);
}
.crlab { margin-top: 22px; font: 700 15px 'Barlow Semi Condensed'; letter-spacing: 2px; color: #9fb2a6; }
.crlab.small { margin-top: 14px; font-size: 12px; }
.crmult { font: 900 66px/1.15 Montserrat; color: var(--gold); text-shadow: 0 0 22px rgba(255,207,61,.6); letter-spacing: -1px; }
.crmult.crashed { color: var(--red); text-shadow: 0 0 22px rgba(255,61,94,.7); animation: pop .3s; }
.crhist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 12px 0; }
.crhist i { font: 800 13px/1 'Barlow Semi Condensed'; font-style: normal; padding: 5px 7px; border-radius: 5px; background: #1b2a22; color: #cfd6d0; border: 1px solid rgba(150,220,190,.2); }
.crhist i.hi { color: #5cf08a; border-color: rgba(92,240,138,.45); }
.crhist i.lo { color: #ff6b7d; border-color: rgba(255,107,125,.45); }
#crActions { position: absolute; left: 36px; right: 36px; top: 1066px; height: 150px; z-index: 6; }
.btn.cash { flex: 1; background: linear-gradient(#ffd84a, #e8b51e); color: #141414; font-size: 44px; --glow: rgba(250,208,63,.45); }
.btn.cash small { font: 800 20px 'Barlow Semi Condensed'; letter-spacing: .5px; }
.btn.cash:not([disabled]) { animation: cashPulse .5s ease-in-out infinite alternate; }
@keyframes cashPulse { from { box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 20px rgba(250,208,63,.3); } to { box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 46px rgba(250,208,63,.75); } }
#crBet { gap: 10px; }
#crBet .betbox { flex: 1; padding: 0 6px; }
#crBet .chip { width: 52px; height: 52px; font-size: 28px; }
#crBet .betval b { font-size: 30px; }
#crBet .betbox.tgt .betval b { color: var(--cyan); text-shadow: 0 0 14px rgba(143,246,255,.4); }
#crBet #bLaunch { flex: .62; font-size: 34px; }

/* ---------- ONE IN SIX : roulette russe ---------- */
#game.rr .bjOnly, #game.rr .msOnly, #game.rr .crOnly { display: none !important; }
#game:not(.rr) .rrOnly { display: none !important; }
#rrHud { position: absolute; left: 44px; top: 322px; width: 150px; display: flex; flex-direction: column; align-items: center; }
#rrHud .lab { margin-top: 9px; }
.rrbul { display: flex; gap: 4px; }
.rrbul i { width: 12px; height: 22px; border-radius: 6px 6px 2px 2px; background: #1d2621; border: 1px solid #2f3a35; }
.rrbul i.on { background: linear-gradient(90deg, #7a5a10, #ffe08a 45%, #b8861e); border-color: #5c430c; box-shadow: 0 0 6px rgba(255,207,61,.5); }
#rrPanel {
  position: absolute; left: 224px; top: 322px; width: 272px; height: 262px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(#111c17, #0d1612); border: 1px solid rgba(150,220,190,.38);
  box-shadow: 0 0 34px rgba(0,0,0,.55), inset 0 0 26px rgba(0,0,0,.6);
}
.rr-cyl { position: absolute; left: 50px; top: 2px; width: 172px; height: 176px; overflow: visible; }
.rr-rot { transition: transform 1s cubic-bezier(.15,.75,.25,1); transform-origin: 0 0; }
.rr-pin { fill: #ffd23f; filter: drop-shadow(0 0 4px rgba(255,210,63,.9)); }
.rr-ch .rr-case, .rr-ch .rr-q, .rr-ch .rr-x { display: none; }
.rr-ch.full .rr-case { display: inline; }
.rr-ch.unk .rr-q { display: inline; font: 900 14px Montserrat; fill: #5fe0c4; filter: drop-shadow(0 0 3px rgba(95,224,196,.8)); }
.rr-ch.empty .rr-x { display: inline; stroke: #8ff6ff; stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; }
.rr-ch.hot > circle:first-child { stroke: #ffd23f; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255,210,63,.9)); }
.rr-colt { position: absolute; left: 12px; top: 164px; width: 248px; height: 102px; overflow: visible; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.rr-hammer { transition: transform .18s ease-out; transform-origin: 62px 20px; }
.rr-hammer.cocked { transform: rotate(-22deg); }
.rr-flash { opacity: 0; }
.rr-flash.on { animation: rrFlash .32s ease-out; }
@keyframes rrFlash { 0% { opacity: 1; transform: scale(1.3); transform-origin: 238px 14px; } 100% { opacity: 0; transform: scale(.8); transform-origin: 238px 14px; } }
#rrActions { position: absolute; left: 36px; right: 36px; top: 1066px; height: 150px; z-index: 6; }
#rrSetup { gap: 10px; }
#rrSetup .betbox { flex: 1; padding: 0 6px; }
#rrSetup .chip { width: 52px; height: 52px; font-size: 28px; }
#rrSetup .betval b { font-size: 30px; }
#rrSetup .betval .mode { cursor: pointer; color: var(--cyan); text-decoration: underline dotted; font-size: 13px; letter-spacing: 1px; }
#rrSetup #bRrLoad { flex: .62; font-size: 32px; }
#rrPlay { gap: 10px; }
#rrPlay .btn { font-size: 26px; }
#rrPlay .btn small { font-size: 15px; }
#rrPlay .btn.cash { font-size: 26px; }
/* menu : 7 cartes */
.gcard { height: 88px; }
.glist { gap: 10px; top: 340px; }
.gtxt b { font-size: 27px; }
.rr-star { filter: drop-shadow(1.5px 2px 1.5px rgba(0,0,0,.7)); }
#rrPanel.setup .rr-ch { cursor: pointer; }
#rrPanel.setup .rr-ch:not(.full) > circle:nth-child(2) { stroke: #5fe0c4; stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 3 2; }
#rrPanel.setup .rr-ch:hover > circle:first-child { filter: drop-shadow(0 0 4px rgba(95,224,196,.9)); }

/* ---------- BUCKSHOTS ---------- */
#game.bs .bjOnly, #game.bs .msOnly, #game.bs .crOnly, #game.bs .rrOnly { display: none !important; }
#game:not(.bs) .bsOnly { display: none !important; }
#bsHud { position: absolute; left: 44px; top: 330px; width: 150px; display: flex; flex-direction: column; align-items: center; }
#bsMatches { grid-template-columns: repeat(5, 22px); gap: 4px; }
#bsMatches i { width: 22px; height: 22px; }
#bsPanel {
  position: absolute; left: 224px; top: 322px; width: 272px; height: 262px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(#111c17, #0d1612); border: 1px solid rgba(150,220,190,.38);
  box-shadow: 0 0 34px rgba(0,0,0,.55), inset 0 0 26px rgba(0,0,0,.6);
}
.bs-shells { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: center; gap: 6px; height: 54px; }
.bs-shells .shell { width: 22px; height: 52px; }
.bs-shells .shell.spent { opacity: .28; filter: grayscale(.4); }
.bs-shells .shell.pop { animation: mcPop .3s cubic-bezier(.2,1.6,.4,1) backwards; }
.bs-shells.shuffle .shell { animation: bsShuf .45s ease-in-out; }
@keyframes bsShuf { 0% { transform: translateY(0); } 30% { transform: translateY(-14px) rotate(-10deg); } 60% { transform: translateY(6px) rotate(8deg); } 100% { transform: none; } }
.bs-count { position: absolute; left: 0; right: 0; top: 68px; text-align: center; font: 800 15px 'Barlow Semi Condensed'; letter-spacing: 1px; color: #9fb2a6; }
.bs-count .r { color: #ff5a6e; } .bs-count .b { color: #6aa8ff; }
.bs-row { position: absolute; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; font: 800 15px 'Barlow Semi Condensed'; letter-spacing: 2px; color: #cfd6d0; padding: 3px 8px; border-radius: 6px; transition: background .2s, box-shadow .2s; }
.bs-row.dealer { top: 92px; } .bs-row.you { top: 226px; }
.bs-row.hot { background: rgba(255,61,94,.16); box-shadow: inset 0 0 0 1px rgba(255,61,94,.55); color: #fff; }
.bs-lives { display: flex; gap: 5px; }
.bs-lives i { width: 22px; height: 12px; border-radius: 2px; background: #3a1010; position: relative; }
.bs-lives i.on { background: #5fd27a; box-shadow: 0 0 8px rgba(95,210,122,.7); }
.bs-lives i.on::after { content: ''; position: absolute; left: 8px; top: 1px; width: 6px; height: 10px; background: #0d1612; clip-path: polygon(60% 0, 0 55%, 45% 55%, 30% 100%, 100% 40%, 55% 40%); opacity: .55; }
.bs-gun { position: absolute; left: 16px; top: 124px; width: 240px; height: 70px; overflow: visible; transition: transform .35s cubic-bezier(.2,1.3,.4,1); transform-origin: 40% 40%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.bs-gun.aimD { transform: rotate(-11deg); }
.bs-gun.aimP { transform: scaleX(-1) rotate(-11deg); }
.bs-flash { opacity: 0; }
.bs-flash.on { animation: rrFlash .32s ease-out; }
.bs-pump.go { animation: bsPump .3s ease-in-out; }
@keyframes bsPump { 0%, 100% { transform: none; } 45% { transform: translateX(-14px); } }
#bsActions { position: absolute; left: 36px; right: 36px; top: 1066px; height: 150px; z-index: 6; }
#bsPlay { gap: 12px; }
#bsPlay .btn { font-size: 26px; }
#bsPlay .btn small { font-size: 15px; }

/* ---------- barre de stats : crédits + énergie ---------- */
#stats { display: flex; gap: 10px; align-items: center; }
.stat { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 6px 0 12px; border-radius: 23px; background: rgba(10,20,15,.75); border: 1px solid rgba(150,220,190,.3); font: 800 22px Montserrat; color: #fff; }
.stat b { min-width: 54px; text-align: right; }
.ico-chip { width: 22px; height: 22px; display: inline-block; background: radial-gradient(circle, #ffe9a0 0 30%, #d9a82c 31% 42%, transparent 43%), repeating-conic-gradient(#f2c230 0 18deg, #fff3c4 18deg 36deg); border-radius: 50%; box-shadow: 0 0 8px rgba(255,207,61,.6); }
.ico-bolt { font-style: normal; font-size: 20px; color: #5cf08a; text-shadow: 0 0 8px rgba(92,240,138,.8); }
.stat .plus { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #2a6ccb; color: #fff; font: 900 22px/1 Montserrat; cursor: pointer; }
#statEnergyBox.empty { border-color: #ff3d5e; }
#statEnergyBox.empty .ico-bolt { color: #ff3d5e; text-shadow: 0 0 8px rgba(255,61,94,.8); }
/* ---------- menu compact + grille COMING SOON ---------- */
.glist { top: 318px; gap: 8px; }
.gcard { height: 78px; }
.gico { width: 62px; height: 62px; }
.gico svg { width: 48px; height: 48px; }
.gtxt b { font-size: 25px; }
.gtxt i { margin-top: 6px; font-size: 15px; }
.gplay { padding: 10px 12px; font-size: 20px; }
.soonlab { position: absolute; left: 0; right: 0; top: 818px; text-align: center; font: 800 16px 'Barlow Semi Condensed'; letter-spacing: 4px; color: #6f8178; }
.soongrid { position: absolute; left: 44px; right: 44px; top: 846px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.soonc { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: .42; filter: grayscale(.85); }
.sico { width: 64px; height: 64px; border-radius: 12px; background: rgba(12,22,17,.85); border: 1px solid rgba(150,220,190,.2); display: flex; align-items: center; justify-content: center; }
.sico svg { width: 44px; height: 44px; }
.soonc b { margin-top: 5px; font: 800 12px/1.1 'Barlow Semi Condensed'; color: #cfd6d0; letter-spacing: .5px; }
.soonc i { font: 600 11px 'Barlow Semi Condensed'; font-style: normal; color: #8a9a91; }
.hubreset { position: absolute; left: 0; right: 0; top: 1062px; text-align: center; font: 700 16px 'Barlow Semi Condensed'; letter-spacing: 1px; color: #5cf08a; }
.hubcap { top: 1110px; }
/* ---------- fenêtres ---------- */
.modal { position: absolute; inset: 0; z-index: 60; background: rgba(3,7,5,.88); display: flex; align-items: center; justify-content: center; }
.modal-box { width: 560px; padding: 34px 30px; border-radius: 18px; text-align: center; background: linear-gradient(#142219, #0d1612); border: 1px solid rgba(150,220,190,.35); box-shadow: 0 0 60px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 16px; }
.modal-ico { font-size: 54px; color: #5cf08a; text-shadow: 0 0 18px rgba(92,240,138,.8); }
.modal-box h3 { margin: 0; font: 900 38px Montserrat; color: #fff; }
.modal-box p { margin: 0; font: 600 22px/1.4 'Barlow Semi Condensed'; color: #cfd6d0; }
.modal-box .btn { flex: none; height: 92px; font-size: 30px; }
.mockad { position: absolute; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; }
.mockad-box { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; font: 900 40px Montserrat; }
.mockad-box span { font: 600 22px 'Barlow Semi Condensed'; color: #9fb2a6; }
.mockad-box .btn { flex: none; width: 260px; height: 80px; font-size: 28px; }
/* menu : 7 cartes compactes + grille sous la liste */
.glist { top: 320px; gap: 6px; }
.gcard, .gcard.lab { height: 66px; padding: 0 16px; }
.gico { width: 54px; height: 54px; }
.gico svg { width: 42px; height: 42px; }
.gico.shells .shell { width: 12px; height: 34px; }
.gtxt b { font-size: 23px; }
.gtxt i { margin-top: 4px; font-size: 14px; padding: 3px 6px; }
.gplay { padding: 9px 12px; font-size: 19px; }
.soonlab { top: 830px; }
.soongrid { top: 856px; }
.hubreset { top: 1056px; }
.hubcap { top: 1096px; }
.hubreset { top: 1068px; }
.hubcap { top: 1106px; }
/* menu : 5 jeux (SOUND LAB retiré du hub) → cartes plus grandes */
.glist { top: 322px; gap: 10px; }
.gcard { height: 82px; }
.gico { width: 60px; height: 60px; }
.gico svg { width: 46px; height: 46px; }
.gtxt b { font-size: 25px; }
.soonlab { top: 806px; }
.soongrid { top: 834px; }
/* ---------- PROGRESSION : barre joueur, toasts, profil, bonus quotidien ---------- */
.pbar { position: absolute; left: 50px; right: 50px; top: 102px; height: 64px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 8px; border-radius: 32px; background: rgba(10,20,15,.78); border: 1px solid rgba(150,220,190,.3); color: #e9eee8; font: 800 18px/1 Montserrat; cursor: pointer; }
.plv { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #ffe27a, #e8a316 60%, #9a5c00); box-shadow: 0 0 14px rgba(255,207,61,.45), inset 0 -3px 0 rgba(0,0,0,.25); }
.plv b { font: 900 22px/1 Montserrat; color: #2a1800; }
.plv.big { width: 76px; height: 76px; }
.plv.big b { font-size: 34px; }
.pxp { flex: 1; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.pxp span { font: 800 14px/1 'Barlow Semi Condensed'; letter-spacing: 2px; color: #9fb2a6; }
.pxpbar { height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.pxpbar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #ffcf3d, #ffe98a); box-shadow: 0 0 10px rgba(255,207,61,.6); transition: width .6s cubic-bezier(.2,1,.3,1); }
.pxp small { font: 700 13px/1 'Barlow Semi Condensed'; color: #cfd6d0; }
.pchip { flex: none; padding: 9px 12px; border-radius: 20px; background: rgba(255,255,255,.07); font: 800 19px/1 Montserrat; }
.grec { display: inline-block; margin-left: 8px; font: 800 14px/1 'Barlow Semi Condensed'; font-style: normal; letter-spacing: .5px; color: #ffcf3d; vertical-align: 2px; }
#toasts { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); width: 600px; z-index: 75; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 18px; background: linear-gradient(#18301f, #0f1d15); border: 1px solid rgba(255,207,61,.55); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(255,207,61,.18); opacity: 0; transform: translateY(-30px) scale(.92); transition: opacity .3s, transform .35s cubic-bezier(.2,1.5,.4,1); }
.toast.in { opacity: 1; transform: none; }
.toast.level { border-color: #ffcf3d; background: linear-gradient(#3a2a05, #1a1303); }
.toast.record { border-color: rgba(143,246,255,.6); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(143,246,255,.2); }
.ticon { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 42px; border-radius: 16px; background: rgba(255,255,255,.07); }
.lvnum { font: 900 34px/1 Montserrat; font-style: normal; color: #2a1800; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe27a, #e8a316 60%, #9a5c00); }
.ttxt { display: flex; flex-direction: column; gap: 6px; }
.ttxt b { font: 900 28px/1 Montserrat; color: #fff; }
.ttxt span { font: 600 18px/1.2 'Barlow Semi Condensed'; color: #ffcf3d; }
.modal-box.profile { width: 620px; max-height: 1180px; overflow: auto; gap: 14px; text-align: left; }
.phead { display: flex; align-items: center; gap: 18px; }
.phead .pxp span { font: 900 26px/1 Montserrat; color: #fff; letter-spacing: 0; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pstats div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; background: rgba(255,255,255,.05); }
.pstats b { font: 900 26px/1 Montserrat; color: #fff; }
.pstats span { font: 700 13px/1 'Barlow Semi Condensed'; letter-spacing: 1.5px; color: #9fb2a6; }
.modal-box h4 { margin: 6px 0 0; font: 800 16px/1 'Barlow Semi Condensed'; letter-spacing: 3px; color: #6f8178; }
.precs { display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font: 800 18px/1 Montserrat; color: #e9eee8; }
.prow b { color: #ffcf3d; }
.bgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.btile { aspect-ratio: 1; border-radius: 14px; border: 1px solid rgba(150,220,190,.2); background: rgba(12,22,17,.85); font-size: 38px; cursor: pointer; filter: grayscale(1); opacity: .35; }
.btile.on { filter: none; opacity: 1; border-color: rgba(255,207,61,.6); box-shadow: 0 0 14px rgba(255,207,61,.2); }
.bcap { min-height: 44px; font: 600 18px/1.25 'Barlow Semi Condensed'; color: #cfd6d0; text-align: center; }
.bcap b { color: #fff; }
.modal-box.daily { width: 640px; }
.dtrack { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dcell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(150,220,190,.15); }
.dcell small { font: 800 12px/1 'Barlow Semi Condensed'; letter-spacing: 1px; color: #6f8178; }
.dcell b { font-size: 26px; line-height: 1; color: #3d5348; }
.dcell span { font: 800 15px/1 Montserrat; color: #9fb2a6; }
.dcell.done { opacity: .55; }
.dcell.done b { color: #5cf08a; }
.dcell.now { border-color: #ffcf3d; background: rgba(255,207,61,.12); box-shadow: 0 0 18px rgba(255,207,61,.3); transform: scale(1.06); }
.dcell.now b, .dcell.now span { color: #ffcf3d; }