:root{--bg:#0b0617;--panel:#17102b;--panel2:#221748;--gold:#f5b942;--violet:#8b5cf6;--text:#f4efff;--muted:#a79bc7;
--common:#9aa3b2;--rare:#4da3ff;--epic:#c05cff;--legendary:#ffb62e;--tab:86px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}   /* pas de zoom au double toucher ; le pincement reste possible */
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{max-width:480px;height:100%;height:100dvh;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden;
background:radial-gradient(120% 60% at 50% 0%,#2a1560 0%,var(--bg) 60%)}
@media(min-width:481px){#app{border-left:1px solid #2b1f55;border-right:1px solid #2b1f55}}
#topbar{position:relative;z-index:5;display:flex;gap:6px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;align-items:center}
.stat{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(245,185,66,.35);border-radius:14px;padding:6px 8px;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.stat small{color:var(--muted);font-size:10px}.stat b{font-size:14px;color:var(--gold)}
.icon-btn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(245,185,66,.35);background:rgba(255,255,255,.07);color:var(--text);font-size:20px}
#view{flex:1;overflow-y:auto;padding:6px 14px 20px;overscroll-behavior:contain}
#tabbar{display:flex;align-items:center;justify-content:space-around;height:calc(80px + max(0px, env(safe-area-inset-bottom) - 30px));padding:2px 6px max(0px, calc(env(safe-area-inset-bottom) - 30px));
background:linear-gradient(#120a26ee,#07030f);border-top:1px solid #3a2a74}
#tabbar button{flex:1;height:100%;background:none;border:0;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;opacity:.6;transform:scale(.9);transition:.25s;color:var(--text);font-size:11px;font-weight:700}
#tabbar button img{height:52px;width:auto;max-width:100%;object-fit:contain}
#tabbar button.on{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(245,185,66,.8))}
.hero{text-align:center;padding:6px 0 4px;position:relative}
.hero .title{width:80%;max-width:320px;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 8px 24px #8b5cf6aa)}
.hero .fan{width:62%;max-width:250px;animation:float 6s ease-in-out -2s infinite;margin-top:-18px}
@keyframes float{50%{transform:translateY(-8px) scale(1.02)}}
.card-box{background:var(--panel);border:1px solid #33246b;border-radius:18px;padding:14px;margin:12px 0}
h2{margin:18px 0 8px;font-size:18px}
.tag{display:inline-block;font-size:11px;background:var(--violet);border-radius:8px;padding:2px 8px;margin-bottom:6px}
.btn{width:100%;min-height:52px;border:0;border-radius:16px;font-size:16px;font-weight:700;color:#1b1030;background:linear-gradient(#ffd271,#f0a21c);box-shadow:0 4px 0 #9a6410}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #9a6410}
.btn:disabled{filter:grayscale(1) brightness(.6);box-shadow:none}
.btn.alt{background:linear-gradient(#a98bff,#6d3fe0);color:#fff;box-shadow:0 4px 0 #3b1d93}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}
input,select{width:100%;min-height:48px;border-radius:12px;border:1px solid #40308a;background:#120a26;color:var(--text);padding:0 12px;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{position:relative;aspect-ratio:495/675;border-radius:8px;overflow:hidden;border:2px solid var(--c,#333);background:#000;padding:0}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile.locked img{filter:brightness(0) contrast(1.2);opacity:.55}
.tile.locked::after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;opacity:.7}
.c-common{--c:var(--common)}.c-rare{--c:var(--rare)}.c-epic{--c:var(--epic)}.c-legendary{--c:var(--legendary)}
.tile.c-epic,.tile.c-legendary{box-shadow:0 0 10px var(--c)}
.shop-item{display:flex;gap:12px;align-items:center}.shop-item img{width:84px}
.price{color:var(--gold);font-weight:700}
#modal{position:absolute;inset:0;background:rgba(5,2,12,.92);z-index:10;overflow-y:auto;padding:calc(14px + env(safe-area-inset-top)) 16px 20px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.zoom{width:78%;max-width:340px;display:block;margin:10px auto;border-radius:14px;transition:transform .15s}
.zoom.c-rare{filter:drop-shadow(2px 4px 0 #1f4f8f)}
.zoom.c-epic{animation:shine 2.4s linear infinite}
.zoom.c-legendary{animation:holo 4s linear infinite}
@keyframes shine{50%{filter:brightness(1.35) drop-shadow(0 0 14px var(--epic))}}
@keyframes holo{to{filter:hue-rotate(360deg) drop-shadow(0 0 16px var(--legendary))}}
.switch{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:16px}
.switch input{width:52px;height:30px}
.muted{color:var(--muted);font-size:13px}
.empty{text-align:center;padding:30px 10px;color:var(--muted)}

.stage{position:relative;width:64%;max-width:280px;aspect-ratio:408/612;margin:24px auto 12px}
.flipw{perspective:900px;width:100%;height:100%}
.fl{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.fl.rev{transform:rotateY(180deg)}
.ff,.fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fb{transform:rotateY(180deg)}
.fb.c-rare{filter:drop-shadow(3px 4px 0 #1f4f8f) contrast(1.08)}
.fb.c-epic{animation:shine 2.4s linear infinite}
.fb.c-legendary{animation:holo 4s linear infinite}
.pk{position:relative;width:100%;height:100%;filter:drop-shadow(0 12px 28px #8b5cf6aa)}
.pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pt{clip-path:polygon(0 0,100% 0,100% 17%,92% 20%,84% 16%,76% 20%,68% 16%,60% 20%,52% 16%,44% 20%,36% 16%,28% 20%,20% 16%,12% 20%,6% 16%,0 19%)}
.pb{clip-path:polygon(0 19%,6% 16%,12% 20%,20% 16%,28% 20%,36% 16%,44% 20%,52% 16%,60% 20%,68% 16%,76% 20%,84% 16%,92% 20%,100% 17%,100% 100%,0 100%)}
.pk{animation:idle 2.5s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-6px) rotate(1deg)}}
.pk.shake{animation:shk .5s linear}
@keyframes shk{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) translateX(-5px)}40%{transform:rotate(4deg) translateX(5px)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
.pk.tear{animation:none}
.pk.tear .pt{animation:flyup .9s ease-in forwards}
.pk.tear .pb{animation:dropb .9s .25s ease-in forwards}
@keyframes flyup{to{transform:translate(40px,-340px) rotate(35deg);opacity:0}}
@keyframes dropb{to{transform:translateY(60px) scale(.9);opacity:0}}
.glow{position:absolute;left:50%;top:18%;width:20px;height:20px;border-radius:50%;background:#fff;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 80px 60px #ffd271}
.glow.on{animation:glw 1.1s ease-out}
@keyframes glw{30%{opacity:1;transform:translate(-50%,-50%) scale(5)}100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}
.pt2{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor;animation:pp 1s ease-out forwards;pointer-events:none}
@keyframes pp{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(0);opacity:0}}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#22c55e;color:#06210f;font-weight:700;padding:12px 18px;border-radius:14px;z-index:99;max-width:90%;text-align:center}
.qty{position:absolute;right:3px;bottom:3px;background:#000b;color:#ffd271;font-size:11px;font-weight:700;border-radius:8px;padding:1px 6px}

.newsbtn{display:flex;flex-direction:column;align-items:center;gap:1px;width:62px;margin:0 2px 2px auto;background:none;border:0;padding:0;color:var(--text);font-size:10px;font-weight:700;filter:drop-shadow(0 3px 8px #2fb8ff77)}.newsbtn img{width:54px;display:block}.newsbtn:active{transform:scale(.94)}
.profcard{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid #33246b;border-radius:18px;padding:10px 14px;color:var(--text);margin:8px 0}.profcard img{width:56px;height:auto}.profcard b{font-size:18px;flex:1;text-align:left}.profcard span{color:var(--gold);font-size:26px}.profcard:active{transform:scale(.98)}

/* ===== Effets visuels par rareté (collection, vue agrandie, ouverture de booster) ===== */
.fxbox{position:relative;overflow:hidden;border:3px solid var(--c,#333);border-radius:12px;background:#000}
.fxbox img{display:block}
.fxbox.nofx{border-color:#222}
.zoomw{width:78%;max-width:340px;margin:12px auto;transition:transform .2s}
.zoomw .zoom{width:100%;max-width:none;margin:0;border-radius:0;display:block}
.fbw{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg)}
.fbw img{width:100%;height:100%;object-fit:cover}
.tile:not(.locked)::before,.fxbox:not(.nofx)::before,.tile:not(.locked)::after,.fxbox:not(.nofx)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit}
.qty,.tile .tag{z-index:2}
/* COMMUN : classique, sobre */
.tile:not(.locked).c-common,.fxbox:not(.nofx).c-common{box-shadow:inset 0 0 14px rgba(255,255,255,.14),0 1px 4px rgba(0,0,0,.6)}
/* RARE : lueur bleue + reflet lumineux qui balaie la carte */
.tile:not(.locked).c-rare,.fxbox:not(.nofx).c-rare{box-shadow:0 0 10px 1px rgba(77,163,255,.55),inset 0 0 10px rgba(77,163,255,.35)}
.tile:not(.locked).c-rare::before,.fxbox:not(.nofx).c-rare::before{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;animation:fxsweep 4.5s ease-in-out infinite}
/* EPIQUE : aura violette pulsante + reflets arc-en-ciel changeants */
.tile:not(.locked).c-epic,.fxbox:not(.nofx).c-epic{box-shadow:0 0 12px 2px rgba(192,92,255,.7),inset 0 0 14px rgba(192,92,255,.45);animation:fxepic 2.2s ease-in-out infinite}
.tile:not(.locked).c-epic::before,.fxbox:not(.nofx).c-epic::before{background:linear-gradient(120deg,rgba(255,60,200,0),rgba(150,90,255,.45),rgba(60,200,255,.4),rgba(255,60,200,0));background-size:300% 300%;mix-blend-mode:screen;animation:fxshimmer 3s linear infinite}
.tile:not(.locked).c-epic::after,.fxbox:not(.nofx).c-epic::after{background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);background-size:250% 100%;background-position:150% 0;animation:fxsweep 3.2s ease-in-out 1s infinite}
.tile:not(.locked).c-epic img,.fxbox:not(.nofx).c-epic img{animation:fxhue 3.5s ease-in-out infinite}
/* LEGENDAIRE : eclat de brillance, halo dore, etincelles scintillantes */
.tile:not(.locked).c-legendary,.fxbox:not(.nofx).c-legendary{box-shadow:0 0 16px 3px rgba(255,182,46,.85),0 0 34px 6px rgba(255,150,0,.4),inset 0 0 16px rgba(255,210,100,.6);animation:fxleg 1.8s ease-in-out infinite}
.tile:not(.locked).c-legendary::before,.fxbox:not(.nofx).c-legendary::before{background:linear-gradient(115deg,transparent 35%,rgba(255,245,200,.9) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;mix-blend-mode:screen;animation:fxsweep 2.6s ease-in-out infinite}
.tile:not(.locked).c-legendary::after,.fxbox:not(.nofx).c-legendary::after{background:radial-gradient(circle at 18% 22%,#fff 0 1.5px,rgba(255,235,160,.9) 2.5px,transparent 5.0px),radial-gradient(circle at 78% 15%,#fff 0 1.5px,rgba(255,235,160,.9) 2.5px,transparent 5.0px),radial-gradient(circle at 62% 48%,#fff 0 1.2px,rgba(255,235,160,.9) 2.2px,transparent 4.7px),radial-gradient(circle at 24% 70%,#fff 0 1.5px,rgba(255,235,160,.9) 2.5px,transparent 5.0px),radial-gradient(circle at 85% 78%,#fff 0 1.5px,rgba(255,235,160,.9) 2.5px,transparent 5.0px),radial-gradient(circle at 45% 90%,#fff 0 1.2px,rgba(255,235,160,.9) 2.2px,transparent 4.7px);animation:fxtwinkle 1.5s ease-in-out infinite}
.tile:not(.locked).c-legendary img,.fxbox:not(.nofx).c-legendary img{animation:fxbright 2s ease-in-out infinite}
@keyframes fxsweep{0%{background-position:150% 0}45%,100%{background-position:-50% 0}}
@keyframes fxepic{50%{box-shadow:0 0 22px 5px rgba(192,92,255,.9),inset 0 0 18px rgba(192,92,255,.6)}}
@keyframes fxleg{50%{box-shadow:0 0 26px 7px rgba(255,200,70,1),0 0 50px 12px rgba(255,150,0,.55),inset 0 0 20px rgba(255,225,130,.8)}}
@keyframes fxshimmer{0%{background-position:0 0}100%{background-position:300% 300%}}
@keyframes fxhue{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(14deg) saturate(1.2)}}
@keyframes fxbright{0%,100%{filter:brightness(1.02) saturate(1.05)}50%{filter:brightness(1.22) saturate(1.3)}}
@keyframes fxtwinkle{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes lflash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.stage.legflash::after,.stage.epicflash::after{content:"";position:absolute;inset:-70px;pointer-events:none;border-radius:50%;animation:lflash 1.1s ease-out forwards;z-index:3}
.stage.legflash::after{background:radial-gradient(circle,rgba(255,235,150,.95),rgba(255,170,30,.4) 45%,transparent 70%)}
.stage.epicflash::after{background:radial-gradient(circle,rgba(220,150,255,.85),rgba(150,60,255,.35) 45%,transparent 70%)}
@media (prefers-reduced-motion:reduce){.tile,.tile::before,.tile::after,.tile img,.fxbox,.fxbox::before,.fxbox::after,.fxbox img{animation:none!important}}

.giftbtn{position:absolute;left:6px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:3px;width:80px;background:none;border:0;padding:0;color:#fff;font-weight:800;font-size:13px;filter:grayscale(.8) brightness(.75)}
.giftbtn img{width:72px;height:auto;display:block}
.giftbtn span{background:#000c;border:1px solid #f5b94288;border-radius:10px;padding:2px 8px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.giftbtn.ready{filter:none;animation:giftpulse 1.6s ease-in-out infinite}
.giftbtn.ready span{background:#16a34a;border-color:#4ade80;color:#fff}
@keyframes giftpulse{0%,100%{transform:translateY(-50%) scale(1);filter:drop-shadow(0 0 6px #ffb62e)}50%{transform:translateY(-50%) scale(1.1) rotate(-4deg);filter:drop-shadow(0 0 18px #ffd271)}}
.giftbtn:active{transform:translateY(-50%) scale(.92)}
@media (prefers-reduced-motion:reduce){.giftbtn.ready{animation:none}}
.mk{background:none;border:0;padding:0;color:var(--text);display:flex;flex-direction:column;gap:4px;align-items:stretch}.mk .tile{width:100%}.mk b{color:var(--gold);font-size:14px;text-align:center}.mk:active{transform:scale(.96)}
.authbtn{flex:0 0 auto;width:44px;height:44px;padding:0;background:none;border:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 6px #f5b94266)}
.authbtn img{width:42px;height:auto;display:block}.authbtn:active{transform:scale(.92)}
.authbtn:not(.on) img{animation:authpulse 2s ease-in-out infinite}
@keyframes authpulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.authbtn:not(.on) img{animation:none}}
#modal.sm:not([hidden]){display:flex;align-items:center;justify-content:center}
#modal.sm .sbox{width:100%;max-width:340px;background:#1b1036;border:1px solid rgba(245,185,66,.45);border-radius:18px;padding:12px 16px 18px;box-shadow:0 10px 40px #000a}
#promoIn::placeholder{text-transform:none}
.bpage{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bpage.fromR{animation:pgR .28s ease-out}.bpage.fromL{animation:pgL .28s ease-out}
@keyframes pgR{from{transform:translateX(40px);opacity:.2}}@keyframes pgL{from{transform:translateX(-40px);opacity:.2}}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.pager .btn{width:64px;min-height:46px;font-size:20px}.pager .btn:disabled{opacity:.35}.pager b{color:var(--gold)}
@media (prefers-reduced-motion:reduce){.bpage.fromR,.bpage.fromL{animation:none}}
/* ===== Accueil vivant ===== */
.home{position:relative;min-height:100%;overflow:hidden}
.homefx{position:absolute;inset:0;pointer-events:none;z-index:0}
.sp{position:absolute;bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:0;animation:rise var(--d) linear var(--dl) infinite}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.5}100%{transform:translateY(-62vh) translateX(18px);opacity:0}}
.home .hero{position:relative;z-index:1}
.logo{position:relative;display:inline-block;overflow:hidden}
.logo .shine{position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shine2 4.5s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes shine2{0%,55%{left:-40%}85%,100%{left:120%}}
.breathe{animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-8px) scale(1.03)}}
.streak{position:absolute;left:10px;top:8px;z-index:2;background:rgba(255,120,40,.18);border:1px solid #ff9a3c99;color:#ffc58a;font-weight:700;font-size:12px;border-radius:14px;padding:4px 10px}
.prog{position:relative;z-index:1;margin:6px 110px 0 18px}
.prog .pl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.prog .pl b{color:var(--gold)}
.pb2{height:10px;border-radius:6px;background:#ffffff14;border:1px solid #f5b94255;overflow:hidden;margin-top:4px}
.pb2 i{display:block;height:100%;background:linear-gradient(90deg,#ffb62e,#ffe08a);border-radius:6px;box-shadow:0 0 10px #ffb62e88;animation:grow 1.4s ease-out}
@keyframes grow{from{width:0!important}}
.mascot{position:absolute;right:12px;bottom:62px;z-index:2;width:84px;background:none;border:0;padding:0;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:4px;animation:floaty 3s ease-in-out infinite}
.mascot .wimg{position:relative;display:block;width:78px;aspect-ratio:495/675}
.mascot .wimg img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:2px solid #ffd271;box-shadow:0 0 14px #ffd27188;display:block;filter:grayscale(.55) brightness(.8)}
.mascot .wimg em{position:absolute;right:-6px;top:-8px;font-style:normal;font-size:16px;background:#000c;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;border:1px solid #ffd271}
.mascot small{font-size:10px;font-weight:700;color:#ffe9b0;text-align:center;line-height:1.2;background:#000a;border-radius:8px;padding:2px 6px}
.mascot.empty .wimg{border:2px dashed #ffd271aa;border-radius:8px;display:grid;place-items:center;background:#ffffff0d}
.mascot.empty .wimg b{font-size:34px;color:#ffd271}
.bubble{position:absolute;right:0;top:-50px;width:128px;background:#fff;color:#1b1030;font-weight:700;font-size:11px;line-height:1.25;border-radius:12px;padding:6px 8px;text-align:center;animation:pop 6s ease-in-out infinite;pointer-events:none}
.bubble::after{content:'';position:absolute;right:30px;bottom:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes pop{0%,8%{transform:scale(0);opacity:0}14%,70%{transform:scale(1);opacity:1}78%,100%{transform:scale(0);opacity:0}}
@keyframes floaty{50%{transform:translateY(-8px) rotate(2deg)}}
.ticker{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;background:#0009;border:1px solid #f5b94255;border-radius:12px;padding:8px 10px;font-size:12px;color:#ffe9b0;text-align:center;overflow:hidden;min-height:18px}
#tickTxt{display:block}#tickTxt.in{animation:tin .6s ease-out}@keyframes tin{from{transform:translateY(12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sp,.breathe,.logo .shine,.mascot,.bubble{animation:none}.bubble{opacity:1;transform:none}}

.mascot{width:76px;bottom:70px}.mascot .wimg{width:70px}

/* CARTE UNIQUE : anneau arc-en-ciel animé + halo rose/or (non vendable, non échangeable) */
.tile.unique:not(.locked),.fxbox.unique:not(.nofx){box-shadow:0 0 0 2px #fff4c2,0 0 18px 4px rgba(255,120,170,.85),0 0 40px 8px rgba(255,190,60,.55),inset 0 0 18px rgba(255,255,255,.55);animation:fxuniq 2.2s ease-in-out infinite}
.tile.unique:not(.locked)::after{content:"UNIQUE";background:linear-gradient(90deg,#ff7aa8,#ffd271,#8ecbff,#c79bff);-webkit-background-clip:border-box;color:#2a1030;font-size:9px;font-weight:900;letter-spacing:.5px;padding:1px 5px;border-radius:6px;position:absolute;right:3px;top:3px;inset:auto;width:auto;height:auto;animation:none}
@keyframes fxuniq{50%{box-shadow:0 0 0 2px #fff,0 0 28px 8px rgba(255,120,170,1),0 0 56px 14px rgba(255,190,60,.7),inset 0 0 24px rgba(255,255,255,.8);filter:hue-rotate(18deg)}}
.favstar{position:absolute;left:3px;top:3px;font-size:14px;filter:drop-shadow(0 0 3px #000);z-index:2;pointer-events:none}
.streak.mpill{top:40px;background:rgba(52,211,153,.18);border-color:#34d39999;color:#a7f3d0}.streak.mpill.first{top:8px}
.missbtn{position:absolute;left:6px;top:40px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;width:74px;background:none;border:0;padding:0;color:var(--text);font-size:11px;font-weight:800;filter:drop-shadow(0 3px 8px #2fb8ff77)}.missbtn.first{top:6px}.missbtn img{width:60px;display:block}.missbtn span{background:rgba(5,8,25,.72);border:1px solid #ffd27155;color:#ffe2a0;border-radius:10px;padding:1px 8px;margin-top:-4px}.missbtn:active{transform:scale(.94)}
.missbtn span{white-space:nowrap;font-size:10px;padding:1px 7px}.missbtn{width:82px}

/* TCHAT */
#tabbar button{position:relative}.cbadge{position:absolute;top:6px;right:calc(50% - 34px);min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;font-style:normal;font-weight:800;line-height:18px;text-align:center;padding:0 4px;box-shadow:0 0 6px #000a}
.cbadge2{background:#ef4444;color:#fff;border-radius:10px;min-width:22px;height:22px;line-height:22px;text-align:center;font-weight:800;font-size:12px}
.chat{height:100%;display:flex;flex-direction:column}.cbody{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:8px;overflow-y:auto}
.clist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.cmsg{max-width:84%;align-self:flex-start;background:#251a47;border:1px solid #4b3a86;border-radius:14px 14px 14px 4px;padding:6px 10px;display:flex;flex-direction:column;gap:1px;text-align:left;word-break:break-word}
.cmsg.mine{align-self:flex-end;background:#3b2a78;border-color:#7a62d6;border-radius:14px 14px 4px 14px}
.cmsg .cn{font-size:12px;color:#ffd271}.cmsg .cn.dev{color:#7dd3fc}.cmsg span{font-size:15px}.cmsg small{font-size:10px;color:#9a93b8;align-self:flex-end}
.cform{display:flex;gap:8px;margin-top:8px}.cform input{flex:1;margin:0}
.linkbtn{background:none;border:0;color:#9a93b8;font-size:12px;text-decoration:underline;padding:4px;align-self:center}
.thread{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0;color:var(--text);font:inherit}
.cpin{display:flex;align-items:center;gap:6px;margin-top:8px;background:linear-gradient(90deg,#3a2a00,#4a3410);border:1px solid #ffd27188;border-radius:12px;padding:6px 10px;color:#ffe9b0}
.cpin[hidden]{display:none}.cpin .pinico{flex:none}.pinwin{flex:1;overflow:hidden;white-space:nowrap}
.pintrack{display:inline-flex;white-space:nowrap;animation:pinscroll 20s linear infinite;will-change:transform}
.pinitem{flex:none;padding-right:90px;font-weight:700;font-size:14px}
@keyframes pinscroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--w)))}}
@media (prefers-reduced-motion:reduce){.pintrack{animation:none}}

.promo{margin:0 10px 6px;margin-top:0;background:linear-gradient(90deg,#2b0f5e,#5a1f9a);border-color:#c9a2ff99;color:#fff;flex:none;position:relative;z-index:6}
.promo .pinitem{font-size:15px}

.rainfx{position:absolute;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.rainfx span{position:absolute;top:-60px;animation-name:raindrop;animation-timing-function:linear;animation-fill-mode:both;filter:drop-shadow(0 0 8px #7fd6ffcc)}
@keyframes raindrop{from{transform:translateY(0) rotate(-12deg)}to{transform:translateY(calc(100dvh + 120px)) rotate(18deg)}}
.rainbanner{position:absolute;left:12px;right:12px;top:calc(70px + env(safe-area-inset-top));text-align:center;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(90deg,#1b4fa8cc,#6d3fe0cc);border:1px solid #9fd4ff;border-radius:14px;padding:8px 10px;animation:rainfade 6.2s ease both}
@keyframes rainfade{0%{opacity:0;transform:translateY(-10px)}8%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rainfx span{animation-duration:6s!important}}

.rainres{position:absolute;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(5,2,15,.72);padding:24px}
.rainres-card{width:100%;max-width:340px;text-align:center;background:linear-gradient(#251a55,#140b30);border:2px solid #7fd6ff;border-radius:22px;padding:22px 18px;box-shadow:0 0 40px #4aa8ff88;animation:rainpop .35s ease both}
.rainres-card h2{margin:6px 0}.rainres-gem{font-size:72px;line-height:1;filter:drop-shadow(0 0 16px #7fd6ffcc)}
.rainres-n{font-size:44px;font-weight:900;color:#ffd271;margin:4px 0}.rainres-sub{color:var(--muted);font-size:14px}
@keyframes rainpop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}

/* en ligne / mentions / échanges / roue */
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:middle;flex:none}
.dot.on{background:#2ecc71;box-shadow:0 0 8px #2ecc71aa}.dot.off{background:#e74c3c}
.cardtag{color:#9fd4ff;font-weight:800;text-decoration:underline;cursor:pointer}
.mention{display:inline-block;border:2px solid #ff3b3b;border-radius:8px;padding:0 5px;color:#fff;background:#ff3b3b22;font-weight:800}
.mention.me{background:#ff3b3b;box-shadow:0 0 10px #ff3b3b99}
.cmsg.mentioned{outline:2px solid #ff3b3b;outline-offset:1px;box-shadow:0 0 12px #ff3b3b66}
.cthumbs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.cthumb{width:64px;border-radius:8px;border:2px solid #ffd27188;cursor:pointer;background:#0004}
.tradebox{margin-top:6px;background:#0005;border:1px solid #6d3fe0;border-radius:12px;padding:8px}
.trow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:22px}
.tq{display:inline-flex;width:64px;height:88px;align-items:center;justify-content:center;border:2px dashed #ffd271;border-radius:8px;font-size:30px}
.tbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.tbtns .btn{min-height:38px;font-size:13px;padding:0 10px;flex:1}
.tst{margin-top:6px;text-align:center;font-weight:700;color:var(--muted)}.tst.ok{color:#6ee7a0}
.slot{width:112px;min-height:150px;border:2px dashed #ffd271;border-radius:12px;background:#120a26;color:var(--text);padding:6px;font-size:12px}
.wheelbox{position:relative;max-width:340px;margin:0 auto}
.wheelsvg{width:100%;display:block}
.wheelsvg #wheelRot{filter:drop-shadow(0 6px 14px #000a)}
.wheelbtn{position:absolute;left:50%;top:calc((200 + 34) / 434 * 100%);transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:4px solid #7a4b00;background:radial-gradient(#ffe29a,#f0a21c);color:#3b2200;font-weight:900;font-size:16px;box-shadow:0 4px 14px #000a}
.wheelbtn:disabled{filter:grayscale(.5) brightness(.8)}

.ntabs{display:flex;gap:6px;margin:8px 0 10px}.ntabs button{flex:1;min-height:40px;border-radius:10px;border:1px solid #ffffff30;background:#ffffff10;color:inherit;font-weight:700}.ntabs button.on{background:#e8b83a;color:#222}
.ncat{margin:14px 0 6px}.nrow{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin:6px 0}.ndel{min-height:36px;padding:0 10px}
#nList select,#nList input,#nList textarea{width:100%;margin:6px 0;box-sizing:border-box}
.nrow>div{flex:1;min-width:0}.nrow .ndel{flex:0 0 44px;width:44px;min-width:44px;padding:0}
#nList textarea{background:#110c24;color:inherit;border:2px solid #4a3a9a;border-radius:14px;padding:12px;font:inherit;resize:none}

/* ===== Thèmes de saison (<html data-theme="halloween|noel|carnaval|paques">) ===== */
html[data-theme="halloween"]{--bg:#0d0705;--panel:#1d1008;--panel2:#2c1709;--gold:#ff8a1f;--violet:#7bd13a;--text:#fff1e0;--muted:#c9a27a;
 --t-top:#5a2208;--t-mid:#1a0b06;--t-card1:#2a1608;--t-card2:#170b05;--t-line:#7a3a0e;--t-tab1:#1a0c06ee;--t-tab2:#080301;--t-tabline:#8a3d0c;--t-stat:rgba(255,120,20,.09);--t-statline:rgba(255,138,31,.55);
 --t-b1:#ff9a2e;--t-b2:#d9570a;--t-bsh:#7a2e04;--t-btx:#1b0a02;--t-a1:#7bd13a;--t-a2:#3f8a14;--t-ash:#26560a;--t-atx:#0c1a02;--t-h:#ff9a2e;--t-hglow:#ff6a0099;--t-modal:rgba(10,4,2,.93);--t-sbox:#24130a}
html[data-theme="noel"]{--bg:#07140d;--panel:#0f2a1a;--panel2:#143a24;--gold:#ffd54a;--violet:#e04040;--text:#fff7ea;--muted:#a9cdb4;
 --t-top:#14683a;--t-mid:#0b2418;--t-card1:#143523;--t-card2:#0a1d12;--t-line:#2f7a4a;--t-tab1:#0b2418ee;--t-tab2:#04100a;--t-tabline:#2f7a4a;--t-stat:rgba(255,213,74,.08);--t-statline:rgba(255,213,74,.5);
 --t-b1:#f7c948;--t-b2:#d6921a;--t-bsh:#7a4a06;--t-btx:#2b1400;--t-a1:#e04646;--t-a2:#a51919;--t-ash:#5c0b0b;--t-atx:#fff;--t-h:#ffd76a;--t-hglow:#ffd76a77;--t-modal:rgba(3,14,8,.94);--t-sbox:#0f2a1a}
html[data-theme="carnaval"]{--bg:#1a0618;--panel:#2d0f2b;--panel2:#40163c;--gold:#ffd23f;--violet:#22d3bd;--text:#fff0fb;--muted:#d9a6cf;
 --t-top:#7a1f72;--t-mid:#2a0a27;--t-card1:#3a1236;--t-card2:#220a20;--t-line:#a02a8f;--t-tab1:#2a0a27ee;--t-tab2:#12040f;--t-tabline:#c0309f;--t-stat:rgba(255,79,176,.1);--t-statline:rgba(255,210,63,.55);
 --t-b1:#ff4fb0;--t-b2:#c21f7e;--t-bsh:#6b0f45;--t-btx:#2a0018;--t-a1:#22d3bd;--t-a2:#0e8f80;--t-ash:#085349;--t-atx:#00231f;--t-h:#ff7cc8;--t-hglow:#ff4fb088;--t-modal:rgba(18,4,15,.94);--t-sbox:#2d0f2b}
html[data-theme="valentin"]{--bg:#1a0510;--panel:#33101f;--panel2:#4a1830;--gold:#ffc94a;--violet:#ff4f7a;--text:#fff0f4;--muted:#e0a8ba;
 --t-top:#8a1a4a;--t-mid:#2a0a1b;--t-card1:#3d1228;--t-card2:#220a16;--t-line:#b0305f;--t-tab1:#2a0a1bee;--t-tab2:#12040b;--t-tabline:#c93a6e;--t-stat:rgba(255,79,122,.1);--t-statline:rgba(255,201,74,.55);
 --t-b1:#ff4f7a;--t-b2:#c4163f;--t-bsh:#6b0a22;--t-btx:#fff;--t-a1:#f7c948;--t-a2:#d6921a;--t-ash:#7a4a06;--t-atx:#2b1400;--t-h:#ff8fb0;--t-hglow:#ff4f7a88;--t-modal:rgba(18,4,10,.94);--t-sbox:#33101f}
html[data-theme="paques"]{--bg:#0f1f19;--panel:#1b3a2d;--panel2:#24503c;--gold:#ffe27a;--violet:#b595ff;--text:#fffaf0;--muted:#b8d8c6;
 --t-top:#2f7a58;--t-mid:#14291f;--t-card1:#1f4535;--t-card2:#11271d;--t-line:#5fae85;--t-tab1:#14291fee;--t-tab2:#0a1712;--t-tabline:#5fae85;--t-stat:rgba(255,154,208,.1);--t-statline:rgba(255,226,122,.55);
 --t-b1:#ff9ad0;--t-b2:#e0589f;--t-bsh:#8a2a5d;--t-btx:#3a0020;--t-a1:#b595ff;--t-a2:#7a52d6;--t-ash:#442a90;--t-atx:#1e0a45;--t-h:#ffb3df;--t-hglow:#ff9ad088;--t-modal:rgba(8,20,14,.94);--t-sbox:#1b3a2d}
html[data-theme] #app{background:radial-gradient(120% 55% at 50% 0%,var(--t-top) 0%,var(--t-mid) 45%,var(--bg) 75%)}
@media(min-width:481px){html[data-theme] #app{border-left-color:var(--t-line);border-right-color:var(--t-line)}}
html[data-theme] #tabbar{background:linear-gradient(var(--t-tab1),var(--t-tab2));border-top-color:var(--t-tabline)}
html[data-theme] .stat,html[data-theme] .icon-btn{border-color:var(--t-statline);background:var(--t-stat)}
html[data-theme] .card-box{background:linear-gradient(160deg,var(--t-card1),var(--t-card2));border-color:var(--t-line)}
html[data-theme] .btn{background:linear-gradient(var(--t-b1),var(--t-b2));color:var(--t-btx);box-shadow:0 4px 0 var(--t-bsh)}
html[data-theme] .btn.alt{background:linear-gradient(var(--t-a1),var(--t-a2));color:var(--t-atx);box-shadow:0 4px 0 var(--t-ash)}
html[data-theme] h2,html[data-theme] h3{color:var(--t-h);text-shadow:0 0 12px var(--t-hglow),0 2px 0 #000}
html[data-theme] .ntabs button.on{background:var(--t-b1);color:var(--t-btx)}
html[data-theme] #modal{background:var(--t-modal)}
html[data-theme] #modal.sm .sbox{background:var(--t-sbox);border-color:var(--t-statline)}
/* décors */
html:not([data-theme]) .tdeco{display:none!important}
.tdeco{position:absolute;pointer-events:none;z-index:4}
.tweb{top:0;left:0;width:110px;height:110px;opacity:.4;z-index:1}.tweb.r{left:auto;right:0;transform:scaleX(-1)}
.tbat{font-size:22px;top:96px;left:-30px;animation:tfly 9s linear infinite;filter:drop-shadow(0 0 6px #000)}
.tbat.b2{top:170px;font-size:15px;animation-duration:13s;animation-delay:-6s}
@keyframes tfly{0%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(120px,-26px) rotate(8deg)}50%{transform:translate(240px,10px) rotate(-8deg)}75%{transform:translate(360px,-20px) rotate(8deg)}100%{transform:translate(520px,0)}}
.tcorner{bottom:calc(84px + max(0px, env(safe-area-inset-bottom) - 30px));font-size:26px;animation:tglow 2.6s ease-in-out infinite}
.tcorner.l{left:6px}.tcorner.r{right:6px;animation-delay:-1.3s}
@keyframes tglow{0%,100%{filter:drop-shadow(0 0 6px var(--t-b1))}50%{filter:drop-shadow(0 0 16px var(--t-b1));transform:scale(1.1)}}
.tfall{top:-30px;opacity:.85;animation:tdrop linear infinite}
@keyframes tdrop{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(420px) translateX(14px) rotate(180deg)}100%{transform:translateY(860px) translateX(-6px) rotate(360deg)}}
html[data-theme] .cpin.promo{background:linear-gradient(90deg,var(--t-b2),var(--t-a2));border-color:var(--t-statline);color:#fff}

/* ===== Collecte de saison ===== */
.seasonbtn{position:absolute;right:8px;top:74px;z-index:2;background:rgba(255,213,74,.16);border:1px solid #ffd54aaa;color:#ffe9a8;font-weight:800;font-size:12px;border-radius:14px;padding:5px 10px;box-shadow:0 0 12px #ffd54a44;animation:tglow 2.6s ease-in-out infinite}
.choc{filter:sepia(1) saturate(2.6) hue-rotate(-18deg) brightness(.5)}
.sbig{font-size:54px;line-height:1.1;filter:drop-shadow(0 0 12px #ffd54a88)}
.srow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #ffffff14;font-size:14px}.srow:last-child{border:0}.srow.me{background:#ffd54a22;border-radius:8px;padding-left:6px;padding-right:6px}
.sbar{height:10px;border-radius:6px;background:#ffffff1c;margin:10px 0 4px;overflow:hidden}.sbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd54a,#ff9a2e);border-radius:6px;transition:width .5s}
.ttl{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:#ffd54a2b;color:#ffd76a;font-size:10px;font-weight:700;vertical-align:middle}
.sgwrap{max-width:420px;margin:0 auto}.sghud{display:flex;justify-content:space-between;font-size:18px;padding:6px 4px}
.sgarea{position:relative;height:min(62vh,470px);border-radius:18px;overflow:hidden;border:2px solid var(--t-statline,#ffd54a88);background:rgba(0,0,0,.35);touch-action:none;user-select:none;-webkit-user-select:none}
.sgarea.hit{animation:sgshake .16s}@keyframes sgshake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.sgt-halloween{background:linear-gradient(#2a1608,#0d0705)}.sgt-noel{background:linear-gradient(#0f3a22,#07140d)}.sgt-valentin{background:linear-gradient(#5a1235,#1a0510)}.sgt-carnaval{background:linear-gradient(#5a1a58,#1a0618)}.sgt-paques{background:linear-gradient(#245a42,#0f1f19)}
.sgitem{position:absolute;left:0;top:0;font-size:30px;will-change:transform;pointer-events:none}
.sgbasket{position:absolute;left:0;bottom:6px;width:48px;text-align:center;font-size:40px;will-change:transform;pointer-events:none;filter:drop-shadow(0 4px 6px #000a)}
.memgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;height:100%;align-content:center}
.memc{position:relative;aspect-ratio:1;border:2px solid #ffffff44;border-radius:14px;background:linear-gradient(#ffffff22,#ffffff0a);font-size:30px;padding:0;color:inherit}
.memc .mb{display:none}.memc.up .mb{display:block}.memc.up .mf{display:none}.memc.ok{border-color:#ffd54a;box-shadow:0 0 12px #ffd54a88;background:#ffd54a22}
.whgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;height:100%;align-content:space-around}
.hole{position:relative;aspect-ratio:1.15;border-radius:50%/42%;border:0;background:radial-gradient(ellipse at 50% 70%,#000c 0 55%,#3a2a1a 56% 100%);overflow:hidden;padding:0}
.hz{position:absolute;left:0;right:0;bottom:-70%;text-align:center;font-size:44px;transition:bottom .12s;pointer-events:none}.hz.up{bottom:12%}
.hz.egg{filter:sepia(1) saturate(2.6) hue-rotate(-18deg) brightness(.5)}.hz.gold{filter:sepia(1) saturate(5) hue-rotate(5deg) brightness(1.25) drop-shadow(0 0 8px #ffd54a)}
.memc,.hole{-webkit-tap-highlight-color:transparent}

/* Messages vocaux */
.vmsg{display:flex;align-items:center;gap:8px;min-width:170px;padding:2px 0;cursor:pointer}
.vplay{width:38px;height:38px;border-radius:50%;border:0;background:linear-gradient(#8b5cf6,#6d3fe0);color:#fff;font-size:15px;flex:none;padding:0}
.vmsg.on .vplay{background:linear-gradient(#f59e0b,#d97706)}
.vbar{flex:1;height:6px;border-radius:3px;background:#ffffff26;overflow:hidden;min-width:60px}.vbar i{display:block;height:100%;width:0;background:#ffd271;transition:width .25s linear}
.vmsg .vdur{align-self:center!important;font-size:12px!important;color:#cfc8ee!important}
.vrec{display:flex;align-items:center;gap:8px;margin-top:8px;background:#3a1530;border:1px solid #ff5d7a;border-radius:14px;padding:6px 8px}
.vrec[hidden]{display:none}.vrec b{font-size:18px;min-width:40px}
.vdot{width:12px;height:12px;border-radius:50%;background:#ff3b5c;animation:vblink 1s infinite}@keyframes vblink{50%{opacity:.2}}
.cform[hidden]{display:none}

/* Profil en carrés */
.pgrid{display:grid;grid-template-columns:1fr 1fr .35fr 1fr 1fr;gap:8px;margin:6px 0}
.pgrid.two{grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.sq{aspect-ratio:1;border-radius:18px;background:var(--panel);border:1px solid #33246b;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;font-size:12px;font-weight:700;position:relative;min-width:0}
.sq .ic{font-size:30px;line-height:1}.sq img{width:42px;height:42px;object-fit:contain}.sq:active{transform:scale(.96)}
.sq.big{font-size:15px;gap:6px}.sq.big .ic{font-size:44px}
.sq.blue{background:linear-gradient(#60a5fa,#2563eb);border-color:#93c5fd}
.sq.gold{background:linear-gradient(160deg,#2b1e55,#3b2a78);border-color:#7a62d6}
.sq .bdg{position:absolute;top:6px;right:6px;background:#ff3b5c;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px}
.sq .sub{font-size:11px;color:var(--muted);font-weight:600}
.sq>span:not(.ic):not(.bdg):not(.sub){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme] .sq{background:linear-gradient(160deg,var(--t-card1),var(--t-card2));border-color:var(--t-line)}
html[data-theme] .sq.blue{background:linear-gradient(var(--t-a1),var(--t-a2));border-color:var(--t-a1);color:var(--t-atx)}
html[data-theme] .sq.gold{box-shadow:inset 0 0 0 1px var(--t-statline)}
.pmini{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 2px 0;font-size:13px;color:var(--muted)}
.swl{display:flex;align-items:center;gap:8px}.swl input{display:none}
.sw{width:38px;height:22px;border-radius:11px;background:#4a3d78;position:relative;display:inline-block;transition:background .2s}.sw i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.swl input:checked+.sw{background:var(--violet)}.swl input:checked+.sw i{left:19px}
.chip{border:1px solid #33246b;background:var(--panel);color:var(--text);border-radius:14px;padding:7px 12px;font-size:13px;font-weight:700}
html[data-theme] .chip{background:var(--t-card1);border-color:var(--t-line)}

/* Boutique en grille */
.stabs{display:flex;gap:6px;margin:4px 0 12px}.stabs button{flex:1;border:1px solid #33246b;background:var(--panel);color:var(--muted);border-radius:14px;padding:10px 4px;font-weight:700;font-size:13px}
.stabs button.on{background:linear-gradient(#8b5cf6,#6d3fe0);color:#fff;border-color:#a78bfa}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc{border-radius:18px;background:linear-gradient(160deg,#2b1e55,#3b2a78);border:1px solid #7a62d6;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;color:var(--text);text-align:center;min-width:0}
.sc[data-bid]{cursor:pointer}.sc[data-bid]:active{transform:scale(.97)}
.sc img{height:116px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #0008)}.sc b{font-size:14px}.sc .pr{color:var(--gold);font-weight:800;font-size:15px}.sc .own{font-size:11px;color:var(--muted)}
.sc .bdg{position:absolute;top:8px;left:8px;background:#f59e0b;color:#fff;border-radius:10px;font-size:11px;padding:2px 8px;font-weight:700}
.sc .open{position:absolute;top:8px;right:8px;width:auto;min-height:0;background:linear-gradient(#ffd271,#f0a21c);color:#1b1030;border:0;border-radius:10px;font-size:11px;padding:3px 8px;font-weight:800;box-shadow:none}
.sc.best{border-color:#ffd271;box-shadow:0 0 14px #ffd27155}
.sc .big{font-size:52px;line-height:1.1;height:80px;display:flex;align-items:center}
.sc .btn{width:100%}
.info{border:1px solid #33246b;border-radius:12px;padding:8px 10px;font-size:12px;color:var(--muted);margin-top:12px}
.qrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0}.qrow button{width:44px;height:44px;border-radius:50%;border:0;background:#3b2a78;color:#fff;font-size:22px}.qrow b{font-size:24px;min-width:30px;text-align:center}
html[data-theme] .stabs button{background:var(--t-card1);border-color:var(--t-line)}
html[data-theme] .stabs button.on{background:linear-gradient(var(--t-b1),var(--t-b2));color:var(--t-btx);border-color:var(--t-b1)}
html[data-theme] .sc{background:linear-gradient(160deg,var(--t-card1),var(--t-card2));border-color:var(--t-line)}
html[data-theme] .sc.best{border-color:var(--t-b1)}
html[data-theme] .info{border-color:var(--t-line)}
.sgrid .sc:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}

/* Vitrine */
.vbar2{display:flex;gap:8px;margin:2px 0 8px}.vbar2 .sb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid #33246b;border-radius:14px;padding:0 12px;min-height:46px;color:var(--muted)}
.vbar2 .sb input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font-size:15px;padding:0;margin:0;min-height:0;box-shadow:none}
.vbar2 button{width:auto;flex:none;white-space:nowrap;position:relative;min-width:46px;min-height:46px;border-radius:14px;border:1px solid #33246b;background:var(--panel);color:var(--text);font-weight:700;font-size:13px;padding:0 12px;box-shadow:none}
.vbar2 .flt .n{position:absolute;top:-6px;right:-6px;background:#8b5cf6;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px}
.vt{display:flex;gap:6px;margin:0 0 8px}.vt button{flex:1;border:1px solid #33246b;background:var(--panel);color:var(--muted);border-radius:12px;padding:8px 4px;font-weight:700;font-size:13px;box-shadow:none;min-height:0;width:auto}.vt button.on{background:linear-gradient(#8b5cf6,#6d3fe0);color:#fff;border-color:#a78bfa}
.chips{display:flex;gap:6px;margin:0 0 10px;overflow-x:auto}.chips span{border:1px solid #33246b;background:var(--panel);color:var(--muted);border-radius:14px;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}.chips span.on{background:#3b2a78;color:#ffd271;border-color:#7a62d6}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vc{--rc:#6b7280;border-radius:14px;background:var(--panel);border:2px solid var(--rc);padding:5px 5px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;color:var(--text);box-shadow:none;min-height:0;width:auto;font-weight:400}
.vc img{width:100%;border-radius:8px;display:block}.vc b{font-size:13px;color:var(--gold)}.vc .me{position:absolute;top:4px;left:4px;background:#22c55e;color:#fff;border-radius:8px;font-size:10px;padding:1px 6px;font-weight:700;z-index:1}
.vc.rare{--rc:#3b82f6}.vc.epic{--rc:#a855f7}.vc.legendary{--rc:#f5b942;box-shadow:0 0 10px #f5b94255}.vc.unique{--rc:#ffe08a;box-shadow:0 0 14px #ffd27199}.vc:active{transform:scale(.97)}
.vpanel{background:#1a1236;border:1px solid #7a62d6;border-radius:16px;padding:12px;margin:0 0 10px}.vpanel .row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.vpanel select{width:100%;min-height:40px;font-size:13px;margin:0}.vpanel .ac{display:flex;justify-content:space-between;margin-top:10px;align-items:center}.vpanel .ac a{color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer}
.lmeta{font-size:13px;color:var(--muted);display:grid;gap:3px;margin-top:6px}
html[data-theme] .vbar2 .sb,html[data-theme] .vbar2 button,html[data-theme] .vt button,html[data-theme] .chips span{background:var(--t-card1);border-color:var(--t-line)}
html[data-theme] .vt button.on{background:linear-gradient(var(--t-b1),var(--t-b2));color:var(--t-btx);border-color:var(--t-b1)}
html[data-theme] .chips span.on{background:var(--t-card2);color:var(--t-h);border-color:var(--t-b1)}
html[data-theme] .vc{background:linear-gradient(160deg,var(--t-card1),var(--t-card2))}
html[data-theme] .vpanel{background:var(--t-card2);border-color:var(--t-line)}

.swl2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;font-size:14px}.swl2 input{width:22px;height:22px;flex:none;margin:0}
/* message supprimé par son auteur */
.cmsg.deleted{background:#3a0c12!important;border:1px solid #7a1c2a!important;color:#ffb3bd!important;font-style:italic;align-self:stretch;max-width:100%;text-align:center;font-size:13px;padding:8px 10px;cursor:default}

/* ===== Duel : onglet, decks ===== */
.pgrid.three{grid-template-columns:1fr 1fr 1fr;gap:10px;margin:10px 0}
.duelhero{display:flex;justify-content:center;margin:2px 0 4px}.duelhero img{width:min(46vw,190px);filter:drop-shadow(0 6px 14px #000a) drop-shadow(0 0 16px var(--t-hglow,#8b5cf688));animation:duf 3.2s ease-in-out infinite}
@keyframes duf{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.dubox{display:flex;align-items:center;gap:10px;width:100%;color:var(--text);margin:6px 0;cursor:pointer}.duico{font-size:28px}.dub{display:block;font-size:17px}
.dubox .chg{font-size:13px;font-weight:800;color:var(--t-h,#ffd271);white-space:nowrap}
.dbar{display:block;height:9px;border-radius:6px;background:#ffffff1f;overflow:hidden;margin:5px 0 3px}.dbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--t-a1,#6ee7a0),var(--t-b1,#ffd271));transition:width .25s}
.dkok{color:#6ee7a0;font-size:12px;font-weight:700}.dkko{color:#ffb3bd;font-size:12px;font-weight:700}
.dkrow{display:flex;align-items:center;gap:8px;margin:7px 0;padding:8px}.dkth{display:flex;gap:2px;width:92px;flex:none}.dkth img{width:30px;border-radius:4px;flex:none}.dkn{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.dkact{font-size:11px;background:var(--t-b1,#ffd271);color:var(--t-btx,#2b1400);border-radius:8px;padding:1px 6px;font-weight:800}
.dkact2{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;width:92px;flex:none}.dkact2 button{width:40px;height:36px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff12;font-size:17px;color:var(--text)}
.dkhead{padding:10px;margin:4px 0}.dkcnt{font-size:15px;white-space:nowrap}.dkcnt b{font-size:20px;color:var(--t-h,#ffd271)}
.dbar i.full{background:linear-gradient(90deg,#6ee7a0,#22c55e)}
.dkdist{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);align-items:center}.dkdist b{color:var(--text)}.dkdist i{font-style:normal;opacity:.7}.dkdist small{font-size:10px;opacity:.7}
.dkchips{display:flex;gap:6px;overflow-x:auto;margin:5px 0;padding-bottom:2px}.dkchips button{flex:none;min-height:34px;padding:0 11px;border-radius:16px;border:1px solid #ffffff33;background:#ffffff10;color:var(--text);font-size:14px;font-weight:700}
.dkchips button.on{background:var(--t-b1,#ffd271);color:var(--t-btx,#2b1400);border-color:transparent}
.dkgrid{grid-template-columns:repeat(4,1fr);gap:6px}.dt{position:relative;padding:0}.dt.in{outline:3px solid #6ee7a0;outline-offset:-2px}
.dt .dq{position:absolute;left:3px;top:3px;min-width:22px;height:22px;border-radius:11px;background:#22c55e;color:#fff;font-size:13px;font-weight:800;line-height:22px;text-align:center;padding:0 4px}.dt .dq:empty{display:none}
.dt .dm{position:absolute;right:3px;top:3px;width:26px;height:26px;border-radius:50%;border:0;background:#ef4444;color:#fff;font-size:17px;font-weight:800;line-height:1;padding:0}
.dkbar2{position:sticky;bottom:-20px;display:flex;gap:8px;padding:10px 0 6px;margin-top:8px;background:linear-gradient(transparent,#07030f 40%)}
.erow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#ffffff0d;margin:5px 0;font-size:13px}.erow b{min-width:96px}.erow .w{opacity:.7}.erow.neu{background:#ffffff06;font-size:12px}
.dkact{white-space:nowrap;display:inline-block;margin:2px 0}

/* ===== Duel : plateau ===== */
.rl{margin:8px 0;padding:12px}.rl h3{margin:0 0 8px}.rl ol{padding-left:20px;margin:0}.rl li{margin:7px 0;font-size:14px;line-height:1.35}.rl ul{padding-left:18px;margin:4px 0}
.dlay{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;padding:calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom));background:radial-gradient(120% 55% at 50% 0%,var(--t-top,#3a2380) 0%,var(--t-mid,#160c33) 45%,var(--bg,#0b0617) 80%);overflow:hidden}
.dtop{display:flex;align-items:center;gap:6px}.dbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--t-statline,#f5b94266);background:var(--t-stat,#ffffff14);color:var(--text);font-size:18px;flex:none}
.dtm{flex:1;text-align:center;font-weight:800;font-size:17px;border:2px solid #6ee7a0;border-radius:20px;padding:4px 8px;background:#0006;white-space:nowrap}.dtm.orange{border-color:#fbbf24;color:#fbbf24}.dtm.red{border-color:#ef4444;color:#ef4444;animation:dpulse .6s infinite}
@keyframes dpulse{50%{transform:scale(1.06)}}.dkill{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.dpl{font-size:12px;padding:3px 4px;color:var(--muted);display:flex;gap:4px;align-items:center}.dpl b{color:var(--t-h,#ffd271)}.dyou{color:#6ee7a0;font-weight:800}
.dside{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:6px}.dcol{display:flex;flex-direction:column;align-items:center;gap:8px}.drow{display:flex;gap:7px}
.pspace{width:56px;flex:none}
.dc{position:relative;aspect-ratio:495/675;border-radius:7px;overflow:hidden;border:2px solid #ffffff55;background:#000;box-shadow:0 3px 8px #0009;flex:none}.dc img{width:100%;height:100%;object-fit:cover;display:block}
.dc.c-common{border-color:var(--common)}.dc.c-rare{border-color:var(--rare)}.dc.c-epic{border-color:var(--epic)}.dc.c-legendary{border-color:var(--legendary)}
.dcp{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:9px;color:#ffd76a;background:#000b;padding:1px 0;line-height:1.2}.dce{position:absolute;top:2px;right:2px;font-style:normal;font-size:12px;background:#000a;border-radius:50%;width:19px;height:19px;display:flex;align-items:center;justify-content:center}
.drow .dc,.drow .dslot{width:min(19vw,76px)}.datt .dc,.datt .dslot{width:min(25vw,100px);box-shadow:0 0 14px #ffd76a88}
.dslot{aspect-ratio:495/675;border-radius:8px;border:2px dashed #ffffff44;background:#ffffff08}.dslot.off{border-color:#ffffff14;background:none}.dslot.hl{border-color:#ffd76a;background:#ffd76a22;animation:dpulse 1s infinite}
.dc.tgt{outline:3px solid #ff5a5a;box-shadow:0 0 16px #ff5a5a;animation:dpulse 1s infinite;cursor:pointer}
.dmid{min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:700;color:var(--t-h,#ffd76a);padding:2px 6px}
.pile{width:56px;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}.pile small{font-size:9px;color:var(--muted)}.pile .dc,.pile .dslot{width:52px}
.stack{position:relative;width:52px}.stack em,.dis em{position:absolute;right:-4px;bottom:-4px;background:#000d;color:#ffd76a;font-style:normal;font-size:11px;font-weight:800;border-radius:9px;padding:0 5px;z-index:2}
.stack:before,.stack:after{content:"";position:absolute;inset:0;border-radius:7px;background:#3a1f80;border:2px solid #a98bff;transform:translate(3px,3px)}.stack:after{transform:translate(6px,6px)}.stack .dc{position:relative;z-index:1}
.stack.shuf .dc{animation:dshuf .9s ease-in-out}.stack.shuf:before{animation:dshuf2 .9s ease-in-out}.stack.shuf:after{animation:dshuf3 .9s ease-in-out}
@keyframes dshuf{0%,100%{transform:none}20%{transform:translateX(-18px) rotate(-8deg)}40%{transform:translateX(16px) rotate(7deg)}60%{transform:translateX(-12px) rotate(-5deg)}80%{transform:translateX(8px) rotate(3deg)}}
@keyframes dshuf2{0%,100%{transform:translate(3px,3px)}25%{transform:translate(22px,0) rotate(9deg)}50%{transform:translate(-14px,6px) rotate(-6deg)}75%{transform:translate(12px,3px)}}
@keyframes dshuf3{0%,100%{transform:translate(6px,6px)}30%{transform:translate(-20px,2px) rotate(-8deg)}60%{transform:translate(18px,8px) rotate(7deg)}}
.dis{position:relative;width:52px;aspect-ratio:495/675;border:2px dashed #ffffff55;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}.dis .dc{width:100%;border:0;border-radius:5px;opacity:.75;filter:grayscale(.6)}
.dhand{display:flex;justify-content:center;gap:5px;padding:12px 2px 4px;border-top:1px solid var(--t-line,#4a3a8a);background:#00000040;margin:0 -8px;min-height:104px}.dhand .dc{width:min(17vw,70px)}.dhand .hc.can{cursor:pointer}.dhand .hc.sel{transform:translateY(-14px);outline:3px solid #ffd76a;z-index:2}
.arena{position:absolute;inset:0;z-index:20;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;animation:fade .2s;padding:10px}
.ahead{font-size:20px;font-weight:900;color:var(--t-h,#ffd76a);text-shadow:0 0 12px #000}.aduel{display:flex;align-items:center;gap:12px}.ac{text-align:center;transition:.5s}.ac small{display:block;margin-top:6px;color:var(--muted);font-size:12px}.ac .dc{width:min(32vw,128px)}
.avs{font-size:26px;font-weight:900;color:#ff5a5a;text-shadow:0 0 14px #ff5a5a}
.flip{position:relative;width:min(32vw,128px);aspect-ratio:495/675}.flip .dc{position:absolute;inset:0;width:100%;backface-visibility:hidden;transition:transform .7s}.flip .fr{transform:rotateY(180deg)}.arena.rev .flip .back{transform:rotateY(180deg)}.arena.rev .flip .fr{transform:rotateY(0)}
.ac.dead{animation:ddead 1s forwards}@keyframes ddead{0%{transform:none}30%{transform:translateX(-8px) rotate(-3deg)}60%{transform:translateX(8px) rotate(3deg)}100%{transform:scale(.85);filter:grayscale(1) brightness(.5);opacity:.6}}
.ares{min-height:60px;text-align:center;font-size:15px;line-height:1.4;max-width:320px;font-weight:600}

.duspin{font-size:44px;animation:duspin 1.2s ease-in-out infinite}@keyframes duspin{50%{transform:scale(1.2) rotate(12deg)}}
.duch{border-color:#ff5a5a!important;margin:6px 0}.dtm.opp{border-color:#ffffff44;color:var(--muted)}

.durew{margin:10px 0 0;text-align:center;font-size:26px;font-weight:800;color:#ffd84d;border-color:#ffd84d88!important;background:linear-gradient(#3a2f08,#1f1904)}
.durew small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.durew.no{font-size:15px;color:var(--muted);border-color:#ffffff22!important;background:none}
.durew.elo{font-size:16px;color:inherit;font-weight:600;border-color:#ffffff33!important;background:none}
.rkrow{display:flex;align-items:center;gap:10px;margin:5px 0;padding:8px 12px}.rkrow.me{border-color:#ffd84d!important}.rkn{width:28px;text-align:center}

#duAI span:not(.ic),#duMatch span:not(.ic),#duFr span:not(.ic){white-space:normal;text-align:center;line-height:1.15}
.volrow{display:flex;align-items:center;gap:8px;margin:8px 0 2px}.volrow input{flex:1;accent-color:#ffb300;min-width:0}.volrow b{width:42px;text-align:right;font-size:13px}
.gsys{text-align:center;font-size:12px;color:var(--muted);margin:6px 12px}
.gpf.on{border-color:#ffb300!important;background:#3a2f0833}.gpck{width:20px;height:20px;border-radius:6px;border:2px solid #ffffff55;display:inline-block;flex:none}.gpf.on .gpck{background:#ffb300;border-color:#ffb300;box-shadow:inset 0 0 0 3px #1a1033}
.dbtn.on{background:#2a7a3f;box-shadow:0 0 0 2px #6ee7a0}
.sg-maze{height:min(66vh,520px);background:#07030d}
.gamebox{border-color:#f0a53a}.gmh{text-align:center;font-size:15px}.gmroll{animation:gmspin .22s linear infinite}@keyframes gmspin{50%{transform:scale(1.15) rotate(8deg)}}
.gamebox [data-pick]{font-size:26px}
.mailw{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:linear-gradient(#3a0a2a,#a1224f);position:relative}
.mailz{width:70px;text-align:center;font-size:38px;opacity:.7}.mailz small{font-size:11px}
.mailc{font-size:90px;transition:transform .15s,opacity .15s}.mailc.out.l{transform:translateX(-160px) rotate(-30deg);opacity:0}.mailc.out.r{transform:translateX(160px) rotate(30deg);opacity:0}
.mailb{position:absolute;bottom:8px;left:8px;right:8px;display:flex;gap:8px}.mailb .btn{flex:1;min-height:48px}
.gdn{height:100%;background:linear-gradient(#9be28d,#4aa84a);padding:8px;display:flex;flex-direction:column;gap:6px}.gdnh{text-align:center;font-weight:700;color:#103a10;min-height:22px}
.gdng{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:6px}.bush{border:0;border-radius:14px;background:#2d7d32;font-size:34px;box-shadow:inset 0 -4px #1b5e20}.bush.open{background:#c8e6a5;box-shadow:none}
.potw{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 30%,#3a1a5a,#0a0412 70%);padding:10px}
.poth{font-weight:700;font-size:16px;color:#e8d6ff;min-height:24px;text-align:center}.potc{font-size:84px;filter:drop-shadow(0 0 18px #7cff6a);animation:potb 2s ease-in-out infinite}@keyframes potb{50%{transform:translateY(-6px)}}
.potg{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(88%,300px)}.poti{border:0;border-radius:18px;font-size:48px;padding:18px 0;background:#2a1747;box-shadow:inset 0 -5px #150a26;transition:transform .08s}
.poti.on{background:#8a5cff;transform:scale(1.07);box-shadow:0 0 22px #b99aff}

.bigcard{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;animation:bcin .18s ease}
.bigcard .fxbox{width:min(92vw,calc(82vh*0.72),460px);border-radius:16px}
.bigcard img{width:100%;display:block;border-radius:14px}
.bigcard .bchint{color:#cbd5e1;font-size:13px;margin-top:12px}
@keyframes bcin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
#modal .tile.bz{cursor:zoom-in}

.mascot .wimg img.wst{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.mascot .wimg img.wst.on{opacity:1}
.tile.wsel{outline:3px solid #ffd271;outline-offset:-3px;box-shadow:0 0 14px #ffd271aa}
.tile.wsel::after{content:"🎯";position:absolute;right:3px;top:3px;font-size:16px;z-index:3;background:#000b;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}

/* ===== Avatars, cadres, bulles de discussion ===== */
.av{position:relative;display:inline-block;width:var(--s,96px);height:var(--s,96px);flex:none;vertical-align:middle}
.av .avp{position:absolute;left:18.5%;top:18.5%;width:63%;height:63%;border-radius:50%;overflow:hidden;background:#2b1e55;display:grid;place-items:center;font-size:calc(var(--s,96px)*.3)}
.av .avp img{width:100%;height:100%;object-fit:cover;display:block}
.av .avf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.sq .av{--s:50px;width:50px;height:50px}.sq img.sacimg{width:84px;height:84px;object-fit:contain}
.bagcats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.itgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.itile{aspect-ratio:1;border-radius:14px;background:var(--panel);border:1px solid #33246b;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;font-size:11px;font-weight:700;position:relative;min-width:0;text-align:center}
.itile img{width:76%;height:auto;aspect-ratio:1;object-fit:contain}
.itile.on{border-color:#ffd271;box-shadow:0 0 12px #ffd27177}
.itile .ck{position:absolute;top:3px;right:5px;font-size:13px}
.itile.off{opacity:.55}
.bubrow{display:flex;align-items:center;gap:10px;margin:8px 0;padding:8px;border-radius:14px;border:1px solid #33246b;background:var(--panel);width:100%;color:var(--text);text-align:left}
.bubrow.on{border-color:#ffd271;box-shadow:0 0 12px #ffd27177}
.bubrow .cmsg{flex:1;margin:0;align-self:center;max-width:none}
.itshop{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0}
.itc{border-radius:16px;background:var(--panel);border:1px solid #33246b;color:var(--text);padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:13px;text-align:center;position:relative;min-width:0}
.itc img.fr{width:70%;aspect-ratio:1;object-fit:contain}
.itc .bpv{width:100%;padding:6px 0 14px}
.itc .pr{color:#ffd271}.itc .tg{position:absolute;top:6px;left:6px;font-size:10px;background:#7a62d6;border-radius:8px;padding:1px 6px}
.itc.lock{opacity:.6}.itc small{font-weight:600;color:var(--muted);font-size:11px}
.pfstat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.pfstat div{background:var(--panel);border:1px solid #33246b;border-radius:12px;padding:8px;text-align:center}.pfstat b{display:block;font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chips span{background:#3b2a78;border:1px solid #7a62d6;border-radius:12px;padding:3px 10px;font-size:12px}
.cmsg.bsk{position:relative;background:transparent!important;border-style:solid;border-width:15px 15px 15px 15px;border-color:transparent;border-image-slice:40 fill;border-image-width:15px;border-image-repeat:stretch;border-radius:0;padding:0 2px;margin-bottom:14px;color:#fff;text-shadow:0 1px 2px #000b}
.cmsg.bsk .cn{color:#ffe9a8}.cmsg.bsk small{color:#ffffffbb}
.cmsg.bsk::after{content:'';position:absolute;bottom:-26px;width:40px;height:13px;background-size:100% 100%;background-repeat:no-repeat}
.cmsg.bsk.mine::after{right:3%}.cmsg.bsk:not(.mine)::after{left:3%;transform:scaleX(-1)}
.cmsg.bsk-base{border-image-source:url(../assets/items/bubble_base.webp)}.cmsg.bsk-base::after{background-image:url(../assets/items/bubble_base_tail.webp)}
.cmsg.bsk-bleu{border-image-source:url(../assets/items/bubble_bleu.webp)}.cmsg.bsk-bleu::after{background-image:url(../assets/items/bubble_bleu_tail.webp)}
.cmsg.bsk-rouge{border-image-source:url(../assets/items/bubble_rouge.webp)}.cmsg.bsk-rouge::after{background-image:url(../assets/items/bubble_rouge_tail.webp)}
.cmsg.bsk-vert{border-image-source:url(../assets/items/bubble_vert.webp)}.cmsg.bsk-vert::after{background-image:url(../assets/items/bubble_vert_tail.webp)}
.cmsg.bsk-violet{border-image-source:url(../assets/items/bubble_violet.webp)}.cmsg.bsk-violet::after{background-image:url(../assets/items/bubble_violet_tail.webp)}
.cmsg.bsk-halloween{border-image-source:url(../assets/items/bubble_halloween.webp)}.cmsg.bsk-halloween::after{background-image:url(../assets/items/bubble_halloween_tail.webp)}
.cmsg.bsk-noel{border-image-source:url(../assets/items/bubble_noel.webp)}.cmsg.bsk-noel::after{background-image:url(../assets/items/bubble_noel_tail.webp)}
.cmsg.bsk-valentin{border-image-source:url(../assets/items/bubble_valentin.webp)}.cmsg.bsk-valentin::after{background-image:url(../assets/items/bubble_valentin_tail.webp)}
.cmsg.bsk-carnaval{border-image-source:url(../assets/items/bubble_carnaval.webp)}.cmsg.bsk-carnaval::after{background-image:url(../assets/items/bubble_carnaval_tail.webp)}
.cmsg.bsk-paques{border-image-source:url(../assets/items/bubble_paques.webp)}.cmsg.bsk-paques::after{background-image:url(../assets/items/bubble_paques_tail.webp)}

.itc .tg.an{background:linear-gradient(90deg,#f59e0b,#ec4899)}.itc .tg.soon{left:auto;right:6px;background:#475569}

/* bulles animées (images plus petites : coupe de 30 px) */
.cmsg.bsk[class*='_anim']{border-image-slice:30 fill}
.cmsg.bsk-base_anim{border-image-source:url(../assets/items/bubble_base_anim.webp)}.cmsg.bsk-base_anim::after{background-image:url(../assets/items/bubble_base_anim_tail.webp)}
.cmsg.bsk-bleu_anim{border-image-source:url(../assets/items/bubble_bleu_anim.webp)}.cmsg.bsk-bleu_anim::after{background-image:url(../assets/items/bubble_bleu_anim_tail.webp)}
.cmsg.bsk-rouge_anim{border-image-source:url(../assets/items/bubble_rouge_anim.webp)}.cmsg.bsk-rouge_anim::after{background-image:url(../assets/items/bubble_rouge_anim_tail.webp)}
.cmsg.bsk-vert_anim{border-image-source:url(../assets/items/bubble_vert_anim.webp)}.cmsg.bsk-vert_anim::after{background-image:url(../assets/items/bubble_vert_anim_tail.webp)}
.cmsg.bsk-violet_anim{border-image-source:url(../assets/items/bubble_violet_anim.webp)}.cmsg.bsk-violet_anim::after{background-image:url(../assets/items/bubble_violet_anim_tail.webp)}
.cmsg.bsk-halloween_anim{border-image-source:url(../assets/items/bubble_halloween_anim.webp)}.cmsg.bsk-halloween_anim::after{background-image:url(../assets/items/bubble_halloween_anim_tail.webp)}
.cmsg.bsk-noel_anim{border-image-source:url(../assets/items/bubble_noel_anim.webp)}.cmsg.bsk-noel_anim::after{background-image:url(../assets/items/bubble_noel_anim_tail.webp)}
.cmsg.bsk-valentin_anim{border-image-source:url(../assets/items/bubble_valentin_anim.webp)}.cmsg.bsk-valentin_anim::after{background-image:url(../assets/items/bubble_valentin_anim_tail.webp)}
.cmsg.bsk-carnaval_anim{border-image-source:url(../assets/items/bubble_carnaval_anim.webp)}.cmsg.bsk-carnaval_anim::after{background-image:url(../assets/items/bubble_carnaval_anim_tail.webp)}
.cmsg.bsk-paques_anim{border-image-source:url(../assets/items/bubble_paques_anim.webp)}.cmsg.bsk-paques_anim::after{background-image:url(../assets/items/bubble_paques_anim_tail.webp)}

/* photo de profil à côté des messages */
.mrow{display:flex;align-items:flex-end;gap:2px;max-width:96%;align-self:flex-start}
.mrow.mine{align-self:flex-end;flex-direction:row-reverse}
.mrow .mav{flex:none;margin-bottom:-6px}
.mrow .cmsg{max-width:none;min-width:0;align-self:auto}

.mrow .mav{cursor:pointer}
.bdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.bdg .bi{font-size:30px}.bdg small{font-size:11px;line-height:1.2}.bdg.lock{opacity:.4;filter:grayscale(1)}
#pBio{border-radius:10px;padding:8px;resize:vertical}

.fxlay{position:sticky;top:0;height:0;z-index:6;pointer-events:none}
.fxlay i{position:absolute;left:-16px;right:-16px;top:calc(-14px - env(safe-area-inset-top));height:100vh;height:100dvh;background-size:cover;background-position:center;background-repeat:no-repeat}
.fxpv{width:100%;aspect-ratio:3/4;max-height:150px;border-radius:12px;background:#120a2a;overflow:hidden;display:flex;justify-content:center}
.fxpv img{height:100%;width:auto;object-fit:cover}
.fxpv.big{max-height:260px;width:60%;margin:0 auto 10px}
.itile.fxt{aspect-ratio:auto;min-height:150px}.itile.fxt .fxpv{width:76%;height:auto;aspect-ratio:3/4;max-height:none}.itile.fxt .fxpv img{width:100%;height:100%;aspect-ratio:auto}

.pfact{display:flex;justify-content:center;gap:10px;margin:8px 0 2px;position:relative;z-index:7}
.pfact button{min-width:44px;height:44px;padding:0 12px;border-radius:22px;border:1px solid #6d55c9;background:linear-gradient(#5b44b8,#3a2a80);color:#fff;font-size:18px;box-shadow:0 3px 0 #22184d}
.pfact button:disabled{opacity:.6}

.chips.wrap{flex-wrap:wrap;justify-content:center;overflow:visible}

.sq{position:relative}.sq .cbadge{top:8px;right:10px}

.pfstat .wide{grid-column:1/-1}
.vpbadge{display:inline-block;margin-top:8px;padding:5px 14px;border-radius:16px;background:linear-gradient(90deg,#7c3aed55,#ec489955);border:1px solid #c084fc88;font-size:13px}
.giftmsg{display:flex;align-items:center;gap:10px;min-width:170px;cursor:pointer}.giftmsg .gi{flex:none;display:flex;width:40px;justify-content:center}.giftmsg .gwin,.gwin{color:#ffd271;font-weight:800}
#giftFx{position:absolute;inset:0;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(20,8,40,.55),rgba(0,0,0,.2) 70%);animation:gfade 3.6s ease both}
#giftFx .gbox{position:relative;text-align:center;width:300px}
#giftFx .gico{display:inline-flex;animation:gpop 1.1s cubic-bezier(.2,1.6,.4,1) both,gbob 1.2s ease-in-out 1.1s 2;filter:drop-shadow(0 0 22px #ffd271)}
#giftFx .gbox i{position:absolute;left:50%;top:70px;font-style:normal;font-size:22px;opacity:0;animation:gspark 1.6s ease-out forwards}
#giftFx .gtxt{margin-top:12px;font-size:17px;font-weight:700;text-shadow:0 2px 8px #000;animation:grise .6s .5s both}
#giftFx .gwin2{margin-top:6px;font-size:22px;font-weight:900;color:#ffd271;text-shadow:0 2px 10px #000;animation:grise .6s .9s both}
@keyframes gfade{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes gpop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
@keyframes gbob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.06)}}
@keyframes gspark{0%{opacity:0;transform:translate(-50%,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.2)}}
@keyframes grise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}

/* ---------- Fonds animés de l'accueil par thème ---------- */
#bgfx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#070412;--fg:190,170,235}
#bgfx .scene{position:absolute;inset:0;width:100%;height:100%}
#bgfx::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(5,2,12,.05),rgba(5,2,12,.22) 55%,rgba(5,2,12,.55))}
html[data-bg] #view,html[data-bg] main{background:transparent!important}html[data-bg] .hero .logo,html[data-bg] .hero .fan{display:none!important}
#bgfx .st{fill:#fff;opacity:.3;animation:twk 3s ease-in-out infinite}@keyframes twk{0%,100%{opacity:.15}50%{opacity:.95}}
#bgfx .halo{transform-box:fill-box;transform-origin:center;animation:halo 7s ease-in-out infinite}@keyframes halo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
#bgfx .cl1{animation:cl 38s linear infinite alternate}#bgfx .cl2{animation:cl 52s linear infinite alternate-reverse}@keyframes cl{from{transform:translateX(-70px)}to{transform:translateX(90px)}}
#bgfx .win{fill:#ffb54a;filter:drop-shadow(0 0 3px #ff9d2f);animation:winflk 3.4s steps(1) infinite}
@keyframes winflk{0%{opacity:.95}9%{opacity:.55}12%{opacity:1}40%{opacity:.8}46%{opacity:1}71%{opacity:.6}75%{opacity:.95}100%{opacity:.9}}
#bgfx .flash{opacity:0;animation:fl 11s linear infinite}@keyframes fl{0%,91%,100%{opacity:0}92%{opacity:.16}93.5%{opacity:.03}95%{opacity:.11}97%{opacity:0}}
#bgfx .fog{position:absolute;left:-30%;width:160%;border-radius:50%;filter:blur(22px)}
#bgfx .f1{bottom:20%;height:150px;background:radial-gradient(ellipse at center,rgba(var(--fg),.34),rgba(var(--fg),0) 70%);animation:fg 34s ease-in-out infinite alternate}
#bgfx .f2{bottom:7%;height:170px;background:radial-gradient(ellipse at center,rgba(var(--fg),.42),rgba(var(--fg),0) 70%);animation:fg 26s ease-in-out infinite alternate-reverse}
#bgfx .f3{bottom:-4%;height:150px;background:radial-gradient(ellipse at center,rgba(var(--fg),.36),rgba(var(--fg),0) 70%);animation:fg 42s ease-in-out infinite alternate}
@keyframes fg{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
#bgfx .bat{position:absolute;left:-60px;animation:fly linear infinite}#bgfx .bat svg{display:block;animation:flap .26s ease-in-out infinite alternate}#bgfx .bat .wing{fill:#05020b}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes fly{0%{transform:translate(0,0) scale(var(--s))}25%{transform:translate(120px,-26px) scale(var(--s))}50%{transform:translate(260px,10px) scale(var(--s))}75%{transform:translate(380px,-22px) scale(var(--s))}100%{transform:translate(520px,4px) scale(var(--s))}}
#bgfx .embers{position:absolute;inset:0}#bgfx .em{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;opacity:0;animation:rise linear infinite}
@keyframes rise{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:.95}85%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),-560px) scale(1)}}
/* chute (neige, pétales, confettis) */
#bgfx .snow,#bgfx .petals,#bgfx .confetti,#bgfx .hearts{position:absolute;inset:0}
#bgfx .sn,#bgfx .pt,#bgfx .cf{position:absolute;top:-20px;animation:fall linear infinite}
@keyframes fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),840px) rotate(var(--r))}}
#bgfx .sn{border-radius:50%;opacity:.9}#bgfx .sn.big{filter:blur(1px);opacity:.8}
#bgfx .pt{border-radius:60% 0 60% 0;opacity:.85}#bgfx .cf{border-radius:1px;opacity:.9}
/* Noël */
#bgfx.bg-noel{--fg:200,220,255;background:#050a1e}
#bgfx .aur{filter:blur(12px);animation:aur 14s ease-in-out infinite alternate}#bgfx .aur.a2{animation-duration:19s;animation-direction:alternate-reverse}
@keyframes aur{from{transform:translateX(-30px);opacity:.55}to{transform:translateX(30px);opacity:1}}
#bgfx .win.w2{fill:#ffcf6a;animation-duration:5s}#bgfx .lt{animation:twk 1.4s ease-in-out infinite}
#bgfx .smk{fill:#dbe7f7;opacity:0;animation:smk 5.6s linear infinite}@keyframes smk{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.5}100%{opacity:0;transform:translate(18px,-60px) scale(2.2)}}
/* Saint-Valentin */
#bgfx.bg-valentin{--fg:255,170,205;background:#12041c}
#bgfx .win.w3{fill:#ffb3d0;filter:drop-shadow(0 0 3px #ff6fa5)}#bgfx .sp{fill:#fff;filter:drop-shadow(0 0 4px #ffd0e2);animation:twk 1.2s ease-in-out infinite}
#bgfx .bk{opacity:.18;filter:blur(2px);animation:bk 6s ease-in-out infinite}@keyframes bk{0%,100%{opacity:.08}50%{opacity:.4}}
#bgfx .ht{position:absolute;bottom:-30px;font-weight:400;line-height:1;opacity:0;text-shadow:0 0 10px currentColor;animation:hrise linear infinite}
@keyframes hrise{0%{opacity:0;transform:translate(0,0) scale(.7)}12%{opacity:.9}60%{transform:translate(calc(var(--dx)*.5),-380px) scale(1)}100%{opacity:0;transform:translate(var(--dx),-780px) scale(1.15)}}
/* Carnaval */
#bgfx.bg-carnaval{--fg:255,120,220;background:#090320}
#bgfx .flg{transform-box:fill-box;transform-origin:50% 0;animation:flg 2.6s ease-in-out infinite alternate}@keyframes flg{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
#bgfx .whl{animation:spin 70s linear infinite}#bgfx .gon{animation:spinr 70s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinr{to{transform:rotate(-360deg)}}
#bgfx .beam{position:absolute;top:-20px;width:150px;height:560px;transform-origin:50% 0;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:.5;animation:sweep 7s ease-in-out infinite alternate}
#bgfx .b1{left:2%;background:linear-gradient(rgba(255,61,129,.7),transparent 88%)}#bgfx .b2{left:36%;background:linear-gradient(rgba(46,230,200,.65),transparent 88%);animation-duration:9s;animation-delay:-3s}#bgfx .b3{left:68%;background:linear-gradient(rgba(255,210,63,.6),transparent 88%);animation-duration:8s;animation-delay:-5s}
@keyframes sweep{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
#bgfx .bln{position:absolute;bottom:-90px;animation:bup linear infinite}#bgfx .bln i{display:block;width:26px;height:32px;border-radius:50% 50% 48% 48%;opacity:.85}#bgfx .bln u{display:block;width:1px;height:42px;background:rgba(255,255,255,.4);margin:0 auto}
@keyframes bup{0%{transform:translate(0,0)}50%{transform:translate(20px,-480px)}100%{transform:translate(-10px,-980px)}}
#bgfx .fwk{position:absolute;width:0;height:0}#bgfx .fwk i{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:0;animation:fwk 7.8s ease-out infinite;animation-delay:inherit}
@keyframes fwk{0%{transform:scale(0);opacity:0}2%{opacity:1}14%{transform:scale(1);opacity:1}24%{transform:scale(1.18);opacity:0}100%{opacity:0}}
/* Pâques */
#bgfx.bg-paques{--fg:255,225,235;background:#1b1442}
#bgfx .bfy{position:absolute;left:-40px;animation:bfy linear infinite}#bgfx .bw{transform-box:fill-box;transform-origin:center;animation:bwf .35s ease-in-out infinite alternate}@keyframes bwf{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
@keyframes bfy{0%{transform:translate(0,0)}20%{transform:translate(90px,-34px)}40%{transform:translate(190px,12px)}60%{transform:translate(280px,-30px)}80%{transform:translate(370px,8px)}100%{transform:translate(480px,-20px)}}

/* Thème classique : nébuleuse cosmique */
#bgfx.bg-classique{background:#05020f}
#bgfx .stl.s1{animation:drift 140s linear infinite}#bgfx .stl.s2{animation:drift 95s linear infinite}#bgfx .stl.s3{animation:drift 60s linear infinite}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-120px)}}
#bgfx .neb{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#bgfx .n1{width:520px;height:520px;left:-170px;top:-60px;background:radial-gradient(circle,rgba(124,58,237,.55),rgba(124,58,237,0) 68%);animation:nb1 26s ease-in-out infinite alternate}
#bgfx .n2{width:480px;height:480px;right:-190px;top:170px;background:radial-gradient(circle,rgba(37,99,235,.50),rgba(37,99,235,0) 68%);animation:nb2 31s ease-in-out infinite alternate}
#bgfx .n3{width:440px;height:440px;left:-60px;bottom:-60px;background:radial-gradient(circle,rgba(192,38,211,.42),rgba(192,38,211,0) 68%);animation:nb3 36s ease-in-out infinite alternate}
#bgfx .n4{width:300px;height:300px;right:-40px;top:-40px;background:radial-gradient(circle,rgba(20,184,166,.28),rgba(20,184,166,0) 68%);animation:nb2 22s ease-in-out infinite alternate-reverse}
@keyframes nb1{from{transform:translate(0,0) scale(1);opacity:.75}to{transform:translate(60px,70px) scale(1.18);opacity:1}}
@keyframes nb2{from{transform:translate(0,0) scale(1.05);opacity:1}to{transform:translate(-70px,-40px) scale(.9);opacity:.65}}
@keyframes nb3{from{transform:translate(0,0) scale(.95);opacity:.7}to{transform:translate(80px,-60px) scale(1.15);opacity:1}}
#bgfx .shoot{position:absolute;width:110px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);opacity:0;transform:rotate(28deg);filter:drop-shadow(0 0 4px #c4b5fd)}
#bgfx .sh1{left:20px;top:70px;animation:shoot 9s ease-in infinite}#bgfx .sh2{left:150px;top:30px;animation:shoot 13s ease-in infinite 4.5s}
@keyframes shoot{0%,88%{opacity:0;transform:translate(0,0) rotate(28deg)}90%{opacity:1}100%{opacity:0;transform:translate(220px,115px) rotate(28deg)}}

/* Fusées qui voyagent (classique) */
#bgfx .rkt{position:absolute;left:0;top:0;opacity:0;will-change:transform}
#bgfx .rkt svg{display:block;filter:drop-shadow(0 0 6px rgba(196,181,253,.7))}
#bgfx .rkt .fl{transform-box:fill-box;transform-origin:50% 0;animation:flk .18s ease-in-out infinite alternate}
@keyframes flk{from{transform:scaleY(.7)}to{transform:scaleY(1.25)}}
#bgfx .rk1{animation:rk1 24s linear infinite 3s}
#bgfx .rk2{animation:rk2 33s linear infinite 14s}
#bgfx .rk3{animation:rk3 41s linear infinite 26s}
@keyframes rk1{0%{opacity:0;transform:translate(-50px,620px) rotate(32deg) scale(.9)}3%{opacity:1}22%{opacity:1}26%,100%{opacity:0;transform:translate(450px,120px) rotate(32deg) scale(.9)}}
@keyframes rk2{0%{opacity:0;transform:translate(440px,520px) rotate(-38deg) scale(.65)}3%{opacity:1}18%{opacity:1}22%,100%{opacity:0;transform:translate(-60px,60px) rotate(-38deg) scale(.65)}}
@keyframes rk3{0%{opacity:0;transform:translate(60px,860px) rotate(8deg) scale(1.1)}3%{opacity:1}20%{opacity:1}24%,100%{opacity:0;transform:translate(220px,-120px) rotate(8deg) scale(1.1)}}

#giftFx .gani{display:block;position:absolute;left:50%;top:50%;height:100%;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
#giftFx:has(.gani) .gbox{position:static;width:100%;height:100%}
#giftFx:has(.gani) .gtxt,#giftFx:has(.gani) .gwin2{position:absolute;left:0;right:0;z-index:2}
#giftFx:has(.gani) .gtxt{bottom:96px;margin:0}#giftFx:has(.gani) .gwin2{bottom:56px;margin:0}
.bagcats #wallBtn{grid-column:1/-1}

.gfvp{overflow-x:auto;scroll-snap-type:x mandatory;display:flex;scrollbar-width:none;margin-top:6px}.gfvp::-webkit-scrollbar{display:none}
.gfpg{flex:none;width:100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.gfit{height:122px;min-width:0;padding:8px 2px;justify-content:flex-start;gap:3px}.gfit span{font-size:12px;line-height:1.1;min-height:28px;display:flex;align-items:center;justify-content:center}.gfit small{font-size:11px}
.gfdots{display:flex;justify-content:center;gap:6px;margin:8px 0 2px;min-height:7px}.gfdots i{width:7px;height:7px;border-radius:9px;background:#4b3f7e;transition:all .2s}.gfdots i.on{background:#ffd271;width:18px}
.gfcats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}.gfcats span{font-size:11.5px;padding:5px 10px;border-radius:99px;background:#22194a;border:1px solid #4b3f7e;color:#c9bff0;cursor:pointer}.gfcats span.on{background:#3d2f7e;border-color:#ffd271;color:#fff}
.gfpg .gfit{width:100%;min-width:0;max-width:100%;overflow:hidden;white-space:normal;word-break:break-word}.gfpg .gfit span{max-width:100%;padding:0 2px}

.cstat{margin:4px 0;padding:8px 10px;border-radius:12px;background:rgba(255,210,113,.14);border:1px solid #ffd271;color:#ffe3a0;font-size:13px;font-weight:700;text-align:center}.cstat.shut{background:rgba(255,90,90,.16);border-color:#ff7a7a;color:#ffc2c2}.cstat[hidden]{display:none}
.sysm{font-weight:800;color:#ffe3a0}

.giftmsg .gwin{display:block;line-height:1.35;margin-top:2px}#giftFx .gwin2{font-size:17px!important;line-height:1.4}#giftFx:has(.gani) .gwin2{bottom:30px!important}#giftFx:has(.gani) .gtxt{bottom:106px!important}
.sc .eurp{color:#9be8b0;font-size:13px}

.cgck{display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-size:13px;line-height:1.35;text-align:left}.cgck[hidden]{display:none}.cgck input{flex:none;width:20px;height:20px;margin-top:2px}.cgck a,.lgl a{color:var(--gold)}
.lgbody{font-size:13px;line-height:1.5;text-align:left}.lgbody h3{margin:14px 0 4px;font-size:15px;color:var(--gold)}.lgbody h3:first-child{margin-top:0}.lgbody p{margin:4px 0}.lgbody ul{margin:4px 0;padding-left:18px}.lgmiss{background:#ffd27133;color:#ffd271;border-radius:4px;padding:0 4px}

/* PASS SAISON + PARRAINAGE */
.passbtn{position:absolute;left:6px;top:132px;z-index:2;display:flex;flex-direction:column;align-items:center;width:82px;background:none;border:0;padding:0;color:var(--text);font-weight:800;filter:drop-shadow(0 3px 8px #ffb62e77)}.passbtn.first{top:98px}
.passbtn b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle at 35% 30%,#ffe08a,#e08a1e 70%);border:2px solid #fff3c4;box-shadow:inset 0 -4px 8px #0004}
.passbtn span{white-space:nowrap;font-size:10px;padding:1px 7px;margin-top:-4px;background:rgba(5,8,25,.72);border:1px solid #ffd27155;color:#ffe2a0;border-radius:10px}.passbtn:active{transform:scale(.94)}
.passbtn .pdot{position:absolute;top:0;right:12px;width:14px;height:14px;border-radius:50%;background:#ef4444;border:2px solid #fff;box-shadow:0 0 6px #000a}
.pshead,.psrow{display:grid;grid-template-columns:36px 1fr 1fr;gap:6px;align-items:stretch}.pshead{font-size:12px;color:var(--muted,#9aa);text-align:center;margin:10px 0 4px}
.psrow{margin:5px 0;padding:5px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff10}.psrow.reach{background:#ffb62e10;border-color:#ffb62e44}.psrow.next{border-color:#8ecbff88}
.pstier{display:grid;place-items:center;font-size:16px;color:#ffe2a0}
.pscell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:68px;padding:6px 4px;border-radius:10px;border:1px solid #ffffff18;background:#0003;color:var(--text);font:inherit;text-align:center}
.pscell .psi{font-size:20px}.pscell .psl{font-size:12px;font-weight:700;line-height:1.15}.pscell em{font-style:normal;font-size:11px;opacity:.7}
.pscell.ok{background:linear-gradient(180deg,#ffb62e33,#ff7a3c22);border-color:#ffb62e;box-shadow:0 0 10px #ffb62e55;animation:tglow 2s ease-in-out infinite}.pscell.ok em{opacity:1;color:#ffe2a0;font-weight:800}
.pscell.got{opacity:.5}.pscell.lock{opacity:.6}
.refcode{font-size:34px;font-weight:900;letter-spacing:6px;color:#ffe2a0;text-shadow:0 0 12px #ffb62e88;user-select:all}