/* =====================================================================
   BeatDeck · feuille de style
   Identité : fond noir, orange BeatDeck, étiquettes en mono capitales, cartes à collectionner.
   ===================================================================== */
:root{color-scheme:dark;--bg:#0c0c0d;--fg:#ecebe6;--mut:#8d8c85;--ln:#262628;--ln2:#343438;--s1:#121214;--s2:#18181b;--ac:#ff5a1f;--ac2:#a8330b;--ok:#34d399;--no:#f87171;
 --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
 --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
 --hh:60px;--nav:0px;
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--fg);font:15px/1.45 var(--sans);min-height:100vh;min-height:100dvh;background:var(--bg);overflow-x:hidden}
body.lockscroll{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hide{display:none!important}.mut{color:var(--mut)}.small{font-size:13px;line-height:1.5}.grow{flex:1}.c{text-align:center;padding:40px 0}
.eyebrow{display:block;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{60%,100%{transform:translateX(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes foil{to{background-position:300% 0}}
@keyframes up{from{opacity:0;transform:translateY(12px)}}

/* ---------- barre du haut + navigation ----------
   Ordinateur : les rubriques en texte, une aiguille orange sous la rubrique active (comme un bras de platine).
   Téléphone : la navigation descend sous le pouce, au-dessus de la barre système. */
.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:calc(var(--hh) + var(--st));padding:var(--st) max(20px,var(--sr)) 0 max(20px,var(--sl));background:#0c0c0dee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ln)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;justify-self:start}
.brand .bdi{width:24px;height:24px;border-radius:50%;flex:none;background:radial-gradient(circle,#0c0c0d 0 1.5px,var(--ac) 2px 6.5px,#0c0c0d 7px),repeating-radial-gradient(#0c0c0d 0 1px,#2e2e31 1px 2px);box-shadow:0 0 0 1px #3a3a3d;animation:spin 6s linear infinite}
.brand b{font:800 17px var(--sans);letter-spacing:-.03em}.brand b span{color:var(--ac)}
.tabs{display:flex;gap:2px;height:100%}
.tabs button{position:relative;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;border:0;background:none;color:var(--mut);cursor:pointer;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:color .15s}
@media(hover:hover){.tabs button:hover{color:var(--fg)}}
.tabs button:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--ac);transform:scaleX(0);transition:transform .25s cubic-bezier(.2,.9,.2,1)}
.tabs button.on{color:var(--fg)}.tabs button.on:after{transform:none}
.tabs button.on .ico{color:var(--ac)}
.ico{display:flex}.ico svg{width:17px;height:17px}
.nb{position:absolute;top:10px;right:4px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--ac);color:#140702;font:800 10px/17px var(--mono);font-style:normal;letter-spacing:0;text-align:center}
.nb[hidden],.nb2[hidden]{display:none}
.tr{justify-self:end;display:flex;align-items:center;gap:10px}
.wallet{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 6px;border:0;border-radius:18px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);cursor:pointer;font:700 14px var(--mono);letter-spacing:.02em}
.wallet[hidden]{display:none}
.wallet .vcoin{width:24px;height:24px}
.meb{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:18px;cursor:pointer;background:var(--ac);color:#140702;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.meb.in,.meb:has(svg){background:none;color:var(--fg);padding:0 12px 0 3px;box-shadow:inset 0 0 0 1px var(--ln2);text-transform:none;letter-spacing:0;font:600 14px var(--sans)}
.meb:has(svg){padding:0 12px}
.meb .av{width:30px;height:30px;font-size:13px}

/* la monnaie : un disque vinyle, étiquette orange */
.vcoin{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.5' fill='%23101012'/%3E%3Ccircle cx='16' cy='16' r='15' fill='none' stroke='%234a4a4e' stroke-width='.8'/%3E%3Ccircle cx='16' cy='16' r='12.2' fill='none' stroke='%232e2e32' stroke-width='.9'/%3E%3Ccircle cx='16' cy='16' r='9.8' fill='none' stroke='%232e2e32' stroke-width='.9'/%3E%3Ccircle cx='16' cy='16' r='6.8' fill='%23ff5a1f'/%3E%3Ccircle cx='16' cy='16' r='4.6' fill='none' stroke='%23140702' stroke-opacity='.35' stroke-width='.6'/%3E%3Ccircle cx='16' cy='16' r='1.5' fill='%23101012'/%3E%3Cpath d='M5.6 10.2A12 12 0 0 1 11 4.9' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.vcoin.xl{width:64px;height:64px}
.vt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:700;white-space:nowrap}

main{max-width:1120px;margin:0 auto;padding:32px max(20px,var(--sr)) calc(70px + var(--nav)) max(20px,var(--sl))}

/* ---------- boutons : des touches, pas des rectangles ----------
   Coins taillés comme les cartes Diamant, un chant plus sombre en bas qui s'enfonce à l'appui. */
.k{--kc:#1d1d21;--ke:#050506;--cut:7px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border:0;border-bottom:2px solid var(--ke);
 clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
 background:var(--kc);color:var(--fg);box-shadow:inset 0 1px 0 #ffffff17,inset 0 0 0 1px #ffffff10;cursor:pointer;white-space:nowrap;
 font:700 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;transition:filter .15s,transform .08s}
.k:hover{filter:brightness(1.15)}
.k:active{transform:translateY(1px);border-bottom-width:1px}
.k:disabled,.k.dis{opacity:.4;pointer-events:none}
.k:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.k svg{width:16px;height:16px}
.k.pri{--kc:var(--ac);--ke:var(--ac2);color:#140702;box-shadow:inset 0 1px 0 #ffffff55,inset 0 -8px 16px -10px #0004}
.k.ghost{--kc:#ffffff06;--ke:#ffffff0a;box-shadow:inset 0 0 0 1px var(--ln2)}
.k.ghost:hover{box-shadow:inset 0 0 0 1px #5a5a60;filter:none}
.k.danger{--kc:#2a0e0f;--ke:#120405;color:#ff8f86;box-shadow:inset 0 0 0 1px #ef444466}
.k.sm{height:36px;padding:0 13px;font-size:10px;--cut:5px;gap:7px}.k.sm svg{width:14px;height:14px}
.k.xl{height:54px;padding:0 26px;font-size:12px;--cut:9px;width:100%}
.k.wide{grid-column:1/-1;justify-self:center;margin-top:10px}
.k.ico{padding:0;width:36px}
.lnk2{display:inline-block;padding:4px 0;border:0;background:none;color:var(--mut);cursor:pointer;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.lnk2:hover{color:var(--fg)}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:0;border-radius:16px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--mut);cursor:pointer;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c,#888)}.chip em{font-style:normal;opacity:.7}
.chip.on{color:#0c0c0d;background:var(--c,var(--fg));box-shadow:none}.chip.on i{background:#0c0c0d}

/* =====================================================================
   BOOSTER, CARTES MUSIC ET POCHETTES (styles existants, conservés)
   ===================================================================== */
/* ---------- booster ---------- */
.pkw{position:relative;width:200px;height:290px;margin:40px auto 34px;perspective:1000px;animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.pkw:after{content:"";position:absolute;left:14%;right:14%;bottom:-32px;height:16px;border-radius:50%;background:#000;filter:blur(10px);opacity:.8;animation:gsh 4s ease-in-out infinite}
@keyframes gsh{50%{transform:scale(.82);opacity:.5}}
.pki{position:absolute;inset:0;cursor:pointer;transition:transform .15s ease-out;filter:drop-shadow(0 16px 14px #000c)}
.pack{position:absolute;inset:0;overflow:hidden;background:var(--ac);color:#0c0c0d}
.pack .pf{position:absolute;inset:0;padding:32px 14px 0;z-index:1}
.pack .l1{display:flex;justify-content:space-between;font:700 9px var(--mono);letter-spacing:.14em}
.pack h2{margin:22px 0 0;font:900 46px/.86 var(--sans);letter-spacing:-.05em}
.pack .sub{margin-top:9px;font:700 8px var(--mono);letter-spacing:.18em}
.pack .leg{display:flex;gap:3px;margin-top:9px}.pack .leg i{width:9px;height:9px;background:var(--t);box-shadow:0 0 0 1px #0c0c0d}
.pack .disc{position:absolute;left:50%;bottom:-104px;width:180px;height:180px;margin-left:-90px;border-radius:50%;background:radial-gradient(circle,var(--ac) 0 14px,#0c0c0d 15px 17px,#e8e4d8 18px 40px,#0c0c0d 41px),repeating-radial-gradient(#0c0c0d 0 2px,#222 2px 3px);animation:spin 8s linear infinite}
.pack .lbl{position:absolute;right:12px;bottom:30px;z-index:2;background:#f4f1e8;padding:4px 5px 3px;font:700 5.5px var(--mono);letter-spacing:.12em;text-align:center}
.pack .lbl div{width:50px;height:15px;margin-bottom:2px;background:repeating-linear-gradient(90deg,#111 0 1px,#0000 1px 2px,#111 2px 4px,#0000 4px 5px,#111 5px 6px,#0000 6px 8px,#111 8px 9px,#0000 9px 11px)}
.pack .crb,.cut{background:repeating-linear-gradient(90deg,#00000030 0 2px,#ffffff45 2px 3px,#0000 3px 5px),#e44d14}
.pack .crb{position:absolute;left:0;right:0;bottom:0;height:22px;z-index:3;border-top:1px solid #00000055}
.pack .grn{position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--grain);mix-blend-mode:multiply;opacity:.45}
.pack .shd{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,#00000059 0,#ffffff1f 7%,#0000 20%,#0000 80%,#ffffff17 93%,#00000061 100%)}
.pack .sh{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#ffffff45 50%,transparent 58%);transform:translateX(-100%);animation:shine 4s infinite}
.pack .gls{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at var(--px,50%) var(--py,25%),#ffffff80,transparent 55%);mix-blend-mode:soft-light}
.cut{position:absolute;left:0;right:0;top:0;height:26px;z-index:7;display:flex;align-items:flex-end;justify-content:space-between;padding:0 8px 3px;border-bottom:1px dashed #0c0c0d99;font:700 6px var(--mono);letter-spacing:.2em;color:#0c0c0dcc}
@keyframes rip{to{transform:translate(46px,-110px) rotate(22deg);opacity:0}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-2deg)}40%{transform:translateX(6px) rotate(2deg)}70%{transform:scale(1.04)}90%{transform:scale(1.1);filter:brightness(1.6) drop-shadow(0 16px 14px #000c)}}
.pki.off{filter:grayscale(1) brightness(.45) drop-shadow(0 16px 14px #000c);cursor:not-allowed}
.rg.off{filter:grayscale(1) brightness(.45) drop-shadow(0 12px 14px #000b)}.rg.p0.off{filter:grayscale(1) brightness(.45) drop-shadow(0 16px 14px #000c)}

.grid .card:not(:hover),.grid .card:not(:hover) *,.grid .card:not(:hover):before,.grid .card:not(:hover):after{animation-play-state:paused!important}
.slot{width:160px;height:244px;perspective:900px;position:relative;transition:transform .5s}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.slot.up .flip{transform:rotateY(180deg)}
.face,.back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.face{transform:rotateY(180deg)}
.back{border-radius:10px;background:#0d0d0e;border:1px solid #38383b;display:flex;align-items:center;justify-content:center;overflow:hidden}
.back:before{content:"";position:absolute;inset:6px;border:1px solid var(--ln);border-radius:6px}
.slot.nx .back{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac);cursor:pointer;animation:nx .9s infinite alternate}
@keyframes nx{to{transform:scale(1.05)}}
.slot.sp{transform:scale(1.18);z-index:9}

.card{width:160px;height:244px;border-radius:10px;padding:7px;position:relative;display:flex;flex-direction:column;overflow:hidden;background:#111112;transition:transform .15s;--mx:50%;--my:50%}
.card:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),#ffffff22,transparent 45%);opacity:0;transition:opacity .2s}
.card:hover:before{opacity:1}
.top{position:absolute;left:12px;right:12px;top:12px;z-index:4;display:flex;justify-content:space-between;align-items:center;height:22px;padding:0 2px 0 9px;border-radius:11px;background:#000000b8;font:700 7.5px var(--mono);letter-spacing:.12em;color:var(--c)}
.play{width:18px;height:18px;padding:0;border-radius:50%;border:1px solid currentColor;background:#0006;color:inherit;font-size:7px;cursor:pointer}
.play:hover{background:#fff3}
.cvw{position:relative;z-index:2;margin:0 0 9px}
.cv{position:relative;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;box-shadow:0 6px 14px #0009;z-index:2}
.cv.q{display:flex;align-items:center;justify-content:center;background:#ffffff08;font-size:54px;font-weight:800;color:#ffffff30}
.vinyl{position:absolute;right:0;top:3%;width:76%;aspect-ratio:1;border-radius:50%;z-index:1;background:radial-gradient(circle,#0a0a0d 0 3%,#fbbf24 3.5% 17%,#1a1204 18%),repeating-radial-gradient(#1a1204 0 1.5px,#5e4410 1.5px 2.5px);box-shadow:0 4px 12px #000b;animation:spin 5s linear infinite}
.vinyl:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 10%,#ffe7a360 15%,transparent 22% 55%,#ffe7a345 62%,transparent 70%)}
.tt{position:relative;z-index:4;margin-top:0;padding:0 3px;font-size:12px;line-height:1.25;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar{position:relative;z-index:4;padding:0 3px;font-size:9.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft{position:relative;z-index:4;margin-top:auto;padding:6px 3px 1px;border-top:1px solid color-mix(in srgb,var(--c) 30%,transparent);display:flex;justify-content:space-between;align-items:flex-end;font:8px/1.3 var(--mono);color:var(--mut)}
.eq{display:flex;gap:2px;height:12px;align-items:flex-end}
.eq s{width:2px;height:100%;background:var(--c);transform-origin:bottom;transform:scaleY(.2);animation:eq .8s ease-in-out infinite;animation-play-state:paused}
.eq s:nth-child(2){animation-delay:-.3s}.eq s:nth-child(3){animation-delay:-.5s}.eq s:nth-child(4){animation-delay:-.15s}
@keyframes eq{50%{transform:scaleY(1)}}
.playing .eq s{animation-play-state:running!important}
.mult{position:absolute;right:8px;top:62px;z-index:5;font:700 10px var(--mono);background:var(--c);color:#000;padding:1px 6px}
.fr{position:absolute;inset:4px;border-radius:6px;pointer-events:none;z-index:3;display:none}
.pt{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;display:block}
.pt s{position:absolute;bottom:-4px;width:3px;height:3px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);opacity:0;animation:rise 3s linear infinite}
@keyframes rise{20%{opacity:1}100%{transform:translateY(-230px);opacity:0}}
.lock{opacity:.5;filter:grayscale(1)}

/* T1–T5 : pochette encadrée, même langage que Mythique / Diamant */
.top b{display:flex;align-items:center;gap:6px}
.top b:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor}
.t0,.t1,.t2,.t3,.t4{padding:0}
.t0 .top,.t1 .top,.t2 .top,.t3 .top,.t4 .top{margin:8px 8px 0;padding:0 3px 0 9px;height:24px;border-radius:12px;background:#ffffff08;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)}
.t0 .cvw,.t1 .cvw,.t2 .cvw,.t3 .cvw,.t4 .cvw{margin:7px 0 8px}
.t0 .cv,.t1 .cv,.t2 .cv,.t3 .cv,.t4 .cv{width:128px;margin:0 auto}
.t0 .tt,.t1 .tt,.t2 .tt,.t3 .tt,.t4 .tt,.t0 .ar,.t1 .ar,.t2 .ar,.t3 .ar,.t4 .ar{padding:0 12px}
.t0 .ft,.t1 .ft,.t2 .ft,.t3 .ft,.t4 .ft{margin:6px 12px 10px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.t0{border:1px solid #34343a;background:linear-gradient(#151517,#0e0e10)}
.t0 .top{color:#a1a1aa}
.t1{border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:linear-gradient(180deg,#0e1512,#0b0c0c)}
.t1 .cv{box-shadow:0 0 0 1px #10b98166,0 6px 14px #0009}
.t2{border:2px solid var(--c);background:radial-gradient(circle at 50% 0,#172a4d,#0b0d12 70%);box-shadow:0 0 16px -6px var(--c)}
.t2 .top,.t3 .top,.t4 .top{color:#000;box-shadow:none}
.t2 .top{background:var(--c)}
.t2 .cv{box-shadow:0 0 0 1px #60a5fa99,0 8px 16px #000a}
.t2 .cv:after,.t3 .cv:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff2a,transparent 42%)}
.t3{border:2px solid transparent;background:radial-gradient(circle at 50% 0,#2b1650,#0c0a12 70%) padding-box,linear-gradient(135deg,#e9d5ff,#a855f7 35%,#4c1d95 65%,#c084fc) border-box;box-shadow:0 0 22px -6px var(--c)}
.t3 .top{background:linear-gradient(90deg,#d8b4fe,#9333ea)}
.t3 .cv{box-shadow:0 0 0 1px #c084fc,0 0 18px #a855f766,0 8px 16px #000a}
.t3 .fr{display:block;inset:5px;border:1px solid #a855f744}
.t3:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#ffffff26 50%,transparent 58%);transform:translateX(-120%);animation:shine 4s infinite}
.t4{border:3px solid transparent;background:radial-gradient(circle at 50% 18%,#4a3408,#0d0a04 72%) padding-box,linear-gradient(135deg,#fff3c4,#f59e0b 25%,#7a4a06 50%,#fcd34d 75%,#b45309) border-box;animation:glow 2.4s infinite}
@keyframes glow{50%{box-shadow:0 0 36px 2px var(--c)}}
.t4 .top{background:linear-gradient(90deg,#fde68a,#f59e0b,#fde68a);background-size:200% 100%;animation:foil 3s linear infinite}
.t4 .cv{box-shadow:0 0 0 2px #fbbf24,0 0 0 3px #000,0 0 22px #fbbf2466,0 10px 18px #000b}
.t4 .cv:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff66 50%,transparent 60%);transform:translateX(-120%);animation:shine 3.5s infinite}
.t4 .fr{display:block;inset:5px;border:1px solid #fbbf2455;border-radius:6px}
.t4 .seal{position:absolute;left:8px;top:148px;margin:0;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#0d0a04 0 2px,#fde68a 2.5px 5px,#2a1a00 5.5px 6.5px,transparent 7px),repeating-radial-gradient(#b8860b 0 1px,#ffd966 1px 2px);box-shadow:0 0 0 2px #0d0a04,0 0 12px #fbbf24;animation:spin 4s linear infinite}
.t4 .ft{border-top-color:#fbbf2466}
.t4:after{background-image:linear-gradient(120deg,#7a4a06,#fbbf24,#fff3c4,#fbbf24,#7a4a06)}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn.g{background:none;color:var(--fg);box-shadow:inset 0 0 0 1px #3a3a3d}.btn.g:hover{box-shadow:inset 0 0 0 1px var(--fg)}

/* T6 MYTHIQUE — pleine illustration, rubis & or */
.t5,.t6{padding:0}
.t5 .cvw,.t6 .cvw{position:absolute;inset:0;margin:0;z-index:0}
.t5 .cv,.t6 .cv{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.t5 .cv:after,.t6 .cv:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000000a8 0,transparent 20%,transparent 40%,#000000eb 76%)}
.t5 .top,.t6 .top{margin:8px 8px 0;padding:0 3px 0 9px;height:24px;border-radius:12px;background:#000000b8}
.t5 .tt,.t6 .tt{padding:0 10px;font-size:13px;text-shadow:0 1px 4px #000}
.t5 .ar,.t6 .ar{padding:0 10px;color:#eeeae4;text-shadow:0 1px 3px #000}
.t5 .ft,.t6 .ft{margin:6px 10px 10px;padding-top:6px;color:#f4f2ec}
.seal{position:relative;z-index:4;display:block;margin:auto 0 8px 10px;flex:none}
.t4:after,.t5:after,.t6:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;padding:2px;border-radius:inherit;background-size:300% 100%;animation:foil 2.5s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.t5{border:3px solid transparent;background:linear-gradient(#0a0303,#0a0303) padding-box,linear-gradient(135deg,#ffd6d6,#ff2a2a 25%,#4a0000 50%,#ff5252 75%,#8b0000) border-box;animation:glow5 2s infinite}
@keyframes glow5{50%{box-shadow:0 0 30px 2px #ff2a2acc,0 0 60px 6px #ff6a0044}}
.t5:after{background-image:linear-gradient(120deg,#4a0000,#ff2a2a,#ffe08a,#ff2a2a,#4a0000)}
.t5 .fr{display:block;inset:5px;border:1px solid #fbbf24aa;border-radius:6px}
.t5 .top{color:#ffd9a0;box-shadow:inset 0 0 0 1px #fbbf2499}
.t5 .hl{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 35%,#ff3d0044 45%,#ffd27a66 50%,#ff3d0044 55%,transparent 65%);background-size:250% 100%;animation:foil 3.2s linear infinite}
.t5 .seal{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#fbbf24 0 3px,#2a0000 3.5px 6px,transparent 6.5px),repeating-radial-gradient(#6a0000 0 1px,#c81e1e 1px 2px);box-shadow:0 0 0 2px #fbbf24,0 0 0 3px #000,0 0 14px #ff2a2a;animation:spin 5s linear infinite}
.t5 .ft{border-top:1px solid #fbbf2466}
.t5 .pt s{background:#ffc14d;box-shadow:0 0 6px #ff3d00}

/* T7 DIAMANT — cristal taillé, holographique */
.t6{border-radius:0;border:2px solid transparent;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);background:linear-gradient(#07141c,#07141c) padding-box,linear-gradient(120deg,#22d3ee,#e879f9,#fff7ae,#4ade80,#22d3ee) border-box}
.t6:after{border-radius:0;background-image:linear-gradient(120deg,#22d3ee,#e879f9,#fff7ae,#4ade80,#22d3ee)}
.t6 .holo{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.15;transition:opacity .2s;background:conic-gradient(from 0deg at var(--mx) var(--my),#ff00ff,#00ffff,#ffff00,#00ff88,#ff00ff)}
.t6:hover .holo{opacity:.5}
.tw{position:absolute;inset:0;pointer-events:none;z-index:2}.tw s{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:twk 2.6s ease-in-out infinite}
.t6 .fct{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,#ffffff1c 0 22%,transparent 22% 48%,#ffffff10 48% 70%,transparent 70%),linear-gradient(225deg,#22d3ee26 0 30%,transparent 30% 62%,#e879f91c 62%),repeating-linear-gradient(45deg,#ffffff0e 0 1px,transparent 1px 7px)}
.t6 .oct{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);z-index:5;pointer-events:none;fill:none;stroke:#ffffffb0;stroke-width:1.2}
.t6 .top{color:#cffafe;box-shadow:inset 0 0 0 1px #67e8f999}
.t6 .seal{width:22px;height:22px;margin-left:14px;margin-bottom:12px;transform:rotate(45deg);background:linear-gradient(135deg,#fff 0 18%,#a5f3fc 40%,#e879f9 70%,#22d3ee);box-shadow:0 0 0 2px #000a,0 0 16px #67e8f9;animation:gem 3s ease-in-out infinite}
@keyframes gem{50%{filter:brightness(1.35) hue-rotate(50deg)}}
.t6 .ft{border-top:1px solid #67e8f977}
.t6 .pt s{width:9px;height:9px;border-radius:0;bottom:auto;background:#fff;box-shadow:none;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twk 2.4s ease-in-out infinite}
.t6 .pt s:nth-child(3n){top:14%}.t6 .pt s:nth-child(3n+1){top:44%}.t6 .pt s:nth-child(3n+2){top:66%}
@keyframes twk{0%,100%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.15) rotate(90deg)}}

/* ---------- cartes T1–T5 : plus aucun débordement ---------- */
.card>*{flex-shrink:0}
.card .top{position:relative;left:auto;right:auto;top:auto}
.lock .top{margin:8px 8px 0;padding:0 3px 0 9px;height:24px;border-radius:12px;background:#ffffff08}
.lock .cv{width:120px;margin:0 auto}
.t0 .cv,.t1 .cv,.t2 .cv,.t3 .cv,.t4 .cv{width:120px}
.t4 .seal{left:auto;right:10px;top:130px}
.slot .cpy{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:9;font:700 8px var(--mono);letter-spacing:.14em;padding:3px 8px;border-radius:9px;background:#0c0c0d;color:var(--c);box-shadow:0 0 0 1px var(--c)}

/* ---------- Diamant : cadre cristal plus riche ---------- */
.t6 .oct{stroke:#fff;stroke-width:1.4;stroke-dasharray:22 10;animation:odash 3s linear infinite}
.t6 .oct .o2{stroke:#a5f3fc88;stroke-width:1;stroke-dasharray:none}
@keyframes odash{to{stroke-dashoffset:-64}}
.t6 .gm{position:absolute;z-index:6;width:9px;height:9px;transform:rotate(45deg);pointer-events:none;background:linear-gradient(135deg,#fff 0 25%,#a5f3fc 50%,#e879f9);box-shadow:0 0 8px #67e8f9,0 0 0 1px #0008}
.t6 .g1{left:8px;top:8px}.t6 .g2{right:8px;top:8px}.t6 .g3{left:8px;bottom:8px}.t6 .g4{right:8px;bottom:8px}
.t6 .top{margin-top:10px;margin-left:16px;margin-right:16px}

/* ---------- plaques : cadres ---------- */
.frm .cn{position:absolute;z-index:4;pointer-events:none}
.k5 .frm{background:linear-gradient(145deg,#3d0e0e,#150404 45%,#2c0909);box-shadow:inset 0 1px 0 #ff9a9a33,inset 0 -1px 0 #000,0 0 0 1px #000,0 0 0 3px #b8892f,0 0 0 4px #1a0a02,0 50px 90px -25px #000,0 0 90px -20px #ef444477}
.k5 .frm:before{content:"";position:absolute;inset:6px;border:1px solid #d4a53c88;pointer-events:none;z-index:1}
.k5 .cn{width:22px;height:22px;border:2px solid #e8c066;filter:drop-shadow(0 0 4px #fbbf2466)}
.k5 .c1{left:2px;top:2px;border-right:0;border-bottom:0}.k5 .c2{right:2px;top:2px;border-left:0;border-bottom:0}.k5 .c3{left:2px;bottom:2px;border-right:0;border-top:0}.k5 .c4{right:2px;bottom:2px;border-left:0;border-top:0}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ang{to{--ang:360deg}}
.k6 .frm{background:linear-gradient(135deg,#c9f7ff2e,#ffffff08 32%,#efd9ff24 62%,#a5f3fc2e);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #ffffff55,inset 0 2px 0 #ffffffb0,inset 0 -2px 0 #22d3ee66,0 0 0 1px #000,0 50px 90px -25px #000,0 0 90px -12px #22d3ee88,0 0 160px -30px #e879f9aa}
.k6 .frm:before{content:"";position:absolute;inset:-3px;padding:3px;z-index:1;pointer-events:none;background:conic-gradient(from var(--ang),#22d3ee,#e879f9,#fff7ae,#4ade80,#22d3ee);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:ang 5s linear infinite}
.k6 .frm:after{content:"";position:absolute;inset:0;padding:14px;z-index:1;pointer-events:none;background:linear-gradient(135deg,#ffffff40 0 12%,transparent 12% 40%,#ffffff26 40% 52%,transparent 52% 78%,#ffffff33 78%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.k6 .cn{width:14px;height:14px;transform:rotate(45deg);background:linear-gradient(135deg,#fff 0 22%,#a5f3fc 48%,#e879f9 78%,#22d3ee);box-shadow:0 0 14px #67e8f9,0 0 0 1px #0009;animation:gem 3s ease-in-out infinite}
.k6 .c1{left:0;top:0}.k6 .c2{right:0;top:0}.k6 .c3{left:0;bottom:0}.k6 .c4{right:0;bottom:0}
.k6 .cn{margin:-7px}.k6 .c2,.k6 .c4{margin-right:-7px}
.k6 .mat{background:var(--grain),linear-gradient(160deg,#0f1a22,#120d1c)}
.k6 .mat:before{border-color:#a5f3fc66;box-shadow:inset 0 0 0 1px #e879f922}

.pq{position:relative;width:min(760px,100%);margin:auto}
.frm{position:relative;padding:14px;border-radius:3px;background:linear-gradient(145deg,#2e2e32,#111113 45%,#1d1d20);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -1px 0 #000,0 0 0 1px #000,0 50px 90px -25px #000;transform-origin:50% 0;animation:hang .9s cubic-bezier(.2,1.2,.3,1) both;transition:transform .2s ease-out}
@keyframes hang{from{opacity:0;transform:perspective(900px) rotateX(-22deg) translateY(-36px)}}
.mat{position:relative;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:24px 28px;padding:34px 30px;background:var(--grain),#141416;box-shadow:inset 0 0 0 1px #000,inset 0 3px 12px #000d}
.mat:before{content:"";position:absolute;inset:11px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);pointer-events:none}
.mat>*{animation:up .6s both;animation-delay:calc(var(--d)*.12s + .35s)}
.pqr{grid-row:1/3;position:relative;aspect-ratio:1;cursor:pointer}
.rec{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 5px #0d0d0f,0 0 0 6px #2c2c30,0 16px 30px -6px #000}
.spn{position:absolute;inset:0;animation:spin 3s linear infinite;animation-play-state:paused}
.pq.pl .spn{animation-play-state:running}
.dk{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#0000 0 1.4px,#00000030 1.4px 2.4px),var(--disc)}
.lb{position:absolute;inset:31%;border-radius:50%;box-shadow:0 0 0 3px #0008}
.lb:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#0d0d0f;box-shadow:0 0 0 2px #d6d6d6}
.rec .gl2{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:conic-gradient(from 25deg,transparent 0 8%,#ffffff70 13%,transparent 19% 50%,#ffffff55 63%,transparent 69%)}
.arm{position:absolute;right:-7%;top:-5%;width:15%;aspect-ratio:1;z-index:3;pointer-events:none}
.arm .base{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#e8e8e8 0 20%,#4a4a4e 22% 58%,#27272a 60%);box-shadow:0 5px 10px #000b,inset 0 1px 0 #ffffff33}
.arm .rod{position:absolute;left:50%;top:50%;width:5px;height:290%;margin-left:-2.5px;transform-origin:50% 0;transform:rotate(-3deg);transition:transform .9s cubic-bezier(.4,.1,.2,1);background:linear-gradient(90deg,#8d8d8d,#f4f4f4,#8d8d8d);border-radius:3px;box-shadow:3px 6px 8px #0009}
.arm .rod:after{content:"";position:absolute;left:50%;bottom:-14px;width:13px;height:20px;margin-left:-6.5px;border-radius:2px;background:linear-gradient(90deg,#2a2a2e,#555,#2a2a2e);box-shadow:inset 0 -3px 0 var(--c)}
.pq.pl .arm .rod{transform:rotate(28deg)}
.pqc{width:64%;aspect-ratio:1;justify-self:center;align-self:end;box-shadow:0 0 0 1px #ffffff26,0 14px 26px -8px #000}
.plq{position:relative;align-self:start;padding:14px 14px 11px;border-radius:2px;text-align:center;color:var(--ink);text-shadow:0 1px 0 #ffffff80;background:repeating-linear-gradient(90deg,#ffffff18 0 1px,transparent 1px 3px),var(--plate);box-shadow:inset 0 1px 0 #ffffffaa,inset 0 -1px 0 #0006,0 5px 12px #000b}
.plq i{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#6a6a6a);box-shadow:0 1px 0 #0005}
.plq i:nth-child(1){left:6px;top:6px}.plq i:nth-child(2){right:6px;top:6px}.plq i:nth-child(3){left:6px;bottom:6px}.plq i:nth-child(4){right:6px;bottom:6px}
.plq small{display:block;font:700 7px var(--mono);letter-spacing:.22em;opacity:.8}
.plq b{display:block;margin:6px 0 5px;font:900 15px/1.1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.plq p{margin:0 0 8px;font:italic 600 13px/1.3 Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.plq p span{font:600 11px var(--sans);letter-spacing:.06em;font-style:normal}
.plq .ps{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px;padding:6px 0;margin-bottom:6px;border-top:1px solid #00000033;border-bottom:1px solid #ffffff66;font:700 9px var(--mono);letter-spacing:.05em}
.plq em{font-style:normal}
.k5{--disc:conic-gradient(#3a0000,#b71c1c,#ff6b6b,#7a0000,#d32f2f,#ffc4c4,#5a0000,#c62828,#3a0000);--plate:linear-gradient(180deg,#f8e08e,#d4a53c 48%,#b3841f 52%,#ecc86a);--ink:#2a1a04}
.k6{--disc:conic-gradient(#9befff,#e0aaff,#ffffff,#7ee8fa,#fff3a8,#c4b5fd,#ffffff,#9befff);--plate:linear-gradient(180deg,#f7f9fb,#c5cad2 48%,#a5acb6 52%,#e6e9ee);--ink:#1b2029}
.k6 .rec:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,#ffffff30 0 20%,transparent 20% 45%,#ffffff1c 45% 62%,transparent 62%);mix-blend-mode:overlay}
.frm .gls{position:absolute;inset:14px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff12 42%,#ffffff05 50%,transparent 58%);background-size:220% 100%;background-position:var(--gx,50%) 0}

/* =====================================================================
   PAGE BOOSTERS : le booster au centre, la bande à déchirer dessous, le contenu à droite
   ===================================================================== */
.bp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:48px;min-height:calc(100dvh - var(--hh) - var(--st) - 140px)}
.bpi{max-width:300px}
.bpi h1{margin:10px 0 12px;font:800 32px/1.02 var(--sans);letter-spacing:-.03em}
.lead{margin:0 0 26px;color:var(--mut);font-size:15px;line-height:1.55}
.stock p{margin:0;display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--mut)}
.stock p b{font:500 26px var(--mono);color:var(--fg);letter-spacing:-.02em}
.stock .bar{display:block;height:2px;margin:10px 0 7px;background:var(--ln)}.stock .bar i{display:block;height:100%;background:var(--ac);transition:width 1s linear}
.stock small{font:11px var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.bpv{display:flex;flex-direction:column;align-items:center}
.bpv .pkw{--pz:1.28;margin:18px auto 30px}
/* la bande à déchirer : le prolongement du booster, pas un bouton de formulaire */
.rip{--edge:var(--ac2);position:relative;display:flex;align-items:stretch;width:256px;height:56px;padding:0;border:0;border-bottom:3px solid var(--edge);cursor:pointer;color:#140702;
 background:linear-gradient(90deg,#140702 0 5px,transparent 5px 10px) 0 9px/10px 1px repeat-x,var(--ac);
 clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));
 box-shadow:inset 0 -10px 18px -12px #0006;transition:filter .15s,transform .08s}
.rip:before{content:"✂";position:absolute;left:10px;top:1px;font-size:11px;line-height:16px;opacity:.7}
.rip:hover{filter:brightness(1.08)}.rip:active{transform:translateY(2px);border-bottom-width:1px}
.rip .rl{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:6px;font:800 11.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.rip .rl:after{content:"▸▸▸";font-size:10px;letter-spacing:.05em;opacity:.5;transition:transform .25s}
.rip:hover .rl:after{transform:translateX(5px);opacity:.8}
.rip .rc{display:flex;align-items:center;justify-content:center;min-width:52px;padding-top:6px;border-left:1px dashed #14070255;font:700 14px var(--mono)}
.rip .rc:empty{display:none}
.rip.wait{--edge:#050506;background:#1a1a1d;color:var(--mut);cursor:default}.rip.wait:before,.rip.wait .rl:after{display:none}
.rip.wait .rl{font-size:11px;letter-spacing:.1em}
.bpc{justify-self:end;width:100%;max-width:300px}
.fan{position:relative;height:190px;margin:16px 0 18px}
.bkm.f0{transform:translateX(0) rotate(-12deg)}.bkm.f1{transform:translateX(28px) rotate(-6deg)}.bkm.f2{transform:translateX(56px) rotate(0)}.bkm.f3{transform:translateX(84px) rotate(6deg)}.bkm.f4{transform:translateX(112px) rotate(12deg)}
.flow{list-style:none;margin:0;padding:0;font-size:14px;color:var(--mut)}
.flow li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid #ffffff0a}
.flow b{min-width:30px;font:700 15px var(--mono);color:var(--fg)}

/* ---------- cartes : ajouts (stats, nouveau, exemplaires) ---------- */
.card .st{position:relative;z-index:4;display:flex;justify-content:center;gap:8px;margin:5px 0 0;padding:0 8px;font:700 8.5px var(--mono);letter-spacing:.02em;color:var(--fg);white-space:nowrap}
.card .st span{display:flex;align-items:baseline;gap:3px}.card .st i{font-style:normal;font-size:7px;letter-spacing:.1em;color:color-mix(in srgb,var(--c) 75%,#fff 25%);opacity:.9}
.st.sm{display:flex;gap:8px;justify-content:center;margin-top:4px;font:700 9px var(--mono);color:var(--fg)}.st.sm span{display:flex;gap:3px}.st.sm i{font-style:normal;color:var(--mut);font-size:8px}
.t0 .cv,.t1 .cv,.t2 .cv,.t3 .cv,.t4 .cv{width:108px}
.t0 .ft,.t1 .ft,.t2 .ft,.t3 .ft,.t4 .ft{margin:5px 12px 8px}
.t4 .seal{top:118px}
.t5 .st,.t6 .st{text-shadow:0 1px 3px #000}
.card .play svg{width:8px;height:8px}
.newb{position:absolute;left:50%;bottom:-12px;z-index:9;transform:translateX(-50%) scale(.6);opacity:0;padding:3px 9px;border-radius:3px;background:var(--fg);color:#0c0c0d;font:800 9px var(--mono);letter-spacing:.2em;box-shadow:0 4px 12px #0008;transition:.35s .35s cubic-bezier(.2,1.4,.3,1)}
.slot.up .newb{opacity:1;transform:translateX(-50%)}
.slot .cpy.lockb{--c:var(--ac)}

/* ---------- carte ARTISTE : un pass backstage plastifié ----------
   Même format, mêmes raretés que les Musics, mais un autre objet : portrait rond, cordon, bande d'accès, code-barres. */
.card.ac{padding:0;align-items:center;text-align:center;border-radius:12px;background:linear-gradient(180deg,#17171a,#0d0d0f 60%);border:1px solid color-mix(in srgb,var(--c) 50%,#2a2a2e)}
.ac .hole{position:absolute;top:8px;left:50%;z-index:5;width:36px;height:7px;margin-left:-18px;border-radius:4px;background:#050506;box-shadow:inset 0 1px 2px #000,0 1px 0 #ffffff18}
.ac .ah{position:relative;z-index:4;width:100%;margin-top:22px;display:flex;justify-content:space-between;align-items:center;height:18px;padding:0 10px;background:var(--c);color:#0a0a0b;font:800 7px var(--mono);letter-spacing:.2em}
.ac .ah b{font-weight:800}
.ac .ap{position:relative;z-index:3;width:100px;height:100px;margin:13px auto 9px;flex:none}
.ac .ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 200deg,var(--c),var(--c2),var(--c))}
.ac .ph{position:absolute;inset:0;border-radius:50%;border:3px solid #0d0d0f;background-size:cover!important;box-shadow:inset 0 0 0 1px #ffffff22}
.ac .ph.q{display:flex;align-items:center;justify-content:center;background:#ffffff08;font:800 40px var(--sans);color:#ffffff30;font-style:normal}
.ac .an{position:relative;z-index:4;width:100%;padding:0 12px;font:800 14px/1.2 var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac .al{position:relative;z-index:4;margin-top:3px;font:700 7.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.ac .abar{position:relative;z-index:4;margin-top:auto;width:100%;display:flex;justify-content:space-between;align-items:center;padding:7px 10px 9px;border-top:1px dashed #ffffff1c;font:600 7px var(--mono);letter-spacing:.14em;color:var(--mut)}
.ac .bc{width:58px;height:12px;background:repeating-linear-gradient(90deg,#d6d6d6 0 1px,transparent 1px 2px,#d6d6d6 2px 4px,transparent 4px 5px,#d6d6d6 5px 6px,transparent 6px 8px,#d6d6d6 8px 9px,transparent 9px 11px);opacity:.75}
.ac .mult{top:34px;right:8px}
.ac.a0{--c:#9ca3af}
.ac.a1 .ring{box-shadow:0 0 12px -2px var(--c)}
.ac.a2{box-shadow:0 0 16px -6px var(--c)}.ac.a2 .ring{box-shadow:0 0 14px -2px var(--c)}
.ac.a3{border:2px solid transparent;background:linear-gradient(180deg,#1d1330,#0c0a12 60%) padding-box,linear-gradient(135deg,#e9d5ff,#a855f7 40%,#4c1d95 70%,#c084fc) border-box;box-shadow:0 0 22px -6px var(--c)}
.ac.a4{border:2px solid transparent;background:radial-gradient(circle at 50% 30%,#3a2a08,#0d0a04 70%) padding-box,linear-gradient(135deg,#fff3c4,#f59e0b 30%,#7a4a06 55%,#fcd34d 80%,#b45309) border-box;animation:glow 2.6s infinite}
.ac.a4 .ah{background:linear-gradient(90deg,#fde68a,#f59e0b,#fde68a);background-size:200% 100%;animation:foil 3s linear infinite}
.ac.a5,.ac.a6{border:2px solid transparent}
.ac.a5{background:radial-gradient(circle at 50% 30%,#3a0808,#0a0303 70%) padding-box,linear-gradient(135deg,#ffd6d6,#ff2a2a 30%,#4a0000 55%,#ffc14d 80%,#8b0000) border-box;animation:glow5 2.2s infinite}
.ac.a5 .ah{background:linear-gradient(90deg,#ff5252,#ffc14d,#ff5252);background-size:200% 100%;animation:foil 3s linear infinite}
.ac.a6{background:radial-gradient(circle at 50% 30%,#0b2230,#07141c 70%) padding-box,linear-gradient(120deg,#22d3ee,#e879f9,#fff7ae,#4ade80,#22d3ee) border-box;background-size:auto,300% 100%;animation:foil 4s linear infinite;box-shadow:0 0 26px -6px #22d3ee}
.ac.a6 .ah{background:linear-gradient(90deg,#a5f3fc,#f5d0fe,#fef9c3,#a5f3fc);background-size:300% 100%;animation:foil 4s linear infinite}
.ac.a6 .ring{background:conic-gradient(#22d3ee,#e879f9,#fff7ae,#4ade80,#22d3ee);animation:spin 6s linear infinite}
/* plastification holographique (Mythique, Diamant) : discrète, elle ne passe pas sur le texte */
.ac .afoil{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,#ffffff1c 42%,#ffd27a26 48%,#ffffff12 54%,transparent 66%);background-size:250% 100%;animation:foil 3.6s linear infinite;mix-blend-mode:screen}
.ac.a6 .afoil{background:linear-gradient(115deg,transparent 25%,#22d3ee22 38%,#e879f926 46%,#fff7ae22 54%,transparent 68%);background-size:250% 100%}
.ac .pt s{background:var(--c);box-shadow:0 0 6px var(--c)}
.grid .slot.sa5,.grid .slot.sa6,.grid .slot.sm5,.grid .slot.sm6{cursor:pointer}

/* ---------- ouverture ---------- */
#stage{position:fixed;inset:0;z-index:40;display:none;background:#0c0c0d;height:100vh;height:100dvh}
#stage.on{display:block;animation:fade .35s}
#stage.spot{background:#000}
.stg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--st) + 60px) 14px calc(var(--sb) + 130px)}
#row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;transition:filter .6s,opacity .6s,transform .6s}
#row .slot{animation:deal .7s cubic-bezier(.2,1.1,.3,1) both;animation-delay:calc(var(--i)*110ms)}
#row .slot.joined{animation:join .7s cubic-bezier(.2,1.1,.3,1) both}
@keyframes deal{from{opacity:0;transform:translateY(-160px) rotate(-14deg) scale(.5)}}
@keyframes join{from{opacity:0;transform:scale(1.5)}}
#ban{position:absolute;left:0;right:0;top:calc(var(--st) + 5%);text-align:center;font:900 clamp(26px,7vw,64px) var(--mono);letter-spacing:.2em;opacity:0;pointer-events:none;z-index:6}
#ban.go{animation:ban 1.7s both}@keyframes ban{0%{opacity:0;transform:scale(1.6)}18%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.sbar{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px max(16px,var(--sr)) calc(var(--sb) + 22px) max(16px,var(--sl));background:linear-gradient(transparent,#0c0c0df2 35%)}
#hint{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);min-height:18px;text-align:center}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.acts .k{min-width:150px}
.slot.nx .back{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 0 26px -6px var(--ac);cursor:pointer;animation:nx .9s infinite alternate}
/* la 6e carte : un dos à part, présenté seul */
#stage.secret #row{filter:brightness(.35) blur(2px);transform:scale(.9);pointer-events:none}
.sec6{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none;padding-bottom:calc(var(--sb) + 60px)}
.sec6.charge .slot{animation:charge .14s linear infinite}
@keyframes charge{25%{transform:translate(-2px,1px) rotate(-1deg)}75%{transform:translate(2px,-1px) rotate(1deg)}}
/* le dos normal (repris tel quel) */
.back{border-radius:10px}

/* ---------- toasts, particules ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:70}
#fx i{position:absolute;width:6px;height:6px;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.2);opacity:0}}
.shake{animation:sk .5s}@keyframes sk{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}
#toast{position:fixed;left:50%;bottom:calc(26px + var(--sb) + var(--nav));z-index:80;max-width:min(92vw,460px);transform:translate(-50%,16px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:4px;background:#1c1c20;box-shadow:inset 0 0 0 1px var(--ln2),0 16px 40px -10px #000;font:600 14px var(--sans);text-align:center;transition:.3s}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.ok{box-shadow:inset 0 0 0 1px #10b98166,0 16px 40px -10px #000}

/* =====================================================================
   COLLECTION
   ===================================================================== */
.phd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.phd h1{margin:0;font:800 32px/1.05 var(--sans);letter-spacing:-.03em}
.sub2{margin:6px 0 0;color:var(--mut);font-size:14px}
.seg3{display:inline-flex;gap:0;margin:0 0 18px;border-bottom:1px solid var(--ln);width:100%}
.seg3 b{position:relative;padding:12px 18px;cursor:pointer;color:var(--mut);font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.seg3 b:after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--ac);transform:scaleX(0);transition:transform .2s}
.seg3 b.on{color:var(--fg)}.seg3 b.on:after{transform:none}
.nb2{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ac);color:#140702;font:800 10px/18px var(--mono);font-style:normal;text-align:center}
.ftools{display:flex;gap:10px;margin-bottom:14px}
.search{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:3px;background:#101012;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--mut)}
.search:focus-within{box-shadow:inset 0 0 0 1px var(--ac)}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--fg);font-size:15px}
.search input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
select{height:44px;padding:0 34px 0 14px;border:0;border-radius:3px;background:#101012 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8c85' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat;box-shadow:inset 0 0 0 1px var(--ln2);appearance:none;-webkit-appearance:none;color:var(--fg);font-size:14px;cursor:pointer}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:26px 20px;justify-items:center}
.grid>.slot{animation:pop .45s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(var(--i)*22ms)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.92)}}
.grid .slot{cursor:pointer}
.emptyg{grid-column:1/-1;text-align:center;padding:50px 20px}.emptyg b{display:block;font:800 20px var(--sans)}.emptyg p{color:var(--mut);margin:8px 0 18px}
.empty{max-width:440px;margin:50px auto;text-align:center}.empty b{display:block;font:800 22px var(--sans)}.empty p{color:var(--mut);line-height:1.6;margin:10px 0 20px}
.empty.sm{margin:auto;padding:30px}.empty.sm b{font-size:18px}
.bigvi{display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle,#0c0c0d 0 3px,var(--ac) 4px 13px,#0c0c0d 14px),repeating-radial-gradient(#0c0c0d 0 2px,#2e2e31 2px 3px);box-shadow:0 0 0 1px #3a3a3d,0 10px 30px -10px var(--ac);animation:spin 6s linear infinite}
/* albums */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px}
.alb{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--fg)}
.alb .alc{display:block;aspect-ratio:1;border-radius:3px;box-shadow:0 12px 26px -12px #000,inset 0 0 0 1px #ffffff14;margin-bottom:8px;position:relative;transition:transform .2s}
.alb:hover .alc{transform:translateY(-3px)}
.alb .alc:after{content:"";position:absolute;right:-7px;top:6%;bottom:6%;width:7px;border-radius:0 50% 50% 0;background:#0c0c0d;box-shadow:inset -1px 0 0 #2e2e32}
.alb b{font:700 15px var(--sans)}.alb span{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.alb.new .alc{display:flex}
.alb.new i{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:3px;border:1px dashed #4a4a50;color:var(--mut);margin-bottom:8px}.alb.new i svg{width:30px;height:30px}
.alhead{grid-column:1/-1;justify-self:stretch;display:grid;grid-template-columns:auto 150px 1fr auto;align-items:end;gap:22px;margin-bottom:10px}
.alhead .alc{width:150px;aspect-ratio:1;border-radius:3px;box-shadow:0 18px 36px -14px #000}
.alt small{font:700 11px var(--mono);letter-spacing:.2em;color:var(--mut)}.alt h2{margin:4px 0;font:800 30px/1.05 var(--sans);letter-spacing:-.02em}.alt span{color:var(--mut);font-size:14px}
.alact{display:flex;gap:8px}
.covpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:260px;overflow:auto;padding:2px}
.cvo{aspect-ratio:1;border:0;border-radius:3px;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff1a;opacity:.7}.cvo.on{opacity:1;outline:2px solid var(--ac);outline-offset:2px}
/* petites vignettes (albums, échanges, sélection) */
.pickg{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 10px;max-height:min(56vh,520px);overflow:auto;padding:4px 2px;margin-top:12px}
.pickg.sm{max-height:min(40vh,360px)}
.pk{position:relative;display:block;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--fg)}
.pk.dim{opacity:.45;cursor:not-allowed}.pk .tag{position:absolute;top:4px;left:4px;padding:2px 6px;border-radius:2px;background:var(--ac);color:#140702;font:800 8px var(--mono);letter-spacing:.1em;font-style:normal;text-transform:uppercase}
.mc{position:relative;width:64px;cursor:default}
.pickg .mc,.pk .mc{width:auto;cursor:pointer}
.mc i{display:block;width:100%;aspect-ratio:1;border-radius:3px;background-size:cover!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent),0 4px 10px #0008;transition:transform .15s}
.mc.ma i{border-radius:50%}
.mc.k4 i{box-shadow:0 0 0 2px var(--c),0 0 12px color-mix(in srgb,var(--c) 50%,transparent)}
.mc.k5 i,.mc.k6 i{box-shadow:0 0 0 2px var(--c),0 0 0 3px #000,0 0 16px var(--c)}
.mc b{display:block;margin-top:6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc small{display:block;font:700 8px var(--mono);letter-spacing:.08em;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.pk:hover .mc i{transform:translateY(-2px)}
.mc.sel i{outline:2px solid var(--ac);outline-offset:2px}
.mc.sel:after{content:"";position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140702' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.mcs{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.mcs .mc{width:60px}
.seg2{display:inline-flex;padding:3px;border-radius:3px;background:#101012;box-shadow:inset 0 0 0 1px var(--ln2)}
.seg2 b{padding:0 12px;height:36px;display:flex;align-items:center;border-radius:2px;cursor:pointer;color:var(--mut);font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}.seg2 b.on{background:#222226;color:var(--fg)}
.ptools{display:flex;gap:10px;flex-wrap:wrap}

/* =====================================================================
   FENÊTRES (feuille du bas sur téléphone, fenêtre centrée sur ordinateur)
   ===================================================================== */
#sheet{position:fixed;inset:0;z-index:50;display:none;padding:20px;overflow:auto;background:#000b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#sheet.on{display:flex;animation:fade .2s}
.sb{position:relative;margin:auto;width:min(720px,100%);padding:22px 24px 24px;border-radius:6px;background:linear-gradient(180deg,#17171a,#101012);box-shadow:inset 0 0 0 1px var(--ln2),0 40px 90px -20px #000;animation:up .3s both}
#sheet.sm .sb{width:min(460px,100%)}#sheet.wide .sb{width:min(980px,100%)}
.shd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.shd>b{font:800 19px/1.2 var(--sans);letter-spacing:-.01em}
.x{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border:0;border-radius:17px;background:#ffffff0a;color:var(--mut);cursor:pointer;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;flex:none;margin-left:auto}
.x:hover{color:var(--fg);background:#ffffff14}.x svg{width:15px;height:15px}
.tchip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:3px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font:800 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tchip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.row{display:flex;gap:10px;align-items:center}.row.end{justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.cf b{display:block;font:800 19px var(--sans);margin-bottom:8px}.cf p{margin:0;color:var(--mut);line-height:1.55}
.fld{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}.fld>span{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.fld input,.fld textarea{width:100%;min-height:46px;padding:12px 14px;border:0;border-radius:3px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font-size:16px;outline:none;resize:vertical}
.fld input:focus,.fld textarea:focus{box-shadow:inset 0 0 0 1px var(--ac)}
.fstack{display:flex;flex-direction:column;gap:4px}
.err{min-height:18px;margin:0;color:var(--no);font-size:13px}
.okb{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:3px;background:#10b98114;box-shadow:inset 0 0 0 1px #10b98144;font-size:14px}.okb p{margin:0}.okb svg{color:var(--ok);margin-top:2px}
.warnb{padding:14px 16px;border-radius:3px;background:#ef444414;box-shadow:inset 0 0 0 1px #ef444455;margin-bottom:16px}.warnb b{color:#ff8f86}.warnb p{margin:6px 0 0;color:var(--mut);font-size:14px;line-height:1.5}
/* fiche d'une carte */
.det{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.detc{position:relative}.detc .card{transform:none!important}
.detc.sm{zoom:.9}
.deti h2{margin:0;font:800 26px/1.1 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;margin:18px 0;background:var(--ln);box-shadow:0 0 0 1px var(--ln)}
.kv div{background:#121214;padding:10px 12px}.kv small{display:block;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}.kv b{display:block;margin-top:3px;font:600 15px var(--mono)}
.sbars{margin:0 0 18px}.sbar2{display:grid;grid-template-columns:44px 1fr 48px;align-items:center;gap:10px;font:700 11px var(--mono);margin:7px 0}
.sbar2 i{height:6px;background:#ffffff0d;border-radius:3px;overflow:hidden}.sbar2 i b{display:block;height:100%;background:linear-gradient(90deg,var(--ac),#ffb38f);border-radius:3px}.sbar2 em{font-style:normal;text-align:right}
.alist{display:flex;flex-direction:column;gap:1px;margin-top:20px;border-radius:4px;overflow:hidden;background:var(--ln);box-shadow:0 0 0 1px var(--ln)}
.arow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:14px 16px;border:0;background:#121214;color:var(--fg);text-align:left;cursor:pointer}
.arow:hover{background:#18181b}.arow b{font:700 15px var(--sans)}.arow span{font-size:13px;color:var(--mut)}
.arow.dis{opacity:.45;cursor:default}
.arow.fr3{flex-direction:row;align-items:center;gap:12px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice.c3{grid-template-columns:1fr}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:0;border-radius:4px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);text-align:left;cursor:pointer}
.opt:hover{box-shadow:inset 0 0 0 1px var(--ac)}.opt.dis{opacity:.45;cursor:default}
.opt b{font:700 15px var(--sans)}.opt span{font-size:13px;color:var(--mut)}
.opt i{display:block;height:44px;margin-bottom:8px;border-radius:3px}
.opt .o1{width:30px;background:linear-gradient(#2a2a2e,#18181b);box-shadow:inset 0 0 0 1px #ffffff26}
.opt .o2{width:66px;background:linear-gradient(90deg,#2a2a2e 0 62%,#1d1d21 62%);box-shadow:inset 0 0 0 1px #ffffff26}
.opt .o3,.opt .o4,.opt .o5{width:44px;border-radius:50%;background:radial-gradient(circle,var(--ac) 0 20%,transparent 21%),repeating-radial-gradient(#101012 0 2px,#26262a 2px 3px)}
.opt .o4{background:radial-gradient(circle,#a78bfa 0 20%,transparent 21%),repeating-radial-gradient(#101012 0 2px,#26262a 2px 3px)}
.opt .o5{background:radial-gradient(circle,#34d399 0 20%,transparent 21%),repeating-radial-gradient(#101012 0 2px,#26262a 2px 3px)}

/* ---------- visionneuse de pochette ---------- */
#pq{position:fixed;inset:0;z-index:55;display:none;padding:calc(var(--st) + 18px) 18px calc(var(--sb) + 18px);overflow:auto;background:radial-gradient(ellipse 55% 50% at 50% 0,#ffffff1a,transparent 70%),#060607f5}
#pq.on{display:flex;animation:fade .35s}
.pqw{margin:auto;width:min(780px,100%)}
.pqw .pq,.pqw .tk{margin:0 auto}
.pqw .ctl{display:flex;align-items:center;gap:14px;margin-top:14px;padding:10px 12px;background:#111113;border:1px solid var(--ln);border-radius:6px;animation:up .5s .6s both}
.ctl .pr{flex:1;height:3px;background:var(--ln)}.ctl .pr i{display:block;height:100%;width:0;background:var(--ac)}
.ctl .tm{font:12px var(--mono);color:var(--mut)}
/* pochette réduite (vitrine) */
.mp{position:relative;width:100%;height:100%;overflow:hidden}
.mpi{position:absolute;left:0;top:0;width:760px;transform-origin:0 0}
.mpt .mpi{width:720px}
.mpi .frm{animation:none}.mpi .mat>*{animation:none}.mpi .pq{width:760px}

/* ---------- pochette ARTISTE : le billet de concert ---------- */
.tk{position:relative;display:grid;grid-template-columns:1fr 150px;width:min(720px,100%);min-height:280px;border-radius:10px;overflow:hidden;background:#f2eee4;color:#16130f;box-shadow:0 40px 80px -30px #000,0 0 0 1px #0006;animation:hang .8s cubic-bezier(.2,1.2,.3,1) both}
.mpi .tk{width:720px;animation:none}
.tkm{position:relative;display:grid;grid-template-columns:230px 1fr;gap:0;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#f2eee4),#f2eee4 55%)}
.tkp{position:relative;margin:18px;border-radius:4px;background-size:cover!important;box-shadow:0 12px 24px -12px #0009;filter:saturate(1.05) contrast(1.05)}
.tkp:after{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(0deg,color-mix(in srgb,var(--c) 45%,transparent),transparent 45%);mix-blend-mode:multiply}
.tkx{display:flex;flex-direction:column;justify-content:center;padding:22px 20px 22px 4px;min-width:0}
.tkx small{font:800 9px var(--mono);letter-spacing:.24em;color:#16130fa0}
.tkx b{margin:8px 0 4px;font:900 clamp(26px,5vw,40px)/.95 var(--sans);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere}
.tkx em{font:italic 700 13px Georgia,serif;color:color-mix(in srgb,var(--c) 60%,#16130f)}
.tkd{display:flex;gap:18px;margin-top:18px;padding-top:12px;border-top:2px solid #16130f}
.tkd span{display:flex;flex-direction:column;font:800 15px var(--mono)}.tkd i{font:700 8px var(--mono);letter-spacing:.18em;font-style:normal;color:#16130f90}
.tks{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 10px;background:var(--c);color:#0b0906;border-left:2px dashed #16130f66}
.tks:before,.tks:after{content:"";position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:#060607}
.tks:before{top:-12px}.tks:after{bottom:-12px}
.tks small{font:800 9px var(--mono);letter-spacing:.24em}.tks b{font:900 15px var(--mono);letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg)}
.tkb{display:block;width:70%;height:40px;background:repeating-linear-gradient(90deg,#0b0906 0 2px,transparent 2px 3px,#0b0906 3px 4px,transparent 4px 6px,#0b0906 6px 9px,transparent 9px 10px)}
.tks span{font:700 9px var(--mono);letter-spacing:.12em}
.tk.k6 .tks{background:linear-gradient(160deg,#a5f3fc,#f5d0fe,#fef9c3,#a5f3fc);background-size:200% 200%;animation:foil 6s linear infinite}
.tkfoil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff55 45%,transparent 60%);background-size:250% 100%;animation:foil 4s linear infinite;mix-blend-mode:soft-light}
.tk.k5 .tkm,.tk.k6 .tkm{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#f2eee4),#f2eee4 60%)}

/* ---------- avatar ---------- */
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:hsl(var(--h,20) 45% 30%);background-size:cover!important;color:#fff;font:800 14px var(--sans);font-style:normal;box-shadow:inset 0 0 0 1px #ffffff26}
.av.xxl{width:112px;height:112px;font-size:44px;box-shadow:0 0 0 4px #0c0c0d,0 0 0 6px var(--c,var(--ac)),0 20px 40px -12px #000}

/* =====================================================================
   CONNEXION
   ===================================================================== */
.lg{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px;min-height:calc(100dvh - var(--hh) - var(--st) - 120px);max-width:980px;margin:0 auto}
.lgv{position:relative;height:440px}
.lgd{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px;border-radius:50%;background:radial-gradient(circle,#0c0c0d 0 5px,var(--ac) 6px 48px,#0c0c0d 49px 52px,transparent 53px),repeating-radial-gradient(#0c0c0d 0 2px,#1a1a1d 2px 3.5px);box-shadow:0 0 0 1px #2a2a2e,0 40px 80px -30px #000;animation:spin 14s linear infinite}
.lgd:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,#ffffff22 14%,transparent 20% 55%,#ffffff18 62%,transparent 68%)}
.lgf{position:absolute;inset:0;z-index:2}
.lgc{position:absolute;left:50%;top:50%;width:132px;height:200px;margin:-100px -66px;border-radius:9px;background:linear-gradient(180deg,#18181b,#0d0d0f);border:2px solid var(--c);box-shadow:0 30px 50px -20px #000,0 0 30px -10px var(--c)}
.lgc em{position:absolute;left:12px;right:12px;top:14px;aspect-ratio:1;border-radius:3px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 40%,#111) 0 8px,color-mix(in srgb,var(--c) 25%,#0c0c0d) 8px 16px)}
.lgc:after{content:"";position:absolute;left:12px;right:30px;bottom:34px;height:8px;border-radius:2px;background:#ffffff26;box-shadow:0 14px 0 -1px #ffffff14}
.lgc.c0{transform:translate(-120px,40px) rotate(-14deg)}.lgc.c1{transform:translate(0,-10px) rotate(2deg);z-index:2}.lgc.c2{transform:translate(120px,46px) rotate(15deg)}
.lgp h1{margin:10px 0 12px;font:800 38px/1.02 var(--sans);letter-spacing:-.035em}
.lgp .lead{margin-bottom:26px}
.prov{display:flex;flex-direction:column;gap:10px}.prov:empty{display:none}
.pv{display:flex;align-items:center;gap:14px;height:52px;padding:0 18px;border:0;border-bottom:2px solid #050506;border-radius:3px;background:#18181b;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer;font:600 15px var(--sans);transition:.15s}
.pv:hover{background:#1f1f23}.pv:active{transform:translateY(1px);border-bottom-width:1px}
.pv span{flex:1;text-align:left}
.pv:after{content:"→";color:var(--mut);font-size:16px}
.pi{width:20px;height:20px;border-radius:5px;background:#fff;flex:none}
.pv-google .pi{border-radius:50%;background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);-webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);mask:radial-gradient(circle,transparent 4px,#000 4.5px)}
.pv-discord .pi{background:#5865f2}.pv-github .pi{background:#f0f0f0;border-radius:50%}.pv-twitch .pi{background:#9146ff}.pv-spotify .pi{background:#1db954;border-radius:50%}.pv-apple .pi{background:#f5f5f7;border-radius:50%}.pv-azure .pi{background:conic-gradient(#f25022 0 25%,#7fba00 0 50%,#ffb900 0 75%,#00a4ef 0)}
.sep{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--mut);font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase}.sep:before,.sep:after{content:"";flex:1;height:1px;background:var(--ln)}
.lgp>.lnk2{margin-top:16px}
.lgp>.mut.small{margin:14px 0 0}

/* =====================================================================
   PROFIL
   ===================================================================== */
.pf{display:flex;flex-direction:column;gap:22px}
.pfh{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:26px;padding:70px 28px 26px;border-radius:6px;overflow:hidden;background:#101012;box-shadow:inset 0 0 0 1px var(--ln)}
.pfb{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(38px) saturate(1.3) brightness(.45);transform:scale(1.3);opacity:.9}
.pfh:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#0c0c0de6 90%);pointer-events:none}
.pfh>*:not(.pfb){position:relative;z-index:2}
.pfa{position:relative}
.pfe{position:absolute;right:0;bottom:4px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--fg);color:#0c0c0d;cursor:pointer;box-shadow:0 0 0 3px #0c0c0d}.pfe svg{width:15px;height:15px}
.pfi h1{margin:0;font:800 clamp(28px,4vw,40px)/1 var(--sans);letter-spacing:-.035em;overflow-wrap:anywhere}
.pfi p{margin:8px 0 0}.pfi .bio{color:var(--fg);max-width:520px;line-height:1.5}
.pfx{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chipi{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:10px 0}
.psong{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:4px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln)}
.psong .pc{width:46px;height:46px;flex:none;border-radius:3px;background-size:cover!important;display:flex;align-items:center;justify-content:center;color:var(--mut)}.psong .pc.none{background:#1b1b1e}
.psong>div{flex:1;min-width:0;display:flex;flex-direction:column}.psong small{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.psong b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.psong span{font-size:13px;color:var(--mut)}
.pp{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--ac);color:#140702;cursor:pointer;display:flex;align-items:center;justify-content:center}.pp svg{width:16px;height:16px}
.psong .eq{--c:var(--ac)}
.pst{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln);box-shadow:0 0 0 1px var(--ln);border-radius:4px;overflow:hidden}
.pst div{background:#101012;padding:14px 16px}.pst b{display:block;font:500 26px var(--mono);letter-spacing:-.02em}.pst b i{font-style:normal;color:var(--mut);margin:0 2px}.pst span{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.prb{display:flex;height:6px;gap:2px;border-radius:3px;overflow:hidden}.prb i{background:var(--c)}
.prl{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:-10px;font-size:12px;color:var(--mut)}.prl span{display:flex;align-items:center;gap:6px}.prl i{width:7px;height:7px;border-radius:50%;background:var(--c)}.prl b{color:var(--fg);font-family:var(--mono)}
.psec{margin-top:8px}.sh2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sh2 h2{margin:0;font:800 20px var(--sans);letter-spacing:-.01em}
.vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px;border-radius:6px;background:radial-gradient(ellipse at 50% 0,#1d1d21,#0f0f11 70%);box-shadow:inset 0 0 0 1px var(--ln),inset 0 -30px 40px -30px #000}
.vs{position:relative;height:270px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vs.w2{grid-column:span 2}
.vs .vc{zoom:1.02}
.vs:after{content:"";position:absolute;left:10%;right:10%;bottom:-10px;height:10px;border-radius:50%;background:#000;filter:blur(8px);opacity:.7;z-index:-1}
.vs.empty{flex-direction:column;gap:10px;border:1px dashed #3a3a40;border-radius:6px;background:none;color:var(--mut);font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.vs.empty i{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;background:#ffffff08}
.vs.empty:hover{border-color:var(--ac);color:var(--fg)}.vs.empty.dim{cursor:default;opacity:.4}.vs.empty.dim:after,.vs.empty:after{display:none}
.vrm{position:absolute;top:-8px;right:-4px;z-index:10;height:26px;padding:0 10px;border:0;border-radius:13px;background:#0c0c0d;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--mut);cursor:pointer;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:.15s}
.vs:hover .vrm,.vs:focus-within .vrm{opacity:1}.vrm:hover{color:#ff8f86}
@media(hover:none){.vrm{opacity:1}}
.topc{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory}.topc .slot{flex:none;scroll-snap-align:start}
/* réglages */
.setw{display:flex;flex-direction:column;gap:24px}
.sgrp h3{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid #ffffff0b;cursor:pointer}
.srow>span{display:flex;flex-direction:column;font-size:15px}.srow small{font-size:13px;color:var(--mut)}
.srow.danger>span{color:#ff8f86}
.srow input[type=range]{width:min(220px,44vw);accent-color:var(--ac)}
.srow select{height:38px;font-size:13px}
.sw{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;border-radius:14px;background:#2a2a2e;position:relative;cursor:pointer;transition:background .2s}
.sw:before{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#bdbcb6;transition:transform .2s cubic-bezier(.2,.9,.2,1)}
.sw:checked{background:var(--ac)}.sw:checked:before{transform:translateX(18px);background:#fff}
.wal{display:flex;align-items:center;gap:14px;padding:10px 0 18px}.wal b{font:500 40px var(--mono);letter-spacing:-.03em}.wal span{color:var(--mut);font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.earn{list-style:none;margin:0 0 14px;padding:0}.earn li{padding:9px 0;border-top:1px solid #ffffff0b;font-size:14px;color:var(--mut)}.earn b{color:var(--fg);font-family:var(--mono);margin-right:6px}.earn a{color:var(--fg);cursor:pointer}

/* =====================================================================
   AMIS & ÉCHANGES
   ===================================================================== */
.soc{display:grid;grid-template-columns:320px 1fr;height:calc(100dvh - var(--hh) - var(--st) - 250px);min-height:480px;border-radius:6px;overflow:hidden;background:#0f0f11;box-shadow:inset 0 0 0 1px var(--ln)}
.fl{display:flex;flex-direction:column;border-right:1px solid var(--ln);background:#111113;min-height:0}
.addf{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--ln)}.addf .search{height:40px;min-width:0}.addf .k{flex:none;height:40px}.addf .search input{font-size:14px}.addf .search svg{width:16px}
#fll{flex:1;overflow:auto;padding:6px}
#fll h4{margin:16px 10px 6px;font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.fr2{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:4px;background:none;color:var(--fg);text-align:left;font:600 15px var(--sans)}
.fr2>span{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fr2 small{font:600 12px var(--sans);color:var(--mut)}.fr2 .tg{color:#d8b4fe}
.fr2.fb{cursor:pointer}.fr2.fb:hover{background:#19191c}.fr2.on{background:#1f1f23;box-shadow:inset 2px 0 0 var(--ac)}
.fr2.dim{opacity:.7}.fr2.req{flex-wrap:wrap;row-gap:8px}.fra{display:flex;gap:6px;flex:1 0 100%;padding-left:48px}.fra .k{flex:1}.fr2>.k{flex:none}
.fr2 .bd{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ac);color:#140702;font:800 11px/20px var(--mono);font-style:normal;text-align:center}
.fr2 .chev{display:flex;color:#4a4a50;transform:rotate(180deg)}.fr2 .chev svg{width:15px}
.pad{padding:6px 10px}
.ch{display:flex;flex-direction:column;min-width:0;min-height:0}
.cth{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ln);background:#121214}
.cti{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-decoration:none}.cti span{display:flex;flex-direction:column;min-width:0}.cti b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cti small{font-size:12px;color:var(--mut);white-space:nowrap}.cth .k{flex:none}
.bkb{display:none}
.menu{position:relative}.mnu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:240px;padding:6px;border-radius:5px;background:#1a1a1d;box-shadow:inset 0 0 0 1px var(--ln2),0 20px 40px -10px #000}
.mnu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;border-radius:3px;background:none;color:var(--fg);cursor:pointer;text-align:left;font:600 14px var(--sans)}.mnu button:hover{background:#ffffff0a}
.mnu .danger{color:#ff8f86}
.thr{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px;background:radial-gradient(circle at 50% 0,#17171a,#0f0f11 60%)}
.day{align-self:center;margin:8px 0;font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.msg{max-width:74%;align-self:flex-start;padding:9px 13px 6px;border-radius:14px 14px 14px 4px;background:#1d1d21;box-shadow:inset 0 0 0 1px #ffffff0d;animation:up .25s both}
.msg.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,#ff6a2e,#e0480f);color:#140702}
.msg p{margin:0;font-size:15px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}.msg time{display:block;margin-top:3px;font:10px var(--mono);opacity:.6;text-align:right}
.cin{display:flex;gap:8px;padding:10px 12px calc(10px + var(--sb));border-top:1px solid var(--ln);background:#121214}
.cin input{flex:1;min-width:0;height:44px;padding:0 14px;border:0;border-radius:3px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font-size:16px;outline:none}.cin input:focus{box-shadow:inset 0 0 0 1px var(--ac)}
.cin .k{height:44px}
.trd{align-self:center;width:min(580px,100%);margin:6px 0;border-radius:6px;background:linear-gradient(180deg,#17151c,#111016);box-shadow:inset 0 0 0 1px #a855f744;overflow:hidden;animation:up .3s both}
.trd header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #ffffff0d;font-size:14px}
.st2{flex:none;padding:3px 8px;border-radius:3px;font:800 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;background:#ffffff10;color:var(--mut)}
.st2.wait{background:#a855f726;color:#d8b4fe}.st2.ok{background:#10b98124;color:#6ee7b7}.st2.no{background:#ffffff0d;color:var(--mut)}
.trd.s-ok{box-shadow:inset 0 0 0 1px #10b98155}.trd.s-no{opacity:.6}
.tsw{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;padding:14px}
.arr{align-self:center;color:#d8b4fe;display:flex}
.ts h5,.rv h5{margin:0 0 10px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.vpill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:15px;background:#ffffff0a;font:700 13px var(--mono)}
.trd footer{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #ffffff0d}.trd footer time{font:11px var(--mono);color:var(--mut)}
.trv{display:flex;flex-direction:column;gap:26px}
.trtop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.trtop p{margin:0;max-width:560px}
.tsec h3{margin:0 0 12px;font:700 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.tsec .trd{margin:0 0 12px;width:100%}
.steps{display:flex;gap:0;list-style:none;margin:0 0 16px;padding:0;counter-reset:s;border-bottom:1px solid var(--ln)}
.steps li{counter-increment:s;flex:1;padding:10px 4px;text-align:center;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.steps li:before{content:counter(s) " · "}.steps li.on{color:var(--fg);border-color:var(--ac)}.steps li.done{color:#8ad2b0}
.tfoot{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.vin{display:flex;align-items:center;gap:10px;margin-top:14px;padding:8px 12px;border-radius:3px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);font-size:14px}
.vin input{width:110px;height:34px;padding:0 10px;border:0;border-radius:3px;background:#18181b;color:var(--fg);font:700 15px var(--mono);outline:none}
.vin.big{margin:0}.vin.big input{flex:1;width:auto;height:40px;font-size:18px}
.rv{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.rv>div{padding:14px;border-radius:4px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln)}

/* =====================================================================
   MARCHÉ
   ===================================================================== */
.lots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.lot{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px;border:0;border-radius:6px;background:#111113;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);text-align:left;cursor:pointer;transition:box-shadow .15s,transform .15s}
.lot:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,var(--ln));transform:translateY(-2px)}
.lotc{zoom:.62;pointer-events:none}.lotc .card{transform:none!important}
.loti{display:flex;flex-direction:column;gap:6px;min-width:0}
.lott{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lotp{display:flex;align-items:center;gap:7px;font:600 24px var(--mono);letter-spacing:-.02em}.lotp .vcoin{width:22px;height:22px}
.lotm{font-size:13px;color:var(--mut)}
.lotd{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--mono)}.lotd svg{width:15px;height:15px;color:var(--mut)}
.lotd.hot{color:var(--ac)}.lotd.hot svg{color:var(--ac);animation:nx .5s infinite alternate}
.bidb{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.qb{display:flex;gap:6px;flex-wrap:wrap}
.sell{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.sellf{display:flex;flex-direction:column;gap:6px}.sellf .fld small{font-size:13px}
.durs{display:flex;flex-wrap:wrap;gap:6px}.durs .chip{height:38px;padding:0 14px;font-size:11px}

/* =====================================================================
   DUELS
   ===================================================================== */
.du{display:flex;flex-direction:column;gap:18px}
.djoin{display:flex;gap:10px;max-width:520px}.djoin input{text-transform:uppercase;font-family:var(--mono);letter-spacing:.2em}
.rules{padding:0 16px;border-radius:4px;background:#111113;box-shadow:inset 0 0 0 1px var(--ln)}
.rules summary{padding:14px 0;cursor:pointer;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);list-style:none}
.rules summary:before{content:"+ "}.rules[open] summary:before{content:"− "}
.rules ul{margin:0 0 14px;padding-left:18px;color:var(--mut);font-size:14px;line-height:1.7}.rules b{color:var(--fg)}
.rooms{display:flex;flex-direction:column;gap:1px;border-radius:5px;overflow:hidden;background:var(--ln);box-shadow:0 0 0 1px var(--ln)}
.room{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#111113;border:0;color:var(--fg);text-align:left;width:100%;flex-wrap:wrap}
.room.h{cursor:pointer}.room.h:hover{background:#17171a}
.rmi{flex:1;min-width:160px;display:flex;flex-direction:column}.rmi b{font-size:15px}.rmi>span{font-size:13px;color:var(--mut)}.rmi .st{justify-content:flex-start}
.rmc{width:46px;height:46px;border-radius:3px;background-size:cover!important;flex:none}
.code,.bigcode{font:800 16px var(--mono);letter-spacing:.3em;padding:6px 10px;border-radius:3px;background:#ffffff0d}
.bigcode{display:inline-block;margin:10px 0 12px;font-size:30px;padding:10px 18px;color:var(--ac)}
.wait{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}.wait .dcard{zoom:.8}.wait p{margin:0 0 6px}
.dots:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ac);margin-right:6px;animation:nx .6s infinite alternate}
.dcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .25s}
.dcard .card{transform:none!important}
.dstat{display:flex;gap:12px;font:700 13px var(--mono)}.dstat span{display:flex;gap:4px;align-items:baseline;white-space:nowrap}.dstat i{font-style:normal;font-size:10px;color:var(--mut);letter-spacing:.1em}
#stage.duel{background:radial-gradient(ellipse at 50% 30%,#1a1016,#0c0c0d 70%)}
.dstage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(var(--st) + 30px) 14px calc(var(--sb) + 140px)}
.dfield{display:flex;align-items:center;justify-content:center;gap:clamp(14px,5vw,60px)}
.dside{display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .5s,filter .5s}
.dwho{display:flex;align-items:center;gap:8px;font-size:15px}
.hp{position:relative;width:180px;height:10px;border-radius:5px;background:#ffffff12;overflow:hidden}.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#34d399,#a3e635);transition:width .45s}
.hp span{position:absolute;right:0;top:12px;font:700 11px var(--mono)}
.dside{padding-bottom:14px}
.dvs{font:900 28px var(--mono);color:var(--ac);letter-spacing:.1em}
.dcard.atk{transform:translateY(-14px) scale(1.04)}
.dside.h .dcard.atk{transform:translateX(26px) rotate(3deg)}.dside.g .dcard.atk{transform:translateX(-26px) rotate(-3deg)}
.dcard.hit{animation:hit .35s}.dcard.crit{animation:hit .5s;filter:drop-shadow(0 0 18px var(--ac))}
@keyframes hit{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.dmg{position:absolute;top:30%;left:50%;z-index:9;transform:translateX(-50%);font:900 26px var(--mono);color:#fff;text-shadow:0 2px 10px #000;font-style:normal;white-space:nowrap;animation:dmg .9s both}
.dmg.c{color:var(--ac);font-size:30px}
@keyframes dmg{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50px)}}
.dside.won .dcard{filter:drop-shadow(0 0 22px #fbbf24aa)}.dside.lost{opacity:.4;filter:grayscale(.8)}
.dlog{min-height:30px;font:600 15px var(--sans);color:var(--mut);text-align:center}.dlog b{font:900 28px var(--sans);display:block;letter-spacing:-.02em}.dlog .w{color:#fbbf24}.dlog .l{color:var(--mut)}

/* =====================================================================
   TÉLÉPHONE
   ===================================================================== */
@media(max-width:980px){
 .bp{grid-template-columns:1fr auto;gap:28px 40px}
 .bpi{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;align-items:end}
 .bpi .lead{margin:0}.bpi .stock{grid-column:2;grid-row:1/3}
 .bpc{justify-self:start}
 .lg{grid-template-columns:1fr;gap:10px}.lgv{height:300px;zoom:.8}
}
@media(max-width:760px){
 :root{--hh:54px;--nav:calc(64px + var(--sb))}
 .topbar{grid-template-columns:1fr auto;padding:var(--st) max(14px,var(--sr)) 0 max(14px,var(--sl));backdrop-filter:none;-webkit-backdrop-filter:none;background:#0c0c0d}
 .brand b{font-size:16px}
 /* navigation sous le pouce */
 .tabs{position:fixed;left:0;right:0;bottom:0;z-index:35;height:auto;padding:6px max(6px,var(--sl)) calc(6px + var(--sb)) max(6px,var(--sr));background:#0c0c0df5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ln);gap:0}
 .tabs button{flex:1;flex-direction:column;gap:4px;height:52px;padding:0;font-size:9.5px;letter-spacing:.08em}
 .tabs button:after{top:-7px;bottom:auto;left:30%;right:30%}
 .ico svg{width:22px;height:22px}
 .nb{top:2px;right:calc(50% - 22px)}
 .meb span{display:none}.meb:not(.in){padding:0 12px}.meb:not(.in):not(:has(svg)) span{display:inline}
 .meb.in{padding:3px;border-radius:50%}
 .wallet{height:34px;font-size:13px}
 main{padding:20px max(14px,var(--sr)) calc(30px + var(--nav)) max(14px,var(--sl))}
 .phd h1{font-size:28px}
 /* boosters : le booster d'abord, puis l'action, puis le reste */
 .bp{display:flex;flex-direction:column;gap:0;min-height:0}
 .bpi{display:block;order:0;text-align:center;margin:0 auto}
 .bpi .eyebrow{display:none}.bpi h1{font-size:24px;margin:0}.bpi .lead{display:none}
 .bpi .stock{order:3}
 .bpv{order:1}.bpv .pkw{--pz:1.08;margin:26px auto 36px}
 .rip{width:min(300px,86vw)}
 .bpi{display:contents}
 .bpi h1,.bpi .eyebrow{order:0}
 .bpi .stock{order:2;width:min(300px,86vw);margin:16px auto 0;text-align:center}.stock p{justify-content:center}
 .bpc{order:3;align-self:center;max-width:340px;margin-top:22px}
 .bpc .eyebrow{text-align:center}
 .fan{height:190px;width:234px;margin:14px auto 4px;zoom:.8}
 .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 10px}
 .grid .slot{zoom:.92}
 .ftools{flex-wrap:wrap}.ftools .search{flex-basis:100%}.ftools select{flex:1}
 .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 18px;padding:0 14px 4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
 .seg3{overflow-x:auto}.seg3 b{padding:12px 14px;font-size:11px}
 .alhead{grid-template-columns:110px 1fr;gap:14px}.alhead .alc{width:110px}.alhead #alback{grid-column:1/-1;justify-self:start}.alact{grid-column:1/-1}
 /* fenêtres : feuilles qui montent du bas */
 #sheet{padding:0;align-items:flex-end}
 .sb,#sheet.sm .sb,#sheet.wide .sb{width:100%;margin:auto 0 0;max-height:94dvh;overflow:auto;border-radius:14px 14px 0 0;padding:10px 16px calc(20px + var(--sb));animation:sheet .3s cubic-bezier(.2,.9,.2,1) both}
 .sb:before{content:"";display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:#3a3a40}
 #sheet.full .sb{min-height:94dvh}
 .shd{position:sticky;top:-10px;z-index:3;margin:0 -16px 12px;padding:6px 16px 10px;background:#17171a}
 .det{grid-template-columns:1fr;gap:18px}.detc{justify-self:center}
 .choice{grid-template-columns:1fr}
 .sell{grid-template-columns:1fr}.sell .detc{justify-self:center;zoom:.8}
 .rv{grid-template-columns:1fr}
 .tsw{grid-template-columns:1fr;gap:10px}.arr{justify-self:center;transform:rotate(90deg)}
 .row.end .k{flex:1}
 /* connexion */
 .lg{min-height:0;gap:0}.lgv{height:330px;zoom:.56;margin:0 0 10px}
 .lgp h1{font-size:30px}
 /* profil */
 .pfh{grid-template-columns:1fr;justify-items:center;text-align:center;padding:40px 18px 20px;gap:14px}
 .pfx{justify-content:center}.pfi .bio{margin-inline:auto}
 .av.xxl{width:96px;height:96px;font-size:38px}
 .pst{grid-template-columns:repeat(2,1fr)}.pst b{font-size:22px}
 .vitrine{grid-template-columns:repeat(2,1fr);gap:22px 10px;padding:18px 10px}
 .vs{height:240px}.vs .vc{zoom:.92}.vs.w2{height:200px}
 /* amis */
 .soc{grid-template-columns:1fr;height:calc(100dvh - var(--hh) - var(--st) - var(--nav) - 190px);min-height:420px}
 .soc.open .fl{display:none}.soc:not(.open) .ch{display:none}.bkb{display:inline-flex}
 .cth .k span{display:none}.cth .k.sm{padding:0 10px}.cth{gap:6px;padding:10px}
 .msg{max-width:86%}
 .cin{padding-bottom:10px}
 /* marché */
 .lots{grid-template-columns:1fr}
 .lotc{zoom:.52}
 /* ouverture et duels */
 .stg{padding:calc(var(--st) + 50px) 10px calc(var(--sb) + 150px)}
 .sbar{gap:12px}.acts{width:100%}.acts .k{flex:1;min-width:0}
 .dfield{gap:10px}.dcard .slot{zoom:.62}.hp{width:120px}.dvs{font-size:18px}.dstat{font-size:11px;gap:7px}
 .dwho b{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .wait{grid-template-columns:1fr;justify-items:center;text-align:center}
 #pq .pqw:not(.rotw) .tk{grid-template-columns:1fr 92px;min-height:0;--stub:92px}#pq .pqw:not(.rotw) .tkm{grid-template-columns:1fr}#pq .pqw:not(.rotw) .tkp{height:180px;margin:14px 14px 0}#pq .pqw:not(.rotw) .tkx{padding:14px}
 .tks b{font-size:12px}
 #pq .pqw .ctl{flex-wrap:wrap}.ctl .pr{order:3;flex-basis:100%}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
@media(max-width:380px){.tabs button span{font-size:8.5px}.wallet b{font-size:12px}}
@media(max-width:440px){.brand b{display:none}.tr{gap:8px}}
@media(hover:hover){.bpc .fan{cursor:default}}
/* réduire les animations */
.rm *,.rm *:before,.rm *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* révélation rapide (compte de test) */
#stage.fast .flip{transition-duration:.28s}#stage.fast #row .slot{animation-duration:.3s;animation-delay:calc(var(--i)*30ms)}
.steps2{margin:0 0 14px;padding-left:20px;line-height:1.9}.srow .instb[hidden]{display:none}#sinsh{max-width:200px;text-align:right}
/* application installée : pas de barre du navigateur, on garde les zones système */
@media(display-mode:standalone){body{overscroll-behavior-y:none}}
/* pochette sur téléphone : le disque en grand, la plaque dessous, les commandes bien rangées */
@media(max-width:640px){
 .mat{grid-template-columns:1fr;padding:24px 18px;gap:20px}.pqr{grid-row:auto;width:80%;justify-self:center}.pqc{display:none}
 .pqw .ctl{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-wrap:nowrap}
 .pqw .ctl #spp,.pqw .ctl .grow{grid-column:1/-1;width:100%}
 .pqw .ctl .pr{grid-column:1/-1;order:0;flex-basis:auto}.pqw .ctl .tm{display:none}
 .pqw .ctl #spd,.pqw .ctl #spx{width:100%}
}

/* ---------- dos des cartes Music : la matière du booster ---------- */
.back.bm{border:0;background:linear-gradient(162deg,#ff8a4c,#ff5a1f 42%,#d8410b);box-shadow:inset 0 0 0 1px #ffffff40,0 10px 24px -10px #000}
.back.bm:before{inset:7px;border:1.5px solid #14070266;border-radius:6px;z-index:1}
.bm .bgr{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#00000010 0 1px,transparent 1px 3px),radial-gradient(circle at 30% 0,#ffffff38,transparent 55%);mix-blend-mode:multiply;pointer-events:none}
.bm .bwm{position:absolute;left:15px;top:15px;display:flex;flex-direction:column;font:900 27px/.84 var(--sans);letter-spacing:-.05em;color:#140702}
.bm .bno{position:absolute;right:15px;top:16px;font:800 7px var(--mono);letter-spacing:.16em;color:#140702b0}
.bm .bvy{position:absolute;left:50%;bottom:36px;width:118px;height:118px;margin-left:-59px;border-radius:50%;background:repeating-radial-gradient(#0c0c0d 0 1.6px,#1c1c1f 1.6px 2.6px);box-shadow:0 8px 18px -6px #000a,0 0 0 2px #140702;animation:spin 9s linear infinite}
.bm .grv{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 40deg,#ffffff2e 60deg,transparent 80deg 200deg,#ffffff1f 220deg,transparent 240deg)}
.bm .lbl{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:radial-gradient(circle,#0c0c0d 0 3px,transparent 3.5px),conic-gradient(var(--bk,#ff5a1f) 0 90deg,#f3e7d3 90deg 180deg,var(--bk,#ff5a1f) 180deg 270deg,#f3e7d3 270deg)}
.bm .bft{position:absolute;left:7px;right:7px;bottom:7px;height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-radius:0 0 5px 5px;background:#140702;font:800 7px var(--mono);letter-spacing:.18em;color:var(--bkt,#ffb08a)}
.bm .pips{display:flex;gap:2px}.bm .pips s{width:5px;height:5px;border-radius:1px;background:var(--t)}
.back .bsh{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff55 47%,#fff0 58%);background-size:260% 100%;background-position:120% 0;animation:bsh 4.5s ease-in-out infinite}
@keyframes bsh{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.slot.nx .back.bm{box-shadow:0 0 0 2px #fff,0 0 30px -2px var(--ac);animation:nx .9s infinite alternate}
.slot.nx .back .bsh{animation-duration:1.6s}
/* mini-dos de la page Booster */
.bkm{position:absolute;left:0;top:18px;width:98px;height:150px;border-radius:7px;overflow:hidden;background:linear-gradient(162deg,#ff8a4c,#ff5a1f 42%,#d8410b);box-shadow:inset 0 0 0 1px #ffffff40,0 12px 26px -8px #000;transform-origin:50% 120%;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.bkm b{position:absolute;left:9px;top:9px;font:900 15px/.84 var(--sans);letter-spacing:-.05em;color:#140702}
.bkm em{position:absolute;left:50%;bottom:20px;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:radial-gradient(circle,#0c0c0d 0 2px,#f3e7d3 2.5px 9px,var(--bk,#ff5a1f) 9.5px 12px,transparent 12.5px),repeating-radial-gradient(#0c0c0d 0 1.2px,#1c1c1f 1.2px 2px);box-shadow:0 0 0 1.5px #140702}
.bkm:after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:11px;border-radius:0 0 4px 4px;background:#140702}
.bkm.f0{transform:translateX(0) rotate(-12deg)}.bkm.f1{transform:translateX(34px) rotate(-6deg)}.bkm.f2{transform:translateX(68px) rotate(0)}.bkm.f3{transform:translateX(102px) rotate(6deg)}.bkm.f4{transform:translateX(136px) rotate(12deg)}
.bpc:hover .bkm.f0{transform:translateX(-8px) rotate(-17deg)}.bpc:hover .bkm.f4{transform:translateX(144px) rotate(17deg)}


/* ---------- carte Artiste bonus : pass de tournée (noir mat, un seul hologramme) ---------- */
.back.sb6{border:0;flex-direction:column;justify-content:flex-start;background:#0e0e11;box-shadow:0 0 0 1px #ffffff2e,0 24px 50px -14px #000}
.back.sb6:before{display:none}
.sb6 .gch{position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 135%,#ffffff07 0 1px,transparent 1px 4px),linear-gradient(180deg,#ffffff0a,transparent 40%)}
.sb6 .hole{position:absolute;top:9px;left:50%;z-index:2;width:34px;height:7px;margin-left:-17px;border-radius:4px;background:#050506;box-shadow:inset 0 1px 2px #000,0 1px 0 #ffffff24}
.sb6 .s6h{position:relative;z-index:2;width:100%;margin-top:24px;display:flex;justify-content:space-between;padding:0 12px;font:700 6.5px var(--mono);letter-spacing:.22em;color:#ffffff8c}
.sb6 .s6f{position:relative;z-index:2;display:block;width:100%;height:3px;margin-top:8px;background:linear-gradient(90deg,#c7d2fe,#a5f3fc,#f5d0fe,#fef3c7,#c7d2fe);background-size:200% 100%;animation:foil 6s linear infinite;opacity:.85}
.sb6 .s6m{position:relative;z-index:2;margin-top:26px;display:flex;flex-direction:column;align-items:center}
.sb6 .s6m b{font:900 56px/.86 var(--sans);letter-spacing:-.04em;color:#f4f4f5}
.sb6 .s6m small{margin-top:8px;font:700 6.5px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#ffffff80}
.sb6 .s6k{position:absolute;z-index:2;right:12px;bottom:66px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(from 40deg,#e0e7ff,#a5f3fc,#f5d0fe,#fef9c3,#e0e7ff);box-shadow:inset 0 0 0 1px #ffffffaa,0 2px 6px #0008;animation:holo 7s linear infinite}
.sb6 .s6k s{text-decoration:none;font:900 10px var(--sans);letter-spacing:-.02em;color:#0e0e11cc}
@keyframes holo{to{filter:hue-rotate(360deg)}}
.sb6 .s6r{position:absolute;z-index:2;left:0;right:0;bottom:30px;height:24px;display:flex;align-items:center;justify-content:center;background:#f4f4f5;color:#0e0e11;font:900 11px var(--mono);letter-spacing:.42em;padding-left:.42em}
.sb6 .s6b{position:absolute;z-index:2;left:0;right:0;bottom:0;height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font:700 6.5px var(--mono);letter-spacing:.14em;color:#ffffff80}
.sb6 .bc{width:54px;height:11px;background:repeating-linear-gradient(90deg,#ffffffcc 0 1px,transparent 1px 2px,#ffffffcc 2px 4px,transparent 4px 5px,#ffffffcc 5px 6px,transparent 6px 8px)}
.sb6 .bsh{background:linear-gradient(115deg,transparent 38%,#ffffff26 48%,#fff0 58%);background-size:260% 100%}
.slot.nx .back.sb6{box-shadow:0 0 0 1.5px #fff,0 0 34px -6px #ffffffaa,0 24px 50px -14px #000;animation:nx .9s infinite alternate}
/* l'entrée surprise : coupure de courant, projecteur, le pass tombe au bout de son tour de cou */
#stage.blackout:before{content:"";position:absolute;inset:0;z-index:4;background:#000;pointer-events:none;animation:bo .72s steps(1) both}
@keyframes bo{0%{opacity:0}12%{opacity:.92}22%{opacity:.15}34%{opacity:.96}46%{opacity:.4}58%,100%{opacity:.88}}
.sec6 .spot6{position:absolute;top:0;left:50%;width:min(620px,140vw);height:100%;transform:translateX(-50%);background:radial-gradient(ellipse 46% 78% at 50% 0,#fff2e61f,transparent 72%);animation:fade .6s .25s both}
.sec6 .halo{position:absolute;width:460px;height:460px;max-width:110vw;max-height:110vw;border-radius:50%;background:radial-gradient(circle,#ffffff14,transparent 62%);animation:fade 1s .4s both}
.sec6.open .halo{background:radial-gradient(circle,#ff5a1f30,transparent 62%);transition:background .4s}
.sec6 .bon6{position:absolute;z-index:3;bottom:calc(var(--sb) + 88px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;animation:up6 .6s 1.1s both}
.sec6 .bon6 small{font:700 10px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#ffffff73}
.sec6 .bon6 b{font:800 26px/1 var(--sans);letter-spacing:-.02em;color:#f4f4f5}
@keyframes up6{from{opacity:0;transform:translateY(10px)}}
.sec6 .drop6{position:relative;pointer-events:auto;transform-origin:50% -70vh;animation:drop6 1.25s .15s cubic-bezier(.3,1.2,.5,1) both,sway 3.6s 1.4s ease-in-out infinite}
@keyframes drop6{0%{transform:translateY(-115vh)}60%{transform:translateY(0) rotate(0)}74%{transform:rotate(2.2deg)}87%{transform:rotate(-1.2deg)}100%{transform:none}}
@keyframes sway{50%{transform:rotate(.7deg)}}
.sec6 .lan{position:absolute;left:50%;bottom:calc(100% - 15px * var(--z,1));display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);pointer-events:none}
.sec6 .strap{position:relative;display:block;width:calc(15px * var(--z,1));height:120vh;overflow:hidden;background:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 2px),linear-gradient(90deg,#060607,#1b1b1f 30%,#232328 50%,#1b1b1f 70%,#060607);box-shadow:inset 1.5px 0 0 #ffffff12,inset -1.5px 0 0 #ffffff12;-webkit-mask:linear-gradient(#0000,#000 35%);mask:linear-gradient(#0000,#000 35%)}
.sec6 .strap span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);writing-mode:vertical-rl;white-space:nowrap;font:800 calc(6px * var(--z,1)) var(--mono);letter-spacing:.32em;color:#ff5a1fb0}
.sec6 .hook{display:block;width:calc(22px * var(--z,1));height:auto;margin-top:-2px;filter:drop-shadow(0 2px 2px #000a)}
.sec6.charge .drop6,.sec6.open .drop6{animation:none}
.sec6.open .lan,.sec6.open .spot6,.sec6.open .bon6{opacity:0;transition:opacity .4s}
#stage.fast .drop6{animation-duration:.45s,3.6s;animation-delay:0s,.5s}#stage.fast .bon6{animation-delay:0s}#stage.fast:before{animation-duration:.2s}
@media(prefers-reduced-motion:reduce){.sec6 .drop6{animation:fade .3s both}.sb6 .s6k,.sb6 .s6f,.bm .bvy{animation:none}}

/* ---------- Collection : rail de rareté ---------- */
.rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0 0 22px}
.rt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:4px 8px;min-width:0;padding:10px 10px 12px;border:0;border-radius:4px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);color:var(--mut);cursor:pointer;text-align:left;overflow:hidden;transition:background .15s,box-shadow .15s}
.rt:hover{background:#17171b}
.rt b{min-width:0;font:700 12px var(--sans);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt em{grid-column:1/-1;font:600 13px var(--mono);font-style:normal;color:var(--fg);letter-spacing:-.02em}.rt em small{font-size:10px;color:var(--mut);margin-left:1px}
.rt s{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff0c}.rt s u{display:block;height:100%;background:var(--c);transition:width .4s}
.rt.on{background:color-mix(in srgb,var(--c) 13%,#121215);box-shadow:inset 0 0 0 1.5px var(--c)}
.rt.on b{color:var(--c)}
.gem{width:13px;height:15px;flex:none;background:linear-gradient(135deg,#fff 0 18%,var(--c) 19% 55%,color-mix(in srgb,var(--c) 55%,#000) 56%);clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%)}
.gem.g0,.gem.g1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gem.g4,.gem.g5{filter:drop-shadow(0 0 4px var(--c))}
.gem.g6{background:conic-gradient(#a5f3fc,#f5d0fe,#fef9c3,#a5f3fc);filter:drop-shadow(0 0 5px #22d3ee);clip-path:polygon(50% 0,80% 8%,100% 35%,50% 100%,0 35%,20% 8%)}
.gem.all{background:conic-gradient(#9ca3af,#10b981,#3b82f6,#a855f7,#f59e0b,#ef4444,#22d3ee,#9ca3af);clip-path:circle(46%)}
.rt.r6 s u{background:linear-gradient(90deg,#22d3ee,#e879f9,#fde68a)}
.unk{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:0;border-radius:3px;background:#101012;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--mut);cursor:pointer;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.unk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.unk:hover{color:var(--fg)}.unk.on{color:#0c0c0d;background:var(--fg);box-shadow:none}
.card.lock .top b{color:var(--lc)}.ac.lock .ah{background:color-mix(in srgb,var(--lc) 60%,#2a2a2e)}.ac.lock .ah b{color:#0c0c0d}
@media(max-width:1000px){.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){.rail{display:flex;overflow-x:auto;margin:0 -14px 18px;padding:0 14px 4px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rt{flex:0 0 auto;min-width:96px}.rt b{overflow:visible}.ftools .unk{flex:1;justify-content:center}}

/* ---------- bannière d'installation (Android : proposée d'office) ---------- */
.inb{position:fixed;left:12px;right:12px;bottom:calc(max(var(--nav),var(--sb)) + 12px);z-index:60;display:flex;align-items:center;gap:12px;max-width:460px;margin:0 auto;padding:12px 12px 12px 14px;border-radius:8px;background:#18181b;box-shadow:inset 0 0 0 1px var(--ln2),0 20px 40px -10px #000;animation:inb .4s cubic-bezier(.2,1.2,.4,1) both}
.inb img{width:42px;height:42px;border-radius:10px;flex:none}
.inb div{flex:1;min-width:0}.inb b{display:block;font:700 14px var(--sans)}.inb small{display:block;color:var(--mut);font-size:12px;line-height:1.35}
.inb .x2{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer;font-size:20px;line-height:1}
@keyframes inb{from{opacity:0;transform:translateY(30px)}}

/* billet de concert sur téléphone tenu droit : on le fait pivoter, il garde ses proportions de billet */
.tkr{position:relative;margin:0 auto}
.tkr>.tkrot{position:absolute;left:50%;top:50%;width:720px;transform:translate(-50%,-50%) rotate(90deg) scale(var(--s,1))}
.tkr .tk{width:720px}
.rotw .ctl{margin-top:12px}

/* ======================================================================== Médiators et portefeuille */
.mcoin{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e9d5ff'/%3E%3Cstop offset='.45' stop-color='%23a855f7'/%3E%3Cstop offset='1' stop-color='%235b21b6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16 30C12 25 3.5 16.5 3.5 10.5 3.5 5.5 9 2.5 16 2.5S28.5 5.5 28.5 10.5C28.5 16.5 20 25 16 30z' fill='url(%23g)' stroke='%23140a1e' stroke-width='1.2'/%3E%3Cpath d='M8 9.5c1.5-3 4.5-4 8-4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round'/%3E%3Ctext x='16' y='16.5' font-family='Arial' font-weight='900' font-size='8' text-anchor='middle' fill='%23140a1e' fill-opacity='.55'%3EBD%3C/text%3E%3C/svg%3E") center/contain no-repeat}
.mcoin.xl{width:64px;height:64px}.mcoin.sm{width:14px;height:14px}
.wallet .mcoin{width:20px;height:20px}.wallet .wsep{width:1px;height:16px;background:var(--ln2);margin:0 2px}
.wal2{display:grid;gap:16px}.wcur{padding:4px 0 6px;border-bottom:1px solid #ffffff0b}.wcur:last-child{border:0}
.wlh{margin:14px 0 6px;font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.wled{list-style:none;margin:0;padding:0}.wled li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid #ffffff08;font-size:13px}
.wled small{display:block;color:var(--mut);font-size:11px}.wled b{font:600 13px var(--mono)}.wled b.up{color:#4ade80}.wled b.dn{color:#ff8f86}
@media(max-width:640px){.wallet{gap:5px;padding:0 10px 0 6px}.wallet .mcoin,.wallet .vcoin{width:18px;height:18px}}
@media(max-width:380px){.wallet .wsep,.wallet .vcoin,.wallet #vb{display:none}}

/* ======================================================================== Guildes */
.gem2{--e:#ff5a1f;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:50px;color:#0c0c0d;
 background:linear-gradient(160deg,color-mix(in srgb,var(--e) 70%,#fff),var(--e) 45%,color-mix(in srgb,var(--e) 60%,#000));clip-path:polygon(50% 0,100% 16%,100% 66%,50% 100%,0 66%,0 16%)}
.gem2:after{content:"";position:absolute;inset:3px;clip-path:inherit;box-shadow:inset 0 0 0 40px #0000;border:0;background:linear-gradient(160deg,#ffffff38,transparent 45%);pointer-events:none}
.gem2 svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gem2.gold{background:linear-gradient(160deg,#fff7c2,#f5c542 40%,#b7791f 75%,#fde68a)}
.gem2.esm{width:20px;height:23px}.gem2.elg{width:58px;height:66px}.gem2.exl{width:84px;height:96px}
.gfeat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 30px}
.gf{display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.gf b{font:700 14px var(--sans)}.gf span{color:var(--mut);font-size:13px;line-height:1.4}
.gfi{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#ff5a1f1f;color:var(--ac)}.gfi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.gfi.quest{background:#10b9811f;color:#34d399}.gfi.war{background:#ef44441f;color:#f87171}.gfi.tree{background:#a855f71f;color:#c084fc}.gfi.show{background:#22d3ee1f;color:#67e8f9}
.glist{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.grow2{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.gri{flex:1;min-width:0;text-decoration:none;color:var(--fg)}.gri b{display:block;font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gri b em{font:700 11px var(--mono);font-style:normal;color:var(--mut);letter-spacing:.08em}
.gri span{display:block;margin-top:2px;color:var(--mut);font-size:12.5px}
.gra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.gprev{display:flex;align-items:center;gap:14px;padding:14px;margin-bottom:14px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.gprev b{display:block;font:800 18px var(--sans)}.gprev em{font:700 12px var(--mono);font-style:normal;color:var(--mut)}
.emp{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.emp button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:6px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer}
.emp button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}.emp button.on{box-shadow:inset 0 0 0 2px var(--ac)}
.emp.col button{width:30px;height:30px;border-radius:50%;background:var(--e)}.emp.col button.on{box-shadow:0 0 0 2px #0c0c0d,0 0 0 4px #fff}
.pgld{display:inline-flex;align-items:center;gap:8px;margin:2px 0 6px;padding:4px 10px 4px 6px;border-radius:14px;background:#ffffff08;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);text-decoration:none;font-size:13px}
.pgld em{font:700 10px var(--mono);font-style:normal;color:var(--mut)}

/* en-tête de guilde */
.gh{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:24px;margin:0 0 18px;border-radius:8px;overflow:hidden;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.gh .ghb{position:absolute;inset:0;background:radial-gradient(ellipse 60% 120% at 0 50%,color-mix(in srgb,var(--e) 26%,transparent),transparent 70%),repeating-linear-gradient(135deg,#ffffff04 0 2px,transparent 2px 9px);pointer-events:none}
.gh>*{position:relative}
.ghi small{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ghi h1{margin:4px 0 10px;font:800 30px/1.05 var(--sans);letter-spacing:-.02em}.ghi h1 em{font:700 15px var(--mono);font-style:normal;color:var(--mut);letter-spacing:.06em}
.glv{display:flex;align-items:center;gap:10px;max-width:420px}.glv b{font:700 12px var(--mono);color:var(--e);white-space:nowrap}
.gxp{flex:1;height:6px;border-radius:3px;background:#ffffff10;overflow:hidden}.gxp i{display:block;height:100%;background:linear-gradient(90deg,var(--e),color-mix(in srgb,var(--e) 60%,#fff));transition:width .6s}
.glv span{font:11px var(--mono);color:var(--mut);white-space:nowrap}
.ghs{display:flex;gap:6px}.ghs>div,.ght{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:10px 12px;border-radius:6px;background:#0c0c0e;box-shadow:inset 0 0 0 1px var(--ln)}
.ghs b{font:600 18px var(--mono);letter-spacing:-.02em}.ghs b i{font-style:normal;color:var(--mut);font-size:12px}.ghs span{margin-top:2px;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ght{border:0;cursor:pointer;color:var(--fg)}.ght:hover{box-shadow:inset 0 0 0 1px #a855f788}.ght b{font-size:15px}
.gset{position:absolute;top:12px;right:12px}
.gtabs{display:flex;gap:2px;margin:0 0 22px;border-bottom:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}.gtabs::-webkit-scrollbar{display:none}
.gtabs button{position:relative;display:flex;align-items:center;gap:6px;flex:none;height:44px;padding:0 14px;border:0;background:none;color:var(--mut);cursor:pointer;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.gtabs button:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--ac);transform:scaleX(0);transition:transform .2s}
.gtabs button.on{color:var(--fg)}.gtabs button.on:after{transform:none}
.gtabs .nb{position:static;min-width:16px;height:16px;font-size:9px;line-height:16px}.gtabs .nb.live{background:#ef4444;color:#fff;animation:nx .8s infinite alternate}
.gintro{margin:0 0 18px;max-width:680px}
.gcols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}

/* boss */
.gboss{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:26px;border-radius:8px;background:radial-gradient(ellipse 50% 90% at 18% 50%,#ff5a1f1c,transparent 70%),#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.gbc{position:relative;padding:8px}.gbc .slot{zoom:1.2;filter:drop-shadow(0 20px 30px #000)}
.gboss:not(.wait) .gbc .slot{animation:bossb 3.2s ease-in-out infinite}
@keyframes bossb{50%{transform:translateY(-6px) rotate(-.6deg)}}
.gboss.wait .gbc .slot{filter:grayscale(.85) brightness(.55)}
.gbl{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);padding:5px 12px;border-radius:3px;background:#ef4444;color:#fff;font:800 10px var(--mono);letter-spacing:.2em;white-space:nowrap;box-shadow:0 6px 16px -4px #ef4444aa}
.gbi h2{margin:6px 0 4px;font:800 30px/1.05 var(--sans);letter-spacing:-.02em}
.ghp{position:relative;height:26px;margin:18px 0 14px;border-radius:4px;background:#2a0b0b;box-shadow:inset 0 0 0 1px #ef444455;overflow:hidden}
.ghp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#f87171,#dc2626 60%,#991b1b);transition:width .25s}
.ghp span{position:relative;display:flex;align-items:center;justify-content:center;height:100%;font:700 12px var(--mono);letter-spacing:.06em;text-shadow:0 1px 3px #000}
.ghp.big{height:30px}
.gatk{display:flex;flex-direction:column;gap:12px;max-width:420px}
.pips{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:13px}.pips i{width:12px;height:12px;border-radius:3px;background:#ffffff14;transform:rotate(45deg)}.pips i.on{background:var(--ac);box-shadow:0 0 10px var(--ac)}
.pips span{margin-left:6px}
.gnext{display:flex;gap:12px;align-items:center;margin:18px 0;padding:14px;border-radius:6px;background:#0c0c0e;box-shadow:inset 0 0 0 1px var(--ln)}
.gnext svg{width:26px;height:26px;fill:none;stroke:var(--ac);stroke-width:1.8;flex:none}.gnext b{display:block;font-size:15px}.gnext span{color:var(--mut);font-size:13px}
.gbi .rules{margin-top:18px}
.gtop{list-style:none;margin:0;padding:0}.gtop li{display:grid;grid-template-columns:26px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #ffffff09}
.gtop em{font:700 12px var(--mono);font-style:normal;color:var(--mut)}.gtop li:first-child em{color:#fbbf24}.gtop b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gtop span{color:var(--mut);font-size:12px}.gtop strong{font:600 14px var(--mono)}
.gtop li.op b{color:#fca5a5}.gtop li.me b{color:#fdba74}
.ghist{list-style:none;margin:0;padding:0}.ghist li{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid #ffffff09}.ghist em{font:700 11px var(--mono);font-style:normal;color:var(--mut);min-width:54px}.ghist b{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ghist span{color:var(--mut);font:12px var(--mono)}

/* combat contre le boss */
#stage.gfight{background:radial-gradient(ellipse 70% 50% at 50% 20%,#3a0d0d,#0a0a0b 70%)}
.gfs{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;width:100%;min-height:100%;padding:calc(var(--st) + 18px) 16px 170px}
.gfb{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(520px,100%)}
.gfbc{position:relative}.gfbc .slot{zoom:1.05}.gfbc.hit .slot{animation:bhit .22s}
@keyframes bhit{30%{transform:translate(6px,-3px) rotate(1.5deg);filter:brightness(1.8)}70%{transform:translate(-4px,2px)}}
.gfhp{width:100%}.gfhp small{display:block;margin-bottom:6px;font:700 10px var(--mono);letter-spacing:.14em;color:#fca5a5;text-align:center;text-transform:uppercase}
.gfm{display:flex;gap:12px;justify-content:center}
.gfc .slot{zoom:.62;transition:transform .15s}.gfc.atk .slot{transform:translateY(-40px) scale(1.06)}
#stage.gkill .gfbc .slot{animation:bdie 1.2s forwards}
@keyframes bdie{40%{filter:brightness(3) saturate(0)}100%{filter:grayscale(1) brightness(.4);transform:rotate(-8deg) translateY(20px)}}
#stage.fast .gfc .slot{transition-duration:.05s}

/* quêtes */
.gql{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.gq{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.gq.done{background:#0f1a14;box-shadow:inset 0 0 0 1px #10b98144}
.gqi{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ffffff08;color:var(--ac)}.gq.done .gqi{color:#34d399}.gqi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.gqb b{display:block;font-size:15px}.gqb span{color:var(--mut);font:12px var(--mono)}
.gqp{height:6px;margin:8px 0 6px;border-radius:3px;background:#ffffff10;overflow:hidden}.gqp i{display:block;height:100%;background:var(--ac);transition:width .5s}.gq.done .gqp i{background:#34d399}
.gqr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:600 12px var(--mono);white-space:nowrap}

/* guerre */
.gwar{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:26px;border-radius:8px;background:linear-gradient(90deg,#ff5a1f14,transparent 40%,transparent 60%,#ef444414),#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.gws{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.gws b{font:700 15px var(--sans)}.gws strong{font:600 34px var(--mono);letter-spacing:-.03em}
.gws.me strong{color:#fdba74}.gws.them strong{color:#fca5a5}
.gwv{display:flex;flex-direction:column;align-items:center;gap:6px}.gwv span{font:900 28px var(--sans);color:var(--mut)}.gwv small{color:var(--mut);font-size:12px;white-space:nowrap}
.gwbar{grid-column:1/-1;height:8px;border-radius:4px;background:#ef4444;overflow:hidden}.gwbar i{display:block;height:100%;background:var(--ac);transition:width .5s}
.gwl{grid-column:1/-1;margin:0;text-align:center;color:var(--mut);font-size:14px}
.gnowar{padding:26px;border-radius:8px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}.gnowar>b{font:800 20px var(--sans)}.gnowar>p{color:var(--mut);margin:6px 0 16px}
.gwf{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.gwch{display:flex;gap:6px}
.gwch input{width:90px;height:44px;padding:0 12px;border:0;border-radius:3px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:700 14px var(--mono);text-transform:uppercase;outline:none}
.gpts{list-style:none;margin:14px 0 0;padding:0}.gpts li{padding:8px 0;border-top:1px solid #ffffff09;color:var(--mut);font-size:14px}.gpts b{color:var(--fg);font-family:var(--mono);margin-right:6px}

/* guerre à la carte : préparation (défenses), combat (cibles), capacités de soutien des cartes Artistes */
.gwar.prep{display:block;padding:22px}
.gwph{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding:11px 14px;border-radius:6px;background:#ffffff08}
.gwph>b{display:flex;align-items:center;gap:7px;font:800 14px var(--sans)}
.gwph>b svg{width:15px;height:15px;stroke:var(--ac);fill:none;flex:none}
.gwph>span{color:var(--mut);font-size:13px}
.gws2{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}

.wcap{margin-top:14px;padding:12px 14px;border-radius:8px;background:#ffffff07;box-shadow:inset 0 0 0 1px var(--ln)}.wcap small{display:block;margin-bottom:8px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.wcap div{display:grid;grid-template-columns:62px 1fr;gap:0 10px;padding:5px 0}.wcap em{grid-row:1/3;font:700 10px/18px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#fb923c}.wcap div+div em{color:#5ab4ff}.wcap b{font-size:14px}.wcap span{font-size:13px;color:var(--mut)}
.wdef{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.gcols>*{min-width:0}
.wds .aura{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 5px;white-space:normal;text-align:center;line-height:1.25;border-radius:8px}.wds .aura span{overflow:visible}
.wds{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border-radius:6px;background:#111113;box-shadow:inset 0 0 0 1px var(--ln);min-height:148px}
.wds.empty{border:1.5px dashed var(--ln2);background:none;cursor:pointer;color:var(--mut);gap:6px;font:inherit}
.wds.empty svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.wds.empty span{font-size:12px}.wds.empty small{font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.wds.sup{box-shadow:inset 0 0 0 1px #a855f755;background:linear-gradient(180deg,#a855f70f,transparent)}.wds.empty.sup{border-color:#a855f766;color:#c4b5fd}
.wok{display:inline-flex;align-items:center;gap:5px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6ee7b7}.wok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.wwarn{margin:0 0 12px;padding:10px 12px;border-radius:6px;background:#f59e0b14;box-shadow:inset 0 0 0 1px #f59e0b44;color:#fcd34d;font-size:13px}
.wds.filled .slot{zoom:.56}
.wdsrm{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:50%;display:grid;place-items:center;background:#0c0c0dcc;box-shadow:inset 0 0 0 1px var(--ln2);cursor:pointer;color:var(--fg)}
.wdsrm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4}
.wdef.ro .wds{cursor:default}.wdef.ro .wds.filled{opacity:.92}.wdef.ro .wds.empty{opacity:.55}

.aura{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 9px;border-radius:20px;background:#ffffff0c;font-size:11px;white-space:nowrap;max-width:100%}
.aura i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mut)}
.aura b{font-weight:700;flex:none}
.aura span{color:var(--mut);overflow:hidden;text-overflow:ellipsis}
.pickg>.pk{min-width:0}.pk .aura{display:flex;flex-wrap:wrap;gap:2px 5px;white-space:normal;font-size:10px;line-height:1.25;padding:4px 7px;border-radius:8px}.pk .aura span{overflow:visible}
.aura[data-side=atk] i{background:#fb923c}.aura[data-side=def] i{background:#5ab4ff}
.auras{display:flex;flex-direction:column;align-items:center;gap:4px}
.wtabs{display:flex;gap:6px;margin:-4px 0 10px}.wtabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border:0;border-radius:6px;background:#1b1b1f;color:var(--mut);font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.wtabs button.on{background:#26262b;color:var(--fg);box-shadow:inset 0 0 0 1px var(--ln2)}.wtabs em{font-style:normal;padding:2px 7px;border-radius:9px;background:#ffffff10}.wtabs .done em{background:#10b98133;color:#6ee7b7}

.wtgl{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.wtgt{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.wtgt.off{opacity:.55}
.wtv{position:relative;display:grid;place-items:center;width:40px;height:44px;color:#5a5a60}
.wtv svg{position:absolute;inset:0;width:100%;height:100%;fill:#1b1b1f;stroke:currentColor;stroke-width:1.4}
.wtv b{position:relative;font:800 14px var(--mono);color:var(--fg)}
.wtl{display:flex;flex-direction:column;min-width:0}
.wtl b{font:700 14px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtl span{color:var(--mut);font-size:12px}
.wtb{display:flex;flex-direction:column;align-items:center;gap:2px}.wtb small{font:700 10px var(--mono);color:var(--mut)}
.wleft{display:flex;align-items:center;gap:5px;font:700 11px var(--mono);letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.wleft i{width:8px;height:8px;border-radius:50%;background:#2a2a2e}.wleft i.on{background:var(--ac);box-shadow:0 0 8px var(--ac)}
.wlog{list-style:none;margin:0;padding:0}
.wlog li{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #ffffff09;font-size:14px}
.wlog li b{font-weight:600}.wlog li span{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlog li em{font:700 12px var(--mono);font-style:normal;color:var(--mut)}
.wlog li.me b{color:#fdba74}

.wstars{display:flex;gap:4px;justify-content:center}
.wstars i{display:grid;place-items:center;width:20px;height:20px;color:#3a3a3d;transition:color .2s}
.wstars i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
.wstars i.on{color:#fbbf24}.wstars i.on svg{fill:#fbbf2433}
.wstars.sm i{width:13px;height:13px}.wstars.sm{gap:2px}
.wstars.big i{width:34px;height:34px}.wstars.big{gap:8px}
.wstars i.pop{animation:wpop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes wpop{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}

/* combat de guerre : défense dévoilée en haut, mes cartes en bas, frappes tour par tour */
#stage.wfight{background:radial-gradient(ellipse 80% 45% at 50% 18%,#2b0e10,#0a0a0b 70%)}
.wfs{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%;min-height:100%;padding:calc(var(--st) + 16px) 16px 150px}
.wfh{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(460px,100%)}
.wfh small{font:700 10px var(--mono);letter-spacing:.14em;color:#fca5a5;text-transform:uppercase}
.wfbar{position:relative;width:100%;height:24px;border-radius:4px;background:#1a1a1d;box-shadow:inset 0 0 0 1px var(--ln2);overflow:hidden}
.wfbar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(180deg,#fb923c,#ea580c);transition:width .18s}
.wfbar b{position:absolute;top:0;bottom:0;width:1px;background:#ffffff40}
.wfbar span{position:relative;display:flex;align-items:center;justify-content:center;height:100%;font:700 12px var(--mono);text-shadow:0 1px 3px #000}
.wfrow{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.wfvs{font:900 16px var(--sans);letter-spacing:.2em;color:#ffffff30}
.wfc{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.wfc .slot{zoom:.62;transition:transform .09s ease-out,filter .3s}
#wfm .wfc.atk .slot{transform:translateY(-34px) scale(1.06)}
#wff .wfc.hit .slot{animation:bhit .2s}
.wfc.ko .slot{filter:grayscale(1) brightness(.4);transform:rotate(-4deg) scale(.95)}
.wfc.ko:after{content:"KO";position:absolute;top:34%;left:50%;transform:translateX(-50%);font:900 20px var(--mono);color:#f87171;text-shadow:0 2px 8px #000;letter-spacing:.1em}
.wfc.sup .slot{filter:saturate(.85)}
.wfc .aura{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:120px;white-space:normal;text-align:center;line-height:1.25;border-radius:8px;padding:4px 8px}.wfc .aura i{display:none}.wfc .aura span{overflow:visible;font-size:10px}
.wfhp{position:relative;width:96px;height:12px;border-radius:3px;background:#2a0b0b;overflow:hidden}
.wfhp i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(180deg,#f87171,#b91c1c);transition:width .15s}
.wfhp span{position:relative;display:block;text-align:center;font:700 9px/12px var(--mono);text-shadow:0 1px 2px #000}
.wfc .dmg{font-size:20px}.wfc .dmg.c{font-size:24px}.wfc .dmg.miss{color:#93c5fd;font-size:15px}.wfc .dmg.shield{color:#5ab4ff;font-size:14px}.wfc .dmg.heal{color:#6ee7b7;font-size:15px}
.wfh small b{color:var(--fg);font-weight:700}
.wfnone{color:var(--mut);font-size:14px;padding:30px 0}
#stage.fast .wfc .slot{transition-duration:.05s}
.wres{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;text-transform:none;letter-spacing:0;font-family:var(--sans)}.wres b{font:800 20px var(--sans);color:#fbbf24}.wres span{font-size:14px;color:var(--fg)}.wres small{font-size:12.5px;color:var(--mut)}.wres .vt{font-size:inherit}

/* membres */
.gmem{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.gm{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.gmi{flex:1;min-width:0;text-decoration:none;color:var(--fg)}.gmi b{display:block;font:600 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gmi b i{font-style:normal;color:var(--mut);font-weight:500}
.gmi span{display:block;color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grole{font:700 9.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase}.grole.leader{color:#fbbf24}.grole.officer{color:#60a5fa}
.gmh{display:flex;gap:4px}.gmh i{width:8px;height:8px;border-radius:2px;background:#ffffff14;transform:rotate(45deg)}.gmh i.on{background:var(--ac)}
.gm .k{flex:none}
.ginv{display:flex;gap:8px;margin:0 0 6px}.ginv .search{min-width:0}
.gleave{display:flex;justify-content:flex-end;margin-top:22px}

/* vitrine */
.gvit{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 14px;padding:18px;border-radius:8px;background:repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 80px),#0f0f12;box-shadow:inset 0 0 0 1px var(--ln)}
.gvs{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.gvs .slot{zoom:.85}.gvs small{color:var(--mut);font-size:12px}
.gvs.empty{justify-content:center;min-height:230px;border:1px dashed var(--ln2);border-radius:8px;background:none;color:var(--mut);font:600 12px var(--sans)}
.gvs.empty i{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#ffffff08}.gvs.empty svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.gvs:hover .vrm{opacity:1}

/* arbre */
.gtp{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 16px;padding:14px 16px;border-radius:6px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.gtp>div{display:flex;align-items:baseline;gap:8px}.gtp>div b{font:600 28px var(--mono);color:#c084fc}.gtp>div span{color:var(--mut);font-size:13px}.gtp p{flex:1;margin:0}
.gtree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gbr{--b:#ff5a1f;position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:8px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.gbr.prosperite{--b:#fbbf24}.gbr.communaute{--b:#22d3ee}
.gbr header b{display:block;font:800 16px var(--sans);color:var(--b)}.gbr header span{color:var(--mut);font-size:12px}
.gbr:before{content:"";position:absolute;left:37px;top:80px;bottom:44px;width:2px;background:linear-gradient(var(--b),#ffffff10)}
.gtn{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;gap:2px 12px;align-items:center;padding:8px;border:0;border-radius:6px;background:none;color:var(--fg);text-align:left;cursor:default}
.gtn.can{cursor:pointer;background:#ffffff05;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 50%,transparent)}.gtn.can:hover{background:#ffffff0a}
.gtr{grid-row:1/4;position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;width:44px;height:44px;padding-top:11px;border-radius:50%;background:#0c0c0e;box-shadow:inset 0 0 0 2px #ffffff18;font:700 15px var(--mono);font-style:normal}
.gtr small{font-size:10px;color:var(--mut)}
.gtn.got .gtr{box-shadow:inset 0 0 0 2px var(--b);color:var(--b)}.gtn.max .gtr{background:var(--b);color:#0c0c0d;box-shadow:0 0 16px -2px var(--b)}.gtn.max .gtr small{color:#0c0c0d99}
.gtn.lock{opacity:.45}.gtn b{font-size:14px}.gtn span{color:var(--mut);font-size:12.5px;line-height:1.35}.gtn em{font:600 11px var(--sans);font-style:normal;color:#fca5a5}

/* discussion et journal */
.gchat{display:flex;flex-direction:column;height:calc(100dvh - var(--hh) - var(--st) - 360px);min-height:380px;border-radius:6px;overflow:hidden;background:#0f0f11;box-shadow:inset 0 0 0 1px var(--ln)}
.gmsg{display:flex;align-items:flex-end;gap:8px}.gmsg .av{flex:none}.gmsg .msg b{display:block;margin-bottom:2px;font:700 11px var(--sans);color:#fdba74}
.gmsg .msg{max-width:74%}
.glog{list-style:none;margin:0;padding:0}.glog li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #ffffff09}
.glog i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#ffffff08;color:var(--mut)}.glog i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.glog li.boss_kill i,.glog li.level i{background:#fbbf2422;color:#fbbf24}.glog li.attack i{color:var(--ac)}.glog li.quest i{color:#34d399}.glog li[class^=war] i{color:#f87171}
.glog p{margin:0;font-size:14px;color:#d4d4d8}.glog time{font:11px var(--mono);color:var(--mut);white-space:nowrap}
.gpub .row{display:flex;gap:8px;margin-bottom:16px}.gdesc{max-width:680px;color:#d4d4d8;font-size:15px;line-height:1.5}

@media(max-width:1000px){.gfeat{grid-template-columns:repeat(2,1fr)}.gfeat .gf:last-child{grid-column:1/-1}.gtree{grid-template-columns:1fr}.gh{grid-template-columns:auto 1fr}.ghs{grid-column:1/-1}}
@media(max-width:640px){
 .gfeat{grid-template-columns:1fr;gap:6px}.gfeat .gf{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:12px}.gfeat .gfi{grid-row:1/3}
 .grow2{flex-wrap:wrap;gap:10px 12px}.gra{flex:1 0 100%;justify-content:flex-start;padding-left:58px}
 .gh{gap:14px;padding:16px}.gh .gem2.exl{width:58px;height:66px}.ghi h1{font-size:22px}.ghs{flex-wrap:wrap}.ghs>div,.ght{flex:1;min-width:0;padding:8px 6px}.ghs b{font-size:15px}.gset{top:8px;right:8px}.gset span{display:none}
 .glv span{display:none}
 .gtabs{margin:0 -14px 18px;padding:0 14px}.gtabs button{padding:0 11px;font-size:10px}
 .gboss{grid-template-columns:1fr;justify-items:center;gap:18px;padding:18px 14px}.gbc .slot{zoom:1}.gbi{width:100%}.gbi h2{font-size:24px;text-align:center}.gbi>.eyebrow,.gbi>p{display:block;text-align:center}.gatk{max-width:none}
 .gcols{grid-template-columns:1fr}
 .gq{grid-template-columns:auto 1fr;padding:12px}.gqr{grid-column:2;flex-direction:row;align-items:center;gap:10px}
 .gwar{padding:16px 10px;gap:8px}.gws strong{font-size:24px}.gws b{font-size:13px}.gws .gem2.elg{width:44px;height:50px}.gwv span{font-size:20px}
 .gm{flex-wrap:wrap}.gm .gmh{order:3}.gm.rq .k{flex:1}.gm.rq .gmi{flex:1 1 calc(100% - 60px)}.ginv{margin-top:6px}
 .gvit{grid-template-columns:repeat(2,1fr);padding:12px 8px}.gvs .slot{zoom:.78}
 .gfc .slot{zoom:.5}.gfbc .slot{zoom:.92}.gfm{gap:6px}
 .gchat{height:calc(100dvh - var(--hh) - var(--st) - var(--nav) - 330px)}
 .gwar.prep{padding:16px 10px}.gws2{gap:8px}.gws2 .gem2.elg{width:44px;height:50px}
 .wdef{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wds{min-height:120px;padding:10px 6px}.wds.filled .slot{zoom:.46}
 .wtgt{grid-template-columns:auto minmax(0,1fr) auto;gap:8px 10px}.wtgt button{grid-column:1/-1}
 .wfc .slot{zoom:.46}.wfc .aura{max-width:92px;padding:3px 6px}.wfc .aura b{font-size:10px}.wfc .aura span{font-size:9px}.wfrow{gap:8px}.wfhp{width:72px}.wfs{gap:14px}.wstars.big i{width:28px;height:28px}
}
/* 6 onglets en bas de l'écran sur téléphone */
@media(max-width:760px){.tabs button{font-size:8.5px;letter-spacing:.04em}}
@media(max-width:380px){.tabs button span{font-size:7.5px}}
.gh:has(.gset){padding-top:52px}
@media(max-width:640px){.gh:has(.gset){padding-top:16px}}
.tabs .nb.dot{min-width:9px;width:9px;height:9px;padding:0;font-size:0}.tabs .nb.war{box-shadow:0 0 0 2px #ef444466}
.grank{list-style:none;margin:0;padding:0;counter-reset:none}
.grank li{display:grid;grid-template-columns:30px 24px minmax(0,1fr) repeat(4,auto);gap:12px;align-items:center;padding:11px 12px;border-top:1px solid #ffffff09}
.grank li.me{background:#ff5a1f12;box-shadow:inset 2px 0 0 var(--ac);border-radius:4px}
.grank em{font:700 13px var(--mono);font-style:normal;color:var(--mut);text-align:right}.grank li:nth-child(-n+3) em{color:#fbbf24}
.grank a{min-width:0;display:flex;gap:6px;align-items:baseline;color:var(--fg);text-decoration:none}.grank a b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grank a span{font:700 10px var(--mono);color:var(--mut)}
.grank .rk{font:12px var(--mono);color:var(--mut);white-space:nowrap}.grank li.gap{display:block;text-align:center;color:var(--mut)}
@media(max-width:640px){.grank li{grid-template-columns:24px 22px minmax(0,1fr) auto;gap:10px;padding:10px 6px}.grank .rk{display:none}.grank .rk:first-of-type{display:block}}
@media(max-width:640px){.gh:has(.gset) .ghi{padding-right:42px}}
/* les colonnes des fenêtres peuvent rétrécir (un champ de saisie ne doit jamais pousser hors de l'écran) */
.det>*,.sell>*,.sellf,.bidb,.deti{min-width:0}.vin input,.vin.big input{min-width:0}.vin span{white-space:nowrap}
.soc>*{min-width:0}.addf{min-width:0}
#sheet>.sb{min-width:0;max-width:100%}.choice>*{min-width:0}.opt span{overflow-wrap:anywhere}
.djoin .search{min-width:0}.djoin .k{flex:none}

/* ---------- arbre de talents : trois branches de nœuds hexagonaux reliés ---------- */
.ttop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.tpts{display:flex;align-items:center;gap:12px}.tpts>i{display:flex;align-items:center;justify-content:center;width:46px;height:52px;font:800 22px var(--mono);font-style:normal;color:#0c0c0d;background:linear-gradient(160deg,#e9d5ff,#a855f7 55%,#6d28d9);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tpts span{font:700 15px var(--sans)}.tpts small{display:block;font:500 12px var(--sans);color:var(--mut)}
.ttree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px 12px 22px;border-radius:10px;background:radial-gradient(ellipse 80% 60% at 50% 0,#ffffff08,transparent 70%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 28px),#0e0e11;box-shadow:inset 0 0 0 1px var(--ln)}
.tbr{--b:#ff5a1f;display:flex;flex-direction:column;align-items:center;min-width:0}
.tbr header{text-align:center;margin-bottom:14px}.tbr header b{display:block;font:800 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--b)}.tbr header span{font-size:11.5px;color:var(--mut)}
.tcol{display:flex;flex-direction:column;align-items:center}
.tlink{display:block;width:4px;height:22px;margin:2px 0;border-radius:2px;background:#ffffff12}.tlink.on{background:linear-gradient(var(--b),color-mix(in srgb,var(--b) 40%,transparent));box-shadow:0 0 10px -2px var(--b)}
.tnode{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;max-width:150px;padding:4px;border:0;background:none;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.thex{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:68px;color:#6b6b73;background:#1a1a1f;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .15s}
.thex:before{content:"";position:absolute;inset:3px;clip-path:inherit;background:#121216}
.thex svg{position:relative;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tnode.got .thex,.thex.got{background:var(--b);color:var(--b)}
.tnode.got .thex:before,.thex.got:before{background:color-mix(in srgb,var(--b) 16%,#121216)}
.tnode.max .thex,.thex.max{background:linear-gradient(160deg,#fff,var(--b) 55%);color:#0c0c0d}.tnode.max .thex:before,.thex.max:before{background:var(--b)}
.tnode.can .thex{animation:tcan 1.6s ease-in-out infinite}
@keyframes tcan{50%{filter:drop-shadow(0 0 0 var(--b)) brightness(1.35)}}
.tnode.lock{opacity:.4}.tnode.lock .thex{filter:grayscale(1)}
.tnode.sel .thex{transform:scale(1.1)}.tnode.sel b{color:var(--b)}
.tnode:hover .thex{transform:scale(1.06)}
.tpip{display:flex;gap:3px}.tpip i{width:6px;height:6px;border-radius:1px;background:#ffffff1a;transform:rotate(45deg)}.tpip i.on{background:var(--b);box-shadow:0 0 6px var(--b)}
.tnode b{max-width:100%;font:700 12.5px/1.2 var(--sans);text-align:center;overflow-wrap:anywhere}
.tcard{--b:#ff5a1f;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:12px;padding:16px 18px;border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--b) 12%,#111114),#111114 60%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 35%,var(--ln))}
.thex.big{width:70px;height:80px}.thex.big svg{width:30px;height:30px}
.tci small{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--b)}.tci h3{margin:2px 0 4px;font:800 20px var(--sans)}.tci p{margin:0;color:var(--mut);font-size:13.5px}
.tfx{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tfx span{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;background:#0c0c0e;box-shadow:inset 0 0 0 1px var(--ln);font-size:13px}
.tfx em{font:700 9.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}.tfx .nx{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 50%,transparent)}.tfx .nx em{color:var(--b)}.tfx .mx{color:var(--b)}
.treq{margin-top:8px!important;color:#fca5a5!important}
@media(max-width:640px){
 .ttree{gap:4px;padding:14px 4px 16px}.tbr header b{font-size:10.5px;letter-spacing:.1em}.tbr header span{display:none}
 .thex{width:48px;height:54px}.thex svg{width:21px;height:21px}.tnode b{font-size:11px}.tlink{height:16px}
 .tcard{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px}.tcard .k{grid-column:1/-1}.thex.big{width:54px;height:62px}.tci h3{font-size:17px}
}
@media(min-width:900px){.tgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
 .tgrid .tcard{position:sticky;top:calc(var(--hh) + 20px);margin:0;grid-template-columns:1fr;justify-items:start;gap:14px}.tgrid .tcard .k{width:100%}}

/* ---------- boosters de chance : habillages, sélecteur, boutique ---------- */
:is(.bpv,.rg).sk-x11{--ac:#34d399;--ac2:#0f7a55}:is(.bpv,.rg).sk-x15{--ac:#b57bff;--ac2:#6d28d9}:is(.bpv,.rg).sk-x2{--ac:#f5c542;--ac2:#9a6b06}
:is(.bpv.lux .pki,.rg.lux) .pack .crb,:is(.bpv.lux .pki,.rg.lux) .cut{background:repeating-linear-gradient(90deg,#00000030 0 2px,#ffffff45 2px 3px,#0000 3px 5px),color-mix(in srgb,var(--ac) 82%,#000)}
:is(.bpv.sk-x2 .pki,.rg.sk-x2) .pack{background:linear-gradient(135deg,#fff3b0,#f5c542 30%,#d99a0b 55%,#ffe58a 75%,#c98a06)}
:is(.bpv.sk-x2 .pki,.rg.sk-x2) .pack .sh{background:linear-gradient(105deg,transparent 40%,#ffffffa0 50%,transparent 60%);animation-duration:2.6s}
:is(.bpv.sk-x15 .pki,.rg.sk-x15) .pack{background:linear-gradient(150deg,#d6b4ff,#b57bff 40%,#7c3aed)}
.pmul{position:absolute;right:12px;top:58px;z-index:2;font:900 34px/1 var(--sans);letter-spacing:-.04em;color:#0c0c0d;text-shadow:0 2px 0 #ffffff55}
.pmul:empty{display:none}
.bsel{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:330px;margin:14px auto 0}
.bso{--sw:var(--ac);display:flex;align-items:center;gap:7px;height:36px;padding:0 11px 0 8px;border:0;border-radius:18px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--mut);cursor:pointer;font:700 11px var(--mono);letter-spacing:.06em}
.bso .bsw{width:14px;height:18px;border-radius:2px;background:var(--sw);box-shadow:inset 0 -4px 0 #00000040}
.bso:not([data-bk^="x"]):not(.shop) .bsw{background:#ff5a1f}
.bso em{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ffffff10;font:700 10px/18px var(--mono);font-style:normal;color:var(--fg);text-align:center}
.bso.on{color:var(--fg);box-shadow:inset 0 0 0 2px var(--sw)}.bso:not([data-bk^="x"]).on{box-shadow:inset 0 0 0 2px #ff5a1f}
.bso.shop{color:var(--fg)}.bso.shop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.shopl{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.sitem{--sw:#34d399;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;padding:12px;border-radius:8px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.sitem.foc{box-shadow:inset 0 0 0 2px var(--sw)}
.spack{grid-row:1/3;display:flex;align-items:flex-end;justify-content:center;width:46px;height:64px;padding-bottom:8px;border-radius:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--sw) 70%,#fff),var(--sw) 45%,var(--sw2));clip-path:polygon(0 4px,8% 0,16% 4px,24% 0,32% 4px,40% 0,48% 4px,56% 0,64% 4px,72% 0,80% 4px,88% 0,100% 4px,100% 100%,0 100%)}
.spack b{font:900 15px var(--sans);color:#0c0c0d}
.sinfo{min-width:0}.sinfo>b{display:block;font:700 15px var(--sans)}.sinfo>b em{font:700 12px var(--mono);font-style:normal;color:var(--sw)}.sinfo span{display:block;font-size:12.5px;color:#cfcfd4}.sinfo .mut{color:var(--mut)}
.sbuy{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}.sbuy .mcoin{width:15px;height:15px}
.gtop.rw li{grid-template-columns:26px minmax(0,1fr) auto auto}
.gtop li.me b{color:#fdba74}
.grw{--sw:#34d399;display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:10px;background:color-mix(in srgb,var(--sw) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw) 45%,transparent);font:700 10.5px var(--mono);white-space:nowrap;color:var(--fg)}
.grw i{width:8px;height:11px;border-radius:1px;background:var(--sw)}
.grwl{margin-top:10px!important}
.pack .sub{white-space:nowrap}

/* ---------- habillage des boosters ----------
   Classique : trame d'impression + sceau holographique. Spéciaux : chacun sa matière, jusque sur le dos des cartes.
   ×1,1 Chanceux : vert trèfle · ×1,5 Brillant : prisme holographique · ×2 Doré : feuille d'or, rayons et couronne */
.pdeco{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle,#14070238 1px,#0000 1.5px) 0 0/6px 6px;-webkit-mask-image:radial-gradient(120% 80% at 100% 0,#000,#0009 40%,transparent 72%);mask-image:radial-gradient(120% 80% at 100% 0,#000,#0009 40%,transparent 72%)}
.pdeco i{position:absolute}
.hsl{position:absolute;right:12px;top:64px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:conic-gradient(#ffd1f0,#c4f1ff,#fff7b8,#c8ffd8,#e4cbff,#ffd1f0);box-shadow:0 0 0 1.5px #140702,inset 0 0 0 3px #ffffff8c,0 3px 5px #0006;color:#140702;transform:rotate(-14deg);animation:hsl 7s linear infinite}
.hsl:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed #1407025c}
.hsl b{font:900 11px/1 var(--sans);letter-spacing:-.04em}.hsl span{margin-top:1px;font:800 5.5px var(--mono);letter-spacing:.2em}
@keyframes hsl{to{filter:hue-rotate(360deg)}}
:is(.bpv.lux .pki,.rg.lux) .hsl{display:none}
:is(.bpv.lux .pki,.rg.lux) .pdeco{-webkit-mask-image:none;mask-image:none}
/* ×1,1 Chanceux */
:is(.bpv.sk-x11 .pki,.rg.sk-x11) .pack{background:linear-gradient(160deg,#a7f3d0,#34d399 32%,#10a36f 66%,#0b6b4b)}
:is(.bpv.sk-x11 .pki,.rg.sk-x11) .pdeco{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='%230b3d2b' fill-opacity='.17'%3E%3Ccircle cx='5' cy='5' r='2.3'/%3E%3Ccircle cx='9' cy='5' r='2.3'/%3E%3Ccircle cx='5' cy='9' r='2.3'/%3E%3Ccircle cx='9' cy='9' r='2.3'/%3E%3Ccircle cx='19' cy='19' r='2.3'/%3E%3Ccircle cx='23' cy='19' r='2.3'/%3E%3Ccircle cx='19' cy='23' r='2.3'/%3E%3Ccircle cx='23' cy='23' r='2.3'/%3E%3C/g%3E%3C/svg%3E") 0 0/28px 28px}
:is(.bpv.sk-x11 .pki,.rg.sk-x11) .pdeco i:first-child{right:-30px;top:64px;width:136px;height:136px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50Q58 74 72 94' fill='none' stroke='%230b3d2b' stroke-opacity='.35' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23ffffff' fill-opacity='.34' stroke='%230b3d2b' stroke-opacity='.3' stroke-width='1.4'%3E%3Cpath d='M50 50C30 38 22 20 36 14c8-3 14 4 14 10 0-6 6-13 14-10 14 6 6 24-14 36z' transform='rotate(0 50 50)'/%3E%3Cpath d='M50 50C30 38 22 20 36 14c8-3 14 4 14 10 0-6 6-13 14-10 14 6 6 24-14 36z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 50C30 38 22 20 36 14c8-3 14 4 14 10 0-6 6-13 14-10 14 6 6 24-14 36z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 50C30 38 22 20 36 14c8-3 14 4 14 10 0-6 6-13 14-10 14 6 6 24-14 36z' transform='rotate(270 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='3' fill='%230b3d2b' fill-opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat;animation:clv 14s linear infinite}
:is(.bpv.sk-x11 .pki,.rg.sk-x11) .pdeco i:last-child{left:2px;top:120px;writing-mode:vertical-rl;transform:rotate(180deg);font:900 8px var(--mono);letter-spacing:.42em;color:#0b3d2b99}
:is(.bpv.sk-x11 .pki,.rg.sk-x11) .pdeco i:last-child:before{content:"LUCKY ✦ LUCKY"}
@keyframes clv{to{transform:rotate(360deg)}}
/* ×1,5 Brillant */
:is(.bpv.sk-x15 .pki,.rg.sk-x15) .pack{background:linear-gradient(150deg,#ecdcff,#b57bff 36%,#7c3aed 70%,#4c1d95)}
:is(.bpv.sk-x15 .pki,.rg.sk-x15) .pdeco{background:repeating-linear-gradient(115deg,#ff7ad94d 0 12px,#7ae8ff4d 12px 24px,#fff07a4d 24px 36px,#9dff9d40 36px 48px);mix-blend-mode:screen;animation:holx 5s linear infinite}
@keyframes holx{to{background-position:211.85px 0}}
:is(.bpv.sk-x15 .pki,.rg.sk-x15) .pdeco i:first-child{inset:0;background:radial-gradient(circle at 22% 31%,#fff 0 1.4px,#0000 2.6px),radial-gradient(circle at 70% 17%,#fff 0 1.8px,#0000 3px),radial-gradient(circle at 86% 50%,#fff 0 1.2px,#0000 2.4px),radial-gradient(circle at 40% 57%,#fff 0 1.5px,#0000 2.7px),radial-gradient(circle at 11% 72%,#fff 0 1.2px,#0000 2.3px),radial-gradient(circle at 62% 41%,#fff 0 1px,#0000 2px);animation:tw 1.8s ease-in-out infinite alternate}
:is(.bpv.sk-x15 .pki,.rg.sk-x15) .pdeco i:last-child{right:56px;top:50px;width:24px;height:24px;background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:spk 2.8s ease-in-out infinite}
@keyframes tw{from{opacity:.25}to{opacity:1}}
@keyframes spk{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(45deg);opacity:1}}
/* ×2 Doré */
:is(.bpv.sk-x2 .pki,.rg.sk-x2) .pdeco{background:repeating-conic-gradient(from 0deg at 50% 100%,#ffffff70 0 3deg,#0000 3deg 9deg);opacity:.6}
:is(.bpv.sk-x2 .pki,.rg.sk-x2) .pdeco i:first-child{right:15px;top:98px;width:42px;height:31px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cg fill='%23140702' fill-opacity='.86'%3E%3Cpath d='M4 23 2 7l9.5 7.5L20 3l8.5 11.5L38 7l-2 16z'/%3E%3Crect x='4' y='25' width='32' height='3.4' rx='1'/%3E%3C/g%3E%3Cg fill='%23fff3b0'%3E%3Ccircle cx='20' cy='17' r='2.2'/%3E%3Ccircle cx='11.5' cy='19' r='1.6'/%3E%3Ccircle cx='28.5' cy='19' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
:is(.bpv.sk-x2 .pki,.rg.sk-x2) .pdeco i:last-child{inset:12px 7px 30px;border:1px solid #fff9;border-radius:2px;box-shadow:inset 0 0 0 1px #9a6b0655,0 0 0 1px #9a6b0655}
/* dos des cartes et mini-dos assortis au booster choisi */
#stage.sk-x11,#v-boost[data-sk=x11]{--bk:#10a36f;--bkt:#8ff0c6}
#stage.sk-x15,#v-boost[data-sk=x15]{--bk:#7c3aed;--bkt:#d8b4fe}
#stage.sk-x2,#v-boost[data-sk=x2]{--bk:#c98a06;--bkt:#ffe58a}
#stage.sk-x11 .back.bm,#v-boost[data-sk=x11] .bkm{background:linear-gradient(162deg,#6ee7b7,#22c58b 42%,#0b7a52)}
#stage.sk-x15 .back.bm,#v-boost[data-sk=x15] .bkm{background:linear-gradient(162deg,#e2c8ff,#a26bff 42%,#6d28d9)}
#stage.sk-x2 .back.bm,#v-boost[data-sk=x2] .bkm{background:linear-gradient(150deg,#fff1a8,#f5c542 30%,#d99a0b 58%,#ffe07a 78%,#c98a06)}
#stage.sk-x11 .bm .bgr{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='%230b3d2b' fill-opacity='.17'%3E%3Ccircle cx='5' cy='5' r='2.3'/%3E%3Ccircle cx='9' cy='5' r='2.3'/%3E%3Ccircle cx='5' cy='9' r='2.3'/%3E%3Ccircle cx='9' cy='9' r='2.3'/%3E%3Ccircle cx='19' cy='19' r='2.3'/%3E%3Ccircle cx='23' cy='19' r='2.3'/%3E%3Ccircle cx='19' cy='23' r='2.3'/%3E%3Ccircle cx='23' cy='23' r='2.3'/%3E%3C/g%3E%3C/svg%3E") 0 0/22px 22px;mix-blend-mode:normal}
#stage.sk-x15 .bm .bgr{background:repeating-linear-gradient(115deg,#ff7ad94d 0 12px,#7ae8ff4d 12px 24px,#fff07a4d 24px 36px,#9dff9d40 36px 48px);mix-blend-mode:screen;animation:holx 5s linear infinite}
#stage.sk-x2 .bm .bgr{background:repeating-conic-gradient(from 0deg at 50% 100%,#ffffff70 0 3deg,#0000 3deg 9deg);background-position:0 -40px;mix-blend-mode:soft-light}
/* mini-boosters de la boutique et de la boîte de notifications */
.spack{position:relative;overflow:hidden}.spack b{position:relative;z-index:1}
.spack:before{content:"";position:absolute;inset:0}
.spack.sk-x11:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='%230b3d2b' fill-opacity='.17'%3E%3Ccircle cx='5' cy='5' r='2.3'/%3E%3Ccircle cx='9' cy='5' r='2.3'/%3E%3Ccircle cx='5' cy='9' r='2.3'/%3E%3Ccircle cx='9' cy='9' r='2.3'/%3E%3Ccircle cx='19' cy='19' r='2.3'/%3E%3Ccircle cx='23' cy='19' r='2.3'/%3E%3Ccircle cx='19' cy='23' r='2.3'/%3E%3Ccircle cx='23' cy='23' r='2.3'/%3E%3C/g%3E%3C/svg%3E") 0 0/16px 16px}
.spack.sk-x15:before{background:repeating-linear-gradient(115deg,#ff7ad94d 0 12px,#7ae8ff4d 12px 24px,#fff07a4d 24px 36px,#9dff9d40 36px 48px);mix-blend-mode:screen;animation:holx 5s linear infinite}
.spack.sk-x2:before{background:repeating-conic-gradient(from 0deg at 50% 100%,#ffffff70 0 3deg,#0000 3deg 9deg)}
.spack.mini{grid-row:auto;width:24px;height:34px;padding-bottom:4px;flex:none;clip-path:polygon(0 3px,12% 0,25% 3px,37% 0,50% 3px,62% 0,75% 3px,87% 0,100% 3px,100% 100%,0 100%)}
.spack.mini b{font-size:8px;letter-spacing:-.04em}

/* ---------- cloche et boîte de notifications ---------- */
.bell{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer;flex:none}
.bell[hidden]{display:none}.bell svg{width:19px;height:19px}
.tr .bell .nb{top:-4px;right:-5px;box-shadow:0 0 0 2px var(--bg)}
.bell.ring svg{transform-origin:50% 12%;animation:ring 3.2s ease-in-out infinite}
@keyframes ring{0%,76%,100%{transform:none}80%{transform:rotate(16deg)}84%{transform:rotate(-13deg)}88%{transform:rotate(9deg)}92%{transform:rotate(-5deg)}}
#sheet.nsh>.sb{padding-bottom:12px}
.nres{margin:-4px 0 14px;padding:12px;border-radius:10px;background:linear-gradient(135deg,#1c1710,#121215 60%);box-shadow:inset 0 0 0 1px #f5c54233}
.nrh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin-bottom:10px}.nrh b{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}.nrh span{font-size:12px}
.nrl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nrp{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:0;border-radius:8px;background:#0c0c0d;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw) 45%,#0000);color:var(--fg);cursor:pointer;text-align:left}
.nrp>span{display:flex;flex-direction:column;min-width:0;flex:1}.nrp>span b{font:700 13px var(--sans)}.nrp em{font:600 10.5px var(--mono);font-style:normal;color:var(--mut)}
.nrp u{text-decoration:none;font:800 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sw)}
@media(hover:hover){.nrp:hover{box-shadow:inset 0 0 0 2px var(--sw)}}
.ntl{display:flex;flex-direction:column;gap:2px;max-height:min(64vh,560px);overflow:auto;margin:0 -8px;padding:0 8px;overscroll-behavior:contain}
.nti{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:12px 10px;border-radius:8px}
.nti.go{cursor:pointer}@media(hover:hover){.nti.go:hover{background:#ffffff08}}
.nti.new{background:#ff5a1f0f}.nti.new:after{content:"";position:absolute;top:17px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--ac)}
.nic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--nc) 15%,#0000);color:var(--nc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nc) 40%,#0000)}
.ntx{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:14px}
.ntx>b{font:700 14px/1.3 var(--sans)}.ntx>span{color:var(--mut);font-size:13px;line-height:1.4;overflow-wrap:anywhere}.ntx time{margin-top:2px;font:600 10px var(--mono);letter-spacing:.06em;color:#6c6b66}
.nbo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.nbc{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 6px;border-radius:6px;background:#0c0c0d;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw) 45%,#0000);font:700 11px var(--mono)}
.nbc .spack.mini{width:18px;height:26px}.nbc .spack.mini b{display:none}
.nemp{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 10px;text-align:center}.nemp svg{width:30px;height:30px;color:var(--mut)}.nemp b{font:700 15px var(--sans)}.nemp span{max-width:300px;font-size:13px}

/* ---------- présentoir des boosters : le paquet choisi au centre, ses voisins en retrait, on glisse ou on touche ---------- */
.pkw{touch-action:pan-y}
/* nom du booster, flèches et repères */
.rsel{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;width:min(330px,100%);margin:0 auto 16px}
.rarr{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer;transition:transform .15s,box-shadow .15s}
.rarr.nx svg{transform:scaleX(-1)}
@media(hover:hover){.rarr:hover{box-shadow:inset 0 0 0 1.5px var(--ac);color:var(--ac)}}.rarr:active{transform:scale(.92)}
.rmid{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;text-align:center}
.rmid>b{font:800 18px/1.15 var(--sans);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rmid>span{font:600 11px var(--mono);letter-spacing:.06em;color:var(--mut)}.rmid>span b{color:var(--ac)}
.rdots{display:flex;gap:6px;margin-top:6px;font-style:normal}
.rdots button{display:grid;place-items:center;width:24px;height:30px;padding:0;border:0;background:none;cursor:pointer}
.rdots i{width:10px;height:14px;border-radius:2px;background:var(--sw);opacity:.35;transition:all .25s;clip-path:polygon(0 2px,25% 0,50% 2px,75% 0,100% 2px,100% 100%,0 100%)}
.rdots .on i{width:15px;height:21px;opacity:1;box-shadow:0 0 12px var(--sw)}
.rdots .zero:not(.on) i{opacity:.18}
.rshop{display:flex;align-items:center;gap:8px;margin:14px auto 0;padding:8px 14px 8px 10px;border:0;border-radius:18px;background:none;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.rshop svg{width:14px;height:14px}.rshop em{font:600 11px var(--sans);font-style:normal;letter-spacing:0;text-transform:none;color:var(--mut)}
@media(hover:hover){.rshop:hover{box-shadow:inset 0 0 0 1.5px var(--ac)}}
@media(max-width:700px){.rsel{margin-bottom:12px}.bpv .pkw{margin-top:18px}}
#v-boost[data-sk=x11]{--ac:#34d399;--ac2:#0f7a55}#v-boost[data-sk=x15]{--ac:#b57bff;--ac2:#6d28d9}#v-boost[data-sk=x2]{--ac:#f5c542;--ac2:#9a6b06}
@media(max-width:700px){.bpi h1{display:none}}

/* pile de boosters : le booster choisi devant, les autres glissés derrière (leur tranche dépasse) ;
   en changeant, le paquet de devant part sur le côté et se range derrière la pile */
.bp{overflow-x:clip}
/* carrousel : chaque booster est un vrai paquet ; précédent à gauche, suivant à droite, tous glissent ensemble (et suivent le doigt) */
.rg{--t:none;display:block;overflow:visible;outline:0;-webkit-appearance:none;appearance:none;border-radius:0;position:absolute;inset:0;z-index:-1;padding:0;border:0;background:none;cursor:pointer;transform:translateX(var(--dx,0px)) var(--t);filter:brightness(.8) saturate(.92) drop-shadow(0 12px 14px #000b);transition:transform .52s cubic-bezier(.22,.9,.24,1),filter .52s,opacity .4s}
.rg .disc,.rg .pdeco,.rg .pdeco i,.rg .hsl{animation:none!important}
.rg.p0{z-index:1;filter:drop-shadow(0 16px 14px #000c);transition-property:transform,filter}
.pkw:not(.swp) .rg.p0{opacity:0;transition:none;pointer-events:none}
.pkw.swp .pki{opacity:0;transition:none}
.rg.p1{--t:translateX(70%) scale(.74)}
.rg.p3{--t:translateX(-70%) scale(.74)}
.rg.p2{--t:scale(.5);opacity:0;z-index:-2;pointer-events:none}
.pkw.drag .rg,.pkw.drag .pki{transition:none}
@media(hover:hover){.rg.p1:hover,.rg.p3:hover{filter:brightness(.95) saturate(1) drop-shadow(0 12px 14px #000b)}}
.rg:not(.lux){--ac:#ff5a1f;--ac2:#a8330b}
/* écrans moyens (tablette, petit portable) : l'en-tête se resserre au lieu de déborder */
@media(min-width:761px) and (max-width:1280px){.topbar{gap:10px}.tabs button{padding:0 10px}.meb.in span{display:none}.meb.in{padding:3px;border-radius:50%}}
@media(min-width:761px) and (max-width:1100px){.tabs button span{display:none}.tabs button{padding:0 13px}.tabs button:after{left:8px;right:8px}.nb{right:0}}

/* le booster est agrandi par une mise à l'échelle (et non « zoom », mal géré par certains navigateurs mobiles) */
.pkw{--pz:1;width:calc(200px*var(--pz));height:calc(290px*var(--pz));flex:none}
.pks{position:absolute;left:0;top:0;width:200px;height:290px;transform:scale(var(--pz));transform-origin:0 0}
/* ---------- ouverture ---------- */
.pkw:before{content:"";position:absolute;inset:-28%;z-index:-4;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 75%,transparent),transparent);opacity:0;transform:scale(.6);transition:opacity .35s,transform .5s}
/* lumière d'ouverture : son propre nom d'animation (elle écrasait « glow » des cartes Légendaires, qui grossissaient puis sautaient) */
.pkw.opening:before{opacity:.5;transform:scale(1);animation:pkglow .9s ease-in-out infinite alternate}
@keyframes pkglow{to{opacity:.68;transform:scale(1.06)}}
.pkw.opening{animation-play-state:paused}
.pkw.opening .rg{opacity:0;transform:var(--t) translateY(30px) scale(.9);transition:opacity .3s,transform .45s}
.pkw.opening~.rsel{opacity:0!important}.pkw.opening~.rsel,.pkw.opening~.rip,.pkw.opening~.rshop{opacity:.35;transition:opacity .3s;pointer-events:none}
/* 1. le paquet se charge */
.pki.chg{animation:chg .44s ease-in both}
@keyframes chg{0%{transform:none}20%{transform:rotate(-1.2deg)}40%{transform:rotate(1.6deg) scale(1.015)}60%{transform:rotate(-2.2deg) scale(1.03)}80%{transform:rotate(2.6deg) scale(1.045)}100%{transform:scale(1.06)}}
/* 2. l'en-tête se déchire, la lumière sort */
.pki .beam{position:absolute;left:2%;right:2%;bottom:calc(100% - 14px);height:150px;z-index:6;pointer-events:none;background:radial-gradient(55% 100% at 50% 100%,#fff 0,color-mix(in srgb,var(--ac) 55%,#fff) 22%,color-mix(in srgb,var(--ac) 40%,transparent) 48%,transparent 72%);transform-origin:50% 100%;transform:scaleY(0);opacity:0}
.pki.rp .beam{animation:beam .55s .24s cubic-bezier(.2,.9,.3,1) both}
@keyframes beam{0%{transform:scaleY(0) scaleX(.6);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:.95}}
.pki.rp .cut{transform-origin:100% 100%;animation:peel .64s .24s cubic-bezier(.45,.05,.55,.95) forwards}
.pki.rp .pack{filter:brightness(1.12)}
@keyframes rip{0%{transform:none}25%{transform:translate(4px,-6px) rotate(3deg)}100%{transform:translate(70px,-150px) rotate(38deg);opacity:0}}
/* 3. les cartes sortent du paquet, le paquet s'efface */
.pki .pack{z-index:2}
.pki .rise{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;pointer-events:none}
.pki .rise .bkm{left:50%;top:70px;margin-left:-49px;transform:translateY(30px);transition:none;opacity:0}
.pki.rise .rise .bkm{animation:rcard .6s .12s cubic-bezier(.2,.9,.25,1.15) forwards;animation-delay:calc(.12s + var(--i)*60ms)}
@keyframes rcard{0%{opacity:1}to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.pki.rise .cut{opacity:0}
.pki.rise .pack{animation:pdown .55s .05s cubic-bezier(.5,0,.75,.3) forwards}
@keyframes pdown{to{transform:translateY(120px) scale(.94);opacity:0}}
.pki.rise .beam{animation:beam2 .8s forwards}
@keyframes beam2{0%{transform:scaleY(1);opacity:.95}60%{transform:scaleY(1.6) scaleX(1.3);opacity:1}100%{transform:scaleY(2) scaleX(1.6);opacity:0}}
.pki .flsh{position:absolute;inset:-60% -80%;z-index:9;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#fff,color-mix(in srgb,var(--ac) 50%,#fff) 40%,transparent 75%);opacity:0}
.pki.rise .flsh{animation:flsh .8s ease-in forwards}
@keyframes flsh{0%,55%{opacity:0;transform:scale(.4)}90%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1.4)}}
#stage.on:not(.duel):not(.gfight){animation:fadew .45s ease-out}
@keyframes fadew{from{background:#fff8}}
.pks{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.pkw.opening .pks{transform:translateY(34px) scale(var(--pz))}
/* déchirure : un trait de lumière court le long des pointillés, la bande se décolle, des éclats de papier jaillissent */
.pki .tline{position:absolute;left:0;top:25px;width:0;height:2px;z-index:8;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 40%,#fff),#fff);box-shadow:0 0 8px #fff,0 0 18px var(--ac);opacity:0}
.pki .tline:after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #fff,0 0 26px 10px var(--ac)}
.pki.rp .tline{animation:tline .32s cubic-bezier(.55,0,.35,1) forwards}
@keyframes tline{0%{width:0;opacity:1}85%{opacity:1}100%{width:100%;opacity:.0}}
@keyframes peel{0%{transform:none}28%{transform:translateY(-3px) rotate(-5deg)}58%{transform:translate(16px,-42px) rotate(-15deg)}100%{transform:translate(84px,-160px) rotate(26deg);opacity:0}}
.pki .prt{position:absolute;left:50%;top:25px;z-index:8;pointer-events:none}
.pki .prt i{position:absolute;left:0;top:0;width:var(--s);height:calc(var(--s)*.55);border-radius:1px;background:var(--c);box-shadow:0 0 6px color-mix(in srgb,var(--c) 70%,transparent);opacity:0}
.pki.rp .prt i{animation:prt .9s .26s cubic-bezier(.12,.7,.3,1) forwards}
@keyframes prt{0%{opacity:1;transform:translate(var(--sx),0) rotate(0)}55%{opacity:1;transform:translate(var(--x),var(--y)) rotate(calc(var(--r)*.6))}100%{opacity:0;transform:translate(calc(var(--x)*1.15),calc(var(--y) + 46px)) rotate(var(--r))}}

.bld{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ln);font:600 11px var(--mono);letter-spacing:.06em;color:var(--mut)}
.bver{display:block;margin-top:14px;font:600 10px var(--mono);letter-spacing:.1em;color:#55544f;text-align:center}
/* le paquet garde toujours ses proportions, quel que soit le conteneur (flex, zoom du navigateur, etc.) */
.pkw{min-width:calc(200px*var(--pz));min-height:calc(290px*var(--pz));max-width:none;max-height:none;flex:none!important;aspect-ratio:200/290}
.pks,.rg,.pki{width:200px;height:290px}
.pks{min-width:200px;min-height:290px;flex:none}
.rg,.pki{left:0;top:0;right:auto;bottom:auto}

.bpv,.bpv *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(min-width:1180px){.bp{grid-template-columns:minmax(0,300px) auto minmax(0,300px);justify-content:center;gap:24px}.bpc{justify-self:start}}
@media(min-width:981px) and (max-width:1179px){.bp{grid-template-columns:1fr auto;gap:28px 40px}.bpi{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;align-items:end}.bpi .lead{margin:0}.bpi .stock{grid-column:2;grid-row:1/3}.bpc{justify-self:start}.bpv{width:420px}}
@media(max-width:700px){.bpv{width:100%}}
.bpv{width:500px;max-width:100%;overflow-x:clip}
@media(max-width:980px){.bpv{width:420px}}
@media(max-width:700px){.bpv{width:100%}}
.shbal{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-4px 0 14px;font:600 12px var(--mono);color:var(--mut)}.shbal span{display:inline-flex;align-items:center;gap:6px}.shbal b{color:var(--fg)}
.sbuy .vcoin{width:15px;height:15px}
.sbuy{flex-direction:column;align-items:flex-start}.sbr{display:flex;flex-wrap:wrap;gap:6px}
/* ---------- fluidité : une ombre portée en « filter » sur un paquet animé se recalcule à chaque image ;
   on la remplace par une ombre fixe et on fige les petites animations qui forcent à repeindre le paquet ---------- */
.pki{filter:none;box-shadow:0 22px 26px -14px #000d}
.rg{filter:brightness(.8) saturate(.92)}
.rg.p0{filter:none}
@media(hover:hover){.rg.p1:hover,.rg.p3:hover{filter:brightness(.95)}}
.rg.off,.rg.p0.off{filter:grayscale(1) brightness(.45)}
.pki.off{filter:grayscale(1) brightness(.45)}
.pks,.pki,.rg{will-change:transform;backface-visibility:hidden}
.hsl{animation:none}
:is(.bpv.sk-x15 .pki,.rg.sk-x15) .pdeco{animation:none}
.pack .disc{animation-duration:14s}
@media(prefers-reduced-motion:reduce){.pkw,.pkw:after,.pack .disc,.pack .sh,.pdeco,.pdeco i{animation:none!important}}

/* ---------- boss de guilde : stats, ma place, classement en barres, barème, étapes ---------- */
.gst{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.gst span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:4px;background:#0c0c0e;box-shadow:inset 0 0 0 1px var(--ln2);font:700 13px var(--mono)}
.gst i{font:700 9px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}.gst .mcoin{width:15px;height:15px}
.gme{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin:16px 0 4px;padding:14px 16px;border-radius:8px;background:linear-gradient(100deg,#2a1308,#141416 60%);box-shadow:inset 0 0 0 1px #ff5a1f44}
.gme.none{grid-template-columns:1fr;background:#121214;box-shadow:inset 0 0 0 1px var(--ln2)}
.gmr{display:flex;flex-direction:column;align-items:center;min-width:54px}.gmr em{font:900 30px/1 var(--sans);font-style:normal;color:var(--ac)}.gmr span{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.gmi{display:flex;flex-direction:column;gap:3px;min-width:0}.gmi>b{font:800 16px var(--sans)}.gmi>span{font-size:13px;color:var(--mut)}.gmi>span b{color:var(--fg)}
.gmw{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.gmw small{font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.gmm{display:inline-flex;align-items:center;gap:5px;font:700 13px var(--mono)}.gmm .mcoin{width:15px;height:15px}
@media(max-width:560px){.gme{grid-template-columns:auto minmax(0,1fr)}.gmw{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid #ffffff12}}
.gld{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gld li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:6px;background:#111113}
.gld li.me{box-shadow:inset 0 0 0 1.5px var(--ac)}
.gld em{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1d1d21;font:800 12px var(--mono);font-style:normal;color:var(--mut)}
.gld .p1 em{background:#fbbf24;color:#1a1204}.gld .p2 em{background:#cbd5e1;color:#111}.gld .p3 em{background:#d97706;color:#1a0c02}
.gln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;min-width:0}.gln b{font:700 14px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gln span{font:600 12px var(--mono);color:var(--mut);white-space:nowrap}
.gln i{grid-column:1/-1;height:4px;border-radius:2px;background:#ffffff10;position:relative;overflow:hidden}.gln i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:2px;background:linear-gradient(90deg,#dc2626,#f87171)}
.gld li.me .gln i:after{background:linear-gradient(90deg,var(--ac2),var(--ac))}
.gbar{width:100%;border-collapse:collapse;font-size:14px}
.gbar th{padding:0 0 8px;text-align:left;font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.gbar td{padding:9px 0;border-top:1px solid #ffffff10;font-weight:600}.gbar td:first-child{width:42%;font-family:var(--mono);font-size:13px}
.gbar tr.me td{color:var(--ac)}.gbar tr.me td:first-child:after{content:" · toi";font-size:11px}
.gbn{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px;border-radius:6px;background:#111113;font-size:13px;color:var(--mut);line-height:1.5}.gbn b{color:var(--fg)}.gbn .mcoin{width:18px;height:18px;margin-top:1px}
.gsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gsteps li{display:flex;gap:10px;padding:12px;border-radius:6px;background:#111113;box-shadow:inset 0 0 0 1px var(--ln)}
.gsteps li>b{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#140702;font:800 12px var(--mono)}
.gsteps span{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--mut);line-height:1.45}.gsteps strong{font:700 14px var(--sans);color:var(--fg)}
@media(max-width:900px){.gsteps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.gsteps{grid-template-columns:1fr}}
.gmi>span,.gmi>b{white-space:normal;overflow:visible;text-overflow:clip}
/* classement des guildes : ma place, critères, colonnes nommées */
.grh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin-bottom:16px}
.grme{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:110px;padding:14px 16px;border-radius:8px;background:linear-gradient(140deg,#2a1308,#141416);box-shadow:inset 0 0 0 1px #ff5a1f44}
.grme em{font:900 34px/1 var(--sans);font-style:normal;color:var(--ac)}.grme span{font-size:12px;color:var(--mut);line-height:1.4}
.grhow{padding:12px 14px;border-radius:8px;background:#111113;box-shadow:inset 0 0 0 1px var(--ln)}
.grhow small{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.grhow ol{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:0;list-style:none;counter-reset:c}
.grhow li{counter-increment:c;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:14px;background:#1b1b1f;font-size:13px;color:var(--mut)}.grhow li b{color:var(--fg)}
.grhow li:before{content:counter(c);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ac);color:#140702;font:800 10px var(--mono)}
.grhow p{margin:0}
.grank li.ghd{border-top:0;padding-top:0;padding-bottom:6px;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}.grank li.ghd .rk{font:inherit}.grank li.ghd i{width:24px}
.grank .rk{text-align:right;min-width:52px}.grank .rk.lv{color:var(--fg);font-weight:700}
.grank li.p1 em{color:#fbbf24}.grank li.p2 em{color:#cbd5e1}.grank li.p3 em{color:#d97706}
@media(max-width:640px){.grh{grid-template-columns:1fr}.grme{flex-direction:row;align-items:center;gap:12px}.grank .rk{display:none}.grank .rk.lv{display:block;min-width:34px}}
.grank li.ghd em{color:var(--mut)!important}@media(max-width:640px){.grme{justify-content:flex-start}.grhow ol{gap:4px}.grhow li{font-size:12px}}

/* ---------- ordinateurs : écrans moyens et écrans peu hauts (portables 1024–1366 px, fenêtres réduites) ---------- */
/* 981–1179 px : on garde les trois colonnes (texte · booster · contenu), simplement resserrées, au lieu de la grille à deux colonnes qui rognait le carrousel et l'aperçu */
@media(min-width:981px) and (max-width:1179px){
 .bp{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px}
 .bpi{grid-column:auto;display:block;max-width:250px}.bpi h1{font-size:27px}.bpi .lead{margin:0 0 22px;font-size:14px}
 .bpi .stock{grid-column:auto;grid-row:auto}
 .bpc{justify-self:end;max-width:250px}.bpc .fan{zoom:.86}
 .bpv{width:420px}}
/* 761–980 px : tout en colonne, centré (le booster reste visible en entier) */
@media(min-width:761px) and (max-width:980px){
 .bp{display:flex;flex-direction:column;align-items:center;gap:6px}
 .bpi{display:block;max-width:560px;text-align:center}.bpi .lead{margin:0 0 14px}.bpi .stock{max-width:320px;margin:0 auto}.stock p{justify-content:center}
 .bpc{justify-self:auto;align-self:center;max-width:320px;margin-top:18px}.bpc .eyebrow{text-align:center}.fan{width:234px;margin:14px auto 12px}}
/* fenêtres peu hautes : le booster rapetisse pour que « Déchirer » reste visible sans faire défiler */
@media(min-width:761px) and (max-height:820px){.bp{min-height:calc(100dvh - var(--hh) - var(--st) - 70px)}.bpv .pkw{--pz:1.12;margin:10px auto 22px}}
@media(min-width:761px) and (max-height:700px){.bpv .pkw{--pz:.98;margin:4px auto 14px}main{padding-top:16px}}
@media(min-width:761px) and (max-height:600px){.bpv .pkw{--pz:.86;margin:0 auto 10px}.fan{zoom:.8}}
/* les diamants des coins des cartes Diamant ne doivent pas hériter du style des lignes de guilde (.gm) */
.card .gm{display:block;padding:0;gap:0;border-radius:0;flex-wrap:nowrap}
.t6 .ft{margin-left:20px;margin-right:20px}
/* ouverture des boosters : une fois la carte retournée, son dos (invisible) ne doit plus capter les clics,
   sinon le bouton ▶ de la face ne reçoit rien */
.slot.up .back{pointer-events:none}.slot:not(.up) .face{pointer-events:none}

/* ---------- bouton ▶ des cartes : un petit « vinyle » aux couleurs de la rareté ---------- */
.card .play{position:relative;width:20px;height:20px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;
 background:radial-gradient(circle at 35% 30%,#ffffff40,transparent 55%),radial-gradient(circle,color-mix(in srgb,var(--c) 70%,#000) 0 38%,#0b0b0c 40%);
 box-shadow:0 0 0 1.5px var(--c),0 0 10px -2px var(--c),inset 0 0 0 4px #00000055;transition:transform .15s,box-shadow .15s}
.card .play:after{content:"";position:absolute;inset:-9px;border-radius:50%}           /* zone de clic plus grande que le bouton */
.card .play svg{width:9px;height:9px;margin-left:1px;filter:drop-shadow(0 1px 1px #000a)}
@media(hover:hover){.card .play:hover{transform:scale(1.14);box-shadow:0 0 0 1.5px #fff,0 0 14px -1px var(--c),inset 0 0 0 4px #00000055}}
.card .play:active{transform:scale(.92)}
.card .play:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* chargement de l'extrait */
.card .play.ld svg{opacity:0}
.card .play.ld:before{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid #ffffff30;border-top-color:#fff;animation:pspin .7s linear infinite}
/* en lecture : le disque s'allume aux couleurs de la carte, ❚❚ au centre, un halo bat la mesure */
.card.playing .play{background:radial-gradient(circle at 35% 30%,#ffffff55,transparent 55%),var(--c);box-shadow:0 0 0 1.5px #fff,0 0 14px var(--c);animation:ppulse 1.1s ease-in-out infinite}
.card.playing .play svg{display:none}
.card.playing .play:before{content:"";width:6px;height:8px;box-sizing:border-box;border-left:2px solid #111;border-right:2px solid #111}
@keyframes ppulse{50%{box-shadow:0 0 0 1.5px #fff,0 0 0 5px color-mix(in srgb,var(--c) 35%,transparent),0 0 18px var(--c)}}
@keyframes pspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.card.playing .play{animation:none}.card .play.ld:before{animation-duration:2s}}
/* compte suspendu */
.banwall{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:#0c0c0df2;backdrop-filter:blur(8px)}
.banwall .bwb{max-width:380px;padding:26px;border-radius:10px;background:#151517;box-shadow:inset 0 0 0 1px #d03b3b66;text-align:center}
.banwall b{display:block;font:800 22px var(--sans);margin-bottom:10px}.banwall p{margin:6px 0;line-height:1.5}.banwall .k{margin-top:16px}

/* =====================================================================
   FLUIDITÉ DE L'OUVERTURE DES BOOSTERS
   ===================================================================== */
/* la scène couvre tout l'écran : on arrête de dessiner la page derrière (paquets animés, reflets, flou de l'en-tête) */
body.staging>#top,body.staging>#tabs,body.staging>#main{content-visibility:hidden}
/* le tremblement des cartes rares secoue la scène, plus la page entière */
.stg.shake{animation:sk .5s}
/* chaque carte sur sa propre couche : distribution et retournement calculés par la carte graphique */
#row .slot,.sec6 .slot{contain:layout style}   /* pas de will-change : il figeait le rendu à 50 % (début de la distribution) → cartes floues */
#row{contain:layout style}
/* carte bonus : plus de flou recalculé à chaque image sur les 5 autres cartes, un simple voile */
#stage.secret #row{filter:none;opacity:.32;transform:scale(.92);transition:opacity .35s,transform .35s}
/* sur la scène, les effets permanents coûteux se figent (ils restent visibles, simplement immobiles) */
#stage .t6 .oct{animation:none}
#stage .card .pt s:nth-child(n+5){display:none}
#stage .sh,#stage .bgr{animation:none}
/* arrivée de la carte bonus plus vive */
.sec6 .drop6{animation:drop6 .8s .05s cubic-bezier(.3,1.2,.5,1) both,sway 3.6s 1s ease-in-out infinite}
.sec6 .bon6{animation-delay:.45s}.sec6 .spot6{animation-delay:.1s}.sec6 .halo{animation-delay:.15s}
#stage.blackout:before{animation-duration:.42s}
/* téléphones : particules et ombres allégées */
@media(pointer:coarse){#fx i{width:5px;height:5px}.slot.nx .back{box-shadow:0 0 0 1px var(--ac)}}
#stage #row{flex:none;transform:scale(var(--z,1));transform-origin:50% 50%}
#stage.secret #row{transform:scale(calc(var(--z,1) * .92))}
/* scène préparée en avance : invisible et figée jusqu'à son apparition */
#stage.pre{opacity:0;pointer-events:none;animation:none!important}
#stage.pre *{animation-play-state:paused!important}
/* chargement de la session */
.meb .skl{display:block;width:96px;height:14px;border-radius:7px;background:linear-gradient(90deg,#ffffff0d,#ffffff1f,#ffffff0d);background-size:200% 100%;animation:skl 1.2s linear infinite}
.meb.in .skl{width:28px;height:28px;border-radius:50%}
@keyframes skl{to{background-position:-200% 0}}
.spin{display:inline-block;width:26px;height:26px;border-radius:50%;border:3px solid #ffffff22;border-top-color:var(--ac);animation:pspin .8s linear infinite;margin-bottom:8px}
/* discussion de guilde : pseudo et photo pour chaque message, y compris les miens */
.gmsg.me{flex-direction:row-reverse}
.gmsg .gav{flex:none;cursor:pointer;text-decoration:none}.gmsg .gav .av{width:32px;height:32px;font-size:13px}
.gmsg.me .msg b{color:#fde68a;text-align:right}
.gmsg .msg b .grole{margin-left:6px;padding:1px 6px;border-radius:8px;font:700 8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;background:#ffffff12;color:var(--mut);vertical-align:1px}
.gmsg .msg b .grole.leader{background:#fbbf2424;color:#fbbf24}.gmsg .msg b .grole.officer{background:#60a5fa22;color:#93c5fd}
/* présence */
.pres{display:inline-flex;align-items:center;gap:5px;font:600 10.5px var(--sans);font-style:normal;color:var(--mut);letter-spacing:0;text-transform:none}
.gmi span .pres{margin-left:8px}.fr2 span .pres{display:flex;margin-top:2px}
.pres:before{content:"";width:7px;height:7px;border-radius:50%;background:#55545a}
.pres.on{color:#4ade80}.pres.on:before{background:#22c55e;box-shadow:0 0 0 3px #22c55e26}

/* ---------- page Boosters sur ordinateur : les paquets voisins (fantômes) entiers, et de l'air autour ---------- */
/* la colonne du paquet est dimensionnée pour contenir le paquet ET ses deux voisins (décalés de 70 %, réduits à 74 %) */
@media(min-width:1180px){
 body[data-view=boost] main{max-width:1340px}
 .bp{grid-template-columns:minmax(0,290px) auto minmax(0,290px);gap:44px}
 .bpv{width:580px;overflow:visible}
 .bpi,.bpc{position:relative;z-index:2}
}
@media(min-width:1180px) and (max-height:820px){.bpv{width:520px}}
@media(min-width:1180px) and (max-height:700px){.bpv{width:460px}}
@media(min-width:1180px) and (max-height:600px){.bpv{width:400px}}
/* 981–1179 px : paquet un peu plus petit pour que ses voisins tiennent dans la colonne */
@media(min-width:981px) and (max-width:1179px){.bpv .pkw{--pz:1}.bpv{width:450px}.bp{gap:26px}}
/* la lumière d'ouverture : halo rond et doux, jamais coupé par la colonne */
.pkw:before{inset:-34% -60%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 55%,transparent),color-mix(in srgb,var(--ac) 18%,transparent) 55%,transparent)}

/* ---------- pastille de rareté + bouton ▶ : net, centré, dans la pastille ---------- */
.card .top{height:24px;padding-right:3px}
.card .play{width:18px;height:18px;border-radius:50%;
 background:radial-gradient(circle at 50% 30%,#34343b,#0b0b0d 72%);
 box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 80%,#fff 20%),0 1px 3px #000a;animation:none}
.card .play:after{inset:-10px}
.card .play svg{width:8px;height:8px;margin:0;fill:#fff;stroke:none;shape-rendering:geometricPrecision;filter:none;overflow:visible}
.card .play:before{display:none}
@media(hover:hover){.card .play:hover{transform:scale(1.12);box-shadow:inset 0 0 0 1.5px #fff,0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}}
.card.playing .play{background:var(--c);box-shadow:inset 0 0 0 1.5px #fff,0 0 12px var(--c);animation:ppulse2 1.1s ease-in-out infinite}
.card.playing .play svg{display:none}
.card.playing .play:before{display:block;content:"";width:6px;height:7px;box-sizing:border-box;border-left:2px solid #111;border-right:2px solid #111}
.card .play.ld svg{opacity:0}.card .play.ld:before{display:block;content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid #ffffff30;border-top-color:#fff;animation:pspin .7s linear infinite}
@keyframes ppulse2{50%{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent),0 0 16px var(--c)}}
/* texte de la pastille : un peu plus d'air et parfaitement centré verticalement */
.card .top b{line-height:1;letter-spacing:.13em}
/* carte bonus accélérée par un toucher : plus de chute ni de balancement */
.sec6.skip .drop6{animation:none}.sec6.skip .bon6,.sec6.skip .spot6,.sec6.skip .halo{animation-duration:.2s;animation-delay:0s}

/* =====================================================================
   TICKETS DE CONCERT · Mythique (soirée VIP) et Diamant (All Access holographique)
   ===================================================================== */
.tk{--stub:150px}
.tkseal{position:absolute;z-index:3;top:16px;right:calc(var(--stub) + 14px);display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;transform:rotate(-12deg);pointer-events:none}
.tkseal b{font:900 17px/1 var(--sans);letter-spacing:.02em}.tkseal small{margin-top:3px;font:800 6.5px var(--mono);letter-spacing:.18em}
/* ---------- MYTHIQUE : papier noir et rouge sombre, dorure à chaud, guillochage ---------- */
.tk.k5{background:#120708;color:#f6e7c9;box-shadow:0 40px 80px -30px #000,0 0 0 1px #f5c76b40,0 0 40px -10px #ef444466}
.tk.k5 .tkm{background:radial-gradient(130% 100% at 0% 0%,#5a1014,#1d0709 52%,#0e0505)}
.tk.k5 .tkm:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 92% 50%,#f5c76b0d 0 1px,transparent 1px 8px),repeating-linear-gradient(115deg,#ffffff05 0 1px,transparent 1px 14px)}
.tk.k5:after{content:"";position:absolute;inset:7px;z-index:2;border:1px solid #f5c76b55;border-radius:7px;pointer-events:none;box-shadow:inset 0 0 0 3px #12070800,inset 0 0 0 4px #f5c76b22}
.tk.k5 .tkp{box-shadow:0 0 0 2px #f5c76b,0 0 0 4px #1d0709,0 14px 30px -10px #000,0 0 30px -6px #ef444488}
.tk.k5 .tkp:after{background:linear-gradient(0deg,#7f1d1d99,transparent 50%)}
.tk.k5 .tkx small{color:#fca5a5b8}
.tk.k5 .tkx b{background:linear-gradient(180deg,#fff7dd 5%,#f8d27a 45%,#c0782f 75%,#f3c46b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #00000080)}
.tk.k5 .tkx em{color:#fca5a5}
.tk.k5 .tkd{border-top:1px solid #f5c76b80}.tk.k5 .tkd span{color:#fff1d6}.tk.k5 .tkd i{color:#fca5a5aa}
.tk.k5 .tks{background:linear-gradient(165deg,#f05252,#a3191b 55%,#4a0a0b);color:#fff1d6;border-left:2px dashed #f5c76b70}
.tk.k5 .tks:before,.tk.k5 .tks:after{box-shadow:inset 0 0 0 1px #f5c76b40}
.tk.k5 .tkb{background:repeating-linear-gradient(90deg,#fde68a 0 2px,transparent 2px 3px,#fde68a 3px 4px,transparent 4px 6px,#fde68a 6px 9px,transparent 9px 10px)}
.tk.k5 .tkseal{background:radial-gradient(circle at 35% 30%,#fff7dd,#f3c46b 45%,#a8632a 80%,#f3c46b);color:#3a0b0b;box-shadow:0 0 0 2px #1d0709,0 0 0 3px #f5c76b99,0 6px 14px #000a}
.tk.k5 .tkseal:before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed #3a0b0b66}
/* ---------- DIAMANT : nuit étoilée, voile holographique, dorure irisée ---------- */
.tk.k6{background:#05070d;color:#e8f6ff;box-shadow:0 40px 80px -30px #000,0 0 50px -8px #67e8f966,0 0 0 1px #a5f3fc55}
.tk.k6 .tkm{background:radial-gradient(120% 90% at 0% 0%,#14244a,#0a1022 55%,#05070d),#05070d}
.tk.k6 .tkm:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 46% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 18%,#e0f2fe,transparent),radial-gradient(1px 1px at 88% 64%,#fff,transparent),radial-gradient(1px 1px at 30% 88%,#f5d0fe,transparent),radial-gradient(1.5px 1.5px at 58% 40%,#fff,transparent);opacity:.8}
.tk.k6:after{content:"";position:absolute;inset:0;z-index:2;padding:2px;border-radius:10px;pointer-events:none;background:linear-gradient(120deg,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0,#a5f3fc) 0 0/300% 100%;animation:foil 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tkholo{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#22d3ee33 32%,#e879f933 44%,#fde68a33 56%,#a7f3d033 68%,transparent 80%) 0 0/250% 100%;mix-blend-mode:screen;animation:foil 5s linear infinite}
.tk.k6 .tkp{box-shadow:0 0 0 2px #e0f2fe,0 0 0 4px #0a1022,0 0 0 5px #a5f3fc88,0 14px 30px -10px #000,0 0 34px -4px #67e8f9aa}
.tk.k6 .tkp:after{background:linear-gradient(0deg,#1e3a8a88,transparent 50%)}
.tk.k6 .tkx small{color:#a5f3fcb0}
.tk.k6 .tkx b{background:linear-gradient(90deg,#e0f2fe,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0,#e0f2fe) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 5s linear infinite;filter:drop-shadow(0 0 12px #67e8f955)}
.tk.k6 .tkx em{color:#f5d0fe}
.tk.k6 .tkd{border-top:1px solid transparent;border-image:linear-gradient(90deg,#a5f3fc,#f5d0fe,#fef9c3) 1}.tk.k6 .tkd span{color:#f0f9ff}.tk.k6 .tkd i{color:#a5f3fc99}
.tk.k6 .tks{color:#0a1022;border-left:2px dashed #ffffffaa;overflow:hidden}
.tk.k6 .tks>*{position:relative;z-index:1}
.tk.k6 .tks small,.tk.k6 .tks span{text-shadow:0 1px 0 #ffffff80}
.tk.k6 .tks:before,.tk.k6 .tks:after{z-index:2}
.tk.k6 .tks .tkb{mix-blend-mode:multiply}
.tk.k6 .tks{background:repeating-linear-gradient(45deg,#ffffff38 0 1px,transparent 1px 11px),repeating-linear-gradient(-45deg,#ffffff38 0 1px,transparent 1px 11px),linear-gradient(160deg,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0,#a5f3fc);background-size:auto,auto,200% 200%;animation:foil 6s linear infinite}
.tk.k6 .tkseal{overflow:hidden;color:#0a1022;box-shadow:0 0 0 2px #05070d,0 0 0 3px #e0f2fe,0 0 22px #67e8f9aa}
.tk.k6 .tkseal:before{content:"";position:absolute;inset:-20%;z-index:-1;background:conic-gradient(from 0deg,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0,#93c5fd,#a5f3fc);animation:tkspin 8s linear infinite}
.tk.k6 .tkseal{isolation:isolate}.tk.k6 .tkseal small{font-size:6px;letter-spacing:.12em}
.tk.k6 .tkseal b{font-size:22px;text-shadow:0 1px 0 #ffffffa0}
@keyframes tkspin{to{transform:rotate(360deg)}}
.tkspk{position:absolute;inset:0;z-index:2;pointer-events:none}
.tkspk i{position:absolute;width:10px;height:10px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twk 2.6s ease-in-out infinite;filter:drop-shadow(0 0 4px #a5f3fc)}
.tkspk i:nth-child(1){left:8%;top:12%}.tkspk i:nth-child(2){left:38%;top:8%;animation-delay:.4s}.tkspk i:nth-child(3){left:62%;top:30%;animation-delay:.9s;width:7px;height:7px}
.tkspk i:nth-child(4){left:22%;top:82%;animation-delay:1.3s}.tkspk i:nth-child(5){left:52%;top:86%;animation-delay:1.8s;width:7px;height:7px}.tkspk i:nth-child(6){left:74%;top:72%;animation-delay:.6s}.tkspk i:nth-child(7){left:4%;top:52%;animation-delay:2.1s;width:6px;height:6px}
@media(prefers-reduced-motion:reduce){.tk.k6 .tkseal:before,.tkholo,.tk.k6:after,.tk.k6 .tkx b,.tkspk i{animation:none}}
/* petits écrans : sceau plus petit */
@media(max-width:640px){.tkseal{width:48px;height:48px;top:10px;right:calc(var(--stub) + 8px)}.tkseal b{font-size:13px}.tk.k6 .tkseal b{font-size:17px}.tkseal small{font-size:5.5px}}
@media(max-width:640px){.tk.k6 .tkseal small{font-size:4.8px;letter-spacing:.06em}}

/* =====================================================================
   VITRINE DE GUILDE · le mur de puissance
   ===================================================================== */
.gvh{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:14px;padding:16px 18px;border-radius:10px;background:radial-gradient(120% 140% at 0 0,#2a1408,#121214 60%);box-shadow:inset 0 0 0 1px #ff5a1f33}
.gvk small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.gvk b{font:800 28px/1.1 var(--sans);letter-spacing:-.02em}.gvk b i{margin-left:6px;font:600 12px var(--sans);font-style:normal;color:var(--mut)}
.gvr{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.gvr span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:#ffffff08;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent);font:700 11px var(--sans)}
.gvr span i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.gvme{display:flex;align-items:center;gap:18px;margin-bottom:18px;padding:14px 18px;border-radius:10px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln)}
.gvmc .slot{zoom:.5}
.gvmt{display:flex;flex-direction:column;gap:4px;min-width:0}.gvmt small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.gvmt b{font:800 18px var(--sans)}.gvmt span{color:var(--mut);font-size:13px}.gvmt .row{margin-top:8px;gap:8px}
.gvit{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:26px 16px;padding:22px 18px;border-radius:10px;background:radial-gradient(ellipse at 50% 0,#ffffff0a,transparent 60%),#0f0f12;box-shadow:inset 0 0 0 1px var(--ln)}
.gvs{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;min-width:0}
.gvs .gvc{display:flex;justify-content:center;filter:drop-shadow(0 14px 18px #000b);transition:transform .2s}
@media(hover:hover){.gvs:hover .gvc{transform:translateY(-4px)}}
.gvs .gvc .slot{zoom:.82}
.gvs.champ{grid-column:span 2;padding-top:6px}.gvs.champ .gvc .slot{zoom:1.05}
.gvs.champ:before{content:"";position:absolute;inset:-6px -4px;z-index:-1;border-radius:12px;background:radial-gradient(ellipse at 50% 35%,#fbbf2426,transparent 65%)}
.gvcrown{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:#fbbf2420;color:#fcd34d;font:800 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.gvcrown svg{width:13px;height:13px;fill:currentColor}
.gvo{display:flex;align-items:center;gap:8px;max-width:100%}.gvo .av{width:26px;height:26px;font-size:11px}
.gvo span{display:flex;flex-direction:column;min-width:0}.gvo b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gvo small{color:var(--mut);font-size:11px;white-space:nowrap}.gvo small i{font-style:normal;color:var(--fg);font-weight:700}
.gvrm{height:28px;font-size:10px}
@media(max-width:640px){.gvit{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 8px;gap:20px 8px}.gvs .gvc .slot{zoom:.72}.gvs.champ .gvc .slot{zoom:.95}
 .gvh{padding:12px 14px;gap:10px 18px}.gvk b{font-size:22px}.gvr{margin-left:0}.gvme{gap:12px;padding:12px}.gvmc .slot{zoom:.42}}

/* =====================================================================
   RÉCOMPENSES · mini-boosters dessinés
   ===================================================================== */
.pkm{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;--a:#f5c542;--b:#9a6b06}
.pkm.kx15{--a:#c4a1ff;--b:#6d28d9}.pkm.kx11{--a:#5ee4b0;--b:#0f7a55}
.pkms{position:relative;display:inline-block;height:22px;width:calc(15px + (var(--n,3) - 1) * 6px)}
.pkms{width:27px}
.pkms i{position:absolute;top:0;left:calc(var(--i) * 6px);width:15px;height:22px;border-radius:2px;
 background:linear-gradient(160deg,color-mix(in srgb,var(--a) 70%,#fff),var(--a) 45%,var(--b));box-shadow:0 2px 4px #0009,inset 0 0 0 1px #ffffff40;
 clip-path:polygon(0 12%,12% 0,25% 12%,37% 0,50% 12%,62% 0,75% 12%,87% 0,100% 12%,100% 100%,0 100%);transform:rotate(calc((var(--i) - 1) * 7deg));transform-origin:50% 100%}
.pkms i b{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:900 5px var(--mono);color:#0008;letter-spacing:-.02em}
.pkmt{font:600 12px var(--sans);color:var(--fg)}.pkmt b{font:800 13px var(--mono);color:var(--a)}

/* ---------- classement du boss ---------- */
.gld2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gld2 li{display:grid;grid-template-columns:30px 32px minmax(0,1fr) auto 128px;gap:12px;align-items:center;padding:9px 12px;border-radius:9px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln)}
.gld2 li.me{box-shadow:inset 0 0 0 1px var(--ac);background:#ff5a1f0d}
.gld2 em{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:800 12px var(--mono);font-style:normal;color:var(--mut);background:#ffffff08}
.gld2 li.p1 em{background:radial-gradient(circle at 35% 30%,#fff3c4,#f5c542 50%,#9a6b06);color:#2a1a00;box-shadow:0 0 12px #f5c54266}
.gld2 li.p2 em{background:radial-gradient(circle at 35% 30%,#fff,#cbd5e1 50%,#64748b);color:#0f172a}
.gld2 li.p3 em{background:radial-gradient(circle at 35% 30%,#ffe2c4,#d08a4c 50%,#7c4416);color:#2a1300}
.gld2 .av{width:32px;height:32px;font-size:13px}
.gld2 .gln{min-width:0;display:flex;flex-direction:column;gap:6px}.gld2 .gln b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gld2 .glb{display:block;height:5px;border-radius:3px;background:#ffffff0d;overflow:hidden}.gld2 .glb i{display:block;width:var(--w);height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ac2),var(--ac))}
.gld2 .gld{display:flex;flex-direction:column;align-items:flex-end;font:800 14px var(--mono)}.gld2 .gld small{font:600 10.5px var(--sans);color:var(--mut)}
.gld2 .pkm{justify-self:end}
@media(max-width:640px){.gld2 li{grid-template-columns:26px 28px minmax(0,1fr) auto;gap:8px;padding:8px}.gld2 li .pkm{grid-column:3/-1;justify-self:start}.gld2 .av{width:28px;height:28px}}

/* =====================================================================
   CLASSEMENT DES GUILDES
   ===================================================================== */
.grme2{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);gap:18px 28px;align-items:center;margin-bottom:16px;padding:18px 20px;border-radius:12px;background:radial-gradient(120% 160% at 0 0,#2a1408,#121214 60%);box-shadow:inset 0 0 0 1px #ff5a1f33}
.grm1 small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.grm1 b{display:block;font:800 18px var(--sans)}.grm1 b em{font:900 40px/1 var(--sans);font-style:normal;letter-spacing:-.03em;color:var(--ac)}.grm1 span{color:var(--mut);font-size:12.5px}
.grm2{display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.grsort{margin-bottom:16px}
.gpods{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin-bottom:18px}
.gpod{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 14px 16px;border-radius:14px;text-decoration:none;color:inherit;background:linear-gradient(180deg,#1a1a1e,#111113);box-shadow:inset 0 0 0 1px var(--ln);text-align:center;min-width:0}
.gpod.p1{order:2;padding-top:30px;background:linear-gradient(180deg,#2a2208,#121214 70%);box-shadow:inset 0 0 0 1px #f5c54255,0 20px 40px -24px #f5c54266}
.gpod.p2{order:1;background:linear-gradient(180deg,#1d2026,#121214 70%);box-shadow:inset 0 0 0 1px #cbd5e133}
.gpod.p3{order:3;background:linear-gradient(180deg,#241a12,#121214 70%);box-shadow:inset 0 0 0 1px #d08a4c33}
.gpod.me{outline:2px solid var(--ac);outline-offset:2px}
.gpr{position:absolute;top:10px;left:12px;font:900 13px var(--mono);color:var(--mut)}.gpod.p1 .gpr{color:#fcd34d}
.gpcr{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;color:#fcd34d;filter:drop-shadow(0 0 10px #f5c54288)}.gpcr svg{width:100%;height:100%;fill:currentColor}
.gpod b{font:800 16px var(--sans);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gpod small{color:var(--mut);font:700 11px var(--mono)}
.gpst{display:flex;gap:14px;margin-top:6px}.gpst span{display:flex;flex-direction:column;font:600 10px var(--sans);color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.gpst em{font:800 17px var(--mono);font-style:normal;color:var(--fg);letter-spacing:0;text-transform:none}
.gpm{font-size:11.5px;color:var(--mut)}
.grank2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.grank2 li{display:grid;grid-template-columns:34px 30px minmax(0,1fr) 60px 82px 60px 92px 74px;gap:10px;align-items:center;padding:9px 12px;border-radius:9px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln)}
.grank2 li.ghd{background:none;box-shadow:none;padding-top:0;padding-bottom:4px;font:700 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.grank2 li.me{box-shadow:inset 0 0 0 1px var(--ac);background:#ff5a1f0d}
.grank2 li.gap{display:block;text-align:center;color:var(--mut);background:none;box-shadow:none;padding:2px}
.grank2 em{font:800 13px var(--mono);font-style:normal;color:var(--mut);text-align:center}
.grank2 a{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit}.grank2 a b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grank2 a span{font:11px var(--mono);color:var(--mut)}
.grank2 .rk{font:700 13px var(--mono);text-align:right}.grank2 .rk i{display:none}.grank2 .rk.lv{color:var(--ac)}
@media(max-width:860px){.grme2{grid-template-columns:auto minmax(0,1fr)}.grm3{grid-column:1/-1}}
@media(max-width:640px){
 .grme2{padding:14px;gap:10px 16px}.grm1 b em{font-size:32px}
 .gpods{grid-template-columns:1fr 1fr;gap:8px}.gpod.p1{order:0;grid-column:1/-1}.gpod{padding:16px 10px 12px}.gpst{gap:10px}.gpst em{font-size:15px}
 .grank2 li{grid-template-columns:26px 26px minmax(0,1fr) auto auto;gap:8px;padding:8px}
 .grank2 .rk.hm,.grank2 .ghd .rk.hm{display:none}.grank2 .rk i{display:block;font:600 8.5px var(--sans);font-style:normal;color:var(--mut);text-transform:uppercase}
 .grank2 li.ghd{display:none}}
.pkms{height:28px;width:34px}.pkms i{width:19px;height:28px;left:calc(var(--i) * 7px)}.pkms i b{font-size:6px;bottom:4px}

/* ---------- talents : progression par branche, effets actifs ---------- */
.tbp{display:block;width:70%;height:4px;margin:8px auto 3px;border-radius:2px;background:#ffffff0d;overflow:hidden}.tbp i{display:block;height:100%;border-radius:2px;background:var(--b);box-shadow:0 0 8px var(--b)}
.tbn{display:block;font:700 10px var(--mono);color:var(--mut)}
.tside{display:flex;flex-direction:column;gap:12px;min-width:0}
.tsum{padding:14px 16px;border-radius:10px;background:#121214;box-shadow:inset 0 0 0 1px var(--ln)}
.tsum h4{margin:0 0 10px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tsum ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tsum li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center}
.tsum li b{display:block;font-size:12.5px}.tsum li small{display:block;color:var(--mut);font-size:11.5px;line-height:1.35}
.tsum li em{font:700 10.5px var(--mono);font-style:normal;color:var(--b)}
.thex.sm{width:28px;height:32px;color:var(--b);background:color-mix(in srgb,var(--b) 18%,#1a1a1f)}.thex.sm svg{width:14px;height:14px}
@media(min-width:900px){.tgrid .tside{position:sticky;top:calc(var(--hh) + 20px)}.tgrid .tside .tcard{position:static}}
/* réglages · notifications par catégorie */
.npc{margin-top:4px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}
.npc>p{margin:4px 2px 2px;font-size:12px}
/* bandeau « nouvelle version » */
.nvb{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:#1b1b20;box-shadow:0 0 0 1px var(--ln),0 12px 30px #000a;font:600 13px var(--sans);white-space:nowrap;animation:nvbin .35s ease-out}
@keyframes nvbin{from{opacity:0;transform:translate(-50%,12px)}}
@media(min-width:981px){.nvb{bottom:24px}}
/* membres de guilde : présence sur l'avatar, contribution lisible à droite */
.pres[hidden],.pdot[hidden]{display:none!important}
.gavw{position:relative;flex:none;display:inline-flex}
.pdot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#55545a;box-shadow:0 0 0 2.5px #121215}
.pdot.on{background:#22c55e}
.gm2 .gmi{gap:4px}
.gm2 .gmtag{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap}
.gm2 .gmtag .pres{margin-left:0}
.gmc{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-align:right}
.gmc b{font:800 16px var(--sans);font-variant-numeric:tabular-nums;color:var(--fg)}
.gmc small{font-size:11px;color:var(--mut)}.gmc small.t{opacity:.75;margin-top:1px}
.gm2 .gmh{flex-direction:column;align-items:center;gap:4px;padding-left:12px;border-left:1px solid var(--ln)}
.gm2 .gmh small{font:700 9.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.gm2 .gmh>span{display:flex;gap:5px}
@media(max-width:560px){.gm2{flex-wrap:nowrap}.gm2 .gmh{order:0;padding-left:8px}.gmc b{font-size:15px}.gmc small{font-size:10.5px}}
/* ===== billets : les deux encoches de la perforation restent visibles sur tous les billets ===== */
.tks:before,.tks:after{z-index:5}
.tk.k5 .tks:before,.tk.k5 .tks:after{background:#060607;box-shadow:0 0 0 1.5px #f5c76bb0,inset 0 2px 5px #000}
.tk.k6 .tks{overflow:visible}
.tk.k6 .tks:before,.tk.k6 .tks:after{background:#060607;box-shadow:0 0 0 1.5px #e0f2fe,0 0 12px 1px #67e8f999,inset 0 2px 5px #000}

/* ===== billet Diamant v2 ===== */
.tk.k6{background:#03050b;box-shadow:0 40px 80px -30px #000,0 0 60px -6px #67e8f966,0 0 120px -30px #e879f966,0 0 0 1px #a5f3fc55}
/* cristal : fond nuit glacée + treillis de facettes qui s'estompe */
.tk.k6 .tkm{background:
 radial-gradient(90% 120% at 100% 100%,#2a1050aa,transparent 60%),
 radial-gradient(110% 90% at 0% 0%,#163a6e,#0a1430 50%,#04060f)}
.tk.k6 .tkm:before{opacity:1;background:
 radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 18%,#e0f2fe,transparent),radial-gradient(1px 1px at 30% 88%,#f5d0fe,transparent),radial-gradient(1.5px 1.5px at 58% 40%,#fff,transparent),
 repeating-linear-gradient(60deg,#bfe9ff12 0 1px,transparent 1px 26px),repeating-linear-gradient(-60deg,#bfe9ff12 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,#bfe9ff0c 0 1px,transparent 1px 22.5px);
 -webkit-mask:radial-gradient(120% 120% at 70% 40%,#000 20%,transparent 75%);mask:radial-gradient(120% 120% at 70% 40%,#000 20%,transparent 75%)}
/* lueurs prismatiques qui dérivent lentement */
.tkcau{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}
.tkcau:before,.tkcau:after{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(30px);opacity:.38;mix-blend-mode:screen}
.tkcau:before{left:30%;top:-30%;background:conic-gradient(#22d3ee,#e879f9,#fde68a,#34d399,#22d3ee);animation:tkdrift 9s ease-in-out infinite alternate}
.tkcau:after{left:52%;top:40%;width:34%;background:conic-gradient(#a78bfa,#38bdf8,#f0abfc,#a78bfa);animation:tkdrift 11s ease-in-out infinite alternate-reverse}
@keyframes tkdrift{to{transform:translate(-30%,22%) rotate(160deg)}}
/* reflet qui suit le pointeur (sinon balayage automatique) */
.tk.k6 .tkholo{background:linear-gradient(115deg,transparent 22%,#22d3ee30 34%,#e879f930 44%,#fde68a33 54%,#a7f3d030 64%,transparent 76%) 0 0/250% 100%;animation:foil 5s linear infinite}
.tk.k6.lit .tkholo{animation:none;background:radial-gradient(38% 70% at var(--mx,50%) var(--my,50%),#ffffff2e,transparent 70%),linear-gradient(115deg,transparent 22%,#22d3ee38 34%,#e879f938 44%,#fde68a3a 54%,#a7f3d038 64%,transparent 76%) calc(100% - var(--mx,50%)) 0/250% 100%}
/* grand diamant en filigrane */
.tkwm{position:absolute;z-index:1;right:calc(var(--stub) + 18px);bottom:-46px;width:250px;pointer-events:none;opacity:.16;fill:#e0f2fe;stroke:#e0f2fe;stroke-width:.6;stroke-linejoin:round;transform:rotate(-8deg);filter:drop-shadow(0 0 12px #67e8f9)}
.tkwm .o{fill:none;stroke-width:1.1}
/* le diamant taillé (remplace le sceau rond) */
.tkgw{position:absolute;z-index:3;top:14px;right:calc(var(--stub) + 16px);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;filter:drop-shadow(0 0 14px #67e8f9aa) drop-shadow(0 6px 10px #000c);animation:tkfloat 4.5s ease-in-out infinite}
@keyframes tkfloat{50%{transform:translateY(-4px)}}
.tkgem{position:relative;display:block;width:74px;height:59px;overflow:hidden;clip-path:polygon(20% 5%,80% 5%,98% 33.75%,50% 97.5%,2% 33.75%)}
.tkgem:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0,#93c5fd,#e9d5ff,#a5f3fc);animation:tkspin 7s linear infinite}
.tkgem:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fffffff0 48%,transparent 58%) 0 0/300% 100%;animation:tkglint 3.2s ease-in-out infinite}
@keyframes tkglint{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.tkgem svg{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:#ffffffd9;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tkgem svg path{vector-effect:non-scaling-stroke}.tkgem svg .o{fill:none;stroke:#fff;stroke-width:2}
.tkgw small{padding:3px 8px;border-radius:999px;font:800 7.5px var(--mono);letter-spacing:.2em;color:#04101f;background:linear-gradient(90deg,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0) 0 0/200% 100%;animation:foil 5s linear infinite;box-shadow:0 0 0 1px #ffffff90}
/* titre en chrome glacé + éclat qui passe */
.tk.k6 .tkx b{background:linear-gradient(105deg,transparent 42%,#ffffffee 50%,transparent 58%) 0 0/260% 100% no-repeat,linear-gradient(180deg,#ffffff 0%,#dff6ff 38%,#7dd3fc 49%,#f0f9ff 52%,#c4b5fd 78%,#f5d0fe 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;animation:tkshine 4.5s ease-in-out infinite;filter:drop-shadow(0 0 14px #67e8f966) drop-shadow(0 2px 0 #00000090)}
@keyframes tkshine{0%,40%{background-position:130% 0,0 0}100%{background-position:-60% 0,0 0}}
.tk.k6 .tkx small{color:#a5f3fc;letter-spacing:.28em}
.tk.k6 .tkx em{color:#f0abfc;text-shadow:0 0 12px #e879f966}
.tk.k6 .tkd span{color:#f0f9ff;text-shadow:0 0 10px #67e8f955}
/* talon : nacre irisée + bande holographique de sécurité */
.tk.k6 .tks{border-left:2px dashed #ffffffcc;box-shadow:inset 14px 0 0 -2px transparent}
.tk.k6 .tks b{background:linear-gradient(180deg,#0a1022,#3b2a6e 50%,#0a1022);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.16em}
.tk.k6 .tks>i.tkb{mix-blend-mode:multiply}
.tk.k6 .tks small:before{content:"◆ ";color:#7c3aed}
.tk.k6:before{content:"";position:absolute;z-index:4;top:0;bottom:0;right:calc(var(--stub) - 16px);width:9px;pointer-events:none;
 background:repeating-linear-gradient(180deg,#ffffff55 0 2px,transparent 2px 6px),linear-gradient(180deg,#22d3ee,#e879f9,#fde68a,#34d399,#22d3ee) 0 0/100% 300%;opacity:.75;mix-blend-mode:overlay;animation:tkstrip 6s linear infinite}
@keyframes tkstrip{to{background-position:0 0,0 300%}}
@media(max-width:640px){.tkgw{top:10px;right:calc(var(--stub) + 10px)}.tkgem{width:52px;height:42px}.tkgw small{font-size:6px;padding:2px 6px}.tkwm{width:170px;bottom:-30px}.tk.k6:before{width:6px;right:calc(var(--stub) - 11px)}}
@media(prefers-reduced-motion:reduce){.tkcau:before,.tkcau:after,.tkgw,.tkgem:before,.tkgem:after,.tk.k6 .tkx b,.tkgw small,.tk.k6:before{animation:none}}
.mpi .tkcau,.mpi .tkgw{animation:none}
/* Diamant v2 · réglages fins */
.tkcau:before,.tkcau:after{opacity:.26;filter:blur(34px)}
.tkcau:before{width:38%}.tkcau:after{width:28%;background:conic-gradient(#38bdf8,#f0abfc,#67e8f9,#38bdf8)}
.tkwm{opacity:.24;z-index:2;fill:#bae6fd;fill-opacity:.35}
.tk.k6 .tkx b{background:linear-gradient(105deg,transparent 42%,#fff 50%,transparent 58%) 0 0/260% 100% no-repeat,linear-gradient(180deg,#ffffff 0%,#effaff 40%,#a5e8ff 49%,#ffffff 53%,#e3dcff 80%,#fbe4ff 100%);-webkit-background-clip:text;background-clip:text}
.tk.k6:before{mix-blend-mode:normal;opacity:.6}
.tk.k6 .tkp:before{content:"";position:absolute;inset:-6px;z-index:2;border-radius:8px;padding:2.5px;pointer-events:none;background:linear-gradient(120deg,#a5f3fc,#f5d0fe,#fef9c3,#a7f3d0,#93c5fd,#a5f3fc) 0 0/300% 100%;animation:foil 5s linear infinite;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 6px #67e8f9)}
.tk.k6 .tkp{box-shadow:0 0 0 1px #04060f,0 14px 30px -10px #000,0 0 40px -6px #67e8f9aa}
.tkwm{opacity:.36;stroke-width:.8}
@media(max-width:640px){.tk.k6 .tks small:before{content:none}.tkgem{width:46px;height:37px}.tkwm{width:150px;opacity:.3}}
/* encoches nettes : plus de liseré extérieur qui passe par-dessus les demi-cercles */
.tk.k5{box-shadow:0 40px 80px -30px #000,0 0 40px -10px #ef444466}
.tk.k6{box-shadow:0 40px 80px -30px #000,0 0 60px -6px #67e8f955,0 0 120px -30px #e879f955}
.tk.k5 .tks:before,.tk.k5 .tks:after{box-shadow:0 0 0 1.5px #f5c76bb0}
.tk.k6 .tks:before,.tk.k6 .tks:after{box-shadow:0 0 0 1.5px #e0f2fe,0 0 10px #67e8f988}
/* Mythique : le cadre doré intérieur s'interrompt proprement autour des deux encoches */
.tk.k5:after{-webkit-mask:radial-gradient(circle at calc(100% - var(--stub) + 6px) -7px,transparent 19px,#000 19.5px),radial-gradient(circle at calc(100% - var(--stub) + 6px) calc(100% + 7px),transparent 19px,#000 19.5px);-webkit-mask-composite:source-in;
 mask:radial-gradient(circle at calc(100% - var(--stub) + 6px) -7px,transparent 19px,#000 19.5px),radial-gradient(circle at calc(100% - var(--stub) + 6px) calc(100% + 7px),transparent 19px,#000 19.5px);mask-composite:intersect}
.tk.k6:before{right:calc(var(--stub) - 26px)}
@media(max-width:640px){.tk.k6:before{right:calc(var(--stub) - 21px)}}
@media(max-width:640px){.tk.k6:before{right:calc(var(--stub) - 19px);width:5px}}
@media(max-width:640px){#pq .pqw:not(.rotw) .tk.k6:before{display:none}}
/* ===== classement des guildes v3 ===== */
.lbme{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:22px;padding:16px 20px;border-radius:12px;background:linear-gradient(100deg,#ff5a1f1f,#ff5a1f05 45%,#ffffff04),#121215;box-shadow:inset 0 0 0 1px #ff5a1f40}
.lbpos{display:flex;flex-direction:column;align-items:center;min-width:76px;padding-right:20px;border-right:1px solid var(--ln)}
.lbpos small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.lbpos b{font:900 40px/1 var(--sans);letter-spacing:-.03em;color:var(--ac);margin:4px 0 2px;font-variant-numeric:tabular-nums}
.lbpos span{font-size:11.5px;color:var(--mut)}
.lbwho{display:flex;align-items:center;gap:14px;min-width:0}.lbwho>div{min-width:0}
.lbwho b{display:block;font:800 18px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbwho span{font-size:12.5px;color:var(--mut)}
.lbnext{display:flex;flex-direction:column;gap:7px;min-width:0}.lbnext>span{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lbnext>span b{color:var(--fg)}
.lbnext small{font-size:11.5px;color:var(--mut)}
.lbbar{display:block;height:7px;border-radius:99px;background:#ffffff10;overflow:hidden}.lbbar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff5a1f,#ffb36b)}
.lbbar.top>i{background:linear-gradient(90deg,#f5c542,#fde68a)}
.lbtools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 8px;flex-wrap:wrap}
.lbsort{display:flex;gap:4px;padding:4px;border-radius:999px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);overflow-x:auto;scrollbar-width:none;max-width:100%}
.lbsort::-webkit-scrollbar{display:none}
.lbsort button{flex:none;padding:8px 15px;border:0;border-radius:999px;background:none;color:var(--mut);font:700 12.5px var(--sans);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.lbsort button:hover{color:var(--fg)}.lbsort button.on{background:var(--ac);color:#140804}
.lbhelp{font-size:11.5px;color:var(--mut)}
/* podium */
.lbpod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:14px;max-width:760px;margin:18px auto 22px}
.lbp{--m:#9ca3af;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--fg);min-width:0}
.lbp.p1{--m:#f5c542}.lbp.p2{--m:#cbd5e1}.lbp.p3{--m:#d08a52}
.lbp .gem2{margin-bottom:10px;filter:drop-shadow(0 8px 16px #000a)}
.lbp>b{max-width:100%;font:800 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbp>small{font:700 10px var(--mono);letter-spacing:.1em;color:var(--mut);margin-top:2px}
.lbv{margin:8px 0 10px;padding:3px 10px;border-radius:999px;font:800 12.5px var(--sans);font-variant-numeric:tabular-nums;color:var(--m);background:color-mix(in srgb,var(--m) 14%,transparent)}
.lbst{display:flex;align-items:flex-start;justify-content:center;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--m) 30%,#17171b),#121215 85%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--m) 70%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--m) 22%,transparent)}
.lbst em{margin-top:12px;font:900 30px/1 var(--sans);font-style:normal;color:var(--m);text-shadow:0 2px 12px color-mix(in srgb,var(--m) 50%,transparent)}
.lbp.p1 .lbst{height:118px}.lbp.p2 .lbst{height:84px}.lbp.p3 .lbst{height:62px}
.lbp.p1 .lbst em{font-size:40px}
.lbp.me>b{color:var(--ac)}.lbp.me .lbst{box-shadow:inset 0 1px 0 var(--ac),inset 0 0 0 1.5px #ff5a1f88}
.lbp.vide{opacity:.35}
.lbcr{width:30px;height:22px;margin-bottom:4px;color:#f5c542;filter:drop-shadow(0 0 10px #f5c54288)}.lbcr svg{width:100%;height:100%;fill:currentColor}
.lbp:hover .gem2{transform:translateY(-3px)}.lbp .gem2{transition:transform .2s}
/* tableau */
.lbtab{border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}
.lbh,.lbr{display:grid;grid-template-columns:44px 30px minmax(0,1fr) repeat(6,minmax(64px,92px));align-items:center;gap:0 10px;padding:0 18px}
.lbh{height:40px;font:700 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--ln)}
.lbh .lbg{grid-column:span 2}
.lbr{height:60px;text-decoration:none;color:var(--fg);border-bottom:1px solid #ffffff08;transition:background .15s}
.lbr:last-child{border-bottom:0}.lbr:hover{background:#ffffff06}
.lbr.me{background:linear-gradient(90deg,#ff5a1f1c,#ff5a1f06 60%);box-shadow:inset 3px 0 0 var(--ac)}
.lbn{font:800 15px var(--sans);font-variant-numeric:tabular-nums;color:var(--mut);text-align:center}
.lbr.lbt1 .lbn{color:#f5c542}.lbr.lbt2 .lbn{color:#cbd5e1}.lbr.lbt3 .lbn{color:#d08a52}
.gem2.esm2{width:28px;height:32px}
.lbg{min-width:0}.lbg b{display:block;font:700 14.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lbg small{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbr.me .lbg b{color:var(--ac)}
.lbc{text-align:right;font:600 14px var(--sans);font-variant-numeric:tabular-nums;color:#d4d4d8}.lbc i{font-style:normal;color:var(--mut)}
.lbh .lbc{text-align:right}.lbc.on{color:var(--fg);font-weight:800}.lbh .lbc.on{color:var(--ac)}
.lbm{display:none}
.lbfoot{margin:12px 2px 0;text-align:center}
@media(max-width:900px){
 .lbh,.lbr{grid-template-columns:34px 28px minmax(0,1fr) auto;padding:0 14px}
 .lbc{display:none}.lbm{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
 .lbm b{font:800 15px var(--sans);font-variant-numeric:tabular-nums}.lbm small{font-size:10.5px;color:var(--mut)}
 .lbh .lbm{display:block;font:inherit;letter-spacing:inherit;color:var(--ac)}
 .lbme{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:14px 16px}
 .lbnext{grid-column:1/-1}.lbpos{padding-right:16px}
}
@media(max-width:560px){
 .lbme{grid-template-columns:auto minmax(0,1fr)}.lbpos{min-width:60px}.lbpos b{font-size:32px}.lbwho .gem2.elg{width:40px;height:46px}.lbwho b{font-size:16px}
 .lbtools{margin-top:16px}.lbhelp{display:none}.lbsort{width:100%}.lbsort button{padding:8px 13px;font-size:12px}
 .lbpod{gap:8px;margin:14px auto 18px}.lbp .gem2.exl{width:62px;height:70px}.lbp .gem2.elg{width:46px;height:52px}
 .lbp>b{font-size:13px}.lbv{font-size:11.5px;padding:2px 8px}
 .lbp.p1 .lbst{height:92px}.lbp.p2 .lbst{height:66px}.lbp.p3 .lbst{height:48px}.lbst em{font-size:24px;margin-top:9px}.lbp.p1 .lbst em{font-size:32px}
 .lbr{height:58px}
}
.lbh .lbc,.lbh .lbn,.lbh .lbm{font:700 9.5px var(--mono);letter-spacing:.12em;color:var(--mut);white-space:nowrap}
.lbh .lbc.on,.lbh .lbm{color:var(--ac)}
.lbpod{max-width:680px}.lbp.p1 .lbst{height:104px}.lbp.p2 .lbst{height:74px}.lbp.p3 .lbst{height:54px}
@media(max-width:560px){.lbsort button{flex:1 1 auto;padding:8px 6px;font-size:11.5px}}
/* Diamant : le cadre irisé s'arrête net autour des deux encoches (plus de liseré sous les trous) */
.tk.k6:after{
 -webkit-mask:radial-gradient(circle at calc(100% - var(--stub) - 1px) 0,transparent 14px,#000 14.5px),radial-gradient(circle at calc(100% - var(--stub) - 1px) 100%,transparent 14px,#000 14.5px),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:source-in,source-in,xor;
 mask:radial-gradient(circle at calc(100% - var(--stub) - 1px) 0,transparent 14px,#000 14.5px),radial-gradient(circle at calc(100% - var(--stub) - 1px) 100%,transparent 14px,#000 14.5px),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:intersect,intersect,exclude}
/* ===================== quêtes du joueur ===================== */
.qbtn{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 10px;border:0;border-radius:999px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer;flex:none;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.qbtn[hidden]{display:none}.qbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qbtn.on{box-shadow:inset 0 0 0 1px var(--ac);color:var(--ac)}
.tr .qbtn .nb{position:absolute;top:-4px;right:-5px;box-shadow:0 0 0 2px var(--bg)}
.qbtn.ring{box-shadow:inset 0 0 0 1px #f5c54266,0 0 18px -4px #f5c54288}.qbtn.ring svg{color:#f5c542}
@media(max-width:1180px){.qbtn{width:36px;padding:0;justify-content:center}.qbtn span{display:none}}
.mcoin.qbig{width:34px;height:34px}
body[data-view=quests] main{max-width:1240px}
.qhd{margin-bottom:18px}
/* onglets */
.qtabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.qtab{position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;border:0;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);text-align:left;cursor:pointer;transition:box-shadow .15s,background .15s}
.qtab:hover{background:#16161a}.qtab.on{background:linear-gradient(120deg,#ff5a1f1f,#121215 70%);box-shadow:inset 0 0 0 1.5px var(--ac)}
.qtt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.qtt b{font:800 17px var(--sans)}.qtt small{font-size:12px;color:var(--mut)}.qtt small span{color:var(--fg);font-variant-numeric:tabular-nums}
.qtc{font:700 13px var(--mono);color:var(--mut)}.qtc i{font-style:normal;font-size:20px;color:var(--fg)}
.qtab .nb{position:absolute;top:-6px;right:-6px}
/* grille : quêtes à gauche, récompenses à droite */
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.qlist{display:flex;flex-direction:column;gap:10px}
.qrow{--qc:#60a5fa;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);cursor:pointer;transition:box-shadow .15s,background .15s,transform .15s;outline:none}
.qrow:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--qc);opacity:.85}
.qrow:hover{background:#16161a}.qrow:focus-visible{box-shadow:inset 0 0 0 2px var(--qc)}
.qrow.sel{background:linear-gradient(100deg,color-mix(in srgb,var(--qc) 13%,#121215),#121215 60%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--qc) 70%,transparent)}
.qrow.done{box-shadow:inset 0 0 0 1.5px #f5c54299}.qrow.done.sel{box-shadow:inset 0 0 0 2px #f5c542}
.qrow.claimed{opacity:.55}.qrow.claimed .qlab{text-decoration:line-through;text-decoration-color:#ffffff40}
.qic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--qc) 16%,#17171b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qc) 40%,transparent);color:var(--qc)}
.qic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qic.qbig{width:64px;height:64px;border-radius:18px}.qic.qbig svg{width:32px;height:32px}
.qmain{min-width:0;display:flex;flex-direction:column;gap:6px}
.qlab{font:700 15.5px/1.25 var(--sans)}
.qdf{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}.qdf b{color:var(--qc);font-weight:800}
.qdg{position:relative;width:46px;height:5px;border-radius:9px;background:#ffffff12;overflow:hidden}.qdg>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--qc)}
.qpr{display:flex;align-items:center;gap:10px}.qpr small{font:700 12px var(--mono);color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.qbar{position:relative;flex:1;height:8px;border-radius:9px;background:#ffffff0d;overflow:hidden;max-width:340px}.qbar>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--qc) 70%,#fff 0%),var(--qc));transition:width .5s}
.qrow.done .qbar>i,.qsel .qbar>i{background:linear-gradient(90deg,#fbbf24,#fde68a)}
.qbar.qbig{height:10px;max-width:none}
.qrw{display:flex;flex-direction:column;align-items:flex-end;gap:9px;min-width:150px}
.qrwl{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 10px}
.qmc{display:inline-flex;align-items:center;gap:5px;font:800 14px var(--sans);font-variant-numeric:tabular-nums}
.qpct{font:700 12px var(--mono);color:var(--mut)}
.qok{display:inline-flex;align-items:center;gap:5px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4ade80}.qok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.qnote{margin:6px 4px 0;font-size:12.5px;color:var(--mut)}
/* colonne des récompenses */
.qside{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.qsel{--qc:#60a5fa;padding:20px;border-radius:14px;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--qc) 16%,transparent),transparent 60%),#121215;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qc) 35%,var(--ln))}
.qsh{display:flex;align-items:center;gap:14px}.qsh>div{min-width:0}.qsh small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}.qsh b{display:block;margin-top:4px;font:800 18px/1.25 var(--sans)}
.qgauge{margin:20px 0 4px}
.qgt{display:flex;align-items:baseline;gap:10px}.qgt span{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.qgt b{font:900 30px/1 var(--sans);color:var(--qc);font-variant-numeric:tabular-nums}.qgt b small{font-size:13px;color:var(--mut);font-weight:700}
.qgt em{margin-left:auto;padding:3px 10px;border-radius:999px;font:800 11.5px var(--sans);font-style:normal;color:var(--qc);background:color-mix(in srgb,var(--qc) 15%,transparent)}
.qgb{position:relative;height:10px;margin-top:12px;border-radius:9px}
.qgz{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#34d399 0 14%,#60a5fa 15% 29%,#c084fc 30% 59%,#fb923c 60% 84%,#f5c542 85%);opacity:.9}
.qgm{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 4px var(--qc),0 4px 12px #000a}
.qgl{position:relative;height:16px;margin-top:6px;font:700 10px var(--mono);color:var(--mut)}.qgl span{position:absolute;left:0;transform:translateX(-50%)}.qgl span:first-child{transform:none}.qgl span:last-child{transform:translateX(-100%)}
.qrbig{margin-top:18px;padding:16px;border-radius:12px;background:#0d0d10;box-shadow:inset 0 0 0 1px var(--ln)}
.qrbig>small,.qwin>small{display:block;margin-bottom:12px;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.qrbi{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.qmed{display:inline-flex;align-items:center;gap:10px}.qmed>span{display:flex;flex-direction:column;font-size:11.5px;color:var(--mut)}.qmed b{font:900 24px/1 var(--sans);color:var(--fg);font-variant-numeric:tabular-nums}
.qpk{display:inline-flex;align-items:center;gap:10px}.qpk>span{display:flex;flex-direction:column;font-size:11.5px;color:var(--mut)}.qpk>span b{font:800 15px var(--sans);color:var(--fg)}
.qpkb{position:relative;display:grid;place-items:center;width:34px;height:46px;border-radius:5px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 80%,#fff),var(--pc) 45%,color-mix(in srgb,var(--pc) 55%,#000));box-shadow:0 6px 14px -4px color-mix(in srgb,var(--pc) 60%,transparent),inset 0 0 0 1px #ffffff40;transform:rotate(-6deg)}
.qpkb:before{content:"";position:absolute;left:0;right:0;top:6px;height:3px;background:repeating-linear-gradient(90deg,#0004 0 3px,transparent 3px 5px)}
.qpkb b{font:900 11px var(--sans);color:#0b0906}
.qsp{display:flex;align-items:center;gap:12px;margin-top:16px}.qsp span{font:700 13px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.qgo{margin-top:16px}
.qhint{margin:14px 0 0;font-size:13px;color:var(--mut);line-height:1.45}
.qsdone{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;height:46px;border-radius:10px;background:#4ade8014;color:#4ade80;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}.qsdone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
.qsum{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.qsum.on{background:linear-gradient(120deg,#f5c5421a,#121215 70%);box-shadow:inset 0 0 0 1px #f5c54266}
.qsum small{display:block;margin-bottom:8px;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}.qsum p{margin:0;font-size:13px}
.qsr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.qchest{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.qchest.ready{background:linear-gradient(120deg,#ff5a1f24,#121215 70%);box-shadow:inset 0 0 0 1.5px var(--ac),0 0 30px -12px var(--ac)}
.qchest.open{opacity:.6}
.qcm{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}.qcm b{font:800 14.5px var(--sans)}
.qpips{display:flex;align-items:center;gap:5px}.qpips i{width:18px;height:6px;border-radius:9px;background:#ffffff14}.qpips i.on{background:var(--ac)}.qpips small{margin-left:6px;font-size:11.5px;color:var(--mut)}
/* coffre dessiné */
.qbox{position:relative;flex:none;width:52px;height:44px;margin-top:6px;border-radius:6px 6px 8px 8px;background:linear-gradient(180deg,#b45309,#7c2d12);box-shadow:inset 0 0 0 2px #fbbf2466,0 8px 16px -6px #000}
.qbox:before{content:"";position:absolute;left:-3px;right:-3px;top:-8px;height:18px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,#d97706,#92400e);box-shadow:inset 0 0 0 2px #fbbf2488;transform-origin:10% 100%;transition:transform .4s}
.qbox>i{position:absolute;left:50%;top:6px;width:12px;height:14px;transform:translateX(-50%);border-radius:3px;background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 0 0 2px #78350f;z-index:1}
.qchest.ready .qbox{animation:qwob 2.4s ease-in-out infinite}.qchest.ready .qbox:after{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,#fbbf2455,transparent 65%);z-index:-1}
.qchest.open .qbox:before{transform:rotate(-24deg) translateY(-4px)}
@keyframes qwob{0%,80%,100%{transform:none}84%{transform:rotate(-5deg)}88%{transform:rotate(5deg)}92%{transform:rotate(-3deg)}}
.qwin{display:flex;flex-direction:column;gap:14px}.qwin .qrbi{padding:16px;border-radius:12px;background:#0d0d10;box-shadow:inset 0 0 0 1px var(--ln)}
@media(max-width:1000px){
 .qgrid{grid-template-columns:1fr}.qside{position:static;order:-1}
 .qsel .qgauge,.qsel .qhint{display:none}.qsel .qrbig{margin-top:14px}
}
@media(max-width:560px){
 .qtabs{gap:8px}.qtab{flex-direction:column;align-items:flex-start;gap:6px;padding:12px}.qtt b{font-size:15px}.qtt small{font-size:11px}.qtc{position:absolute;top:12px;right:12px}.qtc i{font-size:16px}
 .qrow{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:14px}.qic{width:42px;height:42px;border-radius:11px}.qic svg{width:21px;height:21px}
 .qrw{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-width:0;padding-top:10px;border-top:1px solid #ffffff0a}
 .qrwl{justify-content:flex-start}.qlab{font-size:14.5px}.qbar{max-width:none}
 .qsel{padding:16px}.qsh b{font-size:16px}.qic.qbig{width:52px;height:52px}.qmed b{font-size:20px}
}
/* ===================== Arène ===================== */
body[data-view=duel] main{max-width:1240px}
.arhd{margin-bottom:16px}
/* écusson de rang */
.arbg{--lc:#d08a52;position:relative;display:inline-grid;place-items:center;flex:none;width:30px;height:34px;color:#0b0906;font-style:normal;vertical-align:middle}
.arbs{position:absolute;inset:0;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);background:linear-gradient(160deg,color-mix(in srgb,var(--lc) 55%,#fff),var(--lc) 45%,color-mix(in srgb,var(--lc) 45%,#000));box-shadow:inset 0 0 0 2px #ffffff40}
.arbs:after{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(160deg,#ffffff40,transparent 50%)}
.arbg b{position:relative;font:900 11px var(--sans);letter-spacing:.02em;margin-top:-2px}
.arbg svg{position:relative;width:52%;height:52%;fill:none;stroke:#0b1220;stroke-width:2;stroke-linejoin:round;margin-top:-2px}
.arbg.sm{width:18px;height:21px;margin-right:6px}.arbg.sm b{font-size:7.5px}
.arbg.md{width:46px;height:52px}.arbg.md b{font-size:15px}
.arbg.xl{width:92px;height:104px;filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--lc) 45%,transparent))}.arbg.xl b{font-size:28px}
@keyframes arglow{50%{filter:drop-shadow(0 10px 28px #67e8f9aa)}}
/* bandeau du joueur */
.arh{--lc:#d08a52;display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(220px,.8fr);align-items:center;gap:28px;padding:22px 26px;border-radius:16px;
 background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--lc) 18%,transparent),transparent 60%),#121215;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 35%,var(--ln))}
.arme{display:flex;align-items:center;gap:22px;min-width:0}.armi{min-width:0;flex:1}
.armi small,.aren small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.armi>b{display:block;margin:4px 0 2px;font:900 30px/1.05 var(--sans);letter-spacing:-.02em;color:var(--lc)}
.armi>span{font-size:13px;color:var(--mut)}.armi>span em{font:800 16px var(--sans);font-style:normal;color:var(--fg);font-variant-numeric:tabular-nums}
.arnx{margin-top:12px;max-width:360px}.arnx small{display:block;margin-top:6px;font:500 12px var(--sans);letter-spacing:0;text-transform:none}.arnx small b{color:var(--fg)}
.arbar{display:block;height:8px;border-radius:9px;background:#ffffff10;overflow:hidden}.arbar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--lc) 70%,#000),var(--lc))}
.arst{display:grid;grid-template-columns:repeat(2,auto);gap:12px 26px}.arst div{display:flex;flex-direction:column}.arst b{font:800 20px var(--sans);font-variant-numeric:tabular-nums}.arst small{font-size:11.5px;color:var(--mut)}
.aren{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:12px;background:#0d0d10;box-shadow:inset 0 0 0 1px var(--ln)}
.arpips{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}.arpips i{height:14px;border-radius:3px;background:#ffffff10;transform:skewX(-12deg)}
.arpips i.on{background:linear-gradient(180deg,#ffb36b,#ff5a1f);box-shadow:0 0 10px -2px #ff5a1f88}
.aren>span{font-size:12.5px;color:var(--mut)}.aren>span b{font:800 16px var(--sans);color:var(--fg)}.aren em{font-style:normal;color:var(--fg);font-variant-numeric:tabular-nums}
.aren.arz{box-shadow:inset 0 0 0 1px #ef444455}
/* onglets */
.artabs{display:flex;gap:4px;margin:18px 0 16px;padding:4px;border-radius:999px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.artabs::-webkit-scrollbar{display:none}
.artabs button{flex:none;padding:9px 16px;border:0;border-radius:999px;background:none;color:var(--mut);font:700 13px var(--sans);cursor:pointer;white-space:nowrap}
.artabs button:hover{color:var(--fg)}.artabs button.on{background:var(--ac);color:#140804}
/* combat */
.argrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.arcol .sh2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.aros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.aro{--lc:#d08a52;display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 10%,#121215),#121215 55%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 30%,var(--ln));transition:transform .15s,box-shadow .15s}
.aro:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 60%,var(--ln)),0 14px 30px -18px #000}
.aro.used{opacity:.5}
.arot{display:flex;align-items:center;gap:12px;min-width:0}.aroi{min-width:0}
.av.arav{width:46px;height:46px;font-size:18px}
.aroi b{display:block;font:800 15.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aroi span{display:flex;align-items:center;margin-top:3px;font-size:12px;color:var(--mut);white-space:nowrap}
.arop{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:#0d0d10}
.arop div{display:flex;flex-direction:column;gap:5px}.arop small{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.arop b{font:800 17px var(--sans);font-variant-numeric:tabular-nums}
.arrp{display:flex;gap:4px;align-items:center;height:20px}.arrp i{width:12px;height:12px;border-radius:2px;transform:rotate(45deg);background:var(--c);box-shadow:0 0 8px -2px var(--c)}.arrp i.a{border-radius:50%;transform:none;margin-left:4px}
.arog{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}.arog b{font-weight:800}.arog .w b{color:#4ade80}.arog .l b{color:#f87171}
.aro .k{width:100%}
.aroused{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}.aroused svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.arnote{margin-top:10px}
.arwarn{margin-bottom:18px;padding:18px;border-radius:14px;background:linear-gradient(120deg,#ff5a1f22,#121215 70%);box-shadow:inset 0 0 0 1.5px var(--ac)}
.arwarn b{font:800 17px var(--sans)}.arwarn p{margin:6px 0 14px;color:var(--mut);font-size:13.5px;line-height:1.45}.arwarn .row{gap:10px;flex-wrap:wrap}
.arcol.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.ardef,.arlog{padding:16px;border-radius:14px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.ardef .row{gap:8px;margin:12px 0 8px}.ardef p{margin:0}
.ardcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ardc{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.ardc .mc{width:100%}.ardc small{font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ardc.sup small{color:#c084fc}
.arlog{max-height:520px;overflow:auto}
.arl{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 0;border-top:1px solid #ffffff08}
.arl:first-of-type{border-top:0}
.arli{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#ffffff08}.arli svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.arl.win .arli{color:#4ade80;background:#4ade8014}.arl.lose .arli{color:#f87171;background:#f8717114}
.arl.def.win .arli{color:#f87171;background:#f8717114}.arl.def.lose .arli{color:#4ade80;background:#4ade8014}
.arlm{min-width:0}.arlm b{display:block;font:700 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arlm span{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--mut)}
.arlm .wstars{display:inline-flex;gap:1px}.arlm .wstars i{width:11px;height:11px}.arlm .wstars i.on{color:#fbbf24}
.ard{font:800 15px var(--sans);font-style:normal;font-variant-numeric:tabular-nums;color:var(--mut)}.ard.up{color:#4ade80}.ard.down{color:#f87171}
.arla{grid-column:2/-1;display:flex;gap:6px}
.arres .up{color:#4ade80}.arres .down{color:#f87171}
/* classement */
.arrme{margin-bottom:12px;padding:12px 16px;border-radius:12px;background:linear-gradient(100deg,#ff5a1f1c,#121215 60%);box-shadow:inset 0 0 0 1px #ff5a1f40;font-size:13.5px}
.arrtab{border-radius:14px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}
.arrh,.arw{display:grid;grid-template-columns:44px 36px minmax(0,1fr) 170px 100px;align-items:center;gap:0 12px;padding:0 18px}
.arrh{height:40px;font:700 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--ln)}.arrh span:last-child{text-align:right}
.arw{height:60px;text-decoration:none;color:var(--fg);border-bottom:1px solid #ffffff08}.arw:last-child{border-bottom:0}.arw:hover{background:#ffffff06}
.arw.me{background:linear-gradient(90deg,#ff5a1f1c,#ff5a1f06 60%);box-shadow:inset 3px 0 0 var(--ac)}
.arrn{font:800 15px var(--sans);text-align:center;color:var(--mut);font-variant-numeric:tabular-nums}.arw.art1 .arrn{color:#f5c542}.arw.art2 .arrn{color:#cbd5e1}.arw.art3 .arrn{color:#d08a52}
.arrg{min-width:0}.arrg b{display:block;font:700 14.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrg small{font-size:11.5px;color:var(--mut)}
.arw.me .arrg b{color:var(--ac)}
.arrt{display:flex;align-items:center;font-size:13px;white-space:nowrap}
.arrp2{display:flex;flex-direction:column;align-items:flex-end}.arrp2 b{font:800 16px var(--sans);font-variant-numeric:tabular-nums}.arrp2 small{font-size:10.5px;color:var(--mut)}
/* ligues */
.arlgs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.arlg{--lc:#d08a52;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px 16px;border-radius:14px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 12%,#121215),#121215 60%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 25%,var(--ln))}
.arlg.on{box-shadow:inset 0 0 0 2px var(--lc),0 0 30px -12px var(--lc)}.arlg.done{opacity:.75}
.arlg>b{font:800 17px var(--sans);color:var(--lc)}.arlg>small{font-size:11.5px;color:var(--mut);line-height:1.35}
.arlgr{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--mut)}
.arlg em{position:absolute;top:10px;right:10px;font:700 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--lc)}.arlg em.ok{display:flex;align-items:center;gap:3px;color:#4ade80}.arlg em svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6}
.arrules{margin-top:18px;padding:20px 22px;border-radius:14px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.arrules h2{margin:0 0 10px;font:800 17px var(--sans)}.arrules ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px;color:#c9c9cf;font-size:13.5px;line-height:1.5}
@media(max-width:1100px){.arh{grid-template-columns:1fr auto;gap:18px}.aren{grid-column:1/-1}.argrid{grid-template-columns:1fr}.arcol.side{position:static}.arlgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.aros{grid-template-columns:1fr}.aro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}.aro .arot{grid-column:1/-1}.aro .arop{grid-column:1/-1}.aro .arog{grid-column:1;flex-direction:column;gap:2px;justify-content:center}.aro .k,.aro .aroused{grid-column:2;width:auto;align-self:center}}
@media(max-width:560px){
 .arh{grid-template-columns:1fr;padding:18px;gap:16px}.arme{gap:16px}.arbg.xl{width:70px;height:80px}.arbg.xl b{font-size:22px}.armi>b{font-size:24px}
 .arst{grid-template-columns:repeat(4,1fr);gap:8px}.arst b{font-size:17px}.arst small{font-size:10.5px}
 .artabs{width:100%}.artabs button{padding:8px 12px;font-size:12px}
 .ardcs{gap:6px}.arlgs{grid-template-columns:repeat(2,minmax(0,1fr))}.arlg:last-child{grid-column:1/-1}
 .arrh,.arw{grid-template-columns:30px 32px minmax(0,1fr) 76px;padding:0 12px}.arrt span{display:none}.arrh span:nth-child(4){display:none}.arrt{justify-content:flex-end}
 .arw .arrt{display:none}.arrh,.arw{grid-template-columns:30px 32px minmax(0,1fr) 80px}
}
/* Médiators gagnés à la révélation */
.slot .medp{position:absolute;left:50%;bottom:-13px;z-index:6;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 5px;border-radius:999px;transform:translateX(-50%);
 background:#0d0d10;box-shadow:0 0 0 1px #a855f766,0 6px 14px -4px #000;font:800 12px var(--sans);font-style:normal;color:#e9d5ff;white-space:nowrap;pointer-events:none;animation:medp .5s cubic-bezier(.2,1.6,.4,1) both}
.slot .medp .mcoin{width:15px;height:15px}
.slot .medp.k4{box-shadow:0 0 0 1px #fbbf24aa,0 0 16px -2px #fbbf2499;color:#fde68a}
.slot .medp.k5{box-shadow:0 0 0 1px #ef4444aa,0 0 18px -2px #ef444499;color:#fecaca}
.slot .medp.k6{box-shadow:0 0 0 1.5px #a5f3fc,0 0 22px #67e8f9aa;color:#e0f2fe;font-size:13px}
@keyframes medp{from{opacity:0;transform:translate(-50%,10px) scale(.6)}}
/* Arène v2 : riposte, bouclier, montée de rang */
.arfight #wfm .wfc .wfhp{margin-top:6px}
.arfight .wfc.arrip .slot{box-shadow:0 0 0 2px #f87171,0 0 24px -4px #ef4444;border-radius:10px}
.arfight .dmg.arripd{color:#fca5a5}
.arshc{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px 2px 6px;border-radius:999px;font:700 10.5px var(--sans);font-style:normal;vertical-align:2px;color:var(--mut);background:#ffffff0a;box-shadow:inset 0 0 0 1px var(--ln)}
.arshc svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2}
.arshc.on{color:#7dd3fc;background:#38bdf814;box-shadow:inset 0 0 0 1px #38bdf855}
.arres .arsh{display:flex;align-items:center;justify-content:center;gap:6px;color:#7dd3fc;font-size:13px}.arres .arsh svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;flex:none}
/* montée de rang */
.arup{--lc:#f5c542;--lc0:#d08a52;position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;animation:arupin .3s ease-out}
.arup.out{animation:arupout .3s ease-in forwards}
@keyframes arupin{from{opacity:0}}@keyframes arupout{to{opacity:0}}
.arupb{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--lc) 22%,#000c),#000e 60%);backdrop-filter:blur(4px)}
.arupc{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:420px}
.arupc>small{font:800 11px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--lc);opacity:0;animation:arupt .5s .2s ease-out forwards}
.arupc>b{font:900 44px/1 var(--sans);letter-spacing:-.02em;color:var(--lc);text-shadow:0 0 30px color-mix(in srgb,var(--lc) 60%,transparent);opacity:0;transform:scale(.7)}
.arupf{font:700 13px var(--mono);color:#ffffffaa;opacity:0}
.arupc>p{margin:4px 0 0;color:#ffffffcc;font-size:14px;line-height:1.5;opacity:0}
.arupr{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px;padding:12px 18px;border-radius:12px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1a;opacity:0}
.arupr small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#ffffff99}
.arupc .k{margin-top:10px;opacity:0;min-width:200px}
.arupbg{position:relative;width:150px;height:170px;display:grid;place-items:center;margin:8px 0}
.arupbg>span{position:absolute;inset:0;display:grid;place-items:center}
.arupbg .arbg.xl{width:120px;height:136px}.arupbg .arbg.xl b{font-size:36px}
.arupbg .new{opacity:0;transform:scale(.4)}
.arup.go .arupbg .old{animation:arupold .5s ease-in forwards}
.arup.go .arupbg .new{animation:arupnew .7s cubic-bezier(.2,1.6,.4,1) .15s forwards}
.arup.go .arupc>b{animation:arupnew .6s cubic-bezier(.2,1.6,.4,1) .45s forwards}
.arup.go .arupf,.arup.go .arupc>p,.arup.go .arupr,.arup.go .arupc .k{animation:arupt .5s .8s ease-out forwards}
@keyframes arupold{60%{transform:scale(1.15);filter:brightness(2)}to{transform:scale(.2) rotate(-25deg);opacity:0}}
@keyframes arupnew{to{opacity:1;transform:none}}
@keyframes arupt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* nouvelle ligue : rayons qui tournent, onde de choc, écusson qui tombe du haut */
.aruprays{position:absolute;left:50%;top:45%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;opacity:0;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--lc) 30%,transparent) 0 6deg,transparent 6deg 18deg);
 -webkit-mask:radial-gradient(circle,#000 0,transparent 45%);mask:radial-gradient(circle,#000 0,transparent 45%);animation:arupr 14s linear infinite}
.arup.go .aruprays{animation:arupr 14s linear infinite,arupfade .8s ease-out forwards}
@keyframes arupr{to{transform:rotate(360deg)}}@keyframes arupfade{to{opacity:1}}
.arupwave{position:absolute;left:50%;top:45%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;box-shadow:0 0 0 3px var(--lc),0 0 40px var(--lc);opacity:0}
.arup.go .arupwave{animation:arupw 1.1s .2s ease-out forwards}
@keyframes arupw{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(60)}}
.arup.major .arupbg .arbg.xl{width:150px;height:170px}.arup.major .arupbg .arbg.xl b{font-size:44px}
.arup.major.go .arupbg .new{animation:arupdrop .9s cubic-bezier(.3,1.5,.5,1) .2s forwards}
@keyframes arupdrop{0%{opacity:0;transform:translateY(-60vh) scale(1.6)}60%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:1;transform:none}}
.arup.major .arupc>b{font-size:56px}
.arup.major .arupbg .arbg.xl{animation:arupglow 2s ease-in-out 1.2s infinite}
@keyframes arupglow{50%{filter:drop-shadow(0 0 40px var(--lc)) brightness(1.15)}}
@media(prefers-reduced-motion:reduce){.aruprays,.arup.major .arupbg .arbg.xl{animation:none!important}}
/* vente des doublons */
.dups{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.dup{--c:#9ca3af;display:grid;grid-template-columns:auto 10px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);cursor:pointer}
.dup.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 7%,#121215)}
.dup input{width:18px;height:18px;accent-color:var(--ac)}.dup>i{width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:var(--c)}
.dup b{font:700 14px var(--sans);color:var(--c)}.dup span{font-size:12px;color:var(--mut);white-space:nowrap}.dup em{display:inline-flex;align-items:center;gap:4px;font:800 14px var(--sans);font-style:normal}
@media(max-width:480px){.dup{grid-template-columns:auto 10px minmax(0,1fr) auto}.dup span{grid-column:3;grid-row:2;margin-top:-6px}}
/* riposte : la carte de défense plonge vers la tienne, la tienne encaisse */
.arfight #wff .wfc .slot{transition:transform .15s}
.arfight #wff .wfc.atk .slot{transform:translateY(34px) scale(1.06)}
.arfight #wfm .wfc.hit .slot{animation:bhit .2s}
/* récompenses de rang */
.ardly{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px 4px 6px;border-radius:999px;background:#a855f714;box-shadow:inset 0 0 0 1px #a855f744;font-size:12px;color:#e9d5ff}
.ardly b{font-weight:800;color:#fff}.ardly.off{opacity:.65}
.arrws{margin-bottom:18px;padding:18px 20px;border-radius:14px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}
.arrws .sh2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.arrwg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.arrw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0d0d10;box-shadow:inset 0 0 0 1px var(--ln)}
.arrw b{flex:1;min-width:0;font:700 13.5px var(--sans);white-space:nowrap}.arrw>span{display:flex;gap:6px}
.arrw em{display:inline-flex;align-items:center;gap:3px;font:700 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#4ade80}.arrw em svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6}
.arrw.got{opacity:.6}
.arrwi{display:grid;place-items:center;width:22px;height:22px;color:var(--ac)}.arrwi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.ardaily{margin-top:16px;padding-top:14px;border-top:1px solid var(--ln)}.ardaily>b{display:block;font:800 15px var(--sans)}.ardaily>span{display:block;margin:4px 0 10px;font-size:12.5px;color:var(--mut)}
.ardg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ardg>span{--lc:#d08a52;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:10px;background:color-mix(in srgb,var(--lc) 8%,#0d0d10);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 25%,transparent);font:700 12px var(--sans);color:var(--lc)}
.ardg>span.on{box-shadow:inset 0 0 0 2px var(--lc)}.ardg b{display:inline-flex;align-items:center;gap:4px;font:800 14px var(--sans);color:var(--fg)}
.ardg .arbg.sm{margin:0}
@media(max-width:560px){.ardg{grid-template-columns:repeat(3,minmax(0,1fr))}.arrwg{grid-template-columns:1fr}}
.arrw>span{flex:none}
.arpk{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--sans);font-style:normal;color:var(--pc);white-space:nowrap}
.arpk>i{width:12px;height:16px;border-radius:2px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 70%,#fff),var(--pc) 50%,color-mix(in srgb,var(--pc) 60%,#000));transform:rotate(-6deg);box-shadow:0 2px 6px -2px var(--pc)}
.arrwg{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* ===== nouvelle ligue : mise en scène ===== */
.lvup{--lc:#f5c542;--lc0:#cbd5e1;position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:24px;overflow:hidden}
.lvup.out{animation:lvout .35s ease-in forwards}@keyframes lvout{to{opacity:0}}
.lvbg{position:absolute;inset:0;background:#030304;opacity:0;transition:opacity .35s}
.lvbg:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--lc) 16%,transparent),transparent 70%);opacity:0;transition:opacity 1s .9s}
.lvup.go .lvbg{opacity:.94}.lvup.go .lvbg:after{opacity:1}
.lvflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.lvup.go .lvflash{animation:lvflash .7s 1.2s ease-out}
@keyframes lvflash{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}
.lvstage{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.lvmark{position:relative;width:250px;height:250px;display:grid;place-items:center}
.lvmark>*{position:absolute}
/* cadrans gradués (sillons de vinyle) */
.lvdial{inset:0;width:100%;height:100%;fill:none;stroke:color-mix(in srgb,var(--lc) 70%,#fff);stroke-width:1;opacity:0}
.lvdial.b circle{stroke-width:.6;opacity:.5}
.lvup.go .lvdial{animation:lvin .8s 1.3s ease-out forwards,lvspin 40s 1.3s linear infinite}
.lvup.go .lvdial.b{animation:lvin .8s 1.45s ease-out forwards,lvspin 60s 1.45s linear infinite reverse}
@keyframes lvin{from{opacity:0;transform:scale(.85)}to{opacity:.55}}
@keyframes lvspin{to{rotate:360deg}}
/* l'ancien écusson se charge */
.lvcharge{inset:0;width:100%;height:100%;fill:none;stroke:var(--lc0);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);opacity:0}
.lvup.go .lvcharge{animation:lvcharge 1s .25s cubic-bezier(.5,0,.3,1) forwards}
@keyframes lvcharge{0%{opacity:1;stroke-dashoffset:100}85%{opacity:1;stroke-dashoffset:0;stroke:var(--lc0)}100%{opacity:0;stroke-dashoffset:0;stroke:#fff}}
.lvold{display:grid;place-items:center;opacity:0}
.lvold .arbg.xl{width:120px;height:136px;filter:none}.lvold .arbg.xl b{font-size:34px}
.lvold.l{clip-path:polygon(0 0,53% 0,47% 100%,0 100%)}.lvold.r{clip-path:polygon(53% 0,100% 0,100% 100%,47% 100%)}
.lvup.go .lvold{animation:lvold 1.25s ease-in forwards}
.lvup.go .lvold.l{animation-name:lvoldl}.lvup.go .lvold.r{animation-name:lvoldr}
@keyframes lvoldl{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:none}80%{opacity:1;transform:none;filter:brightness(1.6)}100%{opacity:0;transform:translate(-46px,18px) rotate(-14deg);filter:brightness(2)}}
@keyframes lvoldr{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:none}80%{opacity:1;transform:none;filter:brightness(1.6)}100%{opacity:0;transform:translate(46px,18px) rotate(14deg);filter:brightness(2)}}
/* onde unique */
.lvwave{width:120px;height:120px;border-radius:50%;box-shadow:0 0 0 2px var(--lc);opacity:0}
.lvup.go .lvwave{animation:lvwave 1.1s 1.22s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes lvwave{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(4.2)}}
.lvglow{width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lc) 40%,transparent),transparent 62%);opacity:0;filter:blur(6px)}
.lvup.go .lvglow{animation:lvglow 1s 1.25s ease-out forwards,lvbreath 3.2s 2.3s ease-in-out infinite}
@keyframes lvglow{to{opacity:.9}}@keyframes lvbreath{50%{opacity:.55}}
/* le nouvel écusson se pose, puis un reflet métallique le traverse */
.lvnew{display:grid;place-items:center;opacity:0}
.lvnew .arbg.xl{width:150px;height:170px;filter:drop-shadow(0 16px 30px #000c) drop-shadow(0 0 26px color-mix(in srgb,var(--lc) 55%,transparent))}.lvnew .arbg.xl b{font-size:44px}
.lvup.go .lvnew{animation:lvnew .9s 1.22s cubic-bezier(.16,1.3,.3,1) forwards}
@keyframes lvnew{0%{opacity:0;transform:scale(1.35)}100%{opacity:1;transform:none}}
.lvsheen{position:absolute;left:50%;top:50%;width:150px;height:170px;margin:-85px 0 0 -75px;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);
 background:linear-gradient(105deg,transparent 35%,#ffffffcc 48%,#ffffff 50%,#ffffffcc 52%,transparent 65%) 0 0/300% 100%;background-position:120% 0;mix-blend-mode:overlay;pointer-events:none}
.lvup.go .lvsheen{animation:lvsheen 1.1s 1.9s ease-in-out forwards,lvsheen2 4s 4s ease-in-out infinite}
@keyframes lvsheen{to{background-position:-60% 0}}@keyframes lvsheen2{0%,70%{background-position:120% 0}100%{background-position:-60% 0}}
/* typographie */
.lvtxt{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px}
.lvtxt small{font:700 10.5px var(--mono);letter-spacing:.42em;text-transform:uppercase;color:color-mix(in srgb,var(--lc) 80%,#fff);opacity:0}
.lvup.go .lvtxt small{animation:lvfade .6s 1.7s ease-out forwards}
.lvtxt h2{margin:0;font:800 64px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding-left:.14em;
 background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--lc) 60%,#fff) 45%,var(--lc) 60%,color-mix(in srgb,var(--lc) 55%,#000) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 clip-path:inset(0 100% 0 0);filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--lc) 35%,transparent))}
.lvup.go .lvtxt h2{animation:lvwipe .9s 1.75s cubic-bezier(.6,0,.2,1) forwards}
@keyframes lvwipe{to{clip-path:inset(0 0 0 0)}}
.lvrule{display:block;width:0;height:1px;background:linear-gradient(90deg,transparent,var(--lc),transparent)}
.lvup.go .lvrule{animation:lvrule .8s 2.2s ease-out forwards}@keyframes lvrule{to{width:260px}}
.lvfrom{display:inline-flex;align-items:center;gap:10px;font:600 13px var(--mono);letter-spacing:.06em;color:#ffffff8c;opacity:0}.lvfrom em{font-style:normal;color:var(--lc)}
.lvtxt p{margin:0;font-size:13.5px;color:#ffffffb3;opacity:0}
.lvrw{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;opacity:0}.lvrw>small{animation:none!important;opacity:.7!important;letter-spacing:.3em}
.lvrw>div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lvr{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:10px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff1c;font-size:13px;color:#ffffffcc}
.lvr>i{width:16px;height:22px;border-radius:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 70%,#fff),var(--pc) 50%,color-mix(in srgb,var(--pc) 55%,#000));box-shadow:0 4px 12px -3px var(--pc);transform:rotate(-6deg)}
.lvr b{font:800 15px var(--sans);color:#fff}
.lvtxt .k{margin-top:8px;min-width:220px;opacity:0}
.lvup.go .lvfrom{animation:lvfade .6s 2.35s ease-out forwards}.lvup.go .lvtxt p{animation:lvfade .6s 2.5s ease-out forwards}
.lvup.go .lvrw{animation:lvfade .6s 2.7s ease-out forwards}.lvup.go .lvtxt .k{animation:lvfade .6s 3s ease-out forwards}
@keyframes lvfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:560px){.lvmark{width:210px;height:210px}.lvtxt h2{font-size:46px}.lvnew .arbg.xl{width:124px;height:140px}.lvsheen{width:124px;height:140px;margin:-70px 0 0 -62px}}
@media(prefers-reduced-motion:reduce){.lvdial,.lvglow,.lvsheen{animation-iteration-count:1!important}}
.lvbg{background:#040405;backdrop-filter:blur(10px)}.lvup.go .lvbg{opacity:.97}
.lvtxt h2{filter:none}
@keyframes lvoldl{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:none}80%{opacity:1;transform:none;filter:brightness(1.2)}100%{opacity:0;transform:translate(-46px,18px) rotate(-14deg);filter:brightness(1.4)}}
@keyframes lvoldr{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:none}80%{opacity:1;transform:none;filter:brightness(1.2)}100%{opacity:0;transform:translate(46px,18px) rotate(14deg);filter:brightness(1.4)}}
@keyframes lvflash{0%{opacity:0}8%{opacity:.5}100%{opacity:0}}
/* compositions d'attaque */
.wpre{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.wpc{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:999px;background:#18181c;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:700 12.5px var(--sans);cursor:pointer;white-space:nowrap}
.wpc:hover{background:#1f1f24}.wpc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.wpc.last{box-shadow:inset 0 0 0 1px #ff5a1f88;color:#ffb38a}
.wpc.add{color:var(--mut);box-shadow:inset 0 0 0 1px var(--ln2);background:none}.wpc.add[disabled]{opacity:.45;cursor:default}
.wpc>i{display:grid;place-items:center;width:18px;height:18px;margin-right:-4px;border-radius:50%;color:var(--mut)}.wpc>i:hover{background:#ffffff14;color:#f87171}.wpc>i svg{width:11px;height:11px}
.wpre input{flex:1;min-width:140px;height:34px;padding:0 12px;border-radius:9px;border:0;background:#0d0d10;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:600 13.5px var(--sans)}
/* ===================== boutique ===================== */
body[data-view=shop] main{max-width:1240px}
.shbtn[hidden]{display:none}.shbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.shbtn{color:#f5c542;box-shadow:inset 0 0 0 1px #f5c54255}
.shprev{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;border-radius:10px;background:#38bdf812;box-shadow:inset 0 0 0 1px #38bdf844;font-size:13px;color:#bae6fd}
.shprev svg,.shfoot svg,.shnote svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.shhd{align-items:center}.shbal2{display:flex;gap:8px}.shbal2>span{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);font:800 15px var(--sans)}
/* Pass */
.shpass{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;padding:32px;border-radius:20px;overflow:hidden;
 background:radial-gradient(120% 140% at 0% 0%,#3a2a0a,#17120a 45%,#0e0d0b),#0e0d0b;box-shadow:inset 0 0 0 1px #f5c54255,0 30px 60px -30px #000}
.shpass:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,#fde68a,#b7791f 30%,#fff7c2 50%,#b7791f 70%,#fde68a) 0 0/250% 100%;animation:foil 8s linear infinite;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.shpass:after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:repeating-radial-gradient(circle,#f5c5420d 0 1px,transparent 1px 7px);pointer-events:none}
.shpl{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.shcrown{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(160deg,#fff7c2,#f5c542 45%,#b7791f);box-shadow:0 10px 24px -8px #f5c54299}
.shcrown svg{width:28px;height:28px;fill:#3a2506}.shcrown.lg{width:56px;height:56px;flex:none}
.shpl>small{font:700 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#f5c542b0;margin-top:4px}
.shpl h2{margin:0;font:900 44px/1 var(--sans);letter-spacing:-.02em;color:#fff}.shpl h2 em{font-style:normal;background:linear-gradient(180deg,#fff7c2,#f5c542 55%,#b7791f);-webkit-background-clip:text;background-clip:text;color:transparent}
.shpl>p{margin:0;color:#e9dcc0;font-size:14.5px;line-height:1.5;max-width:440px}
.shpp{display:flex;align-items:baseline;gap:8px;margin-top:8px}.shpp b{font:900 40px/1 var(--sans);color:#fff}.shpp span{color:#e9dcc0b0;font-size:14px}
.shpb{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.shpb .k.xl{width:auto;min-width:220px;background:linear-gradient(180deg,#fde68a,#f5c542);color:#2a1a02}
.shpb .k.ghost{height:54px;color:#fde68a;box-shadow:inset 0 0 0 1px #f5c54266}.shpb .k em{margin-left:6px;padding:2px 6px;border-radius:6px;background:#f5c54226;font-style:normal;color:#fde68a}
.shpv{font-size:12px;color:#e9dcc099}
.shpon{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 14px;border-radius:10px;background:#4ade8014;color:#4ade80;font-weight:700}.shpon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
.shperks{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none;align-content:center}
.shperks li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;background:#ffffff08;box-shadow:inset 0 0 0 1px #f5c5421f}
.shperks li:last-child:nth-child(odd){grid-column:1/-1}
.shperks i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#f5c5421f;color:#fde68a}.shperks i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.shperks b{display:block;font:700 13.5px/1.3 var(--sans);color:#fff}.shperks small{display:block;margin-top:3px;font-size:11.5px;color:#e9dcc099}
/* sections */
.shsec{margin-top:26px}.shsec .sh2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.shrow2{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px}
.shbadge{position:absolute;top:12px;right:12px;padding:3px 9px;border-radius:999px;font:800 11px var(--sans);font-style:normal;color:#140804;background:var(--ac);box-shadow:0 4px 12px -4px var(--ac)}
/* bienvenue */
.shwel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shw{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 16px 16px;border-radius:16px;background:linear-gradient(180deg,#1a1410,#121215 60%);box-shadow:inset 0 0 0 1px #ff5a1f40}
.shw:nth-child(2){background:linear-gradient(180deg,#1b1022,#121215 60%);box-shadow:inset 0 0 0 1px #a855f755}.shw:nth-child(3){background:linear-gradient(180deg,#221a08,#121215 60%);box-shadow:inset 0 0 0 1px #f5c54266}
.shw.own{opacity:.55}
.shwv{display:flex;align-items:center;gap:10px}.shwv b{font:900 26px/1 var(--sans)}.shwv small{color:var(--mut);font-size:12px;align-self:flex-end;margin-bottom:3px}
.shwn{font:800 16px var(--sans)}
.shwp{display:flex;flex-direction:column;gap:5px}
.shpk{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#d4d4d8}.shpk b{color:#fff}.shpk>i{width:12px;height:16px;border-radius:2px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 70%,#fff),var(--pc) 50%,color-mix(in srgb,var(--pc) 55%,#000));transform:rotate(-6deg)}
.shpk.shleg>i{width:12px;height:16px;border-radius:2px;background:var(--pc);box-shadow:0 0 10px var(--pc)}.shpk.shleg{color:var(--pc);font-weight:700}
.shwf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}.shwf s{color:var(--mut);font-size:13px}.shwf .k{min-width:110px}
/* offre du jour */
.shdeal{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;border-radius:16px;text-align:center;background:radial-gradient(100% 80% at 50% 0%,#ff5a1f24,transparent 70%),#121215;box-shadow:inset 0 0 0 1px #ff5a1f55}
.shdp{display:flex;justify-content:center;align-items:flex-end;height:104px;padding-top:6px}.shdp .spack{grid-row:auto;width:58px;height:82px;margin:0 -9px;transform:translateY(var(--y)) rotate(var(--r));transform-origin:50% 100%;box-shadow:0 12px 22px -10px #000c,inset 0 0 0 1px #ffffff26;transition:transform .25s}.shdeal:hover .shdp .spack{transform:translateY(calc(var(--y) - 4px)) rotate(calc(var(--r) * 1.35))}
.shdeal>b{font:800 16px var(--sans)}
.shdpr{display:flex;align-items:center;gap:10px}.shdpr s{display:inline-flex;align-items:center;gap:4px;color:var(--mut)}.shdpr span{display:inline-flex;align-items:center;gap:5px;font:900 22px var(--sans)}.shdpr em{padding:2px 7px;border-radius:6px;background:#4ade801f;color:#4ade80;font:800 12px var(--sans);font-style:normal}
.shdeal .k{width:100%}
/* vinyles */
.shvin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.shv{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px 14px;border-radius:16px;text-align:center;background:linear-gradient(180deg,#16161b,#121215);box-shadow:inset 0 0 0 1px var(--ln);transition:transform .15s,box-shadow .15s}
.shv:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #ffffff2a,0 18px 30px -20px #000}
.shv.hl{background:linear-gradient(180deg,#2a140a,#121215 70%);box-shadow:inset 0 0 0 1.5px var(--ac)}
.shv .shbadge{top:-10px;right:50%;transform:translateX(50%);white-space:nowrap}
.shx2{position:absolute;top:10px;left:10px;padding:2px 7px;border-radius:6px;background:#4ade801f;color:#4ade80;font:800 10px var(--sans);font-style:normal}
.shva{margin-top:8px;font:900 22px var(--sans);font-variant-numeric:tabular-nums}.shvb{font-size:11.5px;color:#4ade80}
.shv .k{width:100%;margin-top:auto}
/* disque vinyle */
.vdisc{--n:1;position:relative;display:block;flex:none;width:calc(46px + var(--n) * 7px);aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,#ff5a1f 0 17%,#2a0f05 18% 20%,transparent 21%),repeating-radial-gradient(circle,#18181b 0 2px,#0b0b0d 2px 4px);
 box-shadow:0 10px 22px -8px #000,inset 0 0 0 2px #2a2a30,0 0 calc(var(--n) * 5px) -6px #ff5a1f}
.vdisc:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 20%,#ffffff22 25%,transparent 32% 70%,#ffffff18 75%,transparent 82%)}
.vdisc>i{position:absolute;left:50%;top:50%;width:6%;height:6%;margin:-3% 0 0 -3%;border-radius:50%;background:#0b0b0d}
.vdisc.sm{width:44px}
.shv:hover .vdisc{animation:vspin 1.6s linear infinite}@keyframes vspin{to{rotate:360deg}}
/* boosters */
.shbst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;padding:16px;border-radius:16px;background:#121215;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw) 35%,var(--ln))}
.shb .spack{width:56px;height:80px}.shb b{font:800 15px var(--sans)}.shb b em{font-style:normal;color:var(--sw)}.shb small{display:block;margin-top:4px;font-size:12px;color:var(--mut)}
.shbb{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}.shbb .k{flex:1}
.shfoot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:30px 0 10px;padding-top:18px;border-top:1px solid var(--ln);font-size:12px;color:var(--mut)}.shfoot span{display:inline-flex;align-items:center;gap:6px}
/* récapitulatif */
.shck{display:flex;flex-direction:column;gap:14px}
.shckt{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}.shckt>div{flex:1;min-width:0}.shckt b{display:block;font:800 16px var(--sans)}.shckt small{font-size:12px;color:var(--mut)}.shckt>em{font:900 20px var(--sans);font-style:normal}
.shckl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}.shckl li{display:flex;align-items:center;gap:10px;font-size:13.5px}.shckl svg{width:16px;height:16px;fill:none;stroke:#4ade80;stroke-width:2.4}
.shckl .spack.mini{width:18px;height:26px}
.shnote{display:flex;gap:10px;padding:12px 14px;border-radius:10px;background:#38bdf812;box-shadow:inset 0 0 0 1px #38bdf844;font-size:13px;color:#bae6fd}
.shodds{overflow-x:auto}.shodds table{width:100%;border-collapse:collapse;font-size:13px}.shodds th,.shodds td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--ln);white-space:nowrap}
.shodds th:first-child,.shodds td:first-child{text-align:left}.shodds td i{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:2px;transform:rotate(45deg)}.shodds tr.art td{font-weight:700}
@media(max-width:1100px){.shvin{grid-template-columns:repeat(3,minmax(0,1fr))}.shrow2{grid-template-columns:1fr}.shbst{grid-template-columns:1fr}}
@media(max-width:860px){.shpass{grid-template-columns:1fr;padding:24px 18px;gap:22px}.shpl h2{font-size:36px}.shwel{grid-template-columns:1fr}}
@media(max-width:560px){.shvin{grid-template-columns:repeat(2,minmax(0,1fr))}.shperks{grid-template-columns:1fr}.shpb .k.xl{width:100%}.shpb .k.ghost{width:100%}.shbal2{display:none}}
@media(max-width:560px){.shodds table{font-size:12px}.shodds th,.shodds td{padding:7px 4px}.shodds td i{margin-right:5px}.shodds tr.art td:first-child{white-space:normal}}
/* ---------------------------------------------------------------- cadeaux */
.shgift{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;margin:22px 0;padding:22px 26px;border-radius:18px;
 background:radial-gradient(90% 160% at 0% 0%,#ff5a1f2e,transparent 60%),linear-gradient(180deg,#17121a,#121215);box-shadow:inset 0 0 0 1px #ff5a1f44}
.shgt small{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#ff8a4c}
.shgt h2{margin:4px 0 6px;font:800 22px var(--sans)}.shgt p{margin:0;color:var(--mut);font-size:14px;line-height:1.5}.shgt p b{color:#fde68a}
.shgbt{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.shgbt .k{position:relative}.shgn{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--ac);color:#fff;font:800 10px var(--sans);font-style:normal}
.shgl{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;padding:6px 8px;border:0;background:none;color:var(--mut);font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .15s}
.shgl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}.shgl:hover{color:#fdba74}
.shgl.gold{margin-top:14px;padding:6px 0;color:#f5c542}.shgl.gold:hover{color:#fde68a}
.shwf .shgf{margin-left:auto;min-width:0!important;width:40px;padding:0;justify-content:center}.shwf .shgf svg{fill:none;stroke:currentColor;stroke-width:2}
/* choix du cadeau */
.gfpl h4{margin:14px 0 8px;font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}.gfpl h4:first-child{margin-top:4px}
.gfpk{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:10px 14px 10px 10px;border:0;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);text-align:left;cursor:pointer;transition:box-shadow .15s}
.gfpk:hover{box-shadow:inset 0 0 0 1px #ff5a1f88}.gfpk>span{flex:1;min-width:0}.gfpk b{display:block;font:800 14px var(--sans)}.gfpk small{font-size:12px;color:var(--mut)}
.gfpk>em{font:900 15px var(--sans);font-style:normal;white-space:nowrap}.gfpk .vdisc{width:40px}.gfpk .shcrown.lg{width:40px;height:40px;border-radius:11px}.gfpk .shcrown svg{width:22px;height:22px}
.gfpp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gfpp button{padding:10px;border:0;border-radius:10px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);font:800 14px var(--sans);cursor:pointer}
.gfpp button small{display:block;margin-top:2px;color:var(--mut);font:600 12px var(--sans)}.gfpp button.on{background:#f5c5421a;box-shadow:inset 0 0 0 1.5px #f5c542}
.gfseg{margin:2px 0 0}
.gffr{display:flex;flex-wrap:wrap;gap:8px;max-height:136px;overflow:auto;padding:2px}
.gffr button{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:0;border-radius:999px;background:#16161b;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);font:700 13px var(--sans);cursor:pointer}
.gffr button .av{width:28px;height:28px;font-size:12px}.gffr button.on{background:#ff5a1f1f;box-shadow:inset 0 0 0 1.5px var(--ac)}
.gfin{display:flex;gap:8px;margin-top:10px}
.gfin input,.gfrd input{flex:1;min-width:0;height:44px;padding:0 14px;border:0;border-radius:10px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font-size:16px;outline:none}
.gfin input:focus,.gfrd input:focus,.gfmsg textarea:focus{box-shadow:inset 0 0 0 1px var(--ac)}
.gfst{display:flex;align-items:flex-start;gap:8px;min-height:20px;margin-top:10px;font-size:13px;line-height:1.4}.gfst svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2.4}
.gfst.ok{color:#4ade80}.gfst.ok b{color:#fff}.gfst.no{color:#f87171}
.gfcode{display:flex;gap:12px;padding:14px;border-radius:12px;background:#f5c54212;box-shadow:inset 0 0 0 1px #f5c54244;color:#fde68a;font-size:13px;line-height:1.5}
.gfcode b{color:#fff}.gfcode>span>b:first-child{display:block;margin-bottom:2px;font:800 14px var(--sans)}.gfcode svg{width:24px;height:24px;flex:none;fill:none;stroke:#f5c542;stroke-width:2}
.gfmsg{display:flex;flex-direction:column;gap:6px}.gfmsg>span{font:700 13px var(--sans)}.gfmsg>span small{color:var(--mut);font-weight:500}
.gfmsg textarea{resize:none;padding:10px 14px;border:0;border-radius:10px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:16px/1.4 var(--sans);outline:none}
.gfmsg>small{align-self:flex-end;color:var(--mut);font-size:11px}
/* code cadeau à utiliser */
.gfrd{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.gfrd p{margin:0}.gfrd .shgbx{margin-top:10px}
.gfrd input{width:100%;flex:none;height:56px;text-align:center;font:800 22px var(--mono);letter-spacing:.14em;text-transform:uppercase}.gfrd .k{width:100%}
/* cadeaux envoyés */
.gfsl{display:flex;flex-direction:column;gap:8px}
.gfsr{display:flex;gap:12px;padding:12px;border-radius:12px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln)}.gfsr.wait{box-shadow:inset 0 0 0 1px #f5c54255}
.gfsr>div{flex:1;min-width:0}.gfsr b{font:800 14px var(--sans)}.gfsr small{display:block;margin-top:2px;color:var(--mut);font-size:12px}.gfsr small b{font:700 12px var(--sans);color:var(--fg)}
.gfsi{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:#ff5a1f1a}.gfsi svg{width:18px;height:18px;fill:none;stroke:#ff8a4c;stroke-width:2}
.gfcd{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.gfcd code{padding:7px 10px;border-radius:8px;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--ln2);color:#fde68a;font:800 14px var(--mono);letter-spacing:.08em;user-select:all}
.gfemp{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 10px;text-align:center}.gfemp svg{width:40px;height:40px;fill:none;stroke:var(--ac);stroke-width:1.6}
.gfemp b{font:800 16px var(--sans)}.gfemp p{margin:0;color:var(--mut);font-size:13px}
@media(max-width:860px){.shgift{grid-template-columns:auto minmax(0,1fr);padding:20px}.shgbt{grid-column:1/-1;justify-content:stretch}.shgbt .k{flex:1}}
@media(max-width:560px){.shgift{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}.shgbt .k{flex:1 1 100%}.gfpp button{padding:9px 6px}}
/* icône cadeau : un disque qui dépasse de sa pochette */
.shgbx{position:relative;display:block;flex:none;width:1.04em;height:1em;font-size:86px}.shgbx.sm{font-size:70px}
.shgbx .sgs{position:absolute;left:0;top:.08em;width:.84em;height:.84em;border-radius:.04em;overflow:hidden;z-index:1;
 background:radial-gradient(circle at 50% 50%,transparent 0 44%,#ffffff0e 44.6% 46%,transparent 46.6%),linear-gradient(160deg,#2b231e,#141211);box-shadow:inset 0 0 0 1px #ffffff16,0 .12em .24em -.08em #000}
.shgbx .sgs:before{content:"";position:absolute;left:0;top:0;bottom:0;width:.1em;background:linear-gradient(#ff7a3d,#ff5a1f)}
.shgbx .sgs b{position:absolute;right:.07em;top:.07em;display:grid;place-items:center;width:.28em;height:.28em;border-radius:50%;background:#ff6a2b;color:#1a0a02;
 font:900 .055em/1 var(--sans);font-size:6px;text-transform:uppercase;letter-spacing:-.02em;transform:rotate(12deg);box-shadow:0 2px 5px #0008}
.shgbx.sm .sgs b{font-size:5px}
.shgbx .sgv{position:absolute;left:.2em;top:.1em;width:.8em;height:.8em;border-radius:50%;box-shadow:0 .05em .14em #000a;animation:sgpeek 3.4s ease-in-out infinite;
 background:radial-gradient(circle,#0a0a0c 0 3%,#ff5a1f 3.6% 30%,#0c0c0e 30.6% 33%,transparent 33.6%),repeating-radial-gradient(circle,#19191c 0 1px,#0c0c0e 1px 2.4px)}
@keyframes sgpeek{50%{transform:translateX(.12em) rotate(160deg)}}

/* ouverture d'un cadeau reçu : pochette → disque sur la platine → tracklist */
.gfx{position:fixed;inset:0;z-index:65;display:grid;place-items:center;overflow:auto;padding:24px 18px;opacity:0;transition:opacity .35s;
 background:radial-gradient(ellipse 80% 55% at 50% -5%,#4a240f55,transparent 70%),#08080afc}
.gfx.on{opacity:1}
.gfxw{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:400px}
.gfxs{--lc:#ff6a2b;position:relative;width:min(300px,72vw);aspect-ratio:1;margin:4px 0;cursor:pointer;outline:none;transition:width .7s .25s cubic-bezier(.3,.8,.3,1)}
.gfxs.gold{--lc:#f5c542}
.gfxs:before{content:"";position:absolute;inset:-5%;border-radius:50%;opacity:0;transform:scale(.92);transition:opacity .5s .55s,transform .6s .55s;
 background:radial-gradient(circle,#1d1d21 0 62%,#121214 62.5% 100%);box-shadow:inset 0 0 0 1px #ffffff10,inset 0 0 0 7px #0b0b0d,0 30px 60px -22px #000}
.gfx.gfo .gfxs:before{opacity:1;transform:none}
/* pochette */
.gfxsl{position:absolute;inset:0;z-index:2;border-radius:3px;overflow:hidden;animation:gfxin .6s cubic-bezier(.2,.8,.3,1) both;
 background:radial-gradient(circle at 50% 50%,transparent 0 45%,#ffffff0b 45.4% 46.6%,transparent 47%),repeating-linear-gradient(45deg,#ffffff04 0 2px,transparent 2px 5px),linear-gradient(160deg,#2b231e,#141211 72%);
 box-shadow:inset 0 0 0 1px #ffffff14,0 34px 60px -18px #000d}
.gfxsl:before{content:"";position:absolute;left:0;top:0;bottom:0;width:9%;background:linear-gradient(180deg,var(--lc),color-mix(in srgb,var(--lc) 60%,#000))}
@keyframes gfxin{from{opacity:0;transform:translateY(28px) rotate(-3deg)}}
.gfxed{position:absolute;left:15%;top:7%;color:#a1a1aa;font:700 9px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.gfxcat{position:absolute;right:8%;bottom:4%;color:#71717a;font:700 9px var(--mono);letter-spacing:.14em}
.gfxst{position:absolute;right:8%;top:8%;display:grid;place-items:center;width:25%;aspect-ratio:1;border-radius:50%;background:var(--lc);color:#1a0a02;font:900 clamp(11px,3.4vw,15px)/1 var(--sans);font-style:normal;
 text-align:center;text-transform:uppercase;transform:rotate(12deg);box-shadow:0 5px 12px #0008}
.gfxby{position:absolute;left:15%;right:8%;bottom:10%;text-align:left}
.gfxby small{display:block;color:#a1a1aa;font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.gfxby b{display:block;margin:5px 0 6px;color:#fff;font:900 clamp(22px,7.4vw,32px)/1 var(--sans);overflow-wrap:anywhere}
/* disque */
.gfxv{position:absolute;inset:2%;z-index:1;border-radius:50%;transform:translateX(16%);animation:gfxpeek 2.6s ease-in-out infinite;box-shadow:0 18px 40px -14px #000}
@keyframes gfxpeek{50%{transform:translateX(21%)}}
.gfxv:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
 background:conic-gradient(from 25deg,transparent 0 8%,#ffffff22 13%,transparent 19% 50%,#ffffff16 63%,transparent 69%)}
.gfxvi{position:absolute;inset:0;border-radius:50%;
 background:radial-gradient(circle,#08080a 0 2.2%,var(--lc) 2.7% 31%,#0d0d0f 31.4% 33.5%,transparent 34%),repeating-radial-gradient(circle,#161618 0 1.2px,#0b0b0d 1.2px 2.8px)}
.gfxlb{position:absolute;left:27%;right:27%;top:24%;bottom:26%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;color:#1a0a02}
.gfxlb b{font:900 clamp(10px,3vw,13px)/1.1 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:auto;margin-top:3px}
.gfxlb small{font:800 clamp(6px,1.8vw,7.5px) var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.gfx.gfo .gfxsl{animation:gfxsleeve 1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes gfxsleeve{30%{transform:translateX(-10%)}100%{transform:translate(-80%,10%) rotate(-12deg) scale(.8);opacity:0}}
.gfx.gfo .gfxv{animation:gfxpull 1.15s cubic-bezier(.5,0,.25,1) forwards}
@keyframes gfxpull{0%{transform:translateX(16%);z-index:1}35%{transform:translateX(66%);z-index:1}36%{z-index:3}100%{transform:none;z-index:3}}
.gfx.gfo .gfxvi{animation:gfxroll 1.15s cubic-bezier(.5,0,.25,1) forwards}@keyframes gfxroll{to{transform:rotate(200deg)}}
.gfx.gfp .gfxvi{animation:gfxspin 1.8s linear infinite}@keyframes gfxspin{from{transform:rotate(200deg)}to{transform:rotate(560deg)}}
.gfx.gfp .gfxs{width:min(220px,56vw);cursor:default}
/* bras de lecture */
.gfxarm{position:absolute;right:-10%;top:-8%;width:24%;height:80%;z-index:4;opacity:0;transform-origin:70% 8%;transition:opacity .4s .8s,transform .9s .1s cubic-bezier(.4,.1,.2,1);pointer-events:none}
.gfxarm:before{content:"";position:absolute;left:70%;top:8%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;z-index:1;
 background:radial-gradient(circle at 35% 35%,#f4f4f5,#8b8b93 55%,#3f3f46);box-shadow:0 4px 10px #000a}
.gfxarm i{position:absolute;left:70%;top:8%;width:4px;height:84%;margin-left:-2px;border-radius:2px;background:linear-gradient(90deg,#e4e4e7,#71717a);box-shadow:2px 6px 8px #0007}
.gfxarm i:after{content:"";position:absolute;left:-5px;bottom:-6px;width:13px;height:20px;border-radius:2px;background:linear-gradient(90deg,#d4d4d8,#52525b);transform:rotate(20deg)}
.gfx.gfo .gfxarm{opacity:1}
.gfx.gfp .gfxarm{transform:rotate(17deg)}
.gfxh{color:var(--mut);font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;animation:gfpulse 1.8s ease-in-out infinite}@keyframes gfpulse{50%{opacity:.4}}
.gfx.gfo .gfxh{display:none}
/* tracklist */
.gfxc{display:none;flex-direction:column;align-items:stretch;gap:12px;width:100%}
.gfx.gfp .gfxc{display:flex}
.gfxc>*,.gfxtl p{animation:gfxline .45s calc(var(--i,0) * .12s + .55s) both}@keyframes gfxline{from{opacity:0;transform:translateY(8px)}}
.gfxtl{padding:12px 16px;border-radius:12px;background:#121215e8;box-shadow:inset 0 0 0 1px var(--ln);text-align:left;animation:none!important}
.gfxtl>small{display:block;margin-bottom:4px;color:var(--mut);font:700 10px var(--mono);letter-spacing:.22em;text-transform:uppercase}
.gfxtl p{display:flex;align-items:baseline;gap:12px;margin:0;padding:8px 0;border-top:1px dashed #ffffff14;font:700 14.5px var(--sans)}.gfxtl p:first-of-type{border-top:0}
.gfxtl em{flex:none;width:22px;color:var(--ac);font:800 11px var(--mono);font-style:normal}
.gfxc blockquote{margin:0;padding:12px 16px;border-left:3px solid var(--ac);border-radius:0 10px 10px 0;background:#ffffff07;color:#e4e4e7;text-align:left;font:italic 500 15px/1.5 var(--sans)}
.gfxc cite{display:block;margin-top:6px;color:#fdba74;font:700 10.5px var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase}.gfxc cite:before{content:"— "}
@media(prefers-reduced-motion:reduce){.shgbx .sgv,.gfx *{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}
.shnoreal{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;padding:14px 16px;border-radius:12px;background:#fbbf2414;box-shadow:inset 0 0 0 1px #fbbf2455;color:#fde68a;font-size:13.5px;line-height:1.5}
.shnoreal>i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#fbbf2422}.shnoreal svg{width:18px;height:18px;fill:none;stroke:#fbbf24;stroke-width:2}
.shnoreal b{display:block;color:#fff;font:800 15px var(--sans);margin-bottom:2px}
/* Arène : vitesse du combat (×1 lent, ×2, ×3) */
.arspd{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:2px;padding:3px;border-radius:999px;background:#0c0c0ee6;box-shadow:inset 0 0 0 1px var(--ln2),0 10px 24px -10px #000;backdrop-filter:blur(8px)}
.arspd button{min-width:44px;height:34px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--mut);font:800 13px var(--mono);cursor:pointer;transition:background .15s,color .15s}
.arspd button.on{background:var(--ac);color:#fff}
.arfight .wfc .slot{transition:transform calc(.18s * var(--sp,1)) cubic-bezier(.3,.8,.3,1.2),filter .3s}
.arfight #wff .wfc.hit .slot,.arfight #wfm .wfc.hit .slot{animation-duration:calc(.2s * var(--sp,1))}
.arfight .wfhp i{transition:width calc(.15s * var(--sp,1))}
.arfight .wfc .dmg{animation-duration:calc(.9s * max(1, var(--sp,1) * .7))}
/* Arène : placement */
.arbg.lu .arbs{background:linear-gradient(160deg,#a1a1aa,#52525b 60%,#27272a)}.arbg.lu b{color:#f4f4f5}
.arplc{margin-top:12px}.arplc>div{display:flex;gap:5px}.arplc>div i{flex:1;max-width:30px;height:8px;border-radius:4px;background:#ffffff14}.arplc>div i.on{background:linear-gradient(90deg,#d4d4d8,#a1a1aa)}
.arplc small{display:block;margin-top:8px;color:var(--mut);font:500 12.5px/1.45 var(--sans);letter-spacing:0;text-transform:none}.arplc small b{color:#e8b48f}
/* Pass : pseudo et cadre dorés */
.pgold{background:linear-gradient(100deg,#fff3bf,#f5c542 40%,#d99a0b 70%,#fde68a);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.av.pass{box-shadow:0 0 0 2px #f5c542,0 0 14px -2px #f5c54299}
.pfpass{display:inline-flex;align-items:center;gap:6px;margin:6px 0 2px;padding:3px 10px 3px 6px;border-radius:999px;background:#f5c5421f;box-shadow:inset 0 0 0 1px #f5c54266;color:#fde68a;font:800 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.pfpass svg{width:14px;height:14px;fill:#f5c542}

/* écussons des hautes ligues : plaque Platine, platine vinyle, plaque Diamant (SVG) */
.arbg.arsv{overflow:visible}
.arbg .arsvg{position:absolute;left:-6%;top:-4%;width:112%;height:108%;margin:0;overflow:visible;pointer-events:none;stroke:none;fill:#000}
.arbg.sm .arsvg .tx{display:none}
.arbg.arsv .arsvg{filter:drop-shadow(0 2px 3px #000a)}
.arbg.xl.arsv{filter:none}.arbg.xl.arsv .arsvg{filter:drop-shadow(0 14px 22px #000c) drop-shadow(0 0 1px #ffffff40)}
/* ---------------------------------------------------------------- montée de rang : mise en scène des objets */
.rkc{--lc:#ff6a2b;position:fixed;inset:0;z-index:66;display:grid;place-items:center;overflow:hidden;padding:24px 18px}
.rkcbg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 38%,color-mix(in srgb,var(--lc) 14%,#0b0b0e),#040405 72%);opacity:0;transition:opacity .35s}
.rkcspot{position:absolute;left:50%;top:-6%;width:min(560px,130vw);height:78%;transform:translateX(-50%);opacity:0;transition:opacity .9s .15s;pointer-events:none;
 background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 35%,#ffffff) 0%,transparent 88%);clip-path:polygon(44% 0,56% 0,82% 100%,18% 100%);mix-blend-mode:screen;filter:blur(6px);opacity:0}
.rkc.go .rkcbg{opacity:1}.rkc.major.go .rkcspot{opacity:.22}
.rkcst{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:420px;text-align:center}
.rkcobj{position:relative;display:grid;place-items:center;width:200px;height:210px}
.rkcobj>span{grid-area:1/1;display:grid;place-items:center}
.rkc .arbg.xl{width:150px;height:174px}
.rkcfloor{position:absolute;left:50%;bottom:2px;width:170px;height:26px;margin-left:-85px;border-radius:50%;background:radial-gradient(closest-side,#000c,transparent);opacity:0;transition:opacity .4s}
.rkcfloor:after{content:"";position:absolute;inset:-6px -20px;border-radius:50%;border:2px solid var(--lc);opacity:0;transform:scale(.3)}
/* ancien objet : il tombe (ligue) ou s'efface (division) */
.rkc.major.go .rkcold{animation:rkcfall .55s .45s cubic-bezier(.5,0,.9,.4) both}
@keyframes rkcfall{to{transform:translateY(170px) rotate(9deg);opacity:0}}
.rkc:not(.major).go .rkcold{animation:rkcfade .32s ease-in both}
@keyframes rkcfade{to{transform:scale(.7);opacity:0;filter:blur(2px)}}
/* nouvel objet : il tombe du haut et se pose (ligue) ou se pose comme un tampon (division) */
.rkcnew{position:relative;opacity:0}
.rkc.major.go .rkcnew{animation:rkcdrop .42s .73s cubic-bezier(.55,0,1,.5) both,rkcland .42s 1.15s ease-out both}
@keyframes rkcdrop{from{opacity:1;transform:translateY(-75vh) rotate(-7deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes rkcland{0%{opacity:1;transform:scale(1.07,.92)}45%{opacity:1;transform:scale(.97,1.04) translateY(-6px)}100%{opacity:1;transform:none}}
.rkc:not(.major).go .rkcnew{animation:rkcstamp .34s .2s cubic-bezier(.3,1.4,.5,1) both}
@keyframes rkcstamp{from{opacity:0;transform:scale(1.6) rotate(-8deg)}to{opacity:1;transform:none}}
.rkc.major.go .rkcfloor{opacity:1;transition-delay:1.1s}.rkc.major.go .rkcfloor:after{animation:rkcring .9s 1.15s ease-out both}
.rkc:not(.major).go .rkcfloor{opacity:.8;transition-delay:.45s}.rkc:not(.major).go .rkcfloor:after{animation:rkcring .7s .52s ease-out both}
@keyframes rkcring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
/* reflet qui balaie l'objet une fois posé */
.rkcsw{position:absolute;inset:-4% -8%;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000,#000);border-radius:8px}
.rkcsw:before{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;background:linear-gradient(100deg,transparent,#ffffffb0 50%,transparent);transform:skewX(-18deg);mix-blend-mode:overlay}
.rkc.major.go .rkcsw:before{animation:rkcsweep .9s 1.55s ease-in-out both}.rkc:not(.major).go .rkcsw:before{animation:rkcsweep .7s .6s ease-in-out both}
@keyframes rkcsweep{to{left:130%}}
/* texte */
.rkctx{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.rkctx>*{opacity:0}
.rkctx small{color:color-mix(in srgb,var(--lc) 70%,#fff);font:700 10.5px var(--mono);letter-spacing:.32em;text-transform:uppercase}
.rkctx h2{margin:0;font:900 clamp(38px,11vw,56px)/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:#fff;opacity:1}
.rkctx h2 span{display:inline-block;opacity:0;transform:translateY(14px)}
.rkcfrom{display:inline-flex;align-items:center;gap:10px;color:var(--mut);font:700 12px var(--mono);letter-spacing:.08em}.rkcfrom em{color:var(--lc);font-style:normal}
.rkctx p{margin:0;color:#d4d4d8;font-size:14px}
.rkcrw{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff14}
.rkcrw small{color:var(--mut);letter-spacing:.2em}.rkcrw>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.rkctx .k{min-width:200px;margin-top:6px}
.rkc.go .rkctx>*{animation:rkcup .45s var(--d,1.4s) both}
.rkc.go .rkctx small{--d:1.35s}.rkc.go .rkcfrom{--d:2s}.rkc.go .rkctx p{--d:2.15s}.rkc.go .rkcrw{--d:2.3s}.rkc.go .rkctx .k{--d:2.45s}
.rkc.go .rkctx h2{animation:none}.rkc.go .rkctx h2 span{animation:rkcup .4s calc(1.5s + var(--i) * .055s) cubic-bezier(.3,1.5,.5,1) both}
.rkc:not(.major).go .rkctx small{--d:.5s}.rkc:not(.major).go .rkcfrom{--d:.85s}.rkc:not(.major).go .rkcrw{--d:.95s}.rkc:not(.major).go .rkctx .k{--d:1.05s}
.rkc:not(.major).go .rkctx h2 span{animation-delay:calc(.55s + var(--i) * .035s)}
@keyframes rkcup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rkc.out{opacity:0;transition:opacity .35s}
.rkc.rm *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
@media(max-width:560px){.rkcobj{width:170px;height:180px}.rkc .arbg.xl{width:128px;height:148px}.rkcst{gap:16px}}
.lot1{margin-left:6px;padding:1px 5px;border-radius:4px;background:#34d39922;color:#6ee7b7;font:800 8.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal}
/* ---------------------------------------------------------------- boutique : donner envie d'y aller */
.shbtn{overflow:hidden;color:#1a0f02;background:linear-gradient(135deg,#ffe08a,#f5c542 45%,#ff9a3d);box-shadow:0 6px 18px -8px #f5c542aa,inset 0 1px 0 #fff8;font-weight:800}
.shbtn span{color:#1a0f02}
.shbtn:after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffffcc 50%,transparent);transform:skewX(-18deg);animation:shbsh 4.5s ease-in-out infinite;pointer-events:none}
@keyframes shbsh{0%,70%{left:-60%}90%,100%{left:130%}}
.shbtn.gift{animation:shbglow 1.8s ease-in-out infinite}
.shbtn.gift:before{content:"";position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #fff6;z-index:2;animation:shbdot 1.2s ease-in-out infinite}
@keyframes shbdot{50%{transform:scale(1.25)}}
@keyframes shbglow{50%{box-shadow:0 0 0 4px #f5c54233,0 8px 26px -6px #f5c542dd,inset 0 1px 0 #fff8}}
.rshop.gift{box-shadow:inset 0 0 0 1.5px #f5c542,0 0 22px -8px #f5c542;animation:shbglow 1.8s ease-in-out infinite}.rshop.gift em{color:#fde68a}
/* cadeau du jour */
.shfree{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin-bottom:18px;padding:18px 22px;border-radius:18px;
 background:radial-gradient(90% 160% at 0% 50%,#34d39926,transparent 60%),linear-gradient(180deg,#11171a,#121215);box-shadow:inset 0 0 0 1.5px #34d39977}
.shfree.done{box-shadow:inset 0 0 0 1px var(--ln);background:#121215}
.shfrp{position:relative;display:grid;place-items:center;width:74px;height:84px}.shfrp .spack{grid-row:auto;width:56px;height:80px;transform:rotate(-6deg);box-shadow:0 12px 22px -10px #000c}
.shfree:not(.done) .shfrp .spack{animation:shfrj 2.4s ease-in-out infinite}@keyframes shfrj{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg) translateY(-4px)}}
.shfrb{position:absolute;right:-6px;bottom:-4px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px #121215}.shfrb svg{width:16px;height:16px;fill:none;stroke:#052e1c;stroke-width:2.2}
.shfrt small{display:block;color:#6ee7b7;font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase}.shfrt b{display:block;margin:4px 0 2px;font:800 19px var(--sans)}.shfrt span{color:var(--mut);font-size:13px}
.shfree .k.xl{min-width:180px}.shfree .k svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.shfrd{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-size:13px}.shfrd svg{width:16px;height:16px;fill:none;stroke:#4ade80;stroke-width:2.4}.shfrd b{color:var(--fg)}
@media(max-width:560px){.shfree{grid-template-columns:auto minmax(0,1fr);padding:16px}.shfree .k.xl,.shfrd{grid-column:1/-1;width:100%;justify-content:center}}
/* annonce d'ouverture */
.shintro{display:flex;flex-direction:column;gap:16px}.shinh{text-align:center}
.shinb{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#ffe08a,#f5c542 45%,#ff9a3d);box-shadow:0 14px 30px -10px #f5c542aa}
.shinb svg{width:32px;height:32px;fill:none;stroke:#1a0f02;stroke-width:1.8}
.shinh small{display:block;margin-top:12px;color:#fbbf24;font:700 10px var(--mono);letter-spacing:.24em;text-transform:uppercase}.shinh h2{margin:6px 0 4px;font:900 28px var(--sans)}.shinh p{margin:0;color:var(--mut)}
.shintro ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.shintro li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln)}
.shintro li>i{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:#f5c5421a}.shintro li svg{width:18px;height:18px;fill:none;stroke:#f5c542;stroke-width:2}
.shintro li b{display:block;font:800 14px var(--sans)}.shintro li span{color:var(--mut);font-size:12.5px}
.shinbt{display:flex;gap:8px}.shinbt .k{flex:1}.shinbt .k svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:400px){.tr{gap:5px}}
/* ---------- v31 : rôles des cartes Music ---------- */
.rl-melo{--rl:#a78bfa}.rl-basse{--rl:#60a5fa}.rl-solo{--rl:#f87171}.rl-dist{--rl:#f472b6}.rl-tempo{--rl:#facc15}.rl-echo{--rl:#2dd4bf}.rl-drop{--rl:#fb923c}
.rlt{display:inline-flex;align-items:center;gap:3px;font-style:normal;color:var(--rl);font:800 8px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.rlt i{font-style:normal;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--rl) 22%,transparent);font-size:8px;line-height:1}
.card .st .rlt{font-size:0;gap:0}.card .st .rlt i{width:11px;height:11px;font-size:7.5px;color:var(--rl);background:#0009;box-shadow:0 0 0 1px color-mix(in srgb,var(--rl) 60%,transparent)}
.st.sm{flex-wrap:wrap;row-gap:3px}.st.sm .rlt{flex-basis:100%;justify-content:center}
.rlbox{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;margin:0 0 12px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--rl) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl) 35%,transparent)}
.rlbox b{display:flex;align-items:center;gap:6px;color:var(--rl);font:800 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.rlbox b i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--rl) 25%,transparent);font-size:11px}
.rlbox span{font-size:12.5px;color:var(--mut)}
.arfight .wfc .dmg.arecho{color:#2dd4bf;font-size:15px}
.arfight .wfc.sup.arcast{animation:arcast .7s ease}
@keyframes arcast{0%,100%{filter:none;transform:none}40%{filter:drop-shadow(0 0 12px #4ade80);transform:translateY(-4px)}}
.wfc>.rlt{display:flex;justify-content:center;margin-top:4px}
.arfight .wfc .dmg.arburn{color:#fb923c;font-size:14px}
/* ---------- combat d'Arène : passe « studio » (cartes entières conservées) ---------- */
.arfight .wfs{background:radial-gradient(90% 38% at 50% 0%,#2a120699,transparent 70%),radial-gradient(90% 38% at 50% 100%,#1a0d0599,transparent 70%)}
.arfight #wfm .wfc.atk .slot,.arfight #wff .wfc.atk .slot{transform:none}
.arfight .wfc.atk .slot{z-index:3;filter:drop-shadow(0 0 14px #ff6a2bb0) drop-shadow(0 10px 18px #000)}
.arfight .wfc.arrip .slot{box-shadow:none;filter:drop-shadow(0 0 14px #ef4444b0) drop-shadow(0 10px 18px #000)}
.arfight .wfc{isolation:isolate}
/* en-tête : disque qui tourne, un cran par tour */
.wfvt{display:flex;align-items:center;gap:8px}
.wfvin{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 1.4px,#262626 1.4px 2.6px);box-shadow:0 0 0 1px #ffffff1f,0 2px 6px #000;transform:rotate(var(--rot,0deg));transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.wfvin i{position:absolute;inset:7px;border-radius:50%;background:var(--ac);box-shadow:inset 0 0 0 2.5px #0003}
.wfvin i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0c0c0d}
.arfight .wfvin{animation:wfspin calc(1.8s * var(--sp,1)) linear infinite}.arfight.over .wfvin{animation:none}
@keyframes wfspin{to{rotate:360deg}}
.arfight #wfr{font-variant-numeric:tabular-nums}
/* PV : un trait fin, sans fioritures ; le chiffre au-dessus, à droite */
.arfight .wfhp{height:auto;width:96px;background:none;overflow:visible;border-radius:0;display:flex;flex-direction:column;gap:4px}
.arfight .wfhp span{align-self:flex-end;font:700 10px/1 var(--mono);color:#ffffffb3;text-shadow:none}
.arfight .wfhp b{position:relative;display:block;height:3px;background:#ffffff17}
.arfight .wfhp b i{position:absolute;inset:0 auto 0 0;border-radius:0}
.arfight .wfhp i.g{background:#ffffff59;transition:width calc(.55s * var(--sp,1)) calc(.2s * var(--sp,1)) ease-out}
.arfight .wfhp i.v{background:#ef4444;transition:width calc(.12s * var(--sp,1)) ease-out}
.arfight #wfm .wfhp i.v{background:var(--ac)}
.arfight .wfc.low .wfhp span{color:#fca5a5}
@media(max-width:520px){.arfight .wfhp{width:72px}}
/* soutien : le nom de la capacité seulement (le détail reste dans l'info-bulle) */
.arfight .wfc.sup .aura span{display:none}.arfight .wfc.sup .aura{padding:3px 8px}
/* KO : la carte se retourne face cachée */
.arfight .wfc.ko .slot{filter:grayscale(.7) brightness(.5);transform:rotate(-3deg) scale(.94)}
.arfight .wfc.ko:after{top:40%;z-index:4;padding:3px 10px;border-radius:4px;background:#0c0c0dd9;box-shadow:0 0 0 1px #f8717166;font-size:16px}
/* impact : les sillons s'ouvrent depuis la carte touchée, rayure de diamant sur un critique */
.wfgr{position:absolute;left:50%;top:38%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;
 background:repeating-radial-gradient(circle,transparent 0 5px,#ffd7bb66 5px 6px,transparent 6px 9px);mask:radial-gradient(circle,transparent 18%,#000 30%,#000 60%,transparent 72%);
 animation:wfgr calc(.5s * max(1, var(--sp,1) * .5)) ease-out forwards}
.wfgr.x{width:110px;height:110px;margin:-55px 0 0 -55px;background:repeating-radial-gradient(circle,transparent 0 5px,#fde68aaa 5px 6.5px,transparent 6.5px 9px)}
@keyframes wfgr{from{opacity:1;transform:scale(.25)}to{opacity:0;transform:scale(1.5)}}
.wfsc{position:absolute;left:-6%;right:-6%;top:36%;z-index:4;height:3px;pointer-events:none;border-radius:2px;background:linear-gradient(90deg,transparent,#fff 30%,#fde68a 60%,transparent);
 box-shadow:0 0 12px #fbbf24;transform:rotate(-24deg) scaleX(0);transform-origin:left;animation:wfsc calc(.4s * max(1, var(--sp,1) * .5)) cubic-bezier(.2,.8,.3,1) forwards}
@keyframes wfsc{50%{transform:rotate(-24deg) scaleX(1);opacity:1}to{transform:rotate(-24deg) scaleX(1) translateX(10%);opacity:0}}
.arfight .wfs.shk{animation:wfshk .3s ease}@keyframes wfshk{25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
/* chiffres : étiquette en police mono, comme les stickers des cartes */
.arfight .wfc .dmg{font:800 18px var(--mono);letter-spacing:-.02em;text-shadow:0 2px 0 #000,0 0 10px #000}
.arfight .wfc .dmg.c{font-size:22px;color:#fbbf24}
.arfight .wfc .dmg.arripd{color:#fca5a5}.arfight .wfc .dmg.heal{color:#6ee7b7;font-size:14px}.arfight .wfc .dmg.miss{color:#93c5fd;font-size:12px;letter-spacing:.08em}
.arfight .wfc .dmg.arecho{font-size:13px}.arfight .wfc .dmg.shield{font-size:12px}
/* milieu : VS + fil « en cours de lecture » */
.wfmid{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(460px,100%)}
.arfight .wfvs{display:flex;align-items:center;gap:10px;width:100%;color:#ffffff40}
.arfight .wfvs i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#ffffff26,transparent)}
.arfight .wfvs b{font:900 13px var(--mono);letter-spacing:.3em}
.wftk{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:36px;width:100%}
.wftk p{margin:0;font:600 11.5px var(--mono);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;animation:wftk .25s ease}
.wftk p::before{content:"▶ ";color:var(--ac);font-size:9px}.wftk p.foe::before{color:#f87171}
.wftk p+p{opacity:.38;font-size:10.5px}
.wftk i{font-style:normal;color:var(--mut)}.wftk b{font-weight:800}
.wftk .cr{color:#fbbf24}.wftk .dm{color:#fca5a5}.wftk .hl{color:#6ee7b7}.wftk .ec{color:#2dd4bf}.wftk .bn{color:#fb923c}.wftk .ms{color:#93c5fd}.wftk .ko{color:#f87171;letter-spacing:.1em}
@keyframes wftk{from{opacity:0;transform:translateY(-4px)}}
.arfight .wfc.sup.arcast .aura{animation:wfaura .7s ease}@keyframes wfaura{40%{box-shadow:0 0 0 1px #f5c542,0 0 22px -4px #f5c542;background:#f5c5421f}}
@media(prefers-reduced-motion:reduce){.arfight .wfvin{animation:none}.wfgr,.wfsc{display:none}.arfight .wfs.shk{animation:none}}
/* destruction : une timeline de lecture, trois disques posés à 50, 80 et 100 % qui s'allument (bronze, argent, or) */
.wftl{display:flex;align-items:center;gap:12px;width:min(460px,100%);padding:6px 0 4px}
.wftl #wft{min-width:46px;font:700 12px var(--mono);color:#ffffffcc;font-variant-numeric:tabular-nums}
.wftr{position:relative;flex:1;height:2px;background:#ffffff1f;margin-right:9px}
.wftr #wfd{position:absolute;inset:0 auto 0 0;width:0;background:var(--ac);transition:width calc(.18s * var(--sp,1)) ease-out}
#wfph{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ff6a2b40;transition:left calc(.18s * var(--sp,1)) ease-out}
.wfmk{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:repeating-radial-gradient(circle,#18181b 0 1.2px,#27272a 1.2px 2.3px);box-shadow:0 0 0 1px #ffffff1f;transition:box-shadow .3s}
.wfmk i{position:absolute;inset:6px;border-radius:50%;background:#3f3f46;transition:background .3s}
.wfmk.on:nth-of-type(1) i{background:#d9a066}.wfmk.on:nth-of-type(2) i{background:#e5e7eb}.wfmk.on:nth-of-type(3) i{background:#f5c542}
.wfmk.on{box-shadow:0 0 0 1px #ffffff40,0 0 14px -2px #f5c54299}
.wfmk.pop{animation:wfmk .5s cubic-bezier(.3,1.6,.5,1)}@keyframes wfmk{40%{transform:scale(1.45) rotate(90deg)}}
.arfight .wfh{gap:6px}
/* ---------- composition d'équipe : deck en haut, filtres ---------- */
.dkb{display:grid;grid-template-columns:repeat(3,1fr) 1fr;gap:8px;margin:2px 0 12px;padding:10px;border-radius:14px;background:#ffffff06;box-shadow:inset 0 0 0 1px var(--ln)}
.dks{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;cursor:pointer}
.dks small{font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.dks.art{padding-left:8px;border-left:1px dashed #ffffff1f}.dks.art small{color:#f5c542}
.dke{display:grid;place-items:center;width:100%;aspect-ratio:3/4;max-width:78px;border-radius:10px;border:1.5px dashed #ffffff26;color:#ffffff40;font:300 26px var(--sans)}
.dkc{position:relative;width:100%;max-width:78px;padding:0;border:0;background:none;cursor:pointer}
.dkc .mt,.dkc>*:first-child{width:100%}
.dkx{position:absolute;top:-6px;right:-6px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#0c0c0d;box-shadow:0 0 0 1px #ffffff40}
.dkx svg{width:11px;height:11px;stroke:#fff}
.dkm{display:flex;justify-content:space-between;width:100%;max-width:78px}
.dkm button,.dkm i{display:block;width:30px;height:24px}
.dkm button{border:0;border-radius:6px;background:#ffffff12;color:var(--fg);font:700 16px/1 var(--sans);cursor:pointer}
.dkm button:active{background:var(--ac)}
.pkt{display:flex;gap:8px}.pkt .search{flex:1}
.pkt select,.pkf select{height:38px;padding:0 10px;border-radius:10px;border:0;background:#16161a;color:var(--fg);font:600 13px var(--sans);box-shadow:inset 0 0 0 1px var(--ln)}
.pkf{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:8px 0 10px;padding-bottom:2px}.pkf::-webkit-scrollbar{display:none}
.pkfc{flex:none;height:30px;padding:0 12px;border-radius:999px;border:0;background:#16161a;color:var(--mut);font:700 12px var(--sans);box-shadow:inset 0 0 0 1px var(--ln);cursor:pointer;white-space:nowrap}
.pkfc[style]{color:var(--c)}.pkfc.on{background:var(--fg);color:#0c0c0d}.pkfc.on[style]{background:var(--c);color:#0c0c0d}
.pkf select{flex:none;height:30px;border-radius:999px;font-size:12px}
.pk{position:relative}.pkn{position:absolute;top:4px;left:4px;z-index:3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;font:800 12px var(--mono);font-style:normal;box-shadow:0 2px 6px #0008}
/* ---------- boutique v36 : offres spéciales, vinyles en lignes compactes ---------- */
.shwel{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.shw.wk{background:linear-gradient(180deg,#0f1a17,#121215 60%);box-shadow:inset 0 0 0 1px #34d39966}
.shwk{position:absolute;top:12px;left:14px;font:800 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#34d399}
.shw.wk .shwv{margin-top:10px}
.shvl{display:flex;flex-direction:column;gap:8px}
.shvr{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#141417;box-shadow:inset 0 0 0 1px var(--ln)}
.shvr.hl{box-shadow:inset 0 0 0 1px #ff5a1f80;background:linear-gradient(90deg,#1c120c,#141417 70%)}
.shvr .vdisc,.shvr>i:first-child{flex:none}
.shvt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shvt b{font:800 18px var(--sans);letter-spacing:-.01em}.shvt b small{font:600 12px var(--sans);color:var(--mut)}
.shvt span{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--mut)}
.shvt .shx2{position:static;transform:none}
.shbadge2{font-style:normal;font:800 10px var(--sans);padding:2px 8px;border-radius:999px;background:var(--ac);color:#fff}
.shvr .shgf{flex:none;width:38px;min-width:0!important;padding:0;justify-content:center}.shvr .shgf svg{fill:none;stroke:currentColor;stroke-width:2}
.shvr .shvp{flex:none;min-width:92px}
@media(min-width:861px){.shvl{display:grid;grid-template-columns:repeat(2,1fr)}}
.shgbt{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
.shgbt>.k{min-height:40px;padding:0 12px;font-size:11px}
.shgbt>#shgnew{grid-column:1/-1}
/* retournement des cartes : sécurité pour les téléphones qui « aplatissent » la 3D (on voyait le dos en miroir au lieu de la face).
   Le dos reste toujours affiché ; la face apparaît pile quand la carte passe la tranche (90°, soit ≈ 12 % de l'animation avec cette courbe)
   et se pose par-dessus : en vraie 3D rien ne change, en 3D aplatie on voit quand même la face, à l'endroit. */
.flip>.face{visibility:hidden;transition:visibility 0s .094s}
.slot.up>.flip>.face{visibility:visible;backface-visibility:visible;-webkit-backface-visibility:visible}
#stage.fast .flip>.face{transition-delay:.033s}
.flip{-webkit-transform-style:preserve-3d}
/* ---------- performances ---------- */
/* Arène : les cartes restent belles mais figées (leurs reflets animés coûtaient cher, x7 cartes), pas de filtres pendant les coups */
.arfight .card,.arfight .card *,.arfight .card::before,.arfight .card::after{animation:none!important}
.arfight .card .hl{mix-blend-mode:normal;opacity:.35}
.arfight .wfc.atk .slot,.arfight .wfc.arrip .slot{filter:none}
.arfight .wfc.atk .slot .card{box-shadow:0 0 0 2px #ff6a2b,0 0 20px -2px #ff6a2bb0}
.arfight .wfc.arrip .slot .card{box-shadow:0 0 0 2px #ef4444,0 0 20px -2px #ef4444b0}
.arfight .wfc.fl .slot::after{content:"";position:absolute;inset:0;z-index:6;border-radius:10px;background:#fff;opacity:0;pointer-events:none;animation:wffl calc(.32s * max(1, var(--sp,1) * .5)) ease-out}
@keyframes wffl{20%{opacity:.45}to{opacity:0}}
.arfight .wfc .slot{position:relative}
.wfgr{mask:none;-webkit-mask:none;background:none;border:2px solid #ffd7bb99;box-shadow:0 0 0 6px #ffd7bb22}
.wfgr.x{border-color:#fde68acc}
.arfight .wfc.ko .slot{filter:none}.arfight .wfc.ko .slot .back{filter:grayscale(.7) brightness(.55)}
/* téléphones modestes : pas de flou d'arrière-plan, reflets des cartes figés */
.lite *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lite .card *,.lite .card::before,.lite .card::after{animation-play-state:paused!important}
.lite .card .hl{mix-blend-mode:normal;opacity:.35}
.shwc{display:inline-block;width:26px;height:36px;border-radius:5px;background:linear-gradient(145deg,var(--pc),#0008);box-shadow:0 0 14px -2px var(--pc);margin-right:4px}
.shcrown.lg{min-height:0}.gfpk>.shcrown{flex:none!important;width:40px;height:40px;min-width:0;min-height:0;display:grid;place-items:center;align-self:center}

/* ---------- Arène v2 (bas de page) : onglets, bandeau défense, adversaires, journal, classement, ligues et règles ----------
   Inspiration : console de mixage et pochette de disque (étiquettes mono, sillons, tracklist), pas de gros boutons génériques. */
.artb{display:flex;gap:2px;margin:20px 0 18px;border-bottom:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}
.artb::-webkit-scrollbar{display:none}
.artb button{position:relative;flex:none;display:flex;align-items:center;gap:8px;padding:12px 16px 13px;border:0;background:none;color:var(--mut);font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.artb button svg{width:15px;height:15px;opacity:.7}
.artb button:hover{color:var(--fg)}
.artb button.on{color:var(--fg)}.artb button.on svg{opacity:1;color:var(--ac)}
.artb button.on:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.artb .nb2{margin-left:2px}
/* petits boutons texte (lien d'action) */
.arlk{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;background:#ffffff08;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:600 12.5px var(--sans);cursor:pointer;white-space:nowrap}
.arlk svg{width:14px;height:14px;color:var(--mut)}
.arlk:hover{background:#ffffff10;box-shadow:inset 0 0 0 1px #5a5a60}.arlk:disabled{opacity:.4;cursor:default}
.arlk.rv{background:#ff5a1f1a;box-shadow:inset 0 0 0 1px #ff5a1f55;color:#ffb08a}.arlk.rv svg{color:var(--ac)}
.arsh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 12px}.arsh h2{margin:0;font:800 19px var(--sans)}
/* bandeau défense */
.ardx{display:grid;grid-template-columns:minmax(180px,260px) auto 1fr;align-items:center;gap:22px;padding:16px 20px;border-radius:14px;background:repeating-radial-gradient(circle at 0 50%,#ffffff03 0 2px,transparent 2px 5px),#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.ardx.need{box-shadow:inset 0 0 0 1px #ff5a1f66;background:repeating-radial-gradient(circle at 0 50%,#ff5a1f08 0 2px,transparent 2px 5px),#140f0d}
.ardxi small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ardxi b{display:block;margin:3px 0 2px;font:900 26px var(--sans);font-variant-numeric:tabular-nums}.ardxi b.nd{font-size:20px;color:#ffb08a}
.ardxi span{font-size:12.5px;color:var(--mut)}
.ardxs{display:flex;gap:10px;justify-content:center}
.ards{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;color:var(--fg)}
.ards .mc{width:62px}.ards .mc b,.ards .mc small{display:none}
.ards>small{font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ards.sup{margin-left:12px}.ards.sup:before{content:"";position:absolute;left:-12px;top:6px;bottom:22px;border-left:1px dashed var(--ln2)}
.ards.vide>span{display:grid;place-items:center;width:62px;aspect-ratio:1;border-radius:6px;border:1px dashed #ff5a1f66;color:#ff8a5c;background:#ff5a1f0a}
.ards:hover .mc i{transform:translateY(-2px)}
.ardxa{display:flex;flex-direction:column;gap:8px;justify-self:end}
/* adversaires */
.aros2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.aro2{--lc:#d08a52;position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:14px;background:linear-gradient(170deg,color-mix(in srgb,var(--lc) 12%,#121215),#111113 60%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 28%,var(--ln))}
.aro2 header{display:flex;align-items:center;gap:12px}.aro2 .arav{width:42px;height:42px;font-size:17px}
.aron{flex:1;min-width:0}.aron b{display:block;font:800 16px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aron small{font-size:12px;color:var(--mut)}
.aro2 .arbg.md{width:40px;height:46px}
.arod{display:flex;justify-content:space-between;align-items:flex-end;padding:10px 12px;border-radius:10px;background:#0a0a0c;box-shadow:inset 0 0 0 1px #ffffff08}
.arod>span{display:flex;flex-direction:column;gap:7px}.arod>span:last-child{align-items:flex-end}
.arod small{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.arod b{font:800 18px var(--sans);font-variant-numeric:tabular-nums}
.arog2{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}.arog2 .w b{color:var(--ok)}.arog2 .l b{color:var(--no)}
.arat{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:0;border-radius:10px;cursor:pointer;color:#170803;font:800 14px var(--sans);
 background:linear-gradient(180deg,#ff7a3d,#ff5a1f 55%,#e04812);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 0 #0003,0 6px 18px -8px #ff5a1f;transition:transform .12s,filter .12s}
.arat svg{width:17px;height:17px}.arat span{flex:1;text-align:left}
.arat em{font:800 11px var(--mono);font-style:normal;padding:3px 7px;border-radius:6px;background:#0000002a}
.arat:hover{filter:brightness(1.08)}.arat:active{transform:translateY(1px)}
.arat:disabled{cursor:default;background:#1b1b1f;color:var(--mut);box-shadow:inset 0 0 0 1px var(--ln2)}
.aro2.used{opacity:.55}.aro2 .aroused{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border-radius:10px;background:#ffffff06;color:var(--mut);font-size:13px}
/* journal */
.arlgl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.arl2{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i m d" "i a a";align-items:center;gap:4px 12px;padding:12px 14px;border-radius:12px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.arl2 .arli{grid-area:i;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff08;color:var(--mut)}
.arl2.att.win .arli,.arl2.def.lose .arli{background:#34d39918;color:var(--ok)}.arl2.att.lose .arli,.arl2.def.win .arli{background:#f8717118;color:var(--no)}
.arl2 .arlm{grid-area:m;min-width:0}.arl2 .arlm b{display:block;font:700 14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arl2 .arlm small{font-size:12px;color:var(--mut)}
.arl2 .ard{grid-area:d;font:900 17px var(--sans);font-style:normal;font-variant-numeric:tabular-nums;color:var(--mut)}.arl2 .ard.up{color:var(--ok)}.arl2 .ard.down{color:var(--no)}
.arl2 .arla{grid-area:a;display:flex;gap:6px;margin-top:4px}.arl2 .arlk{height:28px;font-size:12px;padding:0 10px}
/* classement */
.arrkh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.arseg{display:inline-flex;padding:3px;border-radius:10px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.arseg button{padding:7px 14px;border:0;border-radius:8px;background:none;color:var(--mut);font:700 12.5px var(--sans);cursor:pointer}.arseg button.on{background:#ffffff12;color:var(--fg)}
.arpod{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:14px;max-width:620px;margin:18px auto 22px}
.arpd{--lc:#d08a52;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;text-align:center;min-width:0}
.arvi{position:relative;display:grid;place-items:center;width:100%;max-width:150px;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,transparent 0 31%,#0b0b0d 32%),repeating-radial-gradient(circle,#18181b 0 1px,#0b0b0d 1px 3px);box-shadow:0 0 0 2px color-mix(in srgb,var(--lc) 55%,transparent),0 14px 30px -12px #000}
.arvi:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,#ffffff12 15%,transparent 20% 60%,#ffffff0d 64%,transparent 70%)}
.arvi .av{position:relative;z-index:1;width:42%;height:42%;font-size:clamp(14px,3.6vw,26px);box-shadow:0 0 0 3px #0b0b0d,0 0 0 4px color-mix(in srgb,var(--lc) 70%,transparent)}
.arpd.p1 .arvi{max-width:180px;box-shadow:0 0 0 2px #f5c542,0 0 30px -6px #f5c54288,0 14px 30px -12px #000}
.arpd em{margin-top:6px;font:900 13px var(--mono);font-style:normal;color:var(--mut)}.arpd.p1 em{color:#f5c542}.arpd.p2 em{color:#cbd5e1}.arpd.p3 em{color:#d9a066}
.arpd b{max-width:100%;font:800 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arpd small{display:flex;align-items:center;font-size:12px;color:var(--mut)}
.arpd.me b{color:#ffb08a}.arpd.none{opacity:.3}
.arrl{border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}.arrl.mine{margin-top:10px}
.arw2{display:grid;grid-template-columns:34px 34px minmax(0,1fr) auto 70px;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;border-top:1px solid #ffffff07}
.arw2:first-child{border-top:0}.arw2:hover{background:#ffffff05}
.arw2 .arrn{font:800 13px var(--mono);color:var(--mut)}.arw2 .arrg b{display:block;font:700 14px var(--sans)}.arw2 .arrg b i{font:700 9px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-left:6px}
.arw2 .arrg small{font-size:11.5px;color:var(--mut)}.arw2 .arrt{display:flex;align-items:center;font-size:12.5px;color:var(--mut)}
.arw2 .arrp3{text-align:right;font:900 16px var(--sans);font-variant-numeric:tabular-nums}
.arw2.me{background:linear-gradient(90deg,#ff5a1f1c,transparent 70%);box-shadow:inset 3px 0 0 var(--ac)}
/* ligues : frise + détail */
.arlt{border-radius:16px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}
.arltr{position:relative;display:grid;grid-template-columns:repeat(7,minmax(84px,1fr));overflow-x:auto;scrollbar-width:none;padding:16px 10px 12px;border-bottom:1px solid var(--ln)}
.arltr::-webkit-scrollbar{display:none}
.arltr:before{content:"";position:absolute;left:7%;right:7%;top:42px;height:2px;background:repeating-linear-gradient(90deg,#ffffff1c 0 6px,transparent 6px 10px)}
.arlb{--lc:#d08a52;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 4px 8px;border:0;border-radius:10px;background:none;color:var(--mut);cursor:pointer}
.arlb .arbg{filter:grayscale(.7) brightness(.7);transition:filter .15s,transform .15s}.arlb.done .arbg,.arlb.cur .arbg,.arlb.on .arbg{filter:none}
.arlb b{font:700 12px var(--sans)}.arlb.on{background:color-mix(in srgb,var(--lc) 14%,transparent);color:var(--fg)}.arlb.on .arbg{transform:translateY(-2px)}
.arlb em{font:700 8.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--lc)}
.arld{--lc:#d08a52;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;padding:20px 24px;background:radial-gradient(120% 120% at 0 0,color-mix(in srgb,var(--lc) 12%,transparent),transparent 60%)}
.arldh{display:flex;align-items:center;gap:18px}.arldh small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.arldh h3{margin:2px 0;font:900 28px var(--sans);color:var(--lc)}.arldh span{font-size:13px;color:var(--mut)}
.ardly2{display:flex;width:max-content;align-items:center;gap:6px;margin-top:10px;padding:6px 10px;border-radius:8px;background:#a78bfa14;box-shadow:inset 0 0 0 1px #a78bfa40;font-size:12.5px;color:#d8ccff}.ardly2 b{color:#fff}
.ardvs{display:flex;flex-direction:column;gap:6px}.ardvs>small{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.ardv{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;background:#0a0a0c;box-shadow:inset 0 0 0 1px #ffffff08}
.ardv>b{min-width:84px;font:700 13px var(--sans)}.ardv>span{flex:1;display:flex;flex-wrap:wrap;gap:8px}.ardv>em{color:var(--ok);display:flex}
.ardv.got{opacity:.6}
/* règles en fiches */
.arru h2{margin:28px 0 12px;font:800 19px var(--sans)}.arru h3{margin:26px 0 4px;font:800 15px var(--sans)}
.arrug{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.arr2{padding:14px;border-radius:12px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.arr2 i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#ff5a1f14;color:var(--ac);margin-bottom:8px}.arr2 i svg{width:15px;height:15px}
.arr2 b{display:block;font:800 14px var(--sans);margin-bottom:3px}.arr2 p{margin:0;font-size:12.5px;line-height:1.45;color:var(--mut)}
.arrol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.arro{padding:10px 12px;border-radius:10px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.arro b{display:flex;align-items:center;gap:6px;font:800 13px var(--sans);color:var(--rl,var(--fg))}.arro b i{font-style:normal}
.arro span{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--mut)}

/* ---------- duels entre amis (format Arène) ---------- */
.fdtop{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:26px;padding:16px 20px;border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.fdtop small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.fdrec b{font:900 28px var(--sans);font-variant-numeric:tabular-nums}.fdrec b i{font-style:normal;color:var(--mut);margin:0 4px}
.fdrw span{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:4px;margin-top:6px}
.fdpips{display:flex;gap:4px}.fdpips i{width:22px;height:8px;border-radius:3px;background:#ffffff10;transform:skewX(-12deg)}.fdpips i.on{background:linear-gradient(180deg,#c4b5fd,#8b5cf6)}
.fdhow{margin:0;font-size:12.5px;line-height:1.5;color:var(--mut)}.fdhow b{color:var(--fg)}
.fdsec h3{display:flex;align-items:center;gap:8px;margin:26px 0 12px;font:800 17px var(--sans)}
.fdcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.fdc{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:linear-gradient(170deg,#ff5a1f14,#111114 55%);box-shadow:inset 0 0 0 1px #ff5a1f44}
.fdc.out{background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.fdc header{display:flex;align-items:center;gap:10px}.fdc header b{display:block;font:800 15px var(--sans)}.fdc header small{font-size:12px;color:var(--mut)}
.fdk{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.fdtm{display:flex;gap:8px}.fdtm .mc{width:54px}.fdtm .mc b,.fdtm .mc small{display:none}.fdtm span.a{margin-left:6px;padding-left:10px;border-left:1px dashed var(--ln2)}
.fdc footer{display:flex;justify-content:flex-end;gap:8px}
.fdgo{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:9px;cursor:pointer;color:#170803;font:800 13px var(--sans);
 background:linear-gradient(180deg,#ff7a3d,#ff5a1f 55%,#e04812);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 0 #0003}
.fdgo svg{width:15px;height:15px}.fdgo:disabled{background:#1b1b1f;color:var(--mut);box-shadow:inset 0 0 0 1px var(--ln2);cursor:default}
.fdl{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:9px;background:#ffffff08;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:600 12.5px var(--sans);cursor:pointer}
.fdl svg{width:13px;height:13px;color:var(--mut)}.fdl:disabled{opacity:.4;cursor:default}
.fdfs{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.fdf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"a n h" "x x x";align-items:center;gap:10px 12px;padding:14px;border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.fdav{grid-area:a;position:relative;display:flex}.fdav .av{width:44px;height:44px;font-size:18px}
.fdfn{grid-area:n;min-width:0}.fdfn b{display:block;font:800 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fdfn small{display:flex;align-items:center;font-size:12px;color:var(--mut)}
.fdh2h{grid-area:h;font:700 12px var(--mono);color:var(--mut);padding:5px 9px;border-radius:7px;background:#0a0a0c}.fdh2h b{color:var(--fg)}
.fdfa{grid-area:x;display:flex;gap:8px}.fdfa>*{flex:1;justify-content:center}
.fdrs{display:flex;flex-direction:column;border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}
.fdr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid #ffffff07}.fdr:first-child{border-top:0}
.fdr>em{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;font:900 12px var(--mono);font-style:normal}
.fdr.w>em{background:#34d39920;color:var(--ok)}.fdr.l>em{background:#f8717120;color:var(--no)}
.fdr>span{flex:1;min-width:0;font-size:13.5px}.fdr>span small{display:block;font-size:11.5px;color:var(--mut)}
.fdr .fdl{height:30px}
.fdempty{padding:22px;border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln);text-align:center}.fdempty p{color:var(--mut);margin:4px 0 12px}
.fdch{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.fdo{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;padding:14px 16px;border:0;border-radius:12px;background:#ffffff06;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);text-align:left;cursor:pointer}
.fdo i{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#ff5a1f18;color:var(--ac)}
.fdo b{font:800 15px var(--sans)}.fdo span{font-size:12.5px;color:var(--mut)}
.fdo:hover{box-shadow:inset 0 0 0 1px #ff5a1f88}.fdo:disabled{opacity:.45;cursor:default}

@media(max-width:1100px){.arrug,.arrol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.aros2{grid-template-columns:1fr 1fr}.arlgl{grid-template-columns:1fr}
 .ardx{grid-template-columns:1fr auto;grid-template-areas:"i a" "s s"}.ardxi{grid-area:i}.ardxs{grid-area:s;justify-content:flex-start}.ardxa{grid-area:a;flex-direction:row}
 .arld{grid-template-columns:1fr}.fdtop{grid-template-columns:auto 1fr}.fdhow{grid-column:1/-1}}
@media(max-width:760px){.aros2{grid-template-columns:1fr}
 .artb{margin:14px -16px 14px;padding:0 10px}.artb button{padding:11px 11px 12px;font-size:10px;letter-spacing:.1em}.artb button svg{display:none}
 .ardx{grid-template-columns:1fr;grid-template-areas:"i" "s" "a";padding:14px;gap:14px}.ardxa>*{flex:1;justify-content:center}
 .ardxs{justify-content:space-between;gap:6px}.ards .mc,.ards.vide>span{width:min(62px,17vw)}.ards.sup{margin-left:8px}.ards.sup:before{left:-7px}
 .arw2{grid-template-columns:26px 30px minmax(0,1fr) 54px;gap:10px;padding:10px 12px}.arw2 .arrt{display:none}.arw2 .av{width:30px;height:30px;font-size:13px}
 .arpod{gap:8px}.arpd b{font-size:13px}
 .arltr{grid-template-columns:repeat(7,84px);padding:14px 6px 10px}.arld{padding:16px}.arldh .arbg.xl{width:64px;height:72px}.arldh h3{font-size:24px}
 .arrug,.arrol{grid-template-columns:1fr 1fr;gap:8px}.arr2{padding:12px}.arr2 p{font-size:12px}
 .ardv{flex-wrap:wrap;gap:6px 10px}.ardv>b{min-width:0}
 .fdtop{gap:14px 20px;padding:14px}.fdfs,.fdcs{grid-template-columns:1fr}}
@media(max-width:760px){.arr2{display:grid;grid-template-columns:auto 1fr;align-items:center;align-content:start;gap:6px 8px}.arr2 i{width:24px;height:24px;margin:0}.arr2 b{margin:0;font-size:13px}.arr2 p{grid-column:1/-1;font-size:11.5px}}
@media(max-width:330px){.arrug{grid-template-columns:1fr}}

/* ---------- Amis v2 : liste vivante, accueil, discussion ---------- */
.sophd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.sotag{display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:12px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);cursor:pointer;text-align:left}
.sotag svg{color:var(--ac)}.sotag small{display:block;font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.sotag b{font:800 14px var(--sans)}
.sotag em{font:700 11px var(--sans);font-style:normal;color:var(--mut);padding:4px 8px;border-radius:6px;background:#ffffff08}.sotag:hover em{color:var(--fg)}
#v-friends .artb{margin-top:6px}
.so2{border-radius:16px;background:#0e0e10}
.so2 .fl{background:#111114}
.so2 #fll h4{margin:14px 10px 6px}
.sotds{display:flex;flex-direction:column;gap:6px;padding:0 4px}
.sotd{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#ff5a1f0d;box-shadow:inset 0 0 0 1px #ff5a1f33}
.sotd.trade{background:#a855f70d;box-shadow:inset 0 0 0 1px #a855f733}
.sotd>span{flex:1;min-width:0}.sotd b{display:block;font:700 14px var(--sans)}.sotd small{font-size:12px;color:var(--mut)}
.soic{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;border-radius:9px;background:#ffffff0a;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--mut);cursor:pointer}
.soic svg{width:15px;height:15px}.soic.ok{background:#34d3991a;box-shadow:inset 0 0 0 1px #34d39955;color:var(--ok)}.soic:hover{color:var(--fg)}
.sogo{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;flex:none;border:0;border-radius:9px;cursor:pointer;color:#170803;font:800 12.5px var(--sans);background:linear-gradient(180deg,#ff7a3d,#ff5a1f 55%,#e04812);box-shadow:inset 0 1px 0 #ffffff55}
.sogo svg{width:14px;height:14px}.sotd.trade .sogo{background:linear-gradient(180deg,#c084fc,#a855f7);color:#12061c}
.so2 .fr2{padding:10px;border-radius:12px;gap:12px}
.so2 .fr2 b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so2 .fr2 small{font:500 12.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so2 .fr2 small.un{color:var(--fg);font-weight:700}.so2 .fr2 .tg.duel{color:#ffb08a}
.so2 .fr2.unr b{color:#fff}
.so2 .fr2 .pres{display:block}
.so2 .fr2>.sfm{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow:visible}.sfm time{font:600 11px var(--sans);color:var(--mut)}
.so2 .fdav .av{width:42px;height:42px;font-size:17px}.so2 .fr2>.fdav{flex:none;display:flex;overflow:visible}
.soempty{margin:6px;padding:16px;border-radius:12px;background:#ffffff05;text-align:center}.soempty p{margin:4px 0 0;font-size:13px;color:var(--mut)}
/* accueil */
.sohome{flex:1;overflow:auto;padding:22px}
.sohome.empty2{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.sohome.empty2 p{max-width:380px;color:var(--mut);margin:0 0 8px}
.sohh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.sohh h3{margin:0;font:800 18px var(--sans)}
.sofg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sofc{display:flex;flex-direction:column;border-radius:14px;background:#141417;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}
.sofh{display:flex;align-items:center;gap:12px;padding:14px 14px 10px;border:0;background:none;color:var(--fg);text-align:left;cursor:pointer}
.sofh .fdav .av{width:48px;height:48px;font-size:19px}.sofh>span:last-child{min-width:0}.sofh b{display:block;font:800 16px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sofh small{font-size:12px}
.sofs{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 14px 12px;font-size:12px;color:var(--mut)}.sofs span{display:flex;align-items:center;gap:4px}.sofs svg{width:13px;height:13px}.sofs b{color:var(--fg)}
.sofa{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln)}
.sofa button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:0;background:none;color:var(--mut);font:600 11.5px var(--sans);cursor:pointer}
.sofa button+button{border-left:1px solid var(--ln)}.sofa button:hover{background:#ffffff06;color:var(--fg)}.sofa button:hover svg{color:var(--ac)}.sofa svg{width:17px;height:17px}
.sotips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.sotips>div{display:flex;gap:10px;padding:12px;border-radius:12px;background:#ffffff04;box-shadow:inset 0 0 0 1px #ffffff08;font-size:12.5px;color:var(--mut);line-height:1.45}
.sotips svg{color:var(--ac);margin-top:2px}.sotips b{display:block;color:var(--fg);font-size:13px}
/* discussion */
.so2 .cth{padding:12px 16px;background:#111114}
.so2 .cti small.pres{display:block}.so2 .cti small:empty:before{content:"Voir son profil"}
.soact{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--ln);background:#111114;overflow-x:auto;scrollbar-width:none}
.soact button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;flex:none;border:0;border-radius:999px;background:#ffffff08;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:700 12.5px var(--sans);cursor:pointer}
.soact button svg{width:15px;height:15px;color:var(--ac)}.soact button:hover{background:#ff5a1f14;box-shadow:inset 0 0 0 1px #ff5a1f66}
.sovs{margin-left:auto;flex:none;font:600 12px var(--sans);color:var(--mut)}.sovs b{color:var(--fg)}
.msg.grp{margin-top:-5px}.msg.grp time{display:none}
.sodl{align-self:center;display:flex;align-items:center;gap:12px;width:min(460px,100%);margin:4px 0;padding:10px 12px;border-radius:12px;background:#141417;box-shadow:inset 0 0 0 1px var(--ln2)}
.sodl>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#ffffff08;color:var(--mut)}.sodl>span{flex:1;min-width:0}.sodl b{display:block;font:700 13.5px var(--sans)}.sodl small{font-size:12px;color:var(--mut)}
.sodl.w>i{background:#34d39918;color:var(--ok)}.sodl.l>i{background:#f8717118;color:var(--no)}.sodl.wait{box-shadow:inset 0 0 0 1px #ff5a1f55;background:#ff5a1f0a}.sodl.wait>i{background:#ff5a1f1a;color:var(--ac)}
.sodl .fdl{height:30px}
.soth0{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:320px;text-align:center}.soth0 .av{width:64px;height:64px;font-size:26px;margin-bottom:6px}.soth0 p{margin:0;font-size:13px;color:var(--mut)}
.sotyp{display:flex;align-items:center;gap:4px;padding:0 18px 6px;background:#0f0f11;font-size:12px;color:var(--mut)}
.sotyp i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:sotyp 1.2s infinite}.sotyp i:nth-child(2){animation-delay:.15s}.sotyp i:nth-child(3){animation-delay:.3s}.sotyp span{margin-left:6px}
@keyframes sotyp{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.soqr{display:flex;gap:6px;padding:8px 12px 0;background:#121214;border-top:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}.soqr::-webkit-scrollbar{display:none}
.soqr button{flex:none;height:30px;padding:0 12px;border:0;border-radius:999px;background:#ffffff08;box-shadow:inset 0 0 0 1px var(--ln2);color:var(--fg);font:600 12.5px var(--sans);cursor:pointer}.soqr button:hover{box-shadow:inset 0 0 0 1px var(--ac)}
.soqr.few{display:none}.soqr+.cin{border-top:0}
@media(max-width:760px){.sophd{align-items:flex-start}.sotag em{display:none}.sotag{padding:7px 10px}
 .sohome{padding:14px}.sotips{grid-template-columns:1fr}.soact button span{display:inline}.sovs{display:none}}
/* discussion de guilde v2 */
.gpv{display:flex;align-items:center;gap:12px;width:100%;margin:-4px 0 16px;padding:10px 14px;border:0;border-radius:12px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);text-align:left;cursor:pointer}
.gpv .av{width:32px;height:32px;font-size:13px}.gpv>span{flex:1;min-width:0}.gpv b{display:block;font:700 13px var(--sans)}.gpv b em{font-style:normal;font-weight:600;color:var(--ac)}
.gpv small{display:block;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gpv time{flex:none;font-size:11.5px;color:var(--mut)}
.gpv>i{flex:none;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#ffffff08;font:700 12px var(--sans);font-style:normal;color:var(--fg)}.gpv>i svg{width:14px;height:14px;color:var(--ac)}
.gpv.new{background:linear-gradient(90deg,#ff5a1f14,#111114 60%);box-shadow:inset 0 0 0 1px #ff5a1f55}.gpv.new>i{background:var(--ac);color:#170803}.gpv.new>i svg{color:#170803}
.gpv:hover{box-shadow:inset 0 0 0 1px #ff5a1f88}
.gchat.g2{border-radius:16px}
.gch{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--ln);background:#111114}
.gon{display:flex}.gon .fdav{margin-right:-6px;text-decoration:none}.gon .av{width:30px;height:30px;font-size:12px;box-shadow:0 0 0 2px #111114}.gon .pdot{width:10px;height:10px;box-shadow:0 0 0 2px #111114}
.gch .mut{margin-left:10px}
.gmsg.grp{margin-top:-5px}.gmsg.grp .gav{visibility:hidden}.gmsg .msg.grp time{display:none}
.gev{align-self:center;display:flex;align-items:center;gap:8px;max-width:90%;padding:6px 12px;border-radius:999px;background:#ffffff06;box-shadow:inset 0 0 0 1px #ffffff0d;font-size:12px;color:var(--mut)}
.gev i{display:flex;color:var(--ac)}.gev i svg{width:13px;height:13px}.gev b{color:var(--fg)}
.gev.boss_kill,.gev.level{background:#f5c5420d;box-shadow:inset 0 0 0 1px #f5c54233}.gev.boss_kill i,.gev.level i{color:#f5c542}
.thr>*{flex-shrink:0}
@media(max-width:760px){#v-friends:has(.soc.open) .sophd,#v-friends:has(.soc.open) #stab{display:none}
 #v-friends .soc.open{height:calc(100dvh - var(--hh) - var(--st) - var(--nav) - 40px)}.gpv time{display:none}}
.sotyp[hidden]{display:none}

/* ---------- choix d'équipe (Arène, guerre, duels) : rack fixe en haut, cartes au milieu, bouton toujours visible ---------- */
#sheet.tps .sb{display:flex;flex-direction:column;height:min(92dvh,900px);padding:0;overflow:hidden;border-radius:16px;background:#0f0f12}
.tp{display:flex;flex-direction:column;min-height:0;height:100%}
.tph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 10px}
.tph small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}.tp.def .tph small{color:#5ab4ff}
.tph b{font:800 19px var(--sans)}
.tp .wpre{padding:0 20px;margin:0 0 8px}
.tprk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr);gap:10px;margin:0 20px;padding:12px;border-radius:14px;
 background:repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 22px),linear-gradient(180deg,#18181c,#121215);box-shadow:inset 0 0 0 1px var(--ln)}
.tps1{--c:#ffffff30;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 6px 6px;border-radius:12px;cursor:pointer;text-align:center}
.tps1.on{background:color-mix(in srgb,var(--c) 9%,transparent)}
.tps1.next{background:#ff5a1f10;box-shadow:inset 0 0 0 1px #ff5a1f66}.tp.def .tps1.next{background:#5ab4ff10;box-shadow:inset 0 0 0 1px #5ab4ff66}
.tps1.art{border-left:1px dashed #ffffff1c;border-radius:0 12px 12px 0}
.tpn{position:absolute;top:4px;left:6px;z-index:2;font:900 12px var(--mono);font-style:normal;color:var(--c)}
.tpcv,.tpe{position:relative;display:grid;place-items:center;width:min(72px,100%);aspect-ratio:1;border-radius:10px;background-size:cover!important;background-position:center!important}
.tpcv{border:0;padding:0;cursor:pointer;box-shadow:0 0 0 2px var(--c),0 8px 18px -6px color-mix(in srgb,var(--c) 70%,transparent)}
.tpcv i{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#0c0c0d;box-shadow:0 0 0 1px #ffffff40;opacity:.85}.tpcv i svg{width:10px;height:10px}
.tpcv:hover i{opacity:1;background:#3a0d0d}
.tpe{border:1.5px dashed #ffffff26;color:#ffffff40}.tps1.next .tpe{border-color:#ff5a1f88;color:#ff8a5c;animation:tpp 1.6s ease-in-out infinite}.tp.def .tps1.next .tpe{border-color:#5ab4ff88;color:#8cc8ff}
@keyframes tpp{50%{transform:scale(1.04)}}
.tps1>b{max-width:100%;font:700 12px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tps1>small{display:flex;gap:8px;justify-content:center;font:600 10px var(--mono);color:var(--mut)}.tps1>small b{color:var(--fg)}
.tps1.art>small{max-width:100%}.tps1.art .aura{max-width:100%;font-size:10px;padding:2px 6px}.tps1.art .aura span{display:none}
.tpmv{display:grid;grid-template-columns:22px 1fr 22px;align-items:center;width:100%;max-width:92px}.tpmv>i{font:700 8.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.tpmv button{height:22px;border:0;border-radius:6px;background:#ffffff10;color:var(--fg);font:800 14px/1 var(--sans);cursor:pointer}.tpmv button:hover{background:#ffffff22}
.tpc{display:flex;gap:8px;align-items:center;margin:12px 20px 0}
.tptab{display:flex;flex:none;padding:3px;border-radius:10px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln)}
.tptab button{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--mut);font:700 12.5px var(--sans);cursor:pointer}
.tptab button.on{background:#ffffff14;color:var(--fg)}.tptab em{font:700 10px var(--mono);font-style:normal;padding:2px 6px;border-radius:6px;background:#ffffff10}.tptab .done em{background:#10b98133;color:#6ee7b7}
.tpc .search{flex:1;height:38px;min-width:0}.tpc select{flex:none;height:38px;padding:0 10px;border:0;border-radius:10px;background:#16161a;color:var(--fg);font:600 12.5px var(--sans);box-shadow:inset 0 0 0 1px var(--ln)}
.tp .pkf{margin:10px 20px 0}
.tpg{flex:1;min-height:0;max-height:none!important;margin:0!important;padding:12px 20px 16px!important;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;gap:12px!important;align-content:start}
.tpg .pk{padding:6px;border-radius:12px;background:#141417;box-shadow:inset 0 0 0 1px var(--ln);transition:box-shadow .12s,transform .12s}
.tpg .pk:hover{box-shadow:inset 0 0 0 1px #ffffff30}.tpg .pk.on{background:#ff5a1f12;box-shadow:inset 0 0 0 2px var(--ac)}.tp.def .tpg .pk.on{background:#5ab4ff12;box-shadow:inset 0 0 0 2px #5ab4ff}
.tpg .pk .mc{width:100%}.tpg .pk .mc.sel i{box-shadow:none}
.tpg .pkn{top:10px;left:10px;width:24px;height:24px;font-size:13px}.tp.def .tpg .pkn{background:#5ab4ff;color:#04121f}
.tpf{display:flex;align-items:center;gap:14px;padding:12px 20px calc(12px + var(--sb));border-top:1px solid var(--ln);background:#121215}
.tpsum{flex:1;min-width:0}.tpsum b{display:block;font:800 14px var(--sans)}.tpsum small{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpgo{display:flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:12px;cursor:pointer;color:#170803;font:800 15px var(--sans);
 background:linear-gradient(180deg,#ff7a3d,#ff5a1f 55%,#e04812);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -3px 0 #0003,0 8px 22px -10px #ff5a1f}
.tp.def .tpgo{background:linear-gradient(180deg,#7cc4ff,#3b9cff 55%,#2a7fe0);color:#04121f;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -3px 0 #0003,0 8px 22px -10px #3b9cff}
.tpgo:disabled{background:#1d1d22;color:var(--mut);box-shadow:inset 0 0 0 1px var(--ln2);cursor:default}
@media(max-width:760px){#sheet.tps{padding:0}#sheet.tps .sb{height:100dvh;max-height:none;border-radius:0}
 .tph{padding:calc(12px + var(--st)) 14px 8px}.tph b{font-size:17px}.tp .wpre{padding:0 14px}
 .tprk{margin:0 10px;padding:8px 6px;gap:4px}.tps1{padding:6px 2px 4px}.tpcv,.tpe{width:min(58px,100%)}.tps1>small{flex-direction:column;gap:0}.tps1>b{font-size:11px}
 .tpc{margin:10px 10px 0;flex-wrap:wrap}.tpc .search{order:3;flex-basis:100%}.tpc select{flex:1}
 .tp .pkf{margin:8px 10px 0}.tpg{padding:10px 10px 14px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
 .tpf{padding:10px 12px calc(10px + var(--sb))}.tpgo{height:46px;padding:0 16px;font-size:14px}}

/* bouton d'attaque : disque qui sort de sa pochette */
.arat2{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 14px 8px 8px;border:0;border-radius:12px;cursor:pointer;text-align:left;color:var(--fg);overflow:hidden;
 background:linear-gradient(90deg,#ff5a1f24,#ff5a1f08 60%),#151518;box-shadow:inset 0 0 0 1px #ff5a1f66;transition:box-shadow .15s,background .15s}
.arat2 .arvn{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:repeating-radial-gradient(circle,#0b0b0d 0 1.5px,#1f1f23 1.5px 3px);box-shadow:0 0 0 1px #000,2px 3px 8px #0008;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.arat2 .arvn i{position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle,#0b0b0d 0 2px,var(--ac) 2.5px)}
.arat2 .arvn:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 10%,#ffffff1a 14%,transparent 20% 60%,#ffffff12 64%,transparent 70%)}
.arat2>span{flex:1;min-width:0}.arat2>span>b{display:block;font:800 15px var(--sans)}.arat2>span>small{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arat2 small .w{color:var(--ok)}.arat2 small .l{color:var(--no)}
.arat2 .arch{flex:none;display:flex;color:var(--ac);transform:rotate(180deg);transition:transform .15s}
.arat2:hover{background:linear-gradient(90deg,#ff5a1f3a,#ff5a1f12 60%),#151518;box-shadow:inset 0 0 0 1px var(--ac),0 6px 20px -10px var(--ac)}
.arat2:hover .arvn{transform:translateX(4px) rotate(200deg)}.arat2:hover .arch{transform:rotate(180deg) translateX(-3px)}
.arat2:disabled{cursor:default;background:#141417;box-shadow:inset 0 0 0 1px var(--ln2)}.arat2:disabled .arvn i{background:radial-gradient(circle,#0b0b0d 0 2px,#55545a 2.5px)}.arat2:disabled .arch{color:var(--mut)}
.arat2:disabled:hover .arvn{transform:none}
/* classement hit-parade */
.arcl{border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln);overflow:hidden}.arcl.mine{margin-top:10px}
.arch2{display:grid;grid-template-columns:44px 40px minmax(0,1fr) 150px;gap:14px;padding:10px 18px;border-bottom:1px solid var(--ln);font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}.arch2 span:last-child{text-align:right}
.arc{--lc:#d08a52;display:grid;grid-template-columns:44px 40px minmax(0,1fr) 150px;align-items:center;gap:14px;padding:12px 18px;text-decoration:none;border-top:1px solid #ffffff07;transition:background .12s}
.arc:first-of-type{border-top:0}.arc:hover{background:#ffffff05}
.arcp{font:900 22px var(--sans);font-variant-numeric:tabular-nums;color:#ffffff40;letter-spacing:-.02em}
.arc .arbg{justify-self:center}
.arcn{min-width:0}.arcn b{display:block;font:800 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arcn b i{font:700 9px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-left:6px}
.arcn small{font-size:12px;color:var(--mut)}
.arcs{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.arcs b{font:900 17px var(--sans);font-variant-numeric:tabular-nums}.arcs .arbar{width:100%;height:4px}
.arc.rk1 .arcp{color:#f5c542}.arc.rk2 .arcp{color:#cbd5e1}.arc.rk3 .arcp{color:#d9a066}
.arc.rk1,.arc.rk2,.arc.rk3{padding:16px 18px}.arc.rk1{background:linear-gradient(90deg,#f5c54214,transparent 50%)}
.arc.me{background:linear-gradient(90deg,#ff5a1f1c,transparent 70%);box-shadow:inset 3px 0 0 var(--ac)}
@media(max-width:760px){.arch2{display:none}.arc{grid-template-columns:28px 32px minmax(0,1fr) 72px;gap:10px;padding:10px 12px}.arc.rk1,.arc.rk2,.arc.rk3{padding:12px}
 .arcp{font-size:17px}.arc .arbg.md{width:32px;height:36px}}
/* amis : leur défense en couleurs, l'attaque, le défi */
.fdfs2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.fdf2{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:#111114;box-shadow:inset 0 0 0 1px var(--ln)}
.fdf2 header{display:flex;align-items:center;gap:12px}.fdf2 .fdfn{flex:1}
.fdf2 .arod.none em{font-size:12.5px;font-style:normal;color:var(--mut)}
.fddf{width:100%;justify-content:center;height:38px}
.fdo b .arrp{margin-left:8px;vertical-align:middle}
@media(max-width:760px){.fdfs2{grid-template-columns:1fr}}
.fdo b .arrp{display:inline-flex}

/* ---------- échanges v2 : table de deal ---------- */
.trtop2{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:22px;border-radius:14px;background:linear-gradient(90deg,#a855f71a,#111114 60%);box-shadow:inset 0 0 0 1px #a855f744}
.trtop2>i{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:#a855f722;color:#d8b4fe}.trtop2>div{flex:1}.trtop2 b{font:800 16px var(--sans)}.trtop2 p{margin:2px 0 0;font-size:13px;color:var(--mut)}
.sogo.big{height:42px;padding:0 16px;font-size:13.5px}
.tsec h3{display:flex;align-items:center;gap:8px}
.trd2{width:100%;margin:0 0 12px;border-radius:16px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln2);overflow:hidden;animation:up .3s both}
.thr .trd2{align-self:center;width:min(620px,100%);margin:6px 0}
.trd2 header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #ffffff0a;font-size:14px}
.trd2 header .av{width:30px;height:30px;font-size:12px}.trd2 header>span{flex:1;min-width:0}.trd2 header small{display:block;font-size:11.5px;color:var(--mut)}
.trd2.s-wait{box-shadow:inset 0 0 0 1px #a855f766;background:linear-gradient(180deg,#a855f70f,#121215 40%)}.trd2.s-ok{box-shadow:inset 0 0 0 1px #10b98155}.trd2.s-no{opacity:.6}
.trsw{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0}
.trside{display:flex;flex-direction:column;gap:10px;padding:14px 16px;min-width:0}
.trside h5{margin:0;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}.trside.get h5{color:#6ee7b7}
.trx{align-self:center;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1b1b20;box-shadow:inset 0 0 0 1px var(--ln2),0 0 0 6px #121215;color:#d8b4fe;margin:0 -6px;z-index:1}
.trs{gap:6px}.trs .mc{width:66px}.trs .mc b{font-size:11px}.trs .mc small{font-size:8.5px}
.trnil{display:grid;place-items:center;width:66px;aspect-ratio:1;border-radius:6px;border:1.5px dashed #ffffff1c;font-size:11px;color:var(--mut)}
.trmeta{display:flex;flex-wrap:wrap;gap:6px}.trmeta:empty{display:none}
.trmeta>i{font:700 10px var(--mono);font-style:normal;padding:4px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent)}
.trd2 footer{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid #ffffff0a;background:#0f0f12}
.rv2{margin:4px 0 14px;border-radius:14px;background:#121215;box-shadow:inset 0 0 0 1px var(--ln2)}
.rv2 .trside.get{background:linear-gradient(180deg,#10b9810d,transparent);border-radius:14px 0 0 14px}
/* compositeur */
#tsteps.steps{border:0;gap:6px;margin-bottom:14px}
#tsteps li{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border:0;border-radius:10px;background:#16161a;box-shadow:inset 0 0 0 1px var(--ln);text-transform:none;letter-spacing:0;font:700 13px var(--sans)}
#tsteps li:before{content:counter(s);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffffff12;font:800 11px var(--mono)}
#tsteps li.on{background:#a855f71a;box-shadow:inset 0 0 0 1px #a855f788}#tsteps li.on:before{background:#a855f7;color:#12061c}
#tsteps li.done:before{content:"✓";background:#10b98133;color:#6ee7b7}
.tfoot{position:sticky;bottom:0;margin:16px -24px -24px;padding:12px 24px calc(12px + var(--sb));border-top:1px solid var(--ln);background:#121215}
@media(max-width:760px){.trsw{grid-template-columns:1fr}.trx{justify-self:center;margin:-10px 0;transform:rotate(90deg)}.trtop2{flex-wrap:wrap}.trtop2 .sogo{width:100%;justify-content:center}
 .rv2 .trside.get{border-radius:14px 14px 0 0}#tsteps li{font-size:11.5px;padding:8px 4px}.tfoot{margin:16px -16px -16px;padding:10px 16px calc(10px + var(--sb))}}
.trd2 footer{background:#ffffff03}
.fdl.big{height:42px;padding:0 16px;font-size:13.5px}
.sogo.tra{background:linear-gradient(180deg,#c084fc,#a855f7);color:#12061c;box-shadow:inset 0 1px 0 #ffffff55,0 8px 20px -10px #a855f7}
.sogo:disabled{background:#1d1d22;color:var(--mut);box-shadow:inset 0 0 0 1px var(--ln2);cursor:default}

.arod.none>span{align-items:flex-start!important}

/* booster : bouton d'attente orange (atténué), texte aéré · attente réseau : le paquet respire au lieu de se figer */
.rip.wait{--edge:var(--ac2);background:var(--ac);color:#140702;cursor:default;filter:none}
.rip.wait:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0000 0 9px,#0000001a 9px 18px);pointer-events:none}
.rip.wait:hover{filter:none}.rip.wait:active{transform:none;border-bottom-width:3px}
.rip.wait .rl{gap:8px;padding:6px 16px 0;font-size:10.5px;letter-spacing:.09em}.rip.wait .rl svg{width:15px;height:15px;flex:none;stroke:#140702}
.pkslow{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:#000a;box-shadow:inset 0 0 0 1px #ffffff1a;font:700 10px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#ffb08a;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6}
.pkw.slow .pkslow{opacity:1}
.pkw.waitnet .pki{animation:pkbreath 1.4s ease-in-out infinite}
.pkw.waitnet .pki .beam{opacity:1;animation:pkbeam 1.4s ease-in-out infinite}
@keyframes pkbreath{0%,100%{transform:scale(1.06)}50%{transform:translateY(-5px) scale(1.075)}}
@keyframes pkbeam{0%,100%{transform:scaleY(.85);opacity:.55}50%{transform:scaleY(1);opacity:.95}}
.tpbest{display:inline-flex;align-items:center;gap:7px;flex:none;height:38px;padding:0 13px;border:0;border-radius:10px;cursor:pointer;color:#170803;font:800 12.5px var(--sans);
 background:linear-gradient(180deg,#ffd166,#f5a524);box-shadow:inset 0 1px 0 #ffffff66,0 6px 16px -8px #f5a524}.tpbest svg{width:15px;height:15px}
.tp.def .tpbest{background:linear-gradient(180deg,#a5dcff,#5ab4ff);color:#04121f}
.pksen{grid-column:1/-1;height:1px}
@media(max-width:760px){.tpbest{flex:1;justify-content:center}}

/* Arène : écran de préparation + mode téléphone allégé (moins d'effets coûteux, cartes sur leur propre calque) */
.arfight.prep .wfs{display:grid;place-items:center}
.arprep{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:fade .2s}
.arprep .wfvin{width:56px;height:56px;animation:wfspin 1.1s linear infinite}.arprep .wfvin i{inset:19px}
.arprep b{margin-top:8px;font:800 18px var(--sans)}.arprep small{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.arpt{display:flex;gap:8px;margin-top:14px}.arpt span{width:52px;aspect-ratio:1;border-radius:8px;padding:2px;background:var(--c);animation:arpt 1.2s ease-in-out infinite}.arpt span:nth-child(2){animation-delay:.12s}.arpt span:nth-child(3){animation-delay:.24s}.arpt span:nth-child(4){animation-delay:.36s;border-radius:50%}
.arpt i{display:block;width:100%;height:100%;border-radius:6px;background-size:cover!important}.arpt span:nth-child(4) i{border-radius:50%}
@keyframes arpt{50%{transform:translateY(-6px)}}
.arfight .wfc .slot{will-change:transform;contain:layout paint}
.arfight.mfx .wfs.shk{animation:none}
.arfight.mfx .wfgr,.arfight.mfx .wfsc{display:none}
.arfight.mfx .wfc .slot,.arfight.mfx .wfc.ko .slot{transition:transform calc(.18s * var(--sp,1)) ease-out}
.arfight.mfx .wfc.atk .slot .card,.arfight.mfx .wfc.arrip .slot .card{box-shadow:0 0 0 2px #ff6a2b}
.arfight.mfx .wfc.arrip .slot .card{box-shadow:0 0 0 2px #ef4444}
.arfight.mfx .wfc .dmg{text-shadow:0 2px 0 #000}
.arfight.mfx .card .hl,.arfight.mfx .card .gls,.arfight.mfx .card .foil{display:none}
.arfight.mfx .card .holo,.arfight.mfx .card .gm{mix-blend-mode:normal!important}.arfight.mfx .card .holo{display:none}

/* ---------- Top 500 ---------- */
.arbg.ltop,.arbg.ltop.xl{filter:none}
.arh.top5{background:radial-gradient(110% 140% at 0 0,#6b2f1433,transparent 55%),radial-gradient(60% 80% at 8% 50%,#ffd76a1c,transparent 70%),#0d0907;box-shadow:inset 0 0 0 1px #ffd76a66,0 20px 60px -30px #ffd76a66}
.arh.top5 .armi>b{color:#ffd76a}
@keyframes t5txt{to{background-position:200% 0}}
.arh.top5 .arbar>i{background:linear-gradient(90deg,#b8860b,#ffd76a,#fff4c2)}
.arlb.jbx b{color:#ffd76a}.arld.jbx{background:radial-gradient(120% 120% at 0 0,#ffd76a1f,transparent 60%),radial-gradient(80% 80% at 100% 100%,#f5d0fe10,transparent 60%)}
.arld.jbx h3{color:#ffd76a}.arld.jbx .ardv>span{font-size:12.5px;color:var(--mut)}
.arc .arbg.ltop.md{width:40px;height:46px}
/* cérémonie Top 500 : rayons dorés qui tournent, scène plus chaude */
.rkc.jbx .rkcbg{background:radial-gradient(60% 50% at 50% 42%,#ffd76a2e,#0a0805 70%),#050403}
.rkc.jbx .rkctx h2{color:#ffd76a;text-shadow:0 2px 0 #5a3d00}
.rkcray{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;z-index:-1;pointer-events:none;opacity:0;border-radius:50%;filter:blur(28px);
 background:conic-gradient(from 0deg,#ff5a1f66,#ffd76a66,#34d39955,#5ab4ff55,#ff5a7a66,#ff5a1f66)}
.rkc.jbx.go .rkcray{animation:t5ray 1s 1.1s ease-out forwards,t5spin 8s 1.1s linear infinite}
@keyframes t5ray{to{opacity:.9}}@keyframes t5spin{to{transform:rotate(360deg)}}
.rkc.jbx .rkcnew{position:relative}
.arltr{grid-template-columns:repeat(8,minmax(84px,1fr))}
.ardv>span{min-width:0}.arldh>div{min-width:0}.arld.jbx .ardv{flex-wrap:wrap}
@media(max-width:760px){.arltr{grid-template-columns:repeat(8,84px)}.ardly2{width:auto;flex-wrap:wrap}}
/* entrée du juke-box : il monte du sol dans le noir, puis s'allume en grésillant (tubes, disque, voyants) */
.rkc.jbx.go .rkcnew{animation:jbrise .9s .6s cubic-bezier(.2,.8,.2,1) both,jbon 1.1s 1.5s steps(1,end) both}
@keyframes jbrise{0%{opacity:0;transform:translateY(90px) scale(.86)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes jbon{0%{filter:brightness(.25) saturate(0)}12%{filter:brightness(1.4) saturate(1.2)}20%{filter:brightness(.3) saturate(0)}34%{filter:brightness(1.2)}42%{filter:brightness(.45) saturate(.3)}60%,100%{filter:none}}
.rkcray{display:none!important}
/* dos masqué une fois la carte retournée : certains navigateurs (Safari iOS, vieux Android) affichaient le dos par-dessus la face et il captait le toucher sur ▶ */
.slot.up>.flip>.back{visibility:hidden;pointer-events:none;transition:visibility 0s .15s}

/* albums : bouton « retirer » sur chaque carte, actions lisibles */
.alit{position:relative}.alrm{position:absolute;top:-6px;right:-6px;z-index:7;width:28px;height:28px;border-radius:50%;border:0;background:#111114;color:#fff;font:700 17px/1 var(--sans);box-shadow:0 0 0 2px #ffffff26,0 4px 10px #0008;cursor:pointer}.alrm:hover{background:#e5484d}
.alact{display:flex;flex-wrap:wrap;gap:6px}#apf{margin:8px 0}