/* Maquettes dynamiques : 02 méthode, 05 parcours, 08 packs (v2) */

/* ---------- Base commune ---------- */
.mx-scene{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,rgba(194,0,0,.16),rgba(6,6,9,.6) 70%);border:1px solid rgba(255,255,255,.06)}
.mx-tile>.mx-scene{height:172px}

/* ---------- 02 : grille des cartes ---------- */
.mx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.mx-tile{position:relative;padding:18px;border-radius:22px;background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);display:grid;gap:12px;align-content:start;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .45s}
.mx-tile:hover{transform:translateY(-4px);border-color:rgba(194,0,0,.55);box-shadow:0 24px 50px -24px rgba(194,0,0,.55)}
.mx-tile h3{font-size:1rem;margin:2px 0 0}
.mx-tile p{margin:0;color:var(--mut);font-size:.88rem;line-height:1.55}
@media (max-width:980px){.mx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mx-tiles{grid-template-columns:1fr}.mx-tile>.mx-scene{height:150px}}

/* Bases : table, sièges et distribution */
.mx-felt{position:absolute;left:50%;top:44%;width:74%;height:58%;transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(ellipse at 50% 40%,#7a0000,#2a0000 80%);border:2px solid #3a3a46;box-shadow:inset 0 0 22px rgba(0,0,0,.6)}
.mx-felt span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.66rem;letter-spacing:.06em;color:rgba(255,255,255,.7);white-space:nowrap;text-transform:uppercase}
.mx-seat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:0;padding:4px 9px;border-radius:99px;background:rgba(10,10,14,.92);border:1px solid rgba(255,255,255,.12);font-size:.66rem;line-height:1.2;white-space:nowrap;z-index:2}
.mx-seat b{color:#fff;font-weight:600}
.mx-seat small{color:var(--mut);font-size:.6rem}
.mx-dealer{position:absolute;left:calc(50% + 34px);top:calc(86% - 2px);z-index:3;width:16px;height:16px;border-radius:50%;background:#fff;color:#111;font:800 .6rem/16px var(--ff-d);text-align:center}
.mx-deal{position:absolute;left:50%;top:44%;width:17px;height:24px;border-radius:3px;background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,-50%) scale(.6);z-index:1;transition:left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .8s;transition-delay:var(--d,0s)}
.mx-deal::after{content:"";position:absolute;inset:2px;border-radius:2px;background:repeating-linear-gradient(45deg,#8a0000 0 2px,#c40000 2px 4px)}
.mx-deal.r::after{background:repeating-linear-gradient(45deg,#111 0 2px,#333 2px 4px)}
.go .mx-deal{opacity:1;left:calc(var(--x) + var(--dx));top:calc(var(--y) - 16px);transform:translate(-50%,-50%) scale(1)}

/* Quelles mains : grille 13×13, sans texte illisible */
.mx-scene-range{padding:12px 12px 10px;display:grid;grid-template-rows:1fr auto;gap:8px;background:rgba(6,6,9,.6)}
.mx-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;align-content:stretch}
.mx-grid i{border-radius:2px;background:rgba(255,255,255,.07);opacity:0;transform:scale(.7);transition:opacity .35s,transform .35s,background .5s;transition-delay:var(--d,0s)}
.go .mx-grid i{opacity:1;transform:scale(1)}
.mx-grid i.play{background:linear-gradient(160deg,#ff4a4a,#a00000);box-shadow:0 0 6px rgba(255,59,59,.35)}
.mx-grid i:hover{background:#fff}
.mx-legend{display:flex;align-items:center;gap:10px;font-size:.66rem;color:var(--mut)}
.mx-legend span{display:inline-flex;align-items:center;gap:5px}
.mx-legend span::before{content:"";width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,.12)}
.mx-legend span.play::before{background:#c40000}
.mx-legend small{margin-left:auto;color:var(--mut)}

/* Tournois : bulle */
.mx-scene-bubble{padding:16px 16px 14px;display:grid;align-content:space-between}
.mx-bub-top{display:flex;align-items:baseline;gap:10px}
.mx-count{font-family:var(--ff-d);font-size:2.4rem;line-height:1;color:#ff3b3b;font-variant-numeric:tabular-nums}
.mx-bub-top small{color:var(--mut);font-size:.72rem}
.mx-bub-bar{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.08)}
.mx-bub-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,#8a0000,#ff3b3b);transition:width 2.2s cubic-bezier(.2,.8,.2,1) .2s}
.go .mx-bub-bar i{width:70%}
.mx-marker{position:absolute;top:-10px;bottom:-10px;width:2px;background:#fff;transform:translateX(-1px)}
.mx-marker em{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-style:normal;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap}
.mx-bub-foot{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mut)}
.mx-bub-foot b{color:#fff}

/* Maths : outs */
.mx-scene-outs{padding:12px;display:grid;grid-template-rows:1fr auto;gap:10px}
.mx-deck{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-content:center}
.mx-deck i{aspect-ratio:.72;border-radius:2px;background:rgba(255,255,255,.1);opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s,background .4s;transition-delay:var(--d,0s)}
.go .mx-deck i{opacity:1;transform:scale(1)}
.mx-deck i.out{background:linear-gradient(160deg,#ff4a4a,#8a0000);box-shadow:0 0 8px rgba(255,59,59,.55)}
.mx-outs-foot{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;color:var(--mut)}
.mx-outs-foot b{color:#ff3b3b;font-family:var(--ff-d);font-size:.8rem}

/* Mental : jauge */
.mx-scene-tilt{display:grid;place-items:center;align-content:center;padding:10px 10px 12px}
.mx-scene-tilt svg{width:72%;max-width:230px;overflow:visible}
.mx-tilt .arc{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7;stroke-linecap:round}
.mx-tilt .zone{fill:none;stroke:#2dd36f;stroke-width:7;stroke-linecap:round;opacity:.75}
.mx-tilt .needle{stroke:#ff3b3b;stroke-width:2.6;stroke-linecap:round;transform-origin:60px 62px;transform:rotate(-80deg);transition:transform 1.8s cubic-bezier(.3,1.35,.5,1) .3s}
.mx-tilt circle{fill:#ff3b3b}
.go .mx-tilt .needle{transform:rotate(58deg)}
.mx-tilt-lbl{width:72%;max-width:230px;display:flex;justify-content:space-between;font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-top:-2px}

/* Budget : bankroll et limite */
.mx-scene-bank{padding:16px 16px 12px}
.mx-bars{position:absolute;left:16px;right:16px;bottom:12px;top:34px;display:flex;align-items:flex-end;gap:5px}
.mx-bars i{flex:1;height:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#ff4a4a,#8a0000);transition:height .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.go .mx-bars i{height:var(--h)}
.mx-limit{position:absolute;left:16px;right:16px;top:58%;border-top:1px dashed rgba(255,255,255,.6);font-size:.6rem;color:#fff;letter-spacing:.04em;text-transform:uppercase;text-align:right;transform:translateY(-100%);padding-bottom:3px}
.mx-limit::after{content:"";}

/* ---------- 05 : parcours ---------- */
.tl-vis{height:124px;margin:-4px 0 14px}
.mx-scene-step{display:grid;place-items:center}
.mx-sc{position:absolute;top:50%;width:17px;height:24px;margin:-12px 0 0 -8px;border-radius:3px;background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.5);opacity:0;transform:translateY(16px) rotate(-6deg);transition:opacity .45s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.mx-sc::after{content:"";position:absolute;inset:2px;border-radius:2px;background:repeating-linear-gradient(45deg,#8a0000 0 2px,#c40000 2px 4px)}
.mx-sc.r::after{background:repeating-linear-gradient(45deg,#111 0 2px,#333 2px 4px)}
.mx-sc.s1{left:calc(50% - 12px)}
.mx-sc.s2{left:calc(50% + 12px);transform:translateY(16px) rotate(6deg)}
.go .mx-sc{opacity:1;transform:translateY(0) rotate(0)}
.go .mx-sc.s1{transform:translate(-6px,0) rotate(-6deg)}
.go .mx-sc.s2{transform:translate(6px,0) rotate(6deg)}
.mx-flop{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:4px}
.mx-flop i{width:14px;height:20px;border-radius:2px;background:rgba(255,255,255,.12)}
.mx-choices{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:center;padding:10px;position:relative}
.mx-choices button{padding:7px 11px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);font:inherit;font-size:.72rem;transition:all .35s}
.mx-choices button.pick{border-color:rgba(194,0,0,.7);color:#fff;background:rgba(194,0,0,.25);box-shadow:0 0 14px -4px rgba(194,0,0,.9)}
.mx-check{position:absolute;right:12px;bottom:10px;width:22px;height:22px;border-radius:50%;background:#2dd36f;color:#041;font:800 .8rem/22px var(--ff-d);text-align:center;opacity:0;transform:scale(.4);transition:all .5s cubic-bezier(.3,1.5,.5,1) .6s}
.mx-step.go .mx-check,.mx-scene-step.go .mx-check{opacity:1;transform:scale(1)}
.mx-stack{display:grid;align-content:center;gap:10px;padding:14px}
.mx-stack-top{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--ff-d)}
.mx-stack-top b{font-size:1.2rem}
.mx-stack-top span{color:var(--mut)}
.mx-stack .mx-bub-bar i{width:100%;transition:width 2.4s ease .3s}
.mx-stack.go .mx-bub-bar i{width:55%}
.mx-stack small{color:var(--mut);font-size:.7rem;text-align:center}
.mx-ring{position:relative}
.mx-ring svg{width:86px;height:86px;transform:rotate(-90deg)}
.mx-ring .bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7}
.mx-ring .fg{fill:none;stroke:#ff3b3b;stroke-width:7;stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset 2.2s cubic-bezier(.2,.8,.2,1) .2s;filter:drop-shadow(0 0 6px rgba(255,59,59,.6))}
.mx-ring.go .fg{stroke-dashoffset:20}
.mx-ring b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--ff-d);font-size:.72rem;white-space:nowrap}

/* ---------- 08 : packs ---------- */
.mx-scene-plan{height:auto;min-height:118px;padding:14px;display:grid;gap:10px;align-content:center;margin:4px 0 16px}
.mx-mod{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:.78rem;color:var(--mut)}
.mx-mod i{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mx-mod i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#8a0000,#ff3b3b);border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.mx-mod b{color:#2dd36f;opacity:0;transition:opacity .4s;transition-delay:calc(var(--d,0s) + 1s)}
.mx-plan-vis.go .mx-mod i::after,.mx-scene-plan.go .mx-mod i::after{width:100%}
.mx-scene-plan.go .mx-mod b{opacity:1}
.mx-chart{display:flex;align-items:flex-end;gap:6px;height:70px}
.mx-chart i{flex:1;height:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#ff4a4a,#8a0000);transition:height .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.mx-scene-plan.go .mx-chart i{height:var(--h)}
.mx-plan-foot{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--mut)}
.mx-dots{display:flex;gap:6px}
.mx-dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.12)}
.mx-dots i:nth-child(-n+3){background:#ff3b3b;box-shadow:0 0 8px rgba(255,59,59,.6)}
.mx-week{display:flex;gap:8px;justify-content:space-between}
.mx-week span{flex:1;height:24px;border-radius:7px;background:rgba(255,255,255,.06);color:var(--mut);font-size:.66rem;display:grid;place-items:center}
.mx-week span.slot{background:rgba(194,0,0,.35);color:#fff}
.mx-spark{width:100%;height:46px;overflow:visible}
.mx-spark path{fill:none;stroke:#ff3b3b;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 2s cubic-bezier(.2,.8,.2,1) .4s;filter:drop-shadow(0 0 6px rgba(255,59,59,.5))}
.mx-scene-plan.go .mx-spark path{stroke-dashoffset:0}
.mx-plan-foot-lbl{color:var(--mut);font-size:.7rem}

.mx-cards{display:grid;align-content:center;justify-items:center;gap:10px}
.mx-row{display:flex;gap:8px}
.mx-face{width:30px;height:42px;border-radius:5px;background:#fff;color:#111;display:grid;place-items:center;align-content:center;font:900 .95rem/1 var(--ff-d);box-shadow:0 6px 14px -6px rgba(0,0,0,.8);opacity:0;transform:translateY(12px) rotateY(90deg);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.mx-face small{font-size:.7rem;line-height:1}
.mx-face.r{color:#c40000}
.mx-row .mx-face:nth-child(1){--d:.2s}.mx-row .mx-face:nth-child(2){--d:.5s}
.mx-board .mx-face:nth-child(1){--d:1s}.mx-board .mx-face:nth-child(2){--d:1.2s}.mx-board .mx-face:nth-child(3){--d:1.4s}
.go .mx-face{opacity:1;transform:translateY(0) rotateY(0)}
.mx-stack{overflow:hidden}
.mx-stack .mx-bub-bar{margin:0 8px}
.mx-stack .mx-bub-bar{background:rgba(255,255,255,.16)}
.mx-stack .mx-bub-bar i{background:linear-gradient(90deg,#8a0000,#ff3b3b)}
.mx-scene-plan{background:#0c0c11;border-color:rgba(194,0,0,.18)}
.mx-chart{height:92px}
.mx-mod i{background:rgba(255,255,255,.14)}
.mx-spark path{stroke:#ff4a4a}