:root{--c1:#6d28d9;--c2:color-mix(in srgb,var(--c1) 35%,#000);--line:#ffffff1a;--ui:#e9e9f5;--mut:#9aa0c0;--pw:min(70vw,38vh,360px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% -10%,#2a2560,#0b0c14 60%) fixed;background-color:#0b0c14;color:var(--ui);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;padding:10px 14px;background:#0b0c14d9;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);flex-wrap:wrap}
nav[hidden]{display:none}
.brand{font-weight:800;letter-spacing:.08em;margin-right:8px}
.lk{padding:7px 13px;border-radius:99px;color:var(--mut);font-size:14px;position:relative}
.lk.on{background:#fff;color:#111;font-weight:600}
.sp{flex:1}
.badge{position:absolute;top:-3px;right:-3px;background:#ff4d6d;color:#fff;font-size:10px;border-radius:99px;padding:1px 6px}
.chip,.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 13px;border-radius:99px;background:#ffffff14;border:1px solid var(--line);font-size:13px;cursor:pointer}
.pill.on,.btn{background:#fff;color:#111;font-weight:600;border-color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:99px;border:0;cursor:pointer;font-size:14px}
.btn.alt{background:#ffffff1a;color:var(--ui);border:1px solid var(--line)}.btn.ko{background:#ff4d6d;color:#fff}.btn:disabled{opacity:.4;cursor:default}
.av{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#333}
.wrap{max-width:1200px;margin:0 auto;padding:18px 14px 70px}
h1{font-size:24px;margin:6px 0 16px}h2{font-size:18px;margin:0}
.center{min-height:100dvh;display:grid;place-items:center;text-align:center;padding:20px}
.center .box{max-width:380px;display:flex;flex-direction:column;gap:14px;align-items:center}
.err{color:#ff8da1}
/* accueil / ouverture */
.home{height:calc(100dvh - 58px);display:flex;flex-direction:column}
.packbar{display:flex;gap:8px;justify-content:center;padding:10px}
.stage{flex:1;position:relative;perspective:1400px;overflow:hidden}
#hint{position:absolute;left:0;right:0;bottom:62px;text-align:center;font-size:13px;color:var(--mut);pointer-events:none}
#packbox{position:absolute;left:50%;top:50%;width:var(--pw);aspect-ratio:2/3;transform:translate(-50%,-50%)}
#pack{position:absolute;inset:0;touch-action:none;cursor:grab;filter:drop-shadow(0 20px 30px #000a);animation:floaty 4s ease-in-out infinite}
#pack.tearing{animation:none}
@keyframes floaty{50%{transform:translateY(-8px) rotate(1.2deg)}}
.part{position:absolute;inset:0;background:var(--skin,linear-gradient(160deg,var(--c1),var(--c2)))}
.part::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff44 50%,transparent 60%);background-size:260% 100%;background-repeat:no-repeat;animation:sweep 3.2s linear infinite}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}
.pk.drop{transition:transform .9s ease-in,opacity .9s;transform:translateY(60px) scale(.9);opacity:0}
.guide{position:absolute;left:3%;right:3%;top:17%;border-top:2px dashed #fffb;pointer-events:none;transition:opacity .3s;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.35}}
#cards{position:absolute;inset:0;pointer-events:none}
#cards .card{position:absolute;left:50%;top:50%;width:var(--cw);pointer-events:auto;touch-action:none;cursor:pointer;opacity:0;transform:translate(-50%,-50%) translateY(15%) scale(.4);transition:transform .9s cubic-bezier(.2,.9,.25,1.2) calc(var(--i)*.16s),opacity .4s calc(var(--i)*.16s)}
#cards .card.out{opacity:1;transform:translate(-50%,-50%) translateX(calc(var(--k)*var(--cw)*1.06)) rotate(calc(var(--k)*3deg))}
.cap{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:150%;text-align:center;opacity:0;transition:opacity .5s .5s;pointer-events:none;display:flex;flex-direction:column;gap:2px;font-size:13px}
.cap b{font-size:15px}.cap em{font-style:normal;color:#ffd86b}.fl .cap{opacity:1}
#actions{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:8px;justify-content:center;z-index:6}
/* cartes (3D + effets de rareté) */
.card{position:relative;width:100%;aspect-ratio:2/3}
.tilt{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s}
.card:not(.fl):hover .tilt{transform:translateY(-6px) scale(1.03)}
.inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,1.3,.4,1)}
.fl .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:5%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 10px 30px #000a}
.back{background:var(--back,repeating-conic-gradient(var(--c1) 0 15deg,var(--c2) 15deg 30deg))}
.front{transform:rotateY(180deg);background:#111}
.art{position:absolute;inset:0}
.holo,.shine,.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.holo{z-index:2;opacity:0;background:linear-gradient(115deg,rgba(255,0,128,0) 0%,rgba(255,0,128,.5) 15%,rgba(255,170,0,.45) 30%,rgba(60,255,200,.5) 45%,rgba(120,90,255,.5) 60%,rgba(255,0,128,.5) 75%,rgba(255,0,128,0) 90%);background-size:260% 260%;background-position:var(--mx,50%) var(--my,50%)}
.shine{z-index:3;opacity:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);background-size:250% 100%;background-repeat:no-repeat;animation:sweep 2.6s linear infinite}
.glare{z-index:4;opacity:var(--g,0);background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 55%);transition:opacity .2s}
.front::before,.front::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:5;pointer-events:none;opacity:0}
.r0{--rc:#9aa3b5}
.r1{--rc:#3fa7ff}.r1 .face{box-shadow:0 0 24px #3fa7ffaa}.r1 .shine{opacity:.6}
.r2{--rc:#b45cff}.r2 .face{box-shadow:0 0 30px #b45cffcc,0 0 60px #b45cff66}.r2 .holo{opacity:.65}.r2 .shine{opacity:.8}
.r3{--rc:#ffc928}.r3 .front{animation:gold 1.8s ease-in-out infinite}.r3 .holo{opacity:.8;animation:foil 3.5s linear infinite}.r3 .shine{opacity:1}
.r1 .front::before,.r2 .front::before,.r3 .front::before{opacity:1;box-shadow:inset 0 0 0 3px var(--rc),inset 0 0 30px var(--rc)}
.r3 .front::after{opacity:1;background:radial-gradient(circle at 20% 30%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 75% 20%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 60% 65%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 30% 80%,#fff 0 1.5px,transparent 3px);animation:blink 1s infinite}
@keyframes gold{50%{box-shadow:0 0 55px #ffc928,0 0 100px #ff8a0088}}
@keyframes foil{from{background-position:0% 0%}to{background-position:162.5% 162.5%}}
.missing{filter:grayscale(.7) brightness(.55)}
.missing .face{box-shadow:none}
/* grilles de collection */
.fam{margin:0 0 34px}.fh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bar{height:6px;border-radius:9px;background:#ffffff1a;margin-bottom:16px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#ff5cc8)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.gc{position:relative;perspective:900px;cursor:pointer}.gc .qty{position:absolute;top:-6px;right:-6px;z-index:6;background:#ffd86b;color:#222;font-weight:700;font-size:12px;border-radius:99px;padding:2px 8px;box-shadow:0 2px 8px #0008}
.gc .card:hover{z-index:2}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:#ffffff0d;border:1px solid var(--line);cursor:pointer;transition:transform .15s,background .15s}
.tile:hover{transform:translateY(-3px);background:#ffffff16}
.tile .who{display:flex;align-items:center;gap:10px;font-weight:600}.tile .av{width:40px;height:40px}.tile small{color:var(--mut)}
.search{width:100%;max-width:360px;padding:10px 14px;border-radius:99px;border:1px solid var(--line);background:#ffffff0f;color:var(--ui);margin-bottom:16px;font:inherit}
.head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}.head .av{width:56px;height:56px}
/* modale */
.modal{position:fixed;inset:0;z-index:50;background:#000c;display:grid;place-items:center;padding:14px;overflow:auto;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.box{background:#14162a;border:1px solid var(--line);border-radius:20px;padding:18px;max-width:900px;width:100%}
.big{display:flex;flex-direction:column;align-items:center;gap:22px;perspective:1200px;--cw:min(78vw,50vh,360px)}
.big .card{width:var(--cw)}.big .info{text-align:center;display:flex;flex-direction:column;gap:3px}
.tb{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
@media(max-width:700px){.tb{grid-template-columns:1fr}}
.panel{background:#ffffff0a;border-radius:14px;padding:12px;min-height:120px}.panel h3{margin:0 0 10px;font-size:14px;color:var(--mut)}
.ths{display:flex;flex-wrap:wrap;gap:8px}
.th{position:relative;width:62px;aspect-ratio:2/3;border:2px solid var(--rc);border-radius:7px;overflow:hidden;cursor:pointer;background:#222}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th b{position:absolute;right:2px;bottom:2px;font-size:11px;background:#000c;border-radius:99px;padding:0 6px}
.th.off{opacity:.45}.th.sel{box-shadow:0 0 0 2px #fff,0 0 14px var(--rc)}
.trade{display:flex;gap:14px;align-items:center;padding:14px;border-radius:16px;background:#ffffff0d;border:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.trade .side{display:flex;flex-direction:column;gap:6px}.trade .arrow{font-size:22px;color:var(--mut)}.trade .acts{margin-left:auto;display:flex;gap:8px}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:spark 1.1s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.ring{position:absolute;width:20px;height:20px;margin:-10px;border:4px solid var(--c);border-radius:50%;animation:ring .9s ease-out forwards}
@keyframes ring{to{transform:scale(18);opacity:0}}
.flash{position:absolute;inset:0;background:var(--c);animation:flash .8s ease-out forwards}
@keyframes flash{from{opacity:.65}to{opacity:0}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#fff;color:#111;padding:10px 18px;border-radius:99px;font-weight:600;opacity:0;transition:.3s;z-index:70;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}