@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--ac:#c6ff3d;--gl:#7dff6a;--bg0:#04130a;--bg1:#0c3320;--ln:#ffffff1f;--pn:#ffffff0f;--tx:#eafff1;--mu:#eafff1a8;--cw:min(28vw,140px);--disp:'Iowan Old Style','Palatino Linotype',Georgia,serif}
html{min-height:100%;background:var(--bg0)}
body{margin:0;font:16px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--tx);min-height:100vh;min-height:100dvh;background:radial-gradient(120% 80% at 50% 0,var(--bg1),var(--bg0) 70%) fixed;touch-action:manipulation;overflow-x:hidden}
button{font:inherit;color:inherit}
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}#fx i{position:absolute;inset:-20% -10% 30%;background:repeating-conic-gradient(from 160deg at 50% -10%,#fff6b814 0 2.5deg,#0000 2.5deg 9deg);animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{to{transform:rotate(5deg) scale(1.1);opacity:.5}}
#a{position:relative;z-index:1;min-height:100vh;min-height:100dvh}
/* ---------- barres ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;backdrop-filter:blur(16px);background:#04140ab8;border-bottom:1px solid var(--ln)}
.top .br{font:800 1.05rem var(--disp);letter-spacing:.32em;color:var(--ac)}.top .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.pill{padding:6px 13px;border-radius:99px;border:1px solid var(--ln);background:var(--pn);font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:.15s}.pill:hover{background:#ffffff1f}
.bn{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;gap:4px;padding:6px;width:min(92vw,420px);border-radius:24px;background:#06180ee6;backdrop-filter:blur(16px);border:1px solid var(--ln);box-shadow:0 10px 40px -10px #000}
.bn a{flex:1;text-align:center;padding:8px 0 6px;font-size:.72rem;color:var(--mu);cursor:pointer;font-weight:700;border-radius:18px;transition:.2s}.bn a i{display:block;font-size:1.45rem;font-style:normal;line-height:1.2}.bn a.on{color:#0a1a0f;background:var(--ac)}
.wrap{max-width:960px;margin:auto;min-height:100vh;min-height:100dvh;padding:calc(72px + env(safe-area-inset-top)) 14px calc(110px + env(safe-area-inset-bottom));text-align:center}
h2{font:700 clamp(1.7rem,6vw,2.6rem)/1.1 var(--disp);margin:.25em 0}h2 em{color:var(--ac);font-style:italic}.mu{color:var(--mu)}
.eyebrow{display:inline-block;padding:5px 14px;border-radius:99px;background:#c6ff3d1c;color:var(--ac);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid #c6ff3d44}
.glass{background:var(--pn);border:1px solid var(--ln);backdrop-filter:blur(12px);border-radius:22px;padding:20px;box-shadow:0 0 40px -16px var(--gl)}
.btn{padding:12px 24px;border-radius:99px;background:var(--ac);color:#06180d;border:0;font-weight:800;cursor:pointer;box-shadow:0 6px 24px -8px var(--gl);transition:.15s}.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.96)}.btn.alt{background:#ffffff0d;color:var(--tx);border:1px solid #ffffff40;box-shadow:none}.btn:disabled{opacity:.35;pointer-events:none}.btn.big{width:100%;padding:17px;font-size:1.05rem;margin:6px 0}.btn.sm{padding:8px 16px;font-size:.85rem}
input{padding:14px 16px;border-radius:14px;border:1px solid #fff4;background:#0007;color:#fff;font:inherit;width:100%;margin:6px 0}input:focus{outline:2px solid var(--ac);outline-offset:1px}
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100dvh;text-align:left}.auth>div:first-child{display:flex;flex-direction:column;justify-content:center;padding:60px 6vw;background:linear-gradient(165deg,#0a3d20e0,#04140af2 75%);border-right:1px solid var(--ln)}.auth>div:last-child{display:grid;place-items:center;padding:20px}.auth .glass{width:min(400px,100%)}
.grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:14px 0}
.sep{flex:0 0 100%;display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}.sep::before,.sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#0000,var(--c),#0000);opacity:.5}
/* ---------- cartes ---------- */
/* ---------- cartes : structure (le style visuel est dans public/cardstyles/<pack>/*.css, pack choisi par « cardStyle » dans le JSON de l'animal) ---------- */
.card{width:var(--cw);height:calc(var(--cw)*1.4);font-size:calc(var(--cw)/9);border-radius:1.15em;position:relative;overflow:hidden;flex:none;user-select:none;transition:transform .12s,box-shadow .3s;text-align:center}
/* ---------- packs ---------- */
.pack{width:min(58vw,230px);aspect-ratio:5/8;margin:26px auto;position:relative;cursor:pointer;animation:flt 3s ease-in-out infinite}@keyframes flt{50%{transform:translateY(-10px) rotate(1deg)}}
.pb,.ptop{position:absolute;left:0;right:0;border:1px solid #c6ff3d77;background:linear-gradient(135deg,#145a32,#0a3d20 40%,#c6ff3d33 50%,#0a3d20 60%,#145a32) 0 0/300% 100%;animation:shm 3s linear infinite;box-shadow:0 0 40px -6px var(--gl)}@keyframes shm{to{background-position:-300% 0}}
.pb{top:12%;bottom:0;border-radius:0 0 18px 18px;display:grid;place-content:center;gap:10px}.pb b{letter-spacing:.3em;font-size:1.4rem}.pb span{font-size:4rem}.pb small{opacity:.8}
.ptop{top:0;height:12%;border-radius:18px 18px 0 0;transform-origin:0 100%}
.pack.tear{animation:shk .5s both}.pack.tear .ptop{animation:tr .7s .45s both}.pack.tear::after{content:"";position:absolute;left:-60%;right:-60%;top:-20%;height:60%;background:radial-gradient(#fff,#0000 70%);opacity:0;animation:fl2 .9s .4s}
@keyframes shk{20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}@keyframes tr{to{transform:translate(70%,-160%) rotate(40deg);opacity:0}}@keyframes fl2{40%{opacity:1}}
.fc{width:var(--cw);height:calc(var(--cw)*1.4);perspective:900px;cursor:pointer;position:relative;animation:up2 .6s both}@keyframes up2{from{opacity:0;transform:translateY(40px)}}
.fi{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.fc.on .fi{transform:rotateY(180deg)}.fb,.ff{position:absolute;inset:0;backface-visibility:hidden}.ff{transform:rotateY(180deg)}
.fb{border-radius:1.2em;display:grid;place-items:center;font-size:3rem;background:linear-gradient(160deg,#145a32,#06180d);border:2px solid #c6ff3d66;box-shadow:0 0 24px -6px var(--gl);animation:pul2 1.6s ease-in-out infinite}@keyframes pul2{50%{box-shadow:0 0 30px 0 var(--gl)}}.fc.on .fb{animation:none}
.fc.on::after{content:"";position:absolute;inset:-40px;pointer-events:none;background:radial-gradient(circle,var(--c),#0000 65%);opacity:0;animation:bu .9s .3s}@keyframes bu{40%{opacity:.8}}
/* ---------- plein écran ---------- */
.rv{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;cursor:pointer;animation:fi .3s both;perspective:1000px}@keyframes fi{from{opacity:0}}.rv.out{opacity:0;transition:.3s}
.rbg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 36%,#06040c),#06040c 70%)}
.rr{position:absolute;left:50%;top:45%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:repeating-conic-gradient(color-mix(in srgb,var(--c) 45%,transparent) 0 4deg,#0000 4deg 15deg);-webkit-mask:radial-gradient(circle,#000,#0000 45%);mask:radial-gradient(circle,#000,#0000 45%);animation:spn 14s linear infinite,fi 1s var(--ch) both}
.orb{position:absolute;left:50%;top:45%;width:30vmin;height:30vmin;margin:-15vmin;border-radius:50%;background:radial-gradient(circle,#fff,var(--c) 40%,#0000 70%);animation:orb var(--ch) ease-in forwards}@keyframes orb{0%{transform:scale(.1);opacity:.2}80%{transform:scale(1.1);opacity:1}100%{transform:scale(6);opacity:0}}
.rp{position:absolute;left:50%;top:45%}.rp s{position:absolute;width:.8vmin;height:.8vmin;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px var(--c);animation:cv var(--ch) ease-in both}@keyframes cv{from{transform:rotate(var(--a)) translateX(55vmin);opacity:0}30%{opacity:1}to{transform:rotate(var(--a)) translateX(0) scale(.2);opacity:0}}
.rcw{position:relative;--cw:min(74vw,48dvh,340px);animation:pop .9s var(--ch) cubic-bezier(.2,1.3,.3,1) both}@keyframes pop{from{transform:scale(.2) rotateY(180deg);opacity:0}to{transform:none;opacity:1}}
.rcw .card{box-shadow:0 0 5em -1em var(--c)}.vrm{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.rt{position:absolute;bottom:calc(5dvh + env(safe-area-inset-bottom));text-align:center;animation:fi .6s calc(var(--ch) + .5s) both}.rt small{color:var(--c);letter-spacing:.4em;text-transform:uppercase;font-weight:800}.rt h2{margin:.1em 0}.rt p{opacity:.6;margin:0}
.rv.big::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c) 40%,#fff);animation:fh .9s var(--ch) both;pointer-events:none}@keyframes fh{from{opacity:.95}to{opacity:0}}
.om{animation:fi .3s both,shake .6s var(--ch)}@keyframes shake{20%{transform:translate(-12px,6px)}40%{transform:translate(10px,-8px)}60%{transform:translate(-8px,4px)}80%{transform:translate(6px,-3px)}}
.sm .rr,.sm .orb,.sm .rp{display:none}
/* ---------- fiche détail ---------- */
.ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:#02080ccc;backdrop-filter:blur(8px);animation:fi .2s both}
.sheet{position:relative;width:min(960px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:26px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,#0a2314),#06140c 60%);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 0 80px -20px var(--c);padding:22px;display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:24px;text-align:left;animation:up3 .3s both}@keyframes up3{from{transform:translateY(24px);opacity:0}}
.sheet .cx{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);background:#0008;cursor:pointer;font-size:1rem;z-index:5}
.sl{display:flex;flex-direction:column;align-items:center;gap:14px;--cw:min(60vw,260px)}.sl .card{box-shadow:0 0 4em -1.2em var(--c)}
.sl .btn{width:100%}
.sr h2{margin:.1em 0 0}.sr .lat{font-style:italic;color:var(--mu);margin:0 0 8px}
.chip{display:inline-block;padding:3px 11px;border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ln);background:var(--pn);margin:0 4px 4px 0}
.chip.r{color:var(--c);border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.tile{padding:10px;border-radius:14px;background:var(--pn);border:1px solid var(--ln);text-align:center}.tile b{display:block;font-size:1.35rem}.tile small{color:var(--mu);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
dl.inf{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0;font-size:.9rem}dl.inf dt{color:var(--mu)}dl.inf dd{margin:0;font-weight:600}
.fact{padding:10px 14px;border-radius:14px;background:#c6ff3d12;border:1px solid #c6ff3d33;font-size:.9rem;margin:10px 0}
.sr h3{font:800 .78rem system-ui;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);margin:18px 0 8px}
.atk{padding:12px 14px;border-radius:16px;background:var(--pn);border:1px solid var(--ln);margin-bottom:8px}.atk.p1{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.atk header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.atk header b{font-size:1rem}.atk .rk{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--c);color:#06140c}.atk .cd{margin-left:auto;font-size:.78rem;font-weight:800;padding:2px 9px;border-radius:99px;background:#0006;border:1px solid var(--ln)}
.atk p{margin:6px 0 4px;color:var(--mu);font-size:.88rem}.atk ul{margin:4px 0;padding-left:18px;font-size:.82rem}.atk li{margin:1px 0}
.atk details{margin-top:4px}.atk summary{cursor:pointer;font-size:.72rem;color:var(--mu)}.atk code{display:block;margin-top:4px;padding:6px 10px;border-radius:10px;background:#000a;color:#9dffb0;font:.75rem/1.4 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.iucn{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.78rem;font-weight:800;color:#06140c}
.cl{text-align:left}.cl h3{font-size:1.1rem;margin:18px 0 4px}.cl h4{margin:10px 0 2px;color:var(--ac);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}.cl ul{margin:2px 0;padding-left:20px;font-size:.9rem}.cl code{background:#000a;padding:1px 6px;border-radius:6px;font-size:.82em}.cl .sheet,.sheet.cl{display:block;width:min(620px,100%)}
@media(max-width:760px){.sheet{grid-template-columns:1fr;padding:16px}.sl{--cw:min(54vw,220px)}}
/* ---------- combat ---------- */
.bt{position:fixed;inset:0;z-index:20;--cw:min(27vw,calc((100dvh - 276px)/5.8),150px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));background:radial-gradient(120% 80% at 50% 0,var(--bg1),var(--bg0) 70%);overflow:hidden;text-align:center}
.bh{display:flex;gap:8px;align-items:center;width:100%;justify-content:space-between;flex:none}.row{display:flex;gap:2.2vw;justify-content:center;margin:4px 0}.bd{display:flex;flex-direction:column;justify-content:center;flex:none}
.cell{width:var(--cw);height:calc(var(--cw)*1.4);position:relative;border-radius:1.15em;animation:idle 3s ease-in-out infinite;animation-delay:var(--d);transition:transform .15s;font-size:calc(var(--cw)/9)}@keyframes idle{50%{translate:0 -4px}}
.cell.empty{border:2px dashed #ffffff30;background:#ffffff08;animation:none}.cell.sel{transform:translateY(-10px) scale(1.07);z-index:3}.cell.tg{outline:3px dashed #ff6b6b;outline-offset:2px;border-radius:1.2em;box-shadow:0 0 22px -2px #f55;cursor:crosshair}.cell.dead{opacity:.25;filter:grayscale(1);transform:scale(.88);animation:none}.cell.stn .card{filter:saturate(.5)}
.cell.hit .card{animation:ht .4s}@keyframes ht{40%{filter:brightness(2.5) saturate(0)}}
.fl{position:absolute;left:0;right:0;top:25%;font-size:1.7rem;font-weight:900;z-index:9;text-shadow:0 2px 10px #000;animation:up 1s forwards;pointer-events:none;white-space:nowrap}.fl.dmg{color:#ff7a7a}.fl.heal{color:#6bff95}.fl.shield{color:#6bb8ff}.fl.status{color:#ffd86b;font-size:1.1rem}@keyframes up{to{transform:translateY(-60px) scale(1.3);opacity:0}}
.prt{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--gl);z-index:400;pointer-events:none}
.mid{width:100%;padding:6px;border-block:1px solid var(--ln);font-weight:700;letter-spacing:.05em;min-height:2.4em;flex:none}.mid.me{color:var(--ac);animation:prp2 1.2s infinite}@keyframes prp2{50%{background:#c6ff3d18}}
.hand{display:flex;gap:10px;justify-content:center}.hand>div{transition:.2s}
.ab{width:100%;max-width:640px;min-height:86px;flex:none;display:flex;flex-direction:column;gap:6px;justify-content:center}
.ab .ds{font-size:.78rem;color:var(--mu);min-height:2.4em;line-height:1.25}.ab .ds b{color:var(--tx)}
.abs{display:flex;gap:6px;justify-content:center}.abt{flex:1;min-width:0;padding:8px 6px;border-radius:14px;background:var(--pn);border:1px solid var(--ln);cursor:pointer;font-size:.78rem;font-weight:700;line-height:1.15;position:relative;transition:.15s}.abt small{display:block;font-size:.62rem;color:var(--mu);font-weight:600;margin-top:2px}.abt.on{background:var(--ac);color:#06180d;border-color:var(--ac)}.abt.on small{color:#06180dbb}.abt:disabled{opacity:.35;cursor:not-allowed}.abt .cdb{position:absolute;top:-6px;right:-4px;padding:0 6px;border-radius:99px;background:#ff6b6b;color:#fff;font-size:.65rem;font-weight:800}
.end{position:absolute;inset:0;z-index:50;display:grid;place-content:center;gap:20px;background:#000b;animation:fi .4s both}.end h1{font:900 clamp(2.6rem,14vw,5rem) var(--disp);margin:0;letter-spacing:.1em;animation:pop .8s both}.end .w{color:var(--ac);text-shadow:0 0 40px var(--gl)}.end .l{color:#ff7a7a}
.cf{position:absolute;top:-10%;animation:fall linear forwards;font-size:1.6rem}@keyframes fall{to{transform:translateY(120dvh) rotate(540deg)}}
@media(min-width:900px){body{--cw:150px}}
@media(max-width:700px){.auth{grid-template-columns:1fr}.auth>div:first-child{display:none}}

/* ---------- v1.2 : combat au tour par tour, moments de la journée ---------- */
.pill.tod{cursor:default;background:linear-gradient(90deg,#ffffff14,#ffffff08)}
.pill.t-nuit{border-color:#7c8cff88;color:#cfd6ff}.pill.t-jour{border-color:#ffd86b88}.pill.t-aube{border-color:#ffb38a88}.pill.t-crepuscule{border-color:#e879f988}
.tl{display:flex;gap:6px;justify-content:center;align-items:center;height:34px;flex:none}
.tl .tc{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:1rem;background:#ffffff10;border:2px solid #ffffff2a;opacity:.75;transition:.2s}
.tl .tc.me{border-color:#6bff9588}.tl .tc.foe{border-color:#ff7a7a88}
.tl .tc.cur{width:38px;height:38px;font-size:1.3rem;opacity:1;box-shadow:0 0 14px -1px currentColor;animation:prp2 1.2s infinite}
.tl .tc.cur.me{border-color:#6bff95;color:#6bff95}.tl .tc.cur.foe{border-color:#ff7a7a;color:#ff7a7a}
.cell.act{z-index:3;filter:drop-shadow(0 0 12px #c6ff3d);transform:translateY(-6px) scale(1.05)}
.cell.ta{outline:3px dashed #6bff95;outline-offset:2px;border-radius:1.2em;box-shadow:0 0 22px -2px #3f9;cursor:pointer}
.cell.picked{outline:3px solid #ffd86b;outline-offset:2px;border-radius:1.2em}
.todb{position:absolute;top:.35em;right:.35em;z-index:7;font-size:.8em;padding:.05em .3em;border-radius:99px;background:#000b;border:1px solid #ffffff33}
.atk.ps{border-style:dashed}.atk .pk{color:#ffd86b;font-size:.8rem;margin:2px 0}

/* ======================= v1.3 : interface (étape 2/2) ======================= */
/* ---------- barres de défilement stylées ---------- */
*{scrollbar-width:thin;scrollbar-color:#c6ff3d66 transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(#c6ff3d88,#7dff6a55);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#c6ff3d,#7dff6a);background-clip:padding-box;border:2px solid transparent}
/* ---------- slider stylé ---------- */
@property --oa{syntax:'<angle>';initial-value:0deg;inherits:false}
.sl2{margin:14px 0;text-align:left}
.sl2 label{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:8px}
.sl2 output{color:var(--ac);font-variant-numeric:tabular-nums;letter-spacing:0}
.sld{position:relative;height:30px;cursor:pointer;touch-action:none;outline:none;-webkit-user-select:none;user-select:none}
.sld .trk{position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;border-radius:99px;background:#00000066;border:1px solid var(--ln);box-shadow:inset 0 2px 5px #000a;overflow:hidden}
.sld .fil{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:99px;background:linear-gradient(90deg,#2f9e4f,var(--ac));box-shadow:0 0 14px var(--gl)}
.sld .fil::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#0000 30%,#ffffff66 50%,#0000 70%) 0 0/200% 100%;animation:shn 2.4s linear infinite}
.sld .thm{position:absolute;top:50%;left:var(--p);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9ffc4 35%,var(--ac) 75%);box-shadow:0 2px 8px #000a,0 0 0 4px #c6ff3d22,0 0 18px -2px var(--gl);transition:transform .12s,box-shadow .2s}
.sld .thm::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#0a3d20;opacity:.55}
.sld:hover .thm,.sld:focus-visible .thm{box-shadow:0 2px 8px #000a,0 0 0 6px #c6ff3d33,0 0 22px 0 var(--gl)}
.sld.on .thm{transform:scale(1.18);box-shadow:0 2px 8px #000a,0 0 0 8px #c6ff3d3a,0 0 26px 2px var(--gl)}
/* ---------- accueil ---------- */
.hm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0 12px}
.t2{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 14px;border-radius:22px;background:var(--pn);border:1px solid var(--ln);cursor:pointer;transition:.18s;backdrop-filter:blur(10px)}
.t2:hover{transform:translateY(-4px);background:#ffffff1a;box-shadow:0 12px 30px -14px var(--gl)}.t2:active{transform:scale(.97)}
.t2 i{font-style:normal;font-size:2.4rem;line-height:1}.t2 b{font:700 1.15rem var(--disp)}.t2 small{color:var(--mu)}
.t2.hot{background:linear-gradient(135deg,#c6ff3d26,#2f9e4f22);border-color:#c6ff3d77}
.sts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}.sts .pill{cursor:default}
.h3{font:800 .78rem system-ui;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);margin:22px 0 4px}
.how{margin-top:22px;text-align:left}.how p{margin:6px 0;color:var(--mu);font-size:.92rem}.how b{color:var(--tx)}
/* ---------- glisser-déposer ---------- */
[data-dg]{cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.dg-src{opacity:.28!important;filter:grayscale(.6)}
.dgh{position:fixed!important;left:0;top:0;z-index:600;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(0 16px 18px #000b);animation:none!important;transition:none!important;opacity:.96}
.dgh *{animation-play-state:paused}
body.dragging,body.dragging *{cursor:grabbing!important}
.dok{outline:2px dashed #c6ff3d66;outline-offset:3px;transition:.12s}
.dok.over{outline:3px solid var(--ac);background:#c6ff3d22!important;box-shadow:0 0 28px -2px var(--gl)}
.dbar{position:sticky;top:calc(58px + env(safe-area-inset-top));z-index:30;margin:14px -14px 8px;padding:10px 14px;background:#06180ee8;backdrop-filter:blur(14px);border-block:1px solid var(--ln);border-radius:0}
.slot{width:var(--cw);height:calc(var(--cw)*1.4);border-radius:1.15em;border:2px dashed #ffffff33;background:#ffffff08;display:grid;place-content:center;color:var(--mu);position:relative;font-size:calc(var(--cw)/9);transition:.15s}
.slot>span{font-size:2.6em;line-height:1;opacity:.5}.slot>small{font-size:.62em;padding:0 .5em;line-height:1.2}
.slot.fill{border:0;background:none;display:block}
.colz{border-radius:22px;padding-bottom:10px}
.rl{display:block;margin:6px 0 0;font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--mu)}
.hand{padding:4px 10px;border-radius:18px}
/* portail d'ouverture des packs */
.portal{position:relative;width:min(70vw,260px);height:130px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%/50%;font-size:.85rem;font-weight:800;letter-spacing:.08em;color:var(--mu);transition:.2s}
.portal .pr1,.portal .pr2{position:absolute;inset:0;border-radius:50%;border:2px solid #c6ff3d66;box-shadow:0 0 30px -4px var(--gl),inset 0 0 30px -6px var(--gl);animation:por 3s ease-in-out infinite}
.portal .pr2{inset:14%;border-color:#7dff6a55;animation-delay:-1.5s;animation-direction:reverse}
.portal span{position:relative}
@keyframes por{50%{transform:scale(1.06);opacity:.6}}
.portal.over{color:var(--ac)}.portal.over .pr1,.portal.over .pr2{animation-duration:.8s;border-color:var(--ac)}
.portal.dok{outline:0;background:none!important;box-shadow:none}
/* ---------- aura permanente des statuts ---------- */
.amb{position:absolute;inset:0;pointer-events:none;z-index:7;border-radius:1.15em}
.amb .a{position:absolute;inset:0;border-radius:1.15em;overflow:hidden;pointer-events:none}
.amb .a s{position:absolute;display:block;left:var(--x);opacity:0}
.a-poison{box-shadow:inset 0 -2.4em 2.2em -1.3em #5ee02aaa;animation:amp 2.2s ease-in-out infinite}
.a-poison s{bottom:-6%;width:.6em;height:.6em;border-radius:50%;background:radial-gradient(circle at 30% 30%,#eaffc0,#6be02a 60%,#2a7a0a);animation:bubUp 2.6s var(--d) infinite}
.a-bleed{box-shadow:inset 0 0 1.8em -.4em #e11d2aaa;animation:amp 1.8s ease-in-out infinite}
.a-bleed s{top:-8%;width:.5em;height:.85em;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:linear-gradient(#ff5a64,#9d0b18);animation:drip 2s var(--d) infinite}
.a-burn{box-shadow:inset 0 -2.4em 2.2em -1.3em #ff7a1acc;animation:amp 1s ease-in-out infinite}
.a-burn s{bottom:-6%;width:.8em;height:1.2em;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#fff3a0,#ff9d1a 50%,#e8381a);animation:flame 1.4s var(--d) infinite}
.a-regen{box-shadow:inset 0 0 2.2em -.6em #6bff95bb;animation:amp 2.4s ease-in-out infinite}
.a-regen s{bottom:-4%;width:.55em;height:.55em;background:#c9ffa6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark 2.6s var(--d) infinite}
.a-rage{box-shadow:inset 0 0 2em -.3em #ff4a2add;animation:amp .9s ease-in-out infinite}
.a-guard{box-shadow:inset 0 0 0 .2em #ffd86bcc,inset 0 0 1.4em #ffd86b66}
.a-weak{box-shadow:inset 0 0 1.8em -.2em #7a8199dd;background:#6b728020}
.amb .a-shield{inset:-3%;overflow:visible;border-radius:1.4em;border:.16em solid #8fd0ffcc;background:radial-gradient(circle at 28% 18%,#cfeaff66,#3b82f622 55%,#0000 78%),repeating-linear-gradient(60deg,#ffffff1c 0 1px,#0000 1px .95em),repeating-linear-gradient(-60deg,#ffffff1c 0 1px,#0000 1px .95em);box-shadow:inset 0 0 1.6em #4aa3ff99,0 0 1.4em -.2em #4aa3ffaa;animation:shp 2.6s ease-in-out infinite}
.a-shield::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#0000 35%,#ffffff55 50%,#0000 65%) 0 0/250% 100%;animation:shn 3.4s linear infinite}
.amb .a-stun{inset:auto;left:0;right:0;top:-1.3em;height:1.6em;overflow:visible;border-radius:0}
.a-stun s{opacity:1!important;left:50%!important;top:50%;font-size:1.15em;line-height:1;animation:orb2 1.5s linear infinite;animation-delay:calc(var(--i)*-.5s)}
.cell.stn .card{filter:saturate(.45) brightness(.9)}
@keyframes amp{50%{filter:brightness(1.5)}}
@keyframes shp{50%{box-shadow:inset 0 0 2.2em #4aa3ffcc,0 0 2em 0 #4aa3ffcc}}
@keyframes bubUp{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.95}100%{transform:translate(.9em,-10em) scale(1.1);opacity:0}}
@keyframes drip{0%{transform:translateY(0) scaleY(.8);opacity:0}15%{opacity:1}100%{transform:translateY(12em) scaleY(1.7);opacity:0}}
@keyframes flame{0%{transform:translate(0,0) scale(.7);opacity:0}20%{opacity:.95}100%{transform:translate(.4em,-9em) scale(.15);opacity:0}}
@keyframes spark{0%{transform:translateY(0) scale(0);opacity:0}30%{opacity:1;transform:translateY(-3em) scale(1) rotate(90deg)}100%{transform:translateY(-9em) scale(.3) rotate(240deg);opacity:0}}
@keyframes orb2{from{transform:translate(-50%,-50%) rotate(0) translateX(2.6em) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(2.6em) rotate(-360deg)}}
/* ---------- effets ponctuels (préfaits) ---------- */
.fxo{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:1.15em}
.fxo s{position:absolute;display:block}
.fxo::before,.fxo::after{content:"";position:absolute;pointer-events:none}
/* poison */
.o-poison::before{inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 70%,#7dff3acc,#2a7a0a44 60%,#0000 80%);animation:flash 1.3s both}
.o-poison::after{content:"☠️";left:50%;top:28%;font-size:2.8em;transform:translateX(-50%);animation:icon 1.4s .1s both;filter:drop-shadow(0 0 .3em #6be02a)}
.o-poison s{left:var(--x);bottom:-4%;width:calc(.7em*var(--z));height:calc(.7em*var(--z));border-radius:50%;background:radial-gradient(circle at 30% 30%,#eaffc0,#6be02a 60%,#2a7a0a);opacity:0;animation:bubUp 1.3s var(--d) ease-out forwards}
/* saignement */
.o-bleed::before{inset:0;border-radius:inherit;background:radial-gradient(circle,#e11d2aaa,#0000 70%);animation:flash 1s both}
.o-bleed::after{left:-12%;right:-12%;top:46%;height:.4em;border-radius:99px;background:linear-gradient(90deg,#0000,#fff,#ff3b4a 60%,#0000);transform:rotate(-35deg) scaleX(0);animation:slash .5s both;box-shadow:0 0 .8em #f33}
.o-bleed s{left:var(--x);top:-6%;width:calc(.55em*var(--z));height:calc(.95em*var(--z));border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:linear-gradient(#ff5a64,#9d0b18);opacity:0;animation:drip 1.1s var(--d) ease-in forwards}
/* brûlure + rage */
.o-burn::before,.o-rage::before{inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 90%,#ffb03acc,#e8381a55 55%,#0000 80%);animation:flash 1.3s both}
.o-burn s,.o-rage s{left:var(--x);bottom:-6%;width:calc(.9em*var(--z));height:calc(1.4em*var(--z));border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#fff3a0,#ff9d1a 50%,#e8381a);opacity:0;animation:flame 1.2s var(--d) ease-out forwards}
.o-rage{filter:hue-rotate(-25deg) saturate(1.4)}
/* régénération */
.o-regen::before{inset:0;border-radius:inherit;background:radial-gradient(circle,#6bff95aa,#0000 70%);animation:flash 1.5s both}
.o-regen::after{content:"🌿";left:50%;top:30%;font-size:2.6em;transform:translateX(-50%);animation:icon 1.5s both;filter:drop-shadow(0 0 .3em #6bff95)}
.o-regen s{left:var(--x);bottom:-4%;width:calc(.7em*var(--z));height:calc(.7em*var(--z));background:#c9ffa6;filter:drop-shadow(0 0 .35em #6bff95);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:spark 1.5s var(--d) ease-out forwards}
/* étourdissement */
.o-stun::before{inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 10%,#ffe86baa,#0000 55%);animation:flash 1.2s both}
.o-stun s{left:50%;top:6%;font-size:1.3em;line-height:1;opacity:0;animation:orb3 1.3s calc(var(--d)*.4) linear forwards}
.o-stun s::before{content:"⭐"}.o-stun s:nth-child(even)::before{content:"💫"}
@keyframes orb3{0%{opacity:0;--oa:0deg}10%{opacity:1}90%{opacity:1}100%{opacity:0;--oa:360deg}}
.o-stun s{transform:translate(-50%,-50%) rotate(calc(var(--a) + var(--oa))) translateX(2.8em) rotate(calc(-1*(var(--a) + var(--oa))))}
/* bouclier / garde */
.o-shield::before,.o-guard::before{inset:-4%;border-radius:1.5em;border:.2em solid #bfe3ff;background:radial-gradient(circle at 30% 20%,#cfeaff88,#3b82f633 60%,#0000 80%);box-shadow:0 0 2em #4aa3ff,inset 0 0 2em #4aa3ff;animation:dome 1.2s ease-out both}
.o-shield s,.o-guard s{left:50%;top:50%;width:.55em;height:.55em;background:#dff1ff;filter:drop-shadow(0 0 .4em #4aa3ff);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;animation:rad 1.1s var(--d) ease-out forwards}
.o-guard{filter:sepia(1) saturate(4) hue-rotate(-12deg)}
/* bouclier brisé */
.o-brk::before{inset:-4%;border-radius:1.5em;border:.2em solid #bfe3ff;animation:dome2 .6s ease-out both;box-shadow:0 0 1.6em #4aa3ff}
.o-brk s{left:50%;top:50%;width:.55em;height:1.1em;background:linear-gradient(#e6f4ff,#3b82f6);clip-path:polygon(50% 0,100% 100%,0 80%);opacity:0;animation:shard .9s var(--d) ease-out forwards}
/* affaiblissement */
.o-weak s{left:var(--x);top:-6%;opacity:0;animation:drip 1.2s var(--d) ease-in forwards;font-size:1.1em}.o-weak s::before{content:"⬇️"}
@keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes icon{0%{opacity:0;transform:translateX(-50%) scale(.3)}30%{opacity:1;transform:translateX(-50%) scale(1.15)}100%{opacity:0;transform:translateX(-50%) translateY(-1.5em) scale(1)}}
@keyframes slash{0%{transform:rotate(-35deg) scaleX(0);opacity:1}50%{transform:rotate(-35deg) scaleX(1);opacity:1}100%{transform:rotate(-35deg) scaleX(1);opacity:0}}
@keyframes dome{0%{transform:scale(.45);opacity:0}30%{opacity:1}100%{transform:scale(1.08);opacity:0}}
@keyframes dome2{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes rad{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(5em) scale(1)}}
@keyframes shard{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(5.5em) rotate(240deg)}}
.cell.hit .card{animation:ht .4s}
.lite .a-shield::after{animation:none}
@media(max-width:700px){.dbar{margin-inline:-14px}}

/* ---------- pack : languette à découper ---------- */
@property --t{syntax:'<number>';initial-value:0;inherits:true}
.pack{transition:--t .35s ease-out}.pack.cutting{transition:none;animation-play-state:paused}
.pack .ptop{border-bottom:0}
.cutg{position:absolute;left:3%;right:3%;top:12%;border-top:2px dashed #ffffff88;z-index:3}
.cutl{position:absolute;left:3%;top:calc(12% - 1px);height:3px;width:calc(var(--t)*94%);background:linear-gradient(90deg,#fff,var(--ac));box-shadow:0 0 12px var(--ac);z-index:4;border-radius:2px}
.sc{position:absolute;top:12%;left:calc(3% + var(--t)*94%);transform:translate(-50%,-55%);font-size:1.7rem;z-index:6;filter:drop-shadow(0 0 6px var(--gl));pointer-events:none}
.pack:not(.cutting):not(.tear) .sc{animation:wig 1.3s ease-in-out infinite}
@keyframes wig{50%{transform:translate(30%,-55%)}}
.tz{position:absolute;left:0;right:0;top:0;height:26%;z-index:7;touch-action:none;cursor:grab}
.pack.cutting .tz{cursor:grabbing}.pack.tear .sc,.pack.tear .tz{display:none}

/* ---------- v1.4 : fond forêt (vert profond, rayons, brume, lucioles) ---------- */
:root{--bg0:#02140b;--bg1:#0f5a34}
html{background:var(--bg0)}
body{background:radial-gradient(120% 75% at 50% -12%,#23a05a 0,#116b3d 28%,#07351f 58%,var(--bg0) 100%) fixed}
#fx{box-shadow:inset 0 0 20vmax #000b;background:radial-gradient(55% 40% at 85% 105%,#c6ff3d1c,#0000 70%),radial-gradient(50% 35% at 8% 95%,#2dd4bf18,#0000 70%)}
#fx::before{content:"";position:absolute;inset:-30% -20% 25%;background:repeating-conic-gradient(from 168deg at 64% -14%,#eaffb824 0 1.6deg,#0000 1.6deg 6deg,#eaffb812 6deg 8deg,#0000 8deg 14deg);filter:blur(5px);-webkit-mask:linear-gradient(#000,#0000 78%);mask:linear-gradient(#000,#0000 78%);animation:rays 18s ease-in-out infinite alternate}
#fx::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-12%;height:50%;background:radial-gradient(60% 100% at 28% 100%,#7dff6a30,#0000 70%),radial-gradient(50% 100% at 76% 100%,#2dd4bf26,#0000 70%);filter:blur(28px);animation:mist 20s ease-in-out infinite alternate}
@keyframes mist{to{transform:translateX(6%) scale(1.08);opacity:.65}}
#fx i{inset:0;filter:drop-shadow(0 0 5px #c6ff3d);background:radial-gradient(3px 3px at 9% 78%,#efffa6,#0000 70%),radial-gradient(2px 2px at 21% 52%,#efffa6,#0000 70%),radial-gradient(3px 3px at 34% 86%,#efffa6,#0000 70%),radial-gradient(2px 2px at 47% 40%,#efffa6,#0000 70%),radial-gradient(3px 3px at 58% 70%,#efffa6,#0000 70%),radial-gradient(2px 2px at 69% 30%,#efffa6,#0000 70%),radial-gradient(3px 3px at 81% 62%,#efffa6,#0000 70%),radial-gradient(2px 2px at 92% 84%,#efffa6,#0000 70%),radial-gradient(2px 2px at 14% 22%,#efffa6,#0000 70%),radial-gradient(2px 2px at 75% 12%,#efffa6,#0000 70%);animation:ff 9s ease-in-out infinite alternate}
@keyframes ff{0%{opacity:.25;transform:translateY(2%)}50%{opacity:1}100%{opacity:.35;transform:translateY(-4%) translateX(1.5%)}}
.bt{background:none;--cwb:min(27vw,calc((100dvh - 276px)/5.8),150px);--cw:var(--cwb)}
/* ---------- pack : languette découpée de gauche à droite ---------- */
.pcut{position:absolute;left:0;right:0;top:0;height:12%;border:1px solid #c6ff3d77;border-radius:18px 18px 0 0;background:linear-gradient(135deg,#145a32,#0a3d20 40%,#c6ff3d33 50%,#0a3d20 60%,#145a32) 0 0/300% 100%;animation:shm 3s linear infinite;box-shadow:0 0 40px -6px var(--gl);z-index:2;clip-path:inset(-80% calc((1 - var(--t))*100%) 0 0);transform-origin:calc(var(--t)*100%) 100%;transform:rotate(14deg)}
.pack .ptop{transform:none;clip-path:inset(0 0 0 calc(var(--t)*100%))}.pack.tear .ptop{animation:none;visibility:hidden}
.pack.tear .pcut{animation:tr2 .7s .45s both}
@keyframes tr2{from{transform:rotate(14deg)}to{transform:translate(-70%,-170%) rotate(-40deg);opacity:0}}
.pb .lg{width:min(70%,150px);height:auto;margin:auto;filter:drop-shadow(0 .3em .6em #000a)}
.pb{place-items:center}
/* dos des cartes : le logo */
.cb{position:absolute;inset:0;z-index:20;display:grid;place-items:center;border-radius:inherit;background:radial-gradient(circle at 50% 38%,#1f8a4f,#0a3d20 62%,#06180d),repeating-linear-gradient(45deg,#ffffff0d 0 .5em,#0000 .5em 1em);background-blend-mode:normal;border:.2em solid #c6ff3d88;box-shadow:inset 0 0 1.6em #000a}
.cb::before{content:"";position:absolute;inset:.45em;border:1px solid #c6ff3d55;border-radius:.8em}
.cb .lg,.fb .lg{width:72%;height:auto;filter:drop-shadow(0 .2em .5em #000a);position:relative}
.cb b,.fb b{letter-spacing:.25em;color:var(--ac);font-size:1.1em}
.fb{overflow:hidden}
.rvf{position:absolute;inset:-8%;z-index:12;border-radius:1.4em;border:.18em solid var(--c);box-shadow:0 0 2em var(--c),inset 0 0 2em var(--c);pointer-events:none;animation:rvf .8s ease-out both}
@keyframes rvf{from{transform:scale(.85);opacity:1}to{transform:scale(1.25);opacity:0}}
.bt.rev .cell,.bt.rev .ab{pointer-events:none}
/* ---------- placement 3 sur 4 ---------- */
.sm62{--cw:calc(var(--cwb)*.6)}.sm8{--cw:calc(var(--cwb)*.82)}
.fdk{flex:none;text-align:center}.fdk .row{margin:2px 0;gap:1.6vw}
.hand>div{position:relative}
.subb{position:absolute;left:50%;bottom:-.6em;transform:translateX(-50%);z-index:9;padding:.1em .7em;border-radius:99px;background:#ffd86b;color:#241a00;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* ---------- présentation de l'adversaire (VS) ---------- */
.vs{position:fixed;inset:0;z-index:700;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw;padding:0 4vw;overflow:hidden;cursor:pointer;animation:fi .25s both}
.vs.out{opacity:0;transition:opacity .4s}
.vsbg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#0b3a21f5,#02100a 78%)}
.vsbg::before{content:"";position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax;background:repeating-conic-gradient(#c6ff3d14 0 6deg,#0000 6deg 18deg);animation:spn 14s linear infinite}
/* séparateur DIAGONAL : deux moitiés (toi / adversaire) découpées par la même diagonale (~12°, --sk = demi-décalage horizontal), avec un trait lumineux dessus */
.vs{--sk:10.5vh}
.vsh{position:absolute;inset:0}
.vsh.l{background:linear-gradient(120deg,#0f6a38f2,#04200ff5);clip-path:polygon(0 0,calc(50% + var(--sk)) 0,calc(50% - var(--sk)) 100%,0 100%);animation:vhl .55s cubic-bezier(.2,1,.3,1) both}
.vsh.r{background:linear-gradient(300deg,#7a1c1cf2,#260707f5);clip-path:polygon(calc(50% + var(--sk)) 0,100% 0,100% 100%,calc(50% - var(--sk)) 100%);animation:vhr .55s cubic-bezier(.2,1,.3,1) both}
@keyframes vhl{from{transform:translateX(-100%)}to{transform:none}}
@keyframes vhr{from{transform:translateX(100%)}to{transform:none}}
.vsl{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 0 10px var(--ac)) drop-shadow(0 0 22px var(--ac));transform-origin:50% 0;animation:vsl .4s .35s cubic-bezier(.3,1.2,.4,1) both}
.vsl::before{content:"";position:absolute;inset:0;background:linear-gradient(#fff,#eaffb0 50%,#fff);clip-path:polygon(calc(50% + var(--sk) - .55vmin) 0,calc(50% + var(--sk) + .55vmin) 0,calc(50% - var(--sk) + .55vmin) 100%,calc(50% - var(--sk) - .55vmin) 100%)}
@keyframes vsl{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.vsp{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0}
.vsp.l{animation:vin .6s .1s cubic-bezier(.2,1,.3,1) both;--f:-110vw}.vsp.r{animation:vin .6s .1s cubic-bezier(.2,1,.3,1) both;--f:110vw}
@keyframes vin{from{transform:translateX(var(--f)) skewX(-12deg)}to{transform:none}}
.vsa{width:min(30vw,150px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:800 min(13vw,4.2rem) var(--disp);background:radial-gradient(circle at 35% 30%,#2fae60,#0a3d20);border:3px solid var(--ac);box-shadow:0 0 40px -4px var(--gl)}
.vsp.r .vsa{border-color:#ff7a7a;box-shadow:0 0 40px -4px #f55;background:radial-gradient(circle at 35% 30%,#b34b4b,#3d0a0a)}
.vsp b{font:800 clamp(1.1rem,5vw,1.9rem) var(--disp);word-break:break-word}
.vsp small{letter-spacing:.3em;text-transform:uppercase;font-size:.68rem;color:var(--mu)}
.vsx{position:relative;font:900 clamp(2.6rem,13vw,6rem) var(--disp);color:#fff;text-shadow:0 0 30px var(--ac);animation:vsx .6s .55s cubic-bezier(.2,1.6,.3,1) both}
@keyframes vsx{from{transform:scale(4);opacity:0}to{transform:none;opacity:1}}
.vst{position:absolute;left:0;right:0;bottom:12%;text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;color:var(--ac);animation:fi .5s 1.3s both}

/* ---------- avertissements du site ---------- */
.wn{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000a;backdrop-filter:blur(4px)}
.wb{width:min(86vw,340px);padding:22px 20px 18px;border-radius:20px;text-align:center;background:linear-gradient(160deg,#0f3a22,#06180d);border:1px solid #c6ff3d66;box-shadow:0 0 60px -10px #c6ff3d66}
.wl{font-size:4.5rem;line-height:1;filter:drop-shadow(0 0 14px #c6ff3d88)}
.wb p{margin:12px 0 16px;font-weight:700}.wr{display:flex;gap:10px;justify-content:center}

/* ---- v1.5 : types de packs, codes, mode « en tant que » ---- */
.pack.tint .pb,.pack.tint .ptop{border-color:var(--pc);box-shadow:0 0 40px -6px var(--pc);background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 45%,#031009),color-mix(in srgb,var(--pc) 16%,#031009) 40%,color-mix(in srgb,var(--pc) 60%,#ffffff22) 50%,color-mix(in srgb,var(--pc) 16%,#031009) 60%,color-mix(in srgb,var(--pc) 45%,#031009)) 0 0/300% 100%}
.pks{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;margin:6px 0;scrollbar-width:thin}
.pkc{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:104px;padding:10px 14px;border-radius:18px;border:1px solid var(--ln);background:var(--pn);cursor:pointer;transition:.15s}
.pkc i{font-style:normal;font-size:1.7rem;line-height:1}.pkc b{font-size:.85rem}.pkc small{color:var(--mu);font-size:.72rem}
.pkc:hover{background:#ffffff1a}.pkc.on{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 18%,transparent);box-shadow:0 0 24px -10px var(--pc)}
.cdx{max-width:460px;margin:26px auto 90px;text-align:left}.cdr{display:flex;gap:8px;align-items:center}.cdr input{margin:0;text-transform:uppercase;letter-spacing:.08em}
.asb{position:sticky;top:0;z-index:40;margin:0 0 10px;padding:8px 14px;border-radius:14px;background:#ffd34d;color:#2a1d00;font-weight:700;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.asb .btn{padding:6px 14px;font-size:.8rem;background:#2a1d00;color:#ffd34d;box-shadow:none}

/* carte non possédée : « ? » sur fond noir, bordure à la couleur de sa rareté */
.mq{width:100%;aspect-ratio:5/7;border-radius:12px;background:#000;border:2px solid var(--c);box-shadow:0 0 14px -6px var(--c),inset 0 0 24px #000;display:grid;place-content:center;text-align:center;gap:2px;user-select:none}
.mq b{font:800 clamp(2rem,9vw,3.4rem)/1 var(--disp);color:var(--c);opacity:.85}
.mq small{color:var(--c);font-weight:800;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9}

/* ======================= v1.6 : compte, social, niveaux d'IA ======================= */
@keyframes avspin{to{--ang:360deg}}
.hero{position:relative;margin:14px auto 0;padding:26px 16px 20px;max-width:560px;border-radius:28px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--c) 22%,#0b2416),#06140c 70%);box-shadow:0 0 70px -24px var(--c);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 0,color-mix(in srgb,var(--c) 14%,transparent) 0 3deg,#0000 3deg 12deg);opacity:.55;-webkit-mask:linear-gradient(#000,#0000 75%);mask:linear-gradient(#000,#0000 75%)}
.hero>*{position:relative}.hero h2{margin:.1em 0}.hero .bio{font-style:italic;max-width:420px;margin:10px auto 0;color:var(--mu)}
.avr{width:112px;height:112px;margin:0 auto 8px;border-radius:50%;padding:4px;background:conic-gradient(from var(--ang),var(--c),#ffffff40,var(--c),#ffffff40,var(--c));animation:avspin 7s linear infinite;box-shadow:0 0 40px -6px var(--c)}
.avr span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#16422a,#06140c);font-size:3.4rem;font-weight:800;color:var(--c)}
.stg{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;max-width:560px;margin:14px auto}
.stg>div{padding:12px 6px;border-radius:18px;background:var(--pn);border:1px solid var(--ln);text-align:center}.stg i{font-style:normal;font-size:1.3rem}.stg b{display:block;font:800 1.3rem var(--disp)}.stg small{color:var(--mu);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}
.acs,.soc{max-width:560px;margin:14px auto;text-align:left}.acs .h3{text-align:left}
.acs input,.acs textarea,.soc input{margin:6px 0}
textarea{width:100%;padding:12px 16px;border-radius:14px;border:1px solid #fff4;background:#0007;color:#fff;font:inherit;resize:vertical;margin:6px 0}textarea:focus{outline:2px solid var(--ac);outline-offset:1px}
.fl2{display:flex;justify-content:space-between;margin:14px 0 4px;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}.fl2 small{letter-spacing:0;font-weight:600}
.avpk{display:flex;flex-wrap:wrap;gap:8px}.avo{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:1.5rem;font-weight:800;cursor:pointer;background:var(--pn);border:2px solid var(--ln);transition:.15s}.avo:hover{transform:scale(1.1)}.avo.on{border-color:var(--ac);background:#c6ff3d22;box-shadow:0 0 16px -2px var(--gl)}
.sw{display:flex;align-items:center;gap:12px;margin:16px 0 4px;cursor:pointer;position:relative}.sw input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0}
.sw>i{flex:none;position:relative;width:48px;height:28px;border-radius:99px;background:#0008;border:1px solid var(--ln);transition:.2s}.sw>i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfe;transition:.2s}
.sw input:checked+i{background:linear-gradient(90deg,#2f9e4f,var(--ac));box-shadow:0 0 16px -2px var(--gl)}.sw input:checked+i::after{left:23px;background:#fff}.sw input:focus-visible+i{outline:2px solid var(--ac)}
.sw span b{display:block}.sw span small{color:var(--mu);font-size:.78rem}
.vts,.vtp{cursor:pointer;transition:.15s}.vts{border-radius:1.15em;border:2px dashed #ffffff30;background:#ffffff08;display:grid;place-items:center;width:var(--cw);height:calc(var(--cw)*1.4);font-size:1.6rem;color:var(--mu)}.vts.on{border:0;background:none;display:block}.vts.on:hover{filter:brightness(.7)}
.vtp:hover{transform:translateY(-3px)}.vtp.on{opacity:.4}
.pwm{height:8px;border-radius:99px;background:#0008;border:1px solid var(--ln);overflow:hidden;margin:2px 0 4px}.pwm i{display:block;height:100%;width:var(--s,0%);background:#ff6b6b;transition:.25s}.pwm[data-s="2"] i{background:#ffd86b}.pwm[data-s="3"] i{background:#bef264}.pwm[data-s="4"] i{background:#4ade80;box-shadow:0 0 10px var(--gl)}
.fr{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:8px 0;border-radius:18px;background:var(--pn);border:1px solid var(--ln)}
.fav{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;font-weight:800;color:var(--ac);background:radial-gradient(circle at 35% 30%,#16422a,#06140c);border:2px solid #c6ff3d55;cursor:pointer}
.fin{flex:1;min-width:0;cursor:pointer}.fin b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fin small{color:var(--mu);font-size:.78rem}.fbt{display:flex;gap:6px;flex:none}
.dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:2px solid #06140c;background:#6b7280}.dot.d1{background:#4ade80;box-shadow:0 0 8px #4ade80}.dot.d2{background:#ffd86b;box-shadow:0 0 8px #ffd86b}
.exg{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.exc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:18px;background:var(--pn);border:1px solid var(--ln);cursor:pointer;transition:.18s;text-align:center}.exc:hover{transform:translateY(-3px);background:#ffffff1a}.exc small{color:var(--mu);font-size:.72rem}.exc b{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bn a i{position:relative}.bdg{position:absolute;top:-4px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ff5a5a;color:#fff;font:800 .68rem/18px system-ui;font-style:normal;text-align:center;box-shadow:0 0 10px #f55a}
.sheet.pf{text-align:center}.sheet.pf .h3{text-align:left}.sheet.pf .hero{box-shadow:none}.pfa{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 4px}
.lvs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}.lvc{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:66px;padding:10px 8px;border-radius:18px;background:var(--pn);border:1px solid var(--ln);cursor:pointer;transition:.18s}.lvc i{font-style:normal;font-size:1.7rem;line-height:1}.lvc b{font-size:.8rem}.lvc small{color:var(--mu);font-size:.66rem}.lvc:hover{background:#ffffff1a}.lvc.on{border-color:var(--ac);background:#c6ff3d1f;box-shadow:0 0 22px -8px var(--gl);transform:translateY(-3px)}
.rwd{margin:0;font:800 1.8rem var(--disp);color:var(--ac);text-align:center;text-shadow:0 0 20px var(--gl);animation:pop .8s .3s both}

/* ===== v1.8.0 : biomes de combat, furtivité, gel ===== */
/* pastilles furtivité / défense sur la carte */
.card .mods{position:absolute;right:.4em;bottom:4.1em;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:.2em;pointer-events:none}
.card .mods span{font-size:.7em;font-weight:800;padding:.1em .45em;border-radius:99px;background:#000b;border:1px solid #ffffff22;white-space:nowrap}
/* pastille du biome dans l'en-tête du combat + lueur de fond */
.pill.bpill{border-color:var(--bc);background:linear-gradient(90deg,color-mix(in srgb,var(--bc) 38%,transparent),#ffffff08)}
.bt.hasbio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--bc) 30%,transparent),transparent 72%)}
/* arrivée du biome : roulette puis révélation */
.bio{position:fixed;inset:0;z-index:800;display:grid;place-items:center;overflow:hidden;cursor:pointer;text-align:center;animation:fi .25s both}
.bio.out{opacity:0;transition:opacity .38s}
.bio-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#10131c,#03050a 80%);transition:background .9s}
.bio.on .bio-bg{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--bc) 70%,#000),#03050a 88%)}
.bio-t{position:absolute;top:14%;left:0;right:0;letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;color:var(--mu);transition:opacity .4s}
.bio.on .bio-t{opacity:0}
.bio-roll{position:relative;font:800 clamp(1.8rem,9vw,3.4rem) var(--disp);transition:opacity .3s,transform .3s;white-space:nowrap}
.bio.on .bio-roll{opacity:0;transform:scale(.6)}
.bio-card{position:absolute;max-width:min(86vw,520px);padding:0 4vw;opacity:0;transform:scale(.4)}
.bio.on .bio-card{animation:bioin .8s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes bioin{to{opacity:1;transform:none}}
.bio-em{font-size:clamp(4rem,22vw,8rem);line-height:1.1;filter:drop-shadow(0 0 30px var(--bc));animation:idle 3s ease-in-out infinite}
.bio-card h2{font:900 clamp(2rem,10vw,4rem) var(--disp);margin:.1em 0;text-shadow:0 0 30px var(--bc)}
.bio-card p{margin:.4em auto;font-size:1rem;color:#e8eefc;opacity:.92}
.bio-rain{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
.bio.on .bio-rain{opacity:1}
.bio-rain s{position:absolute;top:-10%;left:var(--x);font-size:calc(1.6rem*var(--z));text-decoration:none;animation:bfall 3.2s var(--d) linear infinite}
@keyframes bfall{to{transform:translateY(120vh) rotate(260deg)}}
/* gelé (biome Glace) : aura glacée + éclats */
.a-freeze{box-shadow:inset 0 0 1.8em .2em #7dd3fcbb,0 0 1.2em #7dd3fc88;background:linear-gradient(160deg,#bfeaff55,#0000 60%)}
.a-freeze s{top:-6%;width:.5em;height:.8em;background:linear-gradient(#f0fbff,#7dd3fc);clip-path:polygon(50% 0,100% 100%,0 100%);animation:drip 2.2s var(--d) infinite}
.o-freeze::before{inset:-4%;border-radius:1.4em;border:.18em solid #cfefff;background:radial-gradient(circle at 40% 30%,#e8f8ffcc,#7dd3fc55 60%,#0000 80%);box-shadow:0 0 2em #7dd3fc,inset 0 0 2em #7dd3fc;animation:flash 1.4s both}
.o-freeze::after{content:"🧊";left:50%;top:30%;font-size:2.6em;transform:translateX(-50%);animation:icon 1.4s both;filter:drop-shadow(0 0 .3em #7dd3fc)}
.o-freeze s{left:50%;top:50%;width:.55em;height:1.1em;background:linear-gradient(#f0fbff,#7dd3fc);clip-path:polygon(50% 0,100% 100%,0 80%);opacity:0;animation:shard .9s var(--d) ease-out forwards}
.pill.bpill{cursor:pointer}

/* ===== v1.9.0 : animations de combat ===== */
.flsh{position:fixed;inset:0;z-index:380;pointer-events:none}
.streak{position:fixed;height:7px;margin-top:-3.5px;transform-origin:0 50%;border-radius:7px;background:linear-gradient(90deg,transparent,var(--c),#fff);box-shadow:0 0 16px var(--c),0 0 34px var(--c);z-index:350;pointer-events:none}
.imp{position:absolute;left:50%;top:50%;width:1.4em;height:1.4em;margin:-.7em 0 0 -.7em;border-radius:50%;border:.28em solid #fff;box-shadow:0 0 1.4em #fff,inset 0 0 1em #fff;z-index:8;pointer-events:none;animation:impx .45s ease-out forwards}
.imp.crit{border-color:#ffd86b;box-shadow:0 0 2em #ffd86b,inset 0 0 1.4em #ffd86b;animation-duration:.65s}
@keyframes impx{to{transform:scale(7);opacity:0}}
.slx{position:absolute;left:-12%;right:-12%;top:46%;height:.35em;border-radius:99px;background:linear-gradient(90deg,transparent,#fff 45%,#fff 55%,transparent);box-shadow:0 0 .8em #fff;z-index:8;pointer-events:none;transform:rotate(-32deg) scaleX(0);animation:slxx .32s ease-out forwards}
@keyframes slxx{50%{transform:rotate(-32deg) scaleX(1);opacity:1}to{transform:rotate(-32deg) scaleX(1);opacity:0}}
.cast{position:absolute;inset:-6%;border-radius:1.3em;border:.2em solid var(--ac);box-shadow:0 0 2em var(--ac);z-index:8;pointer-events:none;animation:castx .65s ease-out forwards}
@keyframes castx{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
.cell.dying .card{animation:dyingx 1s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes dyingx{15%{transform:scale(1.1);filter:brightness(2.4)}100%{transform:translateY(18px) scale(.88) rotate(5deg);filter:grayscale(1) brightness(.6);opacity:.3}}
.fl.dead{top:8%;font-size:2.4rem;color:#fff}
.hb s.low{background:#ff5a5a}
.cell.act::after{content:"";position:absolute;inset:-4px;border-radius:1.3em;border:2px solid var(--ac);pointer-events:none;animation:actx 1.2s ease-in-out infinite}
@keyframes actx{50%{transform:scale(1.05);opacity:.35}}
.rbn{position:fixed;left:0;right:0;top:34%;z-index:360;text-align:center;pointer-events:none;animation:rbnx 1.5s ease both}
.rbn b{display:block;font:900 clamp(2rem,10vw,3.6rem) var(--disp);letter-spacing:.06em;text-shadow:0 0 24px var(--ac),0 4px 20px #000}
.rbn small{display:block;font-size:1.1rem;opacity:.9;margin-top:.2em}
@keyframes rbnx{0%{opacity:0;transform:scale(1.6)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}

/* ===== v1.9.0 : page Collection ===== */
.cprog{padding:14px 16px;margin:10px 0;display:grid;gap:8px}
.cpt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.cpt b{font:800 2.2rem/1 var(--disp);color:var(--ac)}.cpt b small{font-size:1rem;color:var(--mu)}.cpt span{color:var(--mu);font-size:.9rem}
.cgb{display:block;height:8px;border-radius:99px;background:#ffffff1c;overflow:hidden}.cgb s{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c,var(--ac)),#fff8);transition:width .6s}
.cfl{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:6px 0}.cfl>div{display:flex;gap:6px;flex-wrap:wrap}
.fchip{padding:.4em .9em;border-radius:99px;border:1px solid var(--ln);background:var(--pn);color:var(--tx);font-weight:700;font-size:.85rem;cursor:pointer}.fchip.on{background:var(--ac);color:#08210f;border-color:var(--ac)}
.cgrp{margin:18px 0 4px;padding-top:4px}
.cgh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.cgh b{font:700 1.15rem var(--disp);color:var(--c)}.cgh span{font-weight:800;font-size:.85rem;color:var(--mu)}.cgh .cgb{flex:1 1 120px}
.cgrp.done .cgh b{text-shadow:0 0 14px var(--c)}

/* v1.9.1 : feuilles vers le porte-monnaie */
.lf{position:fixed;left:0;top:0;z-index:900;font-size:1.6rem;line-height:1;pointer-events:none;filter:drop-shadow(0 0 8px #7dff6a);will-change:transform}

/* v1.9.2 : cartes de la collection / du deck : même taille pour les cartes possédées et les « ? » */
.grid.cs>div{width:var(--cw);flex:none}.grid.cs>div.sep{width:auto;flex:0 0 100%}
.grid.cs>div>.mq{width:100%}