:root{--fond-a:#e6e0fa;--fond-b:#d9d0f5;--bg:#ece8f7;--ink:#1d1840;--panel:#ffffff;--line:#1d1840;--accent:#ff004d;--paper:#ffffff;
color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fond-a:#171340;--fond-b:#201b52;--bg:#17133a;--ink:#f1ecff;--panel:#241e56;--line:#f1ecff;color-scheme:dark}}
:root[data-theme="dark"]{--fond-a:#171340;--fond-b:#201b52;--bg:#17133a;--ink:#f1ecff;--panel:#241e56;--line:#f1ecff;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Press Start 2P",ui-monospace,Menlo,Consolas,monospace;font-size:10px;line-height:1.8}
main{max-width:980px;margin:0 auto;padding:20px 16px 40px}
h1{font-size:16px;line-height:1.5;margin:0 0 4px}
.sub{margin:0 0 20px;opacity:.8}
.layout{display:grid;grid-template-columns:minmax(0,384px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.layout{grid-template-columns:minmax(0,1fr)}}
.card{border:4px solid var(--line);background:var(--paper);box-shadow:6px 6px 0 var(--line);width:100%;max-width:384px;margin:0 auto}
.view{overflow:auto;aspect-ratio:32/40;line-height:0}
.art{position:relative;width:calc(var(--z,1)*100%)}
.art canvas{display:block;width:100%;aspect-ratio:32/40;image-rendering:pixelated}
#cv{cursor:crosshair;touch-action:none}
#ov{position:absolute;inset:0;height:100%;pointer-events:none}
.grid{position:absolute;inset:0;pointer-events:none;display:none;
background-image:linear-gradient(to right,rgba(0,0,0,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.22) 1px,transparent 1px);
background-size:calc(100%*var(--gs,8)/160) calc(100%*var(--gs,8)/200)}
#lnprev{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
#gridRow{margin-top:6px;align-items:center}
#gridRow[hidden]{display:none}
.grid.on{display:block}
.panel{background:none;border:0;box-shadow:none;padding:4px 0;margin-bottom:26px}
.panel h2{font-size:11px;margin:0 0 10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button{font:inherit;font-size:9px;color:var(--ink);background:var(--panel);border:3px solid var(--line);padding:8px 10px;cursor:pointer;box-shadow:3px 3px 0 var(--line);border-radius:0}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#fff)}
button:focus-visible,.sw:focus-visible,input:focus-visible{outline:3px dashed var(--accent);outline-offset:2px}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px;max-width:360px;margin-bottom:12px}
.sw{aspect-ratio:1;border:3px solid var(--line);padding:0;box-shadow:none}
.sw[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:1px}
.txt{font:inherit;font-size:10px;border:3px solid var(--line);padding:8px;background:var(--panel);color:var(--ink);width:100%;border-radius:0}
input[type=color]{width:44px;height:32px;border:3px solid var(--line);padding:0;background:var(--panel);cursor:pointer;border-radius:0;flex:none}
.field{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:9px}
.field label{flex:1}
.lbl{font-size:9px;margin:12px 0 6px}
.hint{margin:10px 0 0;font-size:8px;opacity:.75;line-height:1.9}
.saved{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.mini{border:3px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.mini canvas{width:100%;aspect-ratio:32/40;display:block;image-rendering:pixelated}
.mini .t{color:#1d1840;padding:4px;font-size:7px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .acts{display:flex;border-top:3px solid var(--line)}
.mini .acts button{flex:1;border:0;box-shadow:none;padding:6px 2px;font-size:7px}
.mini .acts button+button{border-left:3px solid var(--line)}
.empty{opacity:.75;font-size:8px}
#msg{min-height:1.8em;font-size:8px;margin-top:8px;color:var(--accent)}

[hidden]{display:none!important}
.msg{min-height:1.8em;font-size:8px;margin-top:8px;color:var(--accent)}
#authPanel .txt{margin-top:8px}
#authPanel #who{display:block;margin-bottom:10px}
.saved.big{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.filtres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:12px}
.rar{color:#fff!important;font-size:7px}
.rar-common{background:#5f574f}.rar-uncommon{background:#008751}.rar-rare{background:#1d6fb8}
.rar-epic{background:#7e2553}.rar-mythic{background:#c2185b}.rar-legendary{background:#b36b00}

/* ---------- Atelier : la carte au centre, les options sur les côtés ---------- */
main{max-width:none;padding:12px 16px 40px}
h1{margin:0 0 6px}
.sub{display:none}
nav.row{margin-bottom:12px!important}
:root{--cw:min(calc(100vw - 560px),calc((100vh - 40px)*.8),1000px)}
.studio{display:grid;grid-template-columns:230px var(--cw) 230px;justify-content:center;gap:12px;align-items:start}
.center{position:sticky;top:12px;display:flex;justify-content:center;width:var(--cw)}
.studio .card{max-width:none;width:100%}
.side{font-size:8px}
.side .panel{padding:10px;margin-bottom:12px;border-width:3px}
.side h2{font-size:9px;margin-bottom:8px}
.side button{font-size:8px;padding:6px 7px;box-shadow:3px 3px 0 var(--line);border-width:3px}
.side .txt{font-size:8px;padding:6px;border-width:3px}
.side .hint{font-size:7px}
.side .field{font-size:8px;margin-top:8px}
.side .lbl{font-size:8px;margin:8px 0 4px}
.side .pal{grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:4px}
.side .sw{border-width:3px}
.side .saved{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.side .mini{border-width:3px}
.side .mini .t{font-size:6px}
.side .mini .acts button{font-size:6px;padding:4px 1px}
.side input[type=color]{width:34px;height:26px;border-width:3px}
input[type=range]{width:100%;accent-color:var(--accent)}
@media (max-width:1050px){
  .studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:stretch;gap:16px}
  .center{grid-column:1/-1;order:-1;position:static;width:auto}
  .studio .card{width:min(100%,560px)}
}
@media (max-width:620px){.studio{grid-template-columns:minmax(0,1fr)}}

/* ---------- Boosters ---------- */
.boostzone{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.bcard{border:4px solid var(--line);background:var(--paper);box-shadow:6px 6px 0 var(--line);width:min(100%,380px)}
.bcard canvas{display:block;width:100%;aspect-ratio:32/40;image-rendering:pixelated}
.votes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.vote{color:transparent;font-size:0;width:34px;height:34px;min-width:0;padding:0;border-width:3px;box-shadow:3px 3px 0 var(--line)}
.vote.v1{background:#b3002f}.vote.v2{background:#c2640a}.vote.v3{background:#5f574f}.vote.v4{background:#1d6fb8}.vote.v5{background:#008751}
.vote:disabled{opacity:.5;cursor:default}
.disc{border:0;padding:0;margin:14px 0 0;font-size:9px}
.disc legend{padding:0;margin-bottom:4px}
.disc label{display:flex;gap:8px;align-items:center;margin-top:8px;cursor:pointer}

/* ---------- Effets des cartes légendaires ---------- */
.fxwrap{position:relative;line-height:0}
.fxwrap canvas{display:block}
.fxwrap .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
dialog{border:4px solid var(--line);background:var(--panel);color:var(--ink);padding:16px;font:inherit;font-size:10px;max-width:min(92vw,420px);box-shadow:6px 6px 0 var(--line)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{font-size:11px;margin:0 0 12px}
.fxprev{width:min(100%,240px);margin:0 auto 12px;border:4px solid var(--line);background:var(--paper)}
.fxprev canvas:first-child{width:100%;aspect-ratio:32/40;image-rendering:pixelated}

/* ---------- Cadres de rareté, cartes plus espacées, visionneuse ---------- */
.rframe{position:relative;padding:5.556%;line-height:0}
.rframe .cimg{display:block;width:100%;aspect-ratio:32/40;image-rendering:pixelated}
.rframe .cframe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
.rframe .fx{position:absolute;display:block;inset:4.545% 5.556%;width:auto;height:auto;pointer-events:none;image-rendering:pixelated}
.saved{gap:22px}
.saved.big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 22px}
.mini{border:0;background:transparent;cursor:pointer;gap:2px}
.mini:focus-visible{outline:3px dashed var(--accent);outline-offset:4px}
.mini .t{color:var(--ink);padding:3px 2px}
.mini .rar{color:#fff;margin-top:2px}
.mini .acts{border-top:0;margin-top:4px;gap:6px}
.mini .acts button{border:3px solid var(--line);box-shadow:3px 3px 0 var(--line)}
.side .mini{border:3px solid var(--line);background:var(--paper);cursor:default}
.side .mini .t{color:#1d1840}
.side .saved{gap:10px}
.bcard{width:min(100%,400px)}
.vcard{width:min(76vw,calc((100vh - 300px)*.818),480px);margin:0 auto 10px}
#viewDialog{text-align:center}
#viewDialog h2{font-size:13px;margin:4px 0}
#viewDialog p{margin:2px 0 10px}
#vRarete{display:inline-block;padding:6px 12px}
#vRarete,#vGold{vertical-align:middle}
.sw{touch-action:none;cursor:grab}
.sw.drop{outline:3px dashed var(--accent);outline-offset:2px}
#viewDialog{max-width:min(94vw,560px)}

/* ---------- Contours animés ---------- */
.rframe .fx{position:absolute;display:block;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
.fxprev{border:0;background:none;width:min(100%,280px)}
.fxprev .rframe .cimg{width:100%}

/* ---------- Mode animation ---------- */
.anim-only{display:none}
body.anim .anim-only{display:block}
body.anim .normal-only{display:none}
.frames{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:8px}
.side .fbtn{padding:2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:6px;line-height:1.3;box-shadow:none}
.fbtn canvas{width:100%;aspect-ratio:32/40;image-rendering:pixelated;display:block}
.aprev{width:110px;aspect-ratio:32/40;image-rendering:pixelated;display:block;border:3px solid var(--line);background:var(--paper)}

/* ---------- Profils ---------- */
button.lien{background:none;border:0;box-shadow:none;padding:0;margin:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}
button.lien:active{transform:none;box-shadow:none}
.mini .t button.lien{font-size:inherit}

/* ---------- Fond animé ---------- */
#fond{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;image-rendering:pixelated;pointer-events:none}

/* ---------- Logo BITFEVER (pixels, teinte choisie par le joueur) ---------- */
:root{--on-accent:#fff;--g1:#00e5ff;--g2:#7a5cff;--g3:#ff2fa3;--logo-bg:#0b0824;--g-ombre:#3a2a7a}
.top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 14px}
.top nav.row{margin:0!important}
.logo-wrap{filter:drop-shadow(5px 5px 0 var(--line))}
h1.logo{margin:0;padding:4px;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g2),var(--g1));background-size:200% 100%;animation:logo-cadre 6s linear infinite;
  clip-path:polygon(0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),0 calc(100% - 12px))}
.logo-in{display:block;position:relative;padding:14px 20px 12px 18px;background:var(--logo-bg);line-height:0;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px))}
.logo-in svg{display:block;width:276px;max-width:68vw;height:auto;image-rendering:pixelated}
.logo-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 4px)}

@keyframes logo-cadre{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){h1.logo{animation:none}}

/* ---------- Choix de la couleur ---------- */
#teinteDialog{text-align:center}
#teinteDialog input[type=color]{width:140px;height:80px;padding:0;border:4px solid var(--line);background:none;cursor:pointer;box-shadow:4px 4px 0 var(--line)}
#profCouleur{width:44px;height:30px;padding:0;border:3px solid var(--line);background:none;cursor:pointer}

/* ---------- Onglet Boosters : le bouton, le compteur et le chrono sont posés directement sur le fond ---------- */
.boost-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;min-height:calc(100vh - 190px);padding:20px 0 40px;overflow:hidden;text-align:center}
.boost-num,.boost-time{font-family:"Press Start 2P",monospace;line-height:1.3;color:var(--accent);
  text-shadow:3px 0 var(--bg),-3px 0 var(--bg),0 3px var(--bg),0 -3px var(--bg),3px 3px 0 var(--bg),-3px 3px 0 var(--bg),3px -3px 0 var(--bg),-3px -3px 0 var(--bg),6px 6px 0 var(--g-ombre,var(--line))}
.boost-num{font-size:38px;animation:boost-num 1.6s steps(2) infinite}
.boost-time{font-size:16px;letter-spacing:.04em}
.boost-time:empty{display:none}
@keyframes boost-num{50%{transform:translateY(-3px)}}
.boost-btnwrap{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,420px);height:230px}
.boost-btnwrap canvas{position:absolute;left:50%;top:50%;width:600px;height:400px;max-width:none;transform:translate(-50%,-50%);image-rendering:pixelated;pointer-events:none}
.rays{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--g2) 38%,transparent) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%);animation:rays 18s steps(60) infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.bigboost{position:relative;z-index:2;font-size:15px;line-height:1.7;text-transform:uppercase;padding:24px 28px;max-width:90vw;
  background:var(--accent);color:var(--on-accent);border:4px solid var(--line);box-shadow:6px 6px 0 var(--line);animation:boost-bob 1.2s steps(3) infinite}
.bigboost::before{content:"";position:absolute;inset:-14px;border:4px dashed var(--accent);pointer-events:none;animation:boost-ring 1.4s steps(5) infinite}
.bigboost:hover:not(:disabled){filter:brightness(1.12);animation-duration:.6s}
.bigboost:active:not(:disabled){animation:none;transform:translate(4px,4px);box-shadow:4px 4px 0 var(--line)}
.bigboost:disabled{animation:none;opacity:.55;cursor:not-allowed}
.bigboost:disabled::before{display:none}
@keyframes boost-bob{50%{transform:translateY(-8px)}}
@keyframes boost-ring{0%{transform:scale(.96);opacity:1}100%{transform:scale(1.22);opacity:0}}
.boostmsg{text-align:center;font-size:9px;color:var(--ink);text-shadow:2px 2px 0 var(--bg),-2px -2px 0 var(--bg),2px -2px 0 var(--bg),-2px 2px 0 var(--bg)}
@media (prefers-reduced-motion:reduce){.rays,.bigboost,.bigboost::before,.boost-num{animation:none}}
@media (max-width:520px){.boost-num{font-size:28px}.boost-time{font-size:12px}.bigboost{font-size:12px;padding:20px 18px}}
.boost-time{text-shadow:2px 0 var(--bg),-2px 0 var(--bg),0 2px var(--bg),0 -2px var(--bg),2px 2px 0 var(--bg),-2px 2px 0 var(--bg),2px -2px 0 var(--bg),-2px -2px 0 var(--bg),4px 4px 0 var(--g-ombre,var(--line))}

/* ---------- Ouverture des boosters au ciseau ---------- */
.arena{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:1000px}
.packs{--pw:170px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px 0;width:100%}
.pack{position:relative;flex:none;width:var(--pw);aspect-ratio:5/8;margin:0 8px;border:4px solid var(--line);background:color-mix(in srgb,var(--panel) 72%,transparent);box-shadow:6px 6px 0 var(--line);
  transition:width .5s steps(8),margin .5s steps(8),opacity .45s steps(5),transform .45s steps(5);cursor:pointer;touch-action:manipulation}
.pack.pret,.pack.ouvert{cursor:default;box-shadow:6px 6px 0 var(--line)}
.pack.gone{width:0;margin:0;opacity:0;transform:scale(.5);border-width:0;box-shadow:none;overflow:hidden}
.pack.on{border-color:var(--accent);outline:4px solid var(--accent);outline-offset:3px;background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.pack:focus-visible{outline:4px dashed var(--accent);outline-offset:3px}
.pack.shake{animation:pack-shake .38s steps(8)}
@keyframes pack-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.pack .badge{position:absolute;right:-12px;top:-12px;width:34px;height:28px;padding:6px 6px;background:var(--accent);color:var(--on-accent);border:3px solid var(--line);display:none;line-height:0}
.pack .badge svg{width:100%;height:100%}
.pack.on .badge{display:block}
.pk-in{position:absolute;inset:0}
.packbox{position:absolute;left:6%;right:6%;top:6%;bottom:6%;display:flex;align-items:center;justify-content:center;animation:pack-float 2.2s steps(5) infinite}
.packbox svg{height:100%;width:auto;aspect-ratio:40/64;display:block;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.28))}
@keyframes pack-float{0%,100%{transform:translateY(-4px) rotate(-1.5deg)}50%{transform:translateY(5px) rotate(1.5deg)}}
.pack.on .packbox{animation-duration:1.1s}
.pack.cutting{border-color:var(--accent)}
.cutline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cutline polyline{fill:none;stroke-linejoin:round}
.cutline .c1{stroke:var(--logo-bg);stroke-width:7}
.cutline .c2{stroke:#fff;stroke-width:3;stroke-dasharray:6 5;animation:marche .35s linear infinite}
.cutline .tip{fill:var(--g1);animation:clignote .25s steps(2) infinite;display:none}
.pack.cutting .cutline .tip{display:inline}    /* le pixel de la pointe n'existe que pendant une découpe (sinon il clignotait dans un coin) */
@keyframes marche{to{stroke-dashoffset:-11}}
@keyframes clignote{50%{fill:#fff}}
.half{position:absolute;inset:0;pointer-events:none;z-index:3}
.half .packbox{animation:none}
.half.haut{animation:moitie-haut .85s steps(9) forwards}
.half.bas{animation:moitie-bas .85s steps(9) forwards}
@keyframes moitie-haut{to{transform:translate(-14px,-80px) rotate(-12deg);opacity:0}}
@keyframes moitie-bas{to{transform:translate(10px,70px) rotate(7deg);opacity:0}}
.flash{position:absolute;inset:-20%;z-index:2;pointer-events:none;background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--g1) 60%,transparent) 35%,transparent 65%);animation:flash .6s steps(6) forwards}
@keyframes flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.2);opacity:0}}
.fan{position:absolute;inset:0;z-index:1}
.fancard{position:absolute;width:56%;box-shadow:4px 4px 0 rgba(0,0,0,.35);animation:carte-sort .4s steps(6) both}
.fancard .rframe{background:#15112f}      /* fond sombre comme le cadre : plus de fine ligne claire aux bords (arrondis de sous-pixels) */
@keyframes carte-sort{0%{transform:scale(.2) translateY(60px);opacity:0}100%{transform:none;opacity:1}}
.arena-actions{display:flex;gap:14px;justify-content:center;align-items:center}
.bigbtn{font-size:13px;padding:16px 22px;text-transform:uppercase;background:var(--accent);color:var(--on-accent);border-width:4px;box-shadow:6px 6px 0 var(--line)}
.bigbtn:disabled{opacity:.5;cursor:not-allowed}
.sci-zone{display:flex;flex-direction:column;align-items:center;gap:10px;animation:carte-sort .5s steps(6) both}
.sci-slot{position:relative;width:150px;height:96px}
.sci{position:absolute;left:3px;top:6px;width:144px;height:84px;cursor:grab;touch-action:none;user-select:none;animation:sci-float 1.8s steps(4) infinite}
.sci svg{display:block;width:100%;height:100%;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.3));pointer-events:none}
.sci.drag{position:fixed;left:0;top:0;z-index:9999;cursor:grabbing;animation:none;transform-origin:0 0}
.sci .sA,.sci .sB{transform-origin:24px 14px}
.sci.cutting .sA{animation:snipA .24s steps(2) infinite}
.sci.cutting .sB{animation:snipB .24s steps(2) infinite}
@keyframes snipA{50%{transform:rotate(11deg)}}
@keyframes snipB{50%{transform:rotate(-11deg)}}
@keyframes sci-float{0%,100%{transform:translateY(-5px) rotate(-3deg)}50%{transform:translateY(5px) rotate(3deg)}}
.sci-label{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;text-shadow:2px 0 var(--bg),-2px 0 var(--bg),0 2px var(--bg),0 -2px var(--bg),2px 2px 0 var(--bg),-2px -2px 0 var(--bg),2px -2px 0 var(--bg),-2px 2px 0 var(--bg)}
@media (prefers-reduced-motion:reduce){.packbox,.sci,.half,.flash,.fancard,.sci-zone{animation:none!important}.half{display:none}}

/* ---------- Une carte à la fois dans chaque booster ouvert ---------- */
.pack{--fs:clamp(6px,calc(var(--pw) * .04),15px)}
.pkview{position:absolute;inset:0;z-index:1}
.pkview .fancard{z-index:2;left:6%;top:9%;width:88%;animation:carte-sort .35s steps(6) both}
.pk-cnt{position:absolute;left:4%;right:4%;top:3%;text-align:center;font-size:var(--fs);line-height:1.4;color:var(--ink)}
.pk-votes{position:absolute;left:5%;right:5%;bottom:4%;display:grid;grid-template-columns:repeat(6,1fr);gap:calc(var(--fs) * .5)}
.pk-votes button{grid-column:span 2;font-size:var(--fs);line-height:1.2;padding:calc(var(--fs) * .55) 1px;border-width:3px;box-shadow:3px 3px 0 var(--line);min-width:0;overflow:hidden;white-space:nowrap}
.pk-votes button:nth-child(n+4){grid-column:span 3}
.pk-votes button.suiv{grid-column:1/-1;background:var(--accent);color:var(--on-accent)}
.pk-votes button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--line)}
.pkview.fini{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.pkview.fini .pk-cnt{position:static}
.pk-ok{width:40%;color:var(--accent);line-height:0}
.pk-ok svg{width:100%;height:auto}
.pack.termine{opacity:.75}
.sci-zone{animation-fill-mode:backwards}

/* ---------- Le dealer ---------- */
.packs{row-gap:34px}
.pack .tag{position:absolute;left:-4px;top:-26px;font-size:8px;line-height:1;padding:5px 7px;border:3px solid var(--line);white-space:nowrap}
.pack.mine .tag{background:var(--accent);color:var(--on-accent)}
.pack.dealer .tag{background:var(--panel);color:var(--ink);border-style:dashed}
.pack.dealer{border-style:dashed;background:color-mix(in srgb,var(--ink) 9%,var(--panel))}
.pack.dealer .packbox svg{filter:saturate(.5) brightness(.95) drop-shadow(4px 4px 0 rgba(0,0,0,.28))}
.pack.mine{cursor:default}
.pack.sort-moi{animation:sort-moi .9s steps(9) forwards;pointer-events:none}
.pack.sort-bas{animation:sort-bas .9s steps(9) forwards;pointer-events:none}
.pack.sort-haut{animation:sort-haut .9s steps(9) forwards;pointer-events:none}
@keyframes sort-moi{to{transform:translateY(70px) scale(1.45);opacity:0}}
@keyframes sort-bas{to{transform:translateY(110vh)}}
@keyframes sort-haut{to{transform:translateY(-110vh)}}
.pk-pile{position:relative;width:46%;aspect-ratio:32/40;margin-bottom:6px}
.pk-pile i{position:absolute;inset:0;border:3px solid var(--line);background:repeating-linear-gradient(45deg,var(--g2) 0 5px,var(--g1) 5px 10px);box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.pk-pile i:nth-child(1){transform:translate(-14%,6%) rotate(-7deg)}
.pk-pile i:nth-child(2){transform:translate(-7%,3%) rotate(-3deg)}
.pk-pile i:nth-child(3){transform:translate(0,0)}
.pk-pile i:nth-child(4){transform:translate(7%,-3%) rotate(3deg)}
.pk-pile i:nth-child(5){transform:translate(14%,-6%) rotate(7deg)}
.pack.dealer .pk-pile i{filter:saturate(.4)}
.pkview.fini .pk-ok{width:18%}
#rateGo.pret{background:var(--accent);color:var(--on-accent);animation:boost-bob 1s steps(3) infinite}
.compte{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
@media (prefers-reduced-motion:reduce){#rateGo.pret{animation:none}}

.pk-votes button.passe{background:var(--panel);color:var(--ink)}
.pk-votes button.suiv{grid-column:1/-1}
#noteNom{margin:0 0 12px;line-height:1.8}

/* ---------- Indice discret : un booster contenant une carte épique ou mieux ---------- */
.indice{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.indice i{position:absolute;bottom:20%;width:4px;height:4px;background:#ffe27a;box-shadow:0 0 0 1px rgba(255,255,255,.55);opacity:0;animation:indice-monte 1.1s steps(7) var(--d) both}
.indice i:nth-child(odd){width:3px;height:3px;background:#fff}
@keyframes indice-monte{0%{opacity:0;transform:translateY(0)}25%{opacity:.9}100%{opacity:0;transform:translateY(calc(var(--h) * -1px))}}
.pack.brille{animation:brille 1.5s steps(8)}
@keyframes brille{0%,100%{box-shadow:6px 6px 0 var(--line)}35%{box-shadow:6px 6px 0 var(--line),0 0 0 4px rgba(255,226,122,.55)}}
@media (prefers-reduced-motion:reduce){.indice{display:none}.pack.brille{animation:none}}

.pk-err{position:absolute;left:4%;right:4%;bottom:4%;z-index:5;padding:6px;background:var(--accent);color:var(--on-accent);border:3px solid var(--line);font-size:var(--fs);line-height:1.4;text-align:center;pointer-events:none}

/* ---------- Visionneuse : même taille pour toutes les cartes ---------- */
/* Seule la carte est au centre de l'écran ; les infos et boutons coulissent à sa droite (sous elle, sur petit écran) */
#viewDialog{--vw:clamp(170px,min(70vw,calc((100vh - 140px) * .818)),460px);box-sizing:border-box;width:var(--vw);height:calc(var(--vw) * 1.2222);max-width:none;max-height:none;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;color:var(--ink)}
#viewDialog[open]{display:block}
#viewDialog .vcard{position:relative;z-index:2;width:100%;margin:0}
#viewDialog .vside{position:absolute;z-index:1;left:calc(100% + 24px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:max-content;max-width:min(300px,calc(50vw - var(--vw) / 2 - 36px));text-align:left}
#viewDialog #vActions{display:contents}
#viewDialog #vTitre,#viewDialog #vCreateur{margin:0;padding:8px 12px;background:var(--panel);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);color:var(--ink)}
#viewDialog #vTitre{font-size:13px;overflow-wrap:anywhere}
#viewDialog #vMsg:empty{display:none}
#viewDialog .vitem{--sx:calc(-100% - 24px);--sy:0px;opacity:0}
#viewDialog.infos .vitem{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both;animation-delay:calc(var(--i) * 150ms),calc(var(--i) * 150ms)}
@keyframes vslide{from{transform:translate(var(--sx),var(--sy))}to{transform:none}}
@keyframes vfade{from{opacity:0}to{opacity:1}}
@media (max-width:900px){
  #viewDialog{--vw:clamp(150px,min(64vw,calc((100vh - 310px) * .818)),460px)}
  #viewDialog .vside{left:50%;top:calc(100% + 16px);transform:translateX(-50%);flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;width:92vw;max-width:92vw;text-align:center}
  #viewDialog .vitem{--sx:0px;--sy:calc(-100% - 16px)}
}
@media (prefers-reduced-motion:reduce){#viewDialog.infos .vitem{animation:none;opacity:1}}

/* ---------- Visionneuse : zoom d'ouverture ---------- */
/* variables de l'ombre de la carte inclinée : NON héritées, pour que leur changement à chaque image ne recalcule pas les étoiles */
@property --ombx{syntax:"*";inherits:false}
@property --omby{syntax:"*";inherits:false}
@property --ombg{syntax:"*";inherits:false}
#viewDialog::backdrop{background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}      /* le site reste visible derrière, sombre et flou ; la visionneuse reste nette */
/* pendant le zoom d'ouverture / de fermeture, la visionneuse reste sur sa propre couche : le téléphone ne redessine plus tout le contenu à chaque image (rendu vérifié identique et net) */
#viewDialog.fige,#viewDialog.zoom,#viewDialog.sortie{will-change:transform,opacity}
#viewDialog.zoom::backdrop{animation:vfond .8s ease-out both}
@keyframes vfond{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#viewDialog.zoom::backdrop{animation:none}}
#vFumee{position:fixed;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none}
#vFumee canvas{display:block;width:100%;height:100%}

/* ---------- Sans encadrés : les textes sont posés directement sur le fond animé ---------- */
.panel,.panel p,.panel h2,.panel h3,.panel label,.panel .hint,.panel .msg{text-shadow:0 0 3px var(--bg),0 0 7px var(--bg),0 0 12px var(--bg)}
.panel button,.panel input,.panel select,.panel textarea{text-shadow:none}

/* ---------- Boosters : une fois le ciseau sorti, plus de place pour les paquets ---------- */
#boostStage.coupe #boostCount,#boostStage.coupe #boostTimer{display:none}
#boostStage.coupe{gap:18px;min-height:calc(100vh - 150px)}
#boostStage.coupe .arena{max-width:1700px;gap:16px}
#boostStage.coupe .packs{row-gap:26px}
.sci-slot{width:100px;height:64px}
.sci{left:2px;top:4px;width:96px;height:56px}
.sci svg{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.sci-zone{gap:6px}
.sci-label{font-size:9px}
.fancard.voir{cursor:zoom-in}
.fancard.voir:focus-visible{outline:3px dashed var(--accent);outline-offset:3px}

/* ---------- Flottement léger des cartes (galerie, hall of fame, collection, créations) : paliers de 1 px pour rester net ---------- */
@keyframes flotte{0%{transform:translateY(0)}12.5%{transform:translateY(-1px)}25%{transform:translateY(-2px)}37.5%{transform:translateY(-3px)}50%{transform:translateY(-3px)}62.5%{transform:translateY(-2px)}75%{transform:translateY(-1px)}87.5%{transform:translateY(0)}}
.saved.big .mini>:first-child{animation:flotte 3.2s steps(1,end) infinite}
.saved.big .mini:nth-child(4n+2)>:first-child{animation-delay:-.8s}
.saved.big .mini:nth-child(4n+3)>:first-child{animation-delay:-1.6s}
.saved.big .mini:nth-child(4n+4)>:first-child{animation-delay:-2.4s}
@media (prefers-reduced-motion:reduce){.saved.big .mini>:first-child{animation:none}}

/* Agrandissement des 5 boosters après Valider : lent au début, rapide au milieu, lent à la fin */
.pack{transition:width 1s cubic-bezier(.65,0,.35,1),margin 1s cubic-bezier(.65,0,.35,1),opacity .45s steps(5),transform .45s steps(5)}
@media (prefers-reduced-motion:reduce){.pack{transition:none}}

/* Pas de clic sur les infos avant la fin de l'animation ; à la fermeture elles s'effacent tout de suite et le fond s'éclaircit */
#viewDialog.verrou .vside,#viewDialog.sortie .vside{pointer-events:none}
#viewDialog.sortie .vside{opacity:0;transition:opacity .2s linear}
#viewDialog.sortie::backdrop{animation:vfondOut .7s ease-in both}
@keyframes vfondOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){#viewDialog.sortie::backdrop{animation:none}}

/* ---------- Logo sans cadre : pixels + ombre dure, dans l'esprit des boutons ---------- */
.logo-wrap{filter:none}
h1.logo{padding:0;background:none;clip-path:none;animation:none}
.logo-in{padding:0;background:none;clip-path:none}
.logo-in::after{display:none}
.logo-in svg{width:340px;max-width:74vw;overflow:visible}
.logo-in .lg{animation:logo-saut 3s steps(1,end) infinite;animation-delay:calc(var(--i) * .11s)}
.logo-in .spark{animation:logo-etincelle 3s steps(1,end) infinite;animation-delay:1.1s}
@keyframes logo-saut{0%{transform:translateY(0)}5%{transform:translateY(-1px)}10%{transform:translateY(0)}}
@keyframes logo-etincelle{0%{opacity:0}8%{opacity:1}16%{opacity:0}}
@media (prefers-reduced-motion:reduce){.logo-in .lg,.logo-in .spark{animation:none}.logo-in .spark{opacity:0}}

/* Page Connexion : champs de largeur raisonnable */
#vueConnexion .panel{max-width:420px}

/* ---------- Carte inclinable dans la visionneuse ---------- */
#viewDialog:not(.verrou):not(.sortie):not(.fige) .vcard,#flDialog .vcard{cursor:grab;touch-action:none;user-select:none}
:is(#viewDialog,#flDialog) .vcard.incline{cursor:grabbing;will-change:transform}
/* netteté : plus de flou à l'inclinaison (il coûtait cher à chaque image et rendait l'image floue) ; la carte reste sur sa propre couche pour garder ses pixels francs */
#viewDialog .vcard,#flDialog .vcard{will-change:transform}
:is(#viewDialog,#flDialog) .vbrillo{position:absolute;inset:0;pointer-events:none;opacity:var(--gf,0);background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.7),rgba(255,255,255,.16) 30%,transparent 58%);mix-blend-mode:soft-light;z-index:5}
/* hologramme : bandes arc-en-ciel qui glissent quand on incline, plus marquées avec la rareté */
:is(#viewDialog,#flDialog) .vholo{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:calc(var(--gf,0) * var(--hn,0) * 1.5);mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 2px,transparent 2px 4px),
    linear-gradient(115deg,transparent 22%,#ff3d8b 31%,#ffd23f 38%,#3dffa0 45%,#3dbcff 52%,#a35bff 59%,transparent 68%) var(--gx,50%) var(--gy,50%)/280% 280%}
/* traînée de lumière fine (mythique et légendaire) : une ligne nette perpendiculaire à la direction de l'inclinaison */
:is(#viewDialog,#flDialog) .vtrait{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent calc(var(--gx,50%) - 8%),rgba(255,255,255,.0) calc(var(--gx,50%) - 4%),rgba(255,255,255,.85) var(--gx,50%),rgba(255,255,255,0) calc(var(--gx,50%) + 4%),transparent calc(var(--gx,50%) + 8%))}
:is(#viewDialog,#flDialog) .vcard[data-rar=mythic] .vtrait,:is(#viewDialog,#flDialog) .vcard[data-rar=legendary] .vtrait{opacity:calc(var(--gf,0) * .55)}
/* étincelles pixel (épique et au-dessus) */
:is(#viewDialog,#flDialog) .spk{--zp:calc(var(--z) * .2174cqw);position:absolute;z-index:6;width:var(--zp);height:var(--zp);margin:calc(var(--zp) / -2) 0 0 calc(var(--zp) / -2);background:var(--sc2,var(--sc,#fff));opacity:0;pointer-events:none;box-shadow:0 0 6px 1px var(--rc),calc(var(--zp)) 0 0 -1px var(--sc,#fff),calc(var(--zp) * -1) 0 0 -1px var(--sc,#fff),0 calc(var(--zp)) 0 -1px var(--sc,#fff),0 calc(var(--zp) * -1) 0 -1px var(--sc,#fff)}
#viewDialog #vFloat{display:inline-block;font-size:12px;margin:8px 0 0;padding:7px 12px;background:var(--panel);color:var(--ink);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line)}
#viewDialog #vFloat[hidden]{display:none}
.mini .fl{padding:3px 4px;font-size:6px;text-align:center}
.mini .fl button{font-size:6px;padding:3px 4px;min-height:0;box-shadow:2px 2px 0 var(--line)}
/* lueur aux couleurs de la rareté + ombre portée qui bouge avec l'inclinaison */
#viewDialog .vcard.incline,#flDialog .vcard.incline{box-shadow:calc(var(--ombx,0) * 1px) calc(var(--omby,0) * 1px + var(--ombg,0) * 12px) calc(var(--ombg,0) * 26px) rgba(0,0,0,calc(var(--ombg,0) * .5)),0 0 calc(var(--ombg,0) * 44px) calc(var(--ombg,0) * 6px) color-mix(in srgb,var(--rc,#fff) 70%,transparent)}

/* ---------- Ouverture fluide d'un booster ---------- */
.half.haut{animation:moitie-haut 1.05s cubic-bezier(.4,0,.2,1) forwards}
.half.bas{animation:moitie-bas 1.05s cubic-bezier(.4,0,.2,1) forwards}
@keyframes moitie-haut{0%{transform:none;opacity:1}16%{transform:translate(-1px,-4px) rotate(-1deg) scale(1.03);opacity:1}55%{opacity:1}100%{transform:translate(-16px,-92px) rotate(-10deg) scale(1.02);opacity:0}}
@keyframes moitie-bas{0%{transform:none;opacity:1}16%{transform:translate(1px,4px) rotate(1deg) scale(1.03);opacity:1}55%{opacity:1}100%{transform:translate(12px,84px) rotate(7deg) scale(1.02);opacity:0}}
.flash{animation:flash 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes flash{0%{transform:scale(.3);opacity:0}22%{opacity:1}100%{transform:scale(1.35);opacity:0}}
/* la première carte jaillit du paquet, puis le compteur et les boutons de vote apparaissent */
.pkview.premiere .fancard{animation:carte-pop 1.1s linear .3s both}
@keyframes carte-jaillit{0%{transform:translateY(30%) scale(.55);opacity:0;filter:blur(4px) brightness(1.7)}55%{transform:translateY(-3%) scale(1.06);opacity:1;filter:blur(0) brightness(1.15)}100%{transform:none;opacity:1;filter:none}}
.pkview.premiere .pk-votes,.pkview.premiere .pk-cnt,.pkview.suivante .pk-votes,.pkview.suivante .pk-cnt{animation:vfade .35s linear .6s both}
/* carte suivante : la nouvelle carte monte doucement ; la précédente s'écarte sur le côté puis part au fond du paquet */
.pkview.suivante .fancard{animation:carte-pop 1s linear .2s both}
/* chaque carte apparaît en grossissant au-delà de son cadre, puis reprend sa taille : tout en courbes douces (pas de paliers) */
@keyframes carte-pop{
  0%{transform:translateY(14%) scale(.35);opacity:0;filter:blur(3px) brightness(1.7);animation-timing-function:cubic-bezier(.16,.84,.3,1)}
  50%{transform:translateY(-1%) scale(1.24);opacity:1;filter:blur(0) brightness(1.2);animation-timing-function:cubic-bezier(.45,0,.3,1)}
  100%{transform:none;opacity:1;filter:none}}
@keyframes carte-suivante{0%{transform:translateY(8%) scale(.88);opacity:0}100%{transform:none;opacity:1}}
.pkview.passe{z-index:0;pointer-events:none}
.pkview.passe .fancard{animation:carte-passe .85s cubic-bezier(.45,0,.25,1) forwards}
@keyframes carte-passe{0%{transform:none;opacity:1;filter:none}38%{transform:translate(-34%,-3%) rotate(-9deg);opacity:1;filter:none}100%{transform:translate(-8%,7%) rotate(-3deg) scale(.68);opacity:0;filter:brightness(.55)}}
@media (prefers-reduced-motion:reduce){.pkview .fancard,.pkview .pk-votes,.pkview .pk-cnt{animation:none!important}.pkview.passe{display:none}}

/* Image précédente en transparence dans l'éditeur d'animation */
#ghost{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;opacity:.38;pointer-events:none;image-rendering:pixelated;display:none}
#ghost.on{display:block}

.fbtn.drop,#animAdd.drop{outline:3px dashed var(--accent);outline-offset:2px}
.fbtn{touch-action:none;user-select:none}

/* ---------- File de boosters (un seul paquet actif) ---------- */
.packs.file{display:block;position:relative;height:calc(var(--pw) * 1.55 + 84px)}
.packs.file .pack{position:absolute;left:var(--l0);top:38px;margin:0;transform-origin:center;
  transform:translate(calc(var(--tx,0px) + var(--dx,0px)),var(--dy,0px)) scale(calc(var(--sc,1) * var(--zoom,1))) rotate(var(--rot,0deg)) scale(var(--sj,1));translate:0 var(--zy,0px);
  transition:transform .9s cubic-bezier(.65,0,.35,1),translate .9s cubic-bezier(.65,0,.35,1),opacity .5s linear,filter .5s linear}
/* booster ouvert : agrandi pour mieux voir les cartes (le haut reste en place, il grandit vers le bas) */
.packs.file .pack.ouvert{--zoom:1.2;--zy:calc(var(--pw) * .05)}      /* la carte monte : le zoom grandit surtout vers le bas, mais le booster est remonté pour que « 1/5 » reste dans l’écran */
@media (max-width:700px){.packs.file .pack.ouvert{--zoom:1.08;--zy:calc(var(--pw) * .0)}}
.packs.file .pack.attend{pointer-events:none;filter:brightness(.8) saturate(.8)}
.packs.file .pack.actif.pret{cursor:grab;touch-action:none}
.packs.file .pack.tient{cursor:grabbing;transition:none;z-index:60!important;box-shadow:10px 12px 0 rgba(0,0,0,.35)}
.packs.file .pack.jete{transition:transform .5s cubic-bezier(.5,0,.8,.4),opacity .5s linear;--sj:.1;opacity:0;z-index:60}
.packs.file .pack.sort-moi,.packs.file .pack.sort-haut{animation-name:sort-moi-f}
.packs.file .pack.sort-haut{animation-name:sort-haut-f}
@keyframes sort-moi-f{to{transform:translateY(70px) scale(1.4);opacity:0}}
@keyframes sort-haut-f{to{transform:translateY(-110vh)}}
.trash{position:fixed;left:50%;bottom:22px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;padding:10px 6px 8px;
  background:var(--panel);color:var(--ink);border:4px solid var(--line);box-shadow:6px 6px 0 var(--line);font-size:8px;line-height:1;
  transform:translate(-50%,160%);opacity:0;pointer-events:none;transition:transform .35s steps(6),opacity .2s linear}
.trash svg{width:44px;height:50px;overflow:visible}
.trash .couv{transform-origin:2px 3px;transition:transform .2s steps(3)}
.trash.vue{transform:translate(-50%,0);opacity:1}
.trash.ok{border-color:var(--accent);border-style:solid;background:color-mix(in srgb,var(--accent) 25%,var(--panel));color:var(--accent)}
.trash.ok .couv{transform:rotate(-28deg) translateY(-1px)}
@media (prefers-reduced-motion:reduce){.packs.file .pack{transition:none}.trash{transition:none}}
.packs.file .pack.on{outline:none}

/* corbeille et lancer plus fluides */
.packs.file .pack.jete{transition:transform .7s cubic-bezier(.45,0,.2,1),opacity .7s cubic-bezier(.5,0,1,1)}
.packs.file .pack{will-change:transform}
.trash{transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .3s ease-out,border-color .25s ease,background .25s ease}
.trash .couv{transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.trash.ok{transform:translate(-50%,0) scale(1.1)}
.packs.file .pack:not(.tient){transition:transform .6s cubic-bezier(.22,.8,.25,1),opacity .5s linear,filter .5s linear}
.packs.file .pack.jete{transition:transform .7s cubic-bezier(.45,0,.2,1),opacity .7s cubic-bezier(.5,0,1,1)}

.trash svg{width:48px;height:57px;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.28))}
.trash .couv{transform-origin:1px 4px}
.trash.ok .couv{transform:rotate(-24deg)}

/* ---------- Golden float ---------- */
.gf{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;font-size:9px;line-height:1;color:#5a3a00;background:linear-gradient(135deg,#fff3a8 0,#ffd23f 45%,#e0a100 100%);border:2px solid #14102e;box-shadow:2px 2px 0 rgba(0,0,0,.35);text-shadow:1px 1px 0 rgba(255,255,255,.6);position:relative;overflow:hidden;animation:gf-lueur 1.6s steps(6) infinite,gf-halo 1.6s steps(4) infinite}
.gf::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);animation:gf-balai 2.2s steps(8) infinite}
@keyframes gf-lueur{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}
@keyframes gf-halo{0%,100%{box-shadow:2px 2px 0 rgba(0,0,0,.35),0 0 0 0 rgba(255,210,63,0)}50%{box-shadow:2px 2px 0 rgba(0,0,0,.35),0 0 6px 2px rgba(255,210,63,.9)}}
@keyframes gf-balai{0%,35%{left:-60%}100%{left:130%}}
html.calme .gf,html.calme .gf::after{animation:none}
.rframe>.gfwrap{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:3px;pointer-events:none;z-index:3}
.mini .gf{font-size:11px}
.fancard .gf{font-size:calc(var(--fs, 8px) * 1.3)}
#vGold{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 10px;padding:5px 10px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#ffd23f;background:#14102e;border:3px solid #ffd23f;box-shadow:0 0 14px 2px rgba(255,210,63,.55),3px 3px 0 var(--line);position:relative;overflow:hidden;vertical-align:middle}
#vGold[hidden]{display:none}
#vGold::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:gf-reflet 2.2s linear infinite}
@keyframes gf-reflet{from{background-position:130% 0}to{background-position:-40% 0}}

/* ---- Black float : noir, tremblements et lueur rouge ; God float : golden + black, arc-en-ciel lumineux ---- */
.gf-black{color:#e9e9f4;background:linear-gradient(135deg,#34343f 0,#0b0b11 55%,#000 100%);border-color:#6b6b82;text-shadow:1px 1px 0 #000;animation:bf-trem 2.6s steps(1) infinite,bf-halo 2.1s steps(5) infinite}
.gf-black::after{left:15%;top:25%;bottom:25%;width:70%;transform:none;background:radial-gradient(ellipse,rgba(255,20,60,.95) 0,rgba(255,20,60,0) 65%);animation:bf-oeil 3.4s steps(1) infinite}
@keyframes bf-trem{0%,6%,14%,58%,66%,100%{transform:translate(0,0)}7%{transform:translate(-1px,0)}9%{transform:translate(1px,1px)}11%{transform:translate(-1px,-1px)}13%{transform:translate(1px,0)}60%{transform:translate(1px,-1px)}62%{transform:translate(-1px,1px)}64%{transform:translate(0,0)}}
@keyframes bf-halo{0%,100%{box-shadow:2px 2px 0 rgba(0,0,0,.5),0 0 2px 0 rgba(120,0,30,.5)}50%{box-shadow:2px 2px 0 rgba(0,0,0,.5),0 0 8px 3px rgba(200,0,45,.9)}}
@keyframes bf-oeil{0%,68%,100%{opacity:0}70%,75%{opacity:1}77%{opacity:0}84%{opacity:.7}88%{opacity:0}}
.gf-god{color:#2b1450;background:linear-gradient(120deg,#fff 0,#ffe27a 20%,#8ff3ff 40%,#ff9ee8 60%,#ffe27a 80%,#fff 100%);background-size:300% 100%;border-color:#fff;animation:gd-arc 2.4s linear infinite,gd-lueur 1.4s steps(6) infinite}
@keyframes gd-arc{from{background-position:0 0}to{background-position:300% 0}}
@keyframes gd-lueur{0%,100%{box-shadow:2px 2px 0 rgba(0,0,0,.35),0 0 4px 1px rgba(255,255,255,.8),0 0 9px 3px rgba(255,210,63,.6)}50%{box-shadow:2px 2px 0 rgba(0,0,0,.35),0 0 9px 3px #fff,0 0 18px 7px rgba(255,150,240,.8)}}
#vGold.k-black{color:#e9e9f4;background:#000;border-color:#6b6b82;text-shadow:0 0 6px rgba(255,20,60,.8);box-shadow:0 0 14px 2px rgba(200,0,45,.6),3px 3px 0 var(--line);animation:bf-trem 2.6s steps(1) infinite}
#vGold.k-black::after{background:radial-gradient(ellipse at 50% 50%,rgba(255,20,60,.55) 0,rgba(255,20,60,0) 70%);background-size:100% 100%;animation:bf-oeil 3.4s steps(1) infinite}
#vGold.k-god{color:#fff;background:linear-gradient(120deg,#2b1450,#5a2a8c,#2b1450);border-color:#fff;text-shadow:0 0 6px #fff;box-shadow:0 0 16px 4px rgba(255,255,255,.7),0 0 30px 8px rgba(255,210,63,.55),3px 3px 0 var(--line);animation:gd-lueur-v 1.4s steps(6) infinite}
@keyframes gd-lueur-v{0%,100%{box-shadow:0 0 12px 3px rgba(255,255,255,.6),0 0 24px 6px rgba(255,210,63,.45),3px 3px 0 var(--line)}50%{box-shadow:0 0 20px 6px #fff,0 0 36px 12px rgba(255,150,240,.8),3px 3px 0 var(--line)}}
html.calme .gf-black,html.calme .gf-god,html.calme #vGold.k-black,html.calme #vGold.k-god{animation:none}
@media (prefers-reduced-motion:reduce){.gf-black,.gf-god,#vGold.k-black,#vGold.k-god{animation:none}}

/* ---- Visualiseuse : navigation entre exemplaires ---- */
#viewDialog #vNav{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:5px 8px;background:var(--panel);color:var(--ink);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);font-size:11px}
#viewDialog #vNav[hidden]{display:none}
#vNav button{min-width:32px;padding:4px 8px;font-size:12px}
#vCompte{min-width:104px;text-align:center}

/* ---- Reflets noirs (black float) : lames d'obsidienne à liseré violet / rouge, discrètes ; god float : mêmes lames, en or ---- */
:is(#viewDialog,#flDialog) .vnoir{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:calc(var(--gf,0) * .72)}
:is(#viewDialog,#flDialog) .vnoir::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(0,0,0,.4),rgba(0,0,0,.15) 30%,transparent 60%),
    linear-gradient(115deg,transparent 20%,rgba(0,0,0,.8) 31%,rgba(176,126,255,.55) 32.4%,rgba(0,0,0,0) 36%,transparent 44%,rgba(0,0,0,.72) 52%,rgba(255,60,100,.42) 53.3%,transparent 57%,transparent 66%,rgba(0,0,0,.65) 74%,rgba(176,126,255,.38) 75.2%,transparent 79%) var(--gx,50%) var(--gy,50%)/260% 260%}
:is(#viewDialog,#flDialog) .vnoir::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(235,220,255,.55) 0,rgba(190,150,255,.2) 4%,transparent 9%)}
/* god float : lames dorées (cœur ambré, liseré jaune pâle / orange), reflet chaud */
:is(#viewDialog,#flDialog) .vnoir.god{opacity:calc(var(--gf,0) * 1)}
:is(#viewDialog,#flDialog) .vnoir.god::before{
  background:
    radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),rgba(235,245,255,.12) 22%,transparent 44%),
    linear-gradient(115deg,transparent 28%,rgba(225,238,255,.4) 31.3%,#fff 32%,rgba(225,238,255,.4) 32.7%,transparent 36%,transparent 49%,rgba(225,238,255,.35) 52.3%,#fff 53%,rgba(225,238,255,.35) 53.7%,transparent 57%,transparent 70%,rgba(225,238,255,.35) 74.3%,#fff 75%,rgba(225,238,255,.35) 75.7%,transparent 79%) var(--gx,50%) var(--gy,50%)/260% 260%;
  mix-blend-mode:screen}
:is(#viewDialog,#flDialog) .vnoir.god::after{background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#fff 0,rgba(255,255,255,.5) 2.5%,transparent 7%);
  mix-blend-mode:screen;animation:vnoir-etinc .35s steps(2) infinite}
@keyframes vnoir-etinc{50%{filter:brightness(1.6)}}

/* ---- Éditeur de float : étoiles cliquables sur la carte ---- */
#flDialog{max-width:min(94vw,640px)}
#flDialog .flcartes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:12px}
#flDialog .flcol{width:min(100%,260px);text-align:center}
#flDialog .flcol .lbl{margin:0 0 6px}
#flDialog .flprev{position:relative;width:100%}
#flDialog .flprev .rframe{width:100%}
#flDialog .vcard{position:relative;width:100%;margin:0}
#flDialog .spk{display:block}
#flDialog .spk.sup{display:none}
.fstar.sup i{opacity:.25;box-shadow:none;background:transparent;border:1px dashed #fff}
.flchip.sup{opacity:.4;text-decoration:line-through}
#flBarre{margin-bottom:10px}
#flDialog .flstars{position:absolute;inset:0;z-index:7}
.fstar{all:unset;position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fstar i{position:absolute;left:50%;top:50%;width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);background:var(--sc,#fff);box-shadow:0 0 5px 1px rgba(0,0,0,.7),var(--z) 0 0 -1px var(--sc,#fff),calc(var(--z) * -1) 0 0 -1px var(--sc,#fff),0 var(--z) 0 -1px var(--sc,#fff),0 calc(var(--z) * -1) 0 -1px var(--sc,#fff)}
.fstar[aria-pressed=true]::after{content:"";position:absolute;inset:1px;border:2px solid #fff;outline:2px solid #000}
.fstar:focus-visible{outline:2px solid #fff}
.flchip{min-width:30px;min-height:0;padding:5px 6px;font-size:9px;background:var(--c,#fff);color:#000;text-shadow:0 0 3px #fff,0 0 3px #fff;border:3px solid var(--line);box-shadow:2px 2px 0 var(--line)}
.flchip[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:1px}
button.flchip[aria-pressed=true]{background:var(--c,#fff);color:#000}
.flcoul{min-width:0;width:30px;height:30px;min-height:0;padding:0;background:var(--c);border:3px solid var(--line);box-shadow:2px 2px 0 var(--line)}
button.flcoul[aria-pressed=true]{background:var(--c);outline:3px solid var(--ink);outline-offset:1px}
#flPalette,#flChips{margin-bottom:12px}
html.calme .pkview .fancard{animation:none!important}

/* l'animation « grossit puis reprend sa taille » ne concerne que les cartes jusqu'à rare : épique, mythique et légendaire gardent leur animation d'avant */
.pkview.premiere .fancard[data-rar=epic],.pkview.premiere .fancard[data-rar=mythic],.pkview.premiere .fancard[data-rar=legendary]{animation:carte-jaillit .85s cubic-bezier(.2,.9,.25,1) .3s both}
.pkview.suivante .fancard[data-rar=epic],.pkview.suivante .fancard[data-rar=mythic],.pkview.suivante .fancard[data-rar=legendary]{animation:carte-suivante .65s cubic-bezier(.2,.8,.25,1) .2s both}
html.calme .pkview .fancard{animation:none!important}

/* ---- Arrivée / départ des boosters ---- */
html.coulisse,html.coulisse body{overflow-x:hidden}
.scint{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.scint i{position:absolute;width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);background:var(--c,#fff);opacity:0;
  box-shadow:0 0 6px 1px var(--c,#fff),var(--z) 0 0 -1px var(--c,#fff),calc(var(--z) * -1) 0 0 -1px var(--c,#fff),0 var(--z) 0 -1px var(--c,#fff),0 calc(var(--z) * -1) 0 -1px var(--c,#fff);
  animation:scint .8s cubic-bezier(.2,.7,.3,1) both}
@keyframes scint{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1.35) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
.pack.part-gauche,.pack.part-droite{animation:pack-part 1.15s cubic-bezier(.7,0,.84,0) both;pointer-events:none}   /* courbe exponentielle : démarrage très lent, fin ultra rapide */
@keyframes pack-part{from{transform:translate(var(--tx,0px),0) scale(var(--sc,1))}to{transform:translate(calc(var(--tx,0px) + var(--ox,0px)),0) scale(var(--sc,1))}}
.packs.file .pack.part-gauche,.packs.file .pack.part-droite{animation-name:pack-part}
html.calme .scint{display:none}
@media (prefers-reduced-motion:reduce){.scint{display:none}.pack.part-gauche,.pack.part-droite{animation:none;opacity:0}}

/* ---- Mention golden / black / god float dans la visualiseuse : après son glissement, elle gonfle puis revient à sa taille avec un léger tremblement ---- */
@keyframes vgold-pop{
  0%{transform:scale(1) rotate(0)}
  26%{transform:scale(1.2) rotate(0);animation-timing-function:ease-out}
  40%{transform:scale(1.04) rotate(-1.6deg)}
  52%{transform:scale(1.09) rotate(1.4deg)}
  64%{transform:scale(1.01) rotate(-1deg)}
  76%{transform:scale(1.03) rotate(.7deg)}
  88%{transform:scale(1) rotate(-.3deg)}
  100%{transform:scale(1) rotate(0)}}
#viewDialog.infos #vGold.vitem{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both,vgold-pop .85s linear none;
  animation-delay:calc(var(--i) * 150ms),calc(var(--i) * 150ms),calc(var(--i) * 150ms + 850ms)}
#viewDialog.infos #vGold.vitem.k-black{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both,vgold-pop .85s linear none,bf-trem 2.6s steps(1) infinite;
  animation-delay:calc(var(--i) * 150ms),calc(var(--i) * 150ms),calc(var(--i) * 150ms + 850ms),calc(var(--i) * 150ms + 1900ms)}
#viewDialog.infos #vGold.vitem.k-god{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both,vgold-pop .85s linear none,gd-lueur-v 1.4s steps(6) infinite;
  animation-delay:calc(var(--i) * 150ms),calc(var(--i) * 150ms),calc(var(--i) * 150ms + 850ms),calc(var(--i) * 150ms)}
@media (prefers-reduced-motion:reduce){#viewDialog.infos #vGold.vitem,#viewDialog.infos #vGold.vitem.k-black,#viewDialog.infos #vGold.vitem.k-god{animation:none;opacity:1}}
html.calme #viewDialog.infos #vGold.vitem,html.calme #viewDialog.infos #vGold.vitem.k-black,html.calme #viewDialog.infos #vGold.vitem.k-god{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both;animation-delay:calc(var(--i) * 150ms)}

/* éditeur de float : 90 étoiles -> pastilles et zones de clic plus petites, liste défilante */
.fstar{width:16px;height:16px;margin:-8px 0 0 -8px}
#flChips{max-height:112px;overflow:auto;gap:4px}
.flchip{min-width:26px;padding:3px 3px;font-size:8px;border-width:2px}

/* gomme de l'éditeur de float */
#flDialog .flstars.gomme{cursor:crosshair;touch-action:none}
#flDialog .flstars.gomme .fstar{cursor:crosshair}
.flanneau{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;border:2px solid #fff;outline:2px solid #000;border-radius:50%;pointer-events:none;z-index:9}
#flGomme[aria-pressed=true],#flCrayon[aria-pressed=true]{background:var(--ink);color:var(--panel)}
#flDialog .flstars.crayon,#flDialog .flstars.crayon .fstar{cursor:cell}
#flCrayonBloc{margin-top:10px}#flCrayonBloc .hint{margin:6px 0 0}
#flCrayonPal{gap:4px;flex-wrap:wrap}
#flAnnuler:disabled,#flRetablir:disabled{opacity:.45;cursor:default}

/* black float : couleurs sombres dans l'éditeur */
#flDialog .flstars.noir .fstar i{outline:1px solid rgba(255,255,255,.7)}
.flchip.dk{color:#fff;text-shadow:none}
button.flchip.dk[aria-pressed=true]{color:#fff}
#flSombresBloc[hidden]{display:none}
#flSombres{gap:8px;margin-bottom:6px}
.fsombre{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 6px;min-width:84px;background:var(--panel);border:3px solid var(--rc,var(--line));box-shadow:2px 2px 0 var(--line);font-size:8px;text-align:center}
.fsombre i{display:block;width:34px;height:22px;background:var(--c);outline:1px solid rgba(255,255,255,.55);outline-offset:-1px;border:1px solid #000}
.fsombre small{font-size:7px;color:var(--rc);text-shadow:0 0 1px #000,0 0 1px #000;filter:brightness(.85)}
.fsombre[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:1px;background:var(--bg,#fff)}
.fsombre:focus-visible{outline:2px solid var(--ink)}
.fsombre.ferme{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
html.calme .vnoir.god::after{animation:none}

/* ---------- Galerie : gros boutons « dossiers » ---------- */
.dossiers{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.dossier{display:flex;align-items:stretch;gap:0;min-width:0}
.dossier[hidden]{display:none}
.dwrap{flex:1;position:relative;display:flex}
.dcol{flex:none;width:clamp(118px,17vw,200px);display:flex;flex-direction:column;position:relative;z-index:2;gap:8px}
.dbtn{flex:1;position:relative;z-index:2;width:100%;min-height:clamp(120px,18vw,170px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 10px;font-size:clamp(9px,1.3vw,13px);line-height:1.5;text-align:center;border:4px solid var(--line);box-shadow:6px 6px 0 var(--line)}
.dbtn small{font-size:7px;opacity:.7}
.dbtn[aria-expanded=true]{box-shadow:2px 2px 0 var(--line);transform:translate(4px,4px)}
.dstrip{flex:1;min-width:0;display:flex;gap:22px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:36px 30px 38px;margin:-28px 0 -28px -12px;-webkit-overflow-scrolling:touch}
.dstrip::-webkit-scrollbar{display:none}
.dstrip[hidden]{display:none}
.dstrip .empty{margin:auto 0;align-self:center}
.dstrip .mini{flex:none;width:clamp(120px,13vw,168px);transition:transform .38s cubic-bezier(.2,.8,.25,1) var(--dl,0ms),opacity .28s ease var(--dl,0ms)}
.dstrip .mini.dehors{transform:translateX(var(--dx,-400px));opacity:0}
html.calme .dstrip .mini{transition:none}
.dstrip .mini>:first-child{animation:flotte 3.2s steps(1,end) infinite}
.dstrip .mini:nth-child(4n+2)>:first-child{animation-delay:-.8s}
.dstrip .mini:nth-child(4n+3)>:first-child{animation-delay:-1.6s}
.dstrip .mini:nth-child(4n+4)>:first-child{animation-delay:-2.4s}
@media (prefers-reduced-motion:reduce){.dstrip .mini>:first-child{animation:none}}
/* carte du jour : à part, centrée */
.cdjseul{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.cdjseul .saved{display:flex;justify-content:center;flex-wrap:wrap;gap:22px}
.cdj1{width:min(100%,200px)}
.cdjseul .mini{width:100%}
.dstrip .mini.sans{transition:none!important}

/* titre au-dessus des étoiles du float */
.rframe .ctitre{position:absolute;left:5.556%;top:5.556%;width:88.888%;aspect-ratio:32/40;height:auto;z-index:8;pointer-events:none;image-rendering:pixelated}
/* étoiles en relief (god float) */
/* relief 3D (god float) : invisible à plat. Des calques d'épaisseur glissent sous le titre / l'étoile selon l'inclinaison (--ox / --oy), par simple transform : fluide. */
.rframe .ctitre.ext{z-index:7;image-rendering:auto;transform:translate(calc(var(--ox,0) * var(--k,1) * .06px),calc(var(--oy,0) * var(--k,1) * .06px));will-change:transform}
:is(#viewDialog,#flDialog) .spk.ext{z-index:5;transform:translate(calc(var(--ox,0) * var(--k,1) * .12px),calc(var(--oy,0) * var(--k,1) * .12px));
  box-shadow:var(--zp) 0 0 -1px var(--sc),calc(var(--zp) * -1) 0 0 -1px var(--sc),0 var(--zp) 0 -1px var(--sc),0 calc(var(--zp) * -1) 0 -1px var(--sc)}

/* options des dossiers (favoris, tri) et étoile des favoris */
.dopts{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;flex-direction:column;gap:6px}
.dossier.ouvert .dopts{translate:4px 4px}
.dossier.ouvert .dwrap{min-height:190px}
.dopts[hidden]{display:none}
.dopt{font-size:7px;padding:7px 6px;min-height:0;line-height:1.4;box-shadow:3px 3px 0 var(--line)}
.dopt[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#fff)}
.rframe>.favmark{position:absolute;top:3px;right:3px;z-index:9;font-size:14px;line-height:1;color:#ffd23f;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;pointer-events:none}
.favbtn[aria-pressed=true]{background:#ffd23f;color:#1d1840}

/* performances : l'agrandissement d'un dossier ne recalcule pas l'intérieur de la ligne de cartes */
.dstrip{align-self:flex-start;contain:layout paint;clip-path:inset(0 0 0 12px)}
.dossier{contain:layout style}

/* fluidité : pas de flottement ni de calques superflus pendant l'animation des dossiers */
.dossier.anim .dstrip .mini>:first-child{animation-play-state:paused}
.dossier.anim .dstrip .mini{will-change:transform,opacity}

/* texte du gros bouton ancré en haut : il ne bouge plus quand le dossier s'agrandit */
.dbtn{justify-content:flex-start!important;padding-top:calc(clamp(120px,18vw,170px)/2 - 30px)!important}
/* l'ombre « relief » du gros bouton s'estompe en douceur, au rythme de l'agrandissement */
.dbtn{transition:box-shadow .38s cubic-bezier(.8,0,.2,1),transform .38s cubic-bezier(.8,0,.2,1)}
.dbtn:active{transition:none}
html.calme .dbtn{transition:none}

/* boutons de vote minimalistes : cinq pastilles de couleur identiques, alignées, sans texte */
.vote,.pk-votes button.vote{font-size:0;color:transparent;padding:0;min-width:0;min-height:0;border:3px solid var(--line);
  box-shadow:3px 3px 0 var(--line),inset 3px 3px 0 rgba(255,255,255,.38),inset -3px -3px 0 rgba(0,0,0,.28)}
.vote{width:36px;height:36px}
.vote:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line),inset 3px 3px 0 rgba(255,255,255,.38),inset -3px -3px 0 rgba(0,0,0,.28)}
.votes{gap:12px}
.pk-votes:has(.vote){grid-template-columns:repeat(5,1fr);gap:calc(var(--fs) * .7);align-items:center}
.pk-votes button.vote{grid-column:auto;width:100%;height:auto;aspect-ratio:1 / 1;max-width:calc(var(--fs) * 3.4);justify-self:center}

/* écran large, une fois le ciseau sorti : boosters à gauche ; ciseau puis « Terminer » dans la colonne de droite, au centre de l'espace libre */
@media (min-width:900px){
  #boostStage.coupe .arena{display:grid;grid-template-columns:minmax(0,6fr) minmax(170px,4fr);grid-template-rows:1fr auto auto 1fr;column-gap:10px;row-gap:90px;align-items:center;justify-items:center;max-width:1700px}
  #boostStage.coupe .arena .packs{grid-column:1;grid-row:1 / -1;align-self:start}
  #boostStage.coupe .arena .sci-zone{grid-column:2;grid-row:2}
  #boostStage.coupe .packs.file{height:calc(var(--pw) * 1.6 + 84px)}
}

/* ciseau décalé vers les boosters (45 % du chemin, calculé dans ciseaux.js) */
@media (min-width:900px){#boostStage.coupe .arena .sci-zone{translate:var(--decal,0px) 0}}

/* ---- easter egg : explosion divine, couteau ---- */
.sci.boum svg{animation:sci-boum .52s ease-in forwards}
@keyframes sci-boum{0%{transform:scale(1);filter:brightness(1)}30%{transform:scale(1.3) rotate(-8deg);filter:brightness(3)}100%{transform:scale(2.8) rotate(12deg);filter:brightness(9);opacity:0}}
.sci.couteau svg{filter:drop-shadow(0 0 5px #ffd84a) drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.sci.arrive svg{animation:couteau-arrive .9s cubic-bezier(.2,.9,.3,1) both}
@keyframes couteau-arrive{0%{transform:translateY(-70px) scale(.2) rotate(-50deg);filter:brightness(5);opacity:0}55%{transform:translateY(6px) scale(1.3) rotate(6deg);filter:brightness(2.4) drop-shadow(0 0 12px #fff);opacity:1}100%{transform:none;filter:drop-shadow(0 0 5px #ffd84a) drop-shadow(2px 2px 0 rgba(0,0,0,.3));opacity:1}}
.sci.couteau.cutting svg{animation:couteau-coupe .16s steps(2) infinite}
@keyframes couteau-coupe{50%{transform:translateY(-2px) rotate(-3deg)}}
.divin{position:fixed;z-index:10000;width:0;height:0;pointer-events:none}
.divin .rayons{position:absolute;left:-170px;top:-170px;width:340px;height:340px;border-radius:50%;background:repeating-conic-gradient(rgba(255,236,150,.95) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 0,#000 30%,transparent 70%);animation:divin-rayons 1s ease-out forwards}
@keyframes divin-rayons{0%{transform:scale(.1) rotate(0);opacity:0}25%{opacity:1}100%{transform:scale(1.4) rotate(70deg);opacity:0}}
.divin .halo{position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,230,120,.85) 35%,transparent 70%);animation:divin-halo .9s ease-out forwards}
@keyframes divin-halo{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}
.divin i,.egg-p{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--c,#ffd84a);animation:divin-eclat .9s cubic-bezier(.1,.7,.3,1) forwards}
.egg-p{position:fixed;z-index:10000;width:5px;height:5px;margin:-2px 0 0 -2px;pointer-events:none;animation-duration:.65s}
@keyframes divin-eclat{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r,0deg));opacity:0}}
.packbox{transition:filter .35s}
.packbox.oeuf1{filter:brightness(1.7) drop-shadow(0 0 8px #ffd84a)}
html.calme .divin,html.calme .egg-p{display:none}

/* faisceau de lumière : le saint schlass descend du haut de l'écran */
.faisceau{position:fixed;top:0;width:150px;margin-left:-75px;z-index:9998;pointer-events:none;background:linear-gradient(180deg,rgba(255,240,170,0) 0,rgba(255,236,150,.55) 60%,rgba(255,255,255,.85) 100%);-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);animation:faisceau 1.6s ease-out forwards}
@keyframes faisceau{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
html.calme .faisceau{display:none}

/* cartes d'un booster terminé qui s'en vont (à droite, à gauche, ou vers le bas si défaussées) */
.fancard.vol{position:fixed;animation:none;pointer-events:none}
.pkview.fini.vole .pk-pile{visibility:hidden}

/* carte déjà notée Nul/Bof (défausse automatique) : « Conserver » au-dessus de « Suivante » */
.pk-votes button.garder,.pk-votes button.annuler{grid-column:1/-1;background:var(--panel);color:var(--ink)}
.pk-votes:has(.garder),.pk-votes:has(.annuler){gap:calc(var(--fs) * .6)}

/* fin des boosters : fondu de l'arène vers l'écran d'accueil */
#arena.fondu{opacity:0;transition:opacity .5s linear}
#boostIdle.apparait{animation:idle-in .8s ease-out both}
@keyframes idle-in{from{opacity:0}to{opacity:1}}

/* ===== Éditeur de float : refonte (deux colonnes, panneau d'outils, pied toujours visible) ===== */
#flDialog{padding:0;width:min(96vw,1000px);max-width:none;max-height:92vh;overflow:hidden}
#flDialog[open]{display:flex;flex-direction:column}
#flDialog .flhead{padding:14px 18px 10px;border-bottom:4px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--g1) 22%,var(--panel)),color-mix(in srgb,var(--g3) 22%,var(--panel)))}
#flDialog .flhead h2{margin:0;font-size:13px;display:flex;align-items:center;gap:10px}
#flDialog .flno{font-size:10px;padding:3px 7px;background:var(--ink);color:var(--panel)}
#flDialog .flaide{margin-top:8px;font-size:9px}
#flDialog .flaide summary{cursor:pointer;color:var(--accent);width:max-content}
#flDialog .flaide .hint{margin:8px 0 0;line-height:1.7}
#flDialog kbd{border:2px solid var(--line);padding:0 4px;font:inherit;background:var(--bg)}
#flDialog .flcorps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;padding:16px 18px;overflow:auto;flex:1;min-height:0}
#flDialog .flcartes{display:flex;gap:14px;justify-content:center;align-items:flex-start;margin:0;flex-wrap:nowrap}
#flDialog .flcol{flex:1 1 0;min-width:0;width:auto}
#flDialog .flcol .lbl{margin:0 0 8px;display:flex;flex-direction:column;gap:2px;font-size:10px}
#flDialog .flcol .lbl small{font-size:8px;opacity:.65;font-weight:normal}
#flDialog .flpanneau{display:flex;flex-direction:column;gap:12px;min-width:0}
#flDialog .flbloc{border:3px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,var(--bg));padding:10px 12px;box-shadow:3px 3px 0 var(--line)}
#flDialog .fltitre{font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;color:var(--accent);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#flDialog .fltitre::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;align-self:center}
#flDialog .fltitre small{font-size:8px;letter-spacing:0;text-transform:none;color:var(--ink);opacity:.65}
#flDialog .fltitre.fl2{margin-top:12px}
#flDialog .flsel{display:flex;align-items:center;gap:10px}
#flDialog .flsel button{min-width:34px;padding:6px 8px;font-size:10px}
#flDialog .flsel strong{flex:1;font-size:10px;text-align:center}
#flDialog .flswatch{width:28px;height:28px;background:var(--c,#fff);border:3px solid var(--line);box-shadow:2px 2px 0 var(--line);flex:none}
#flDialog .flswatch.sup{background:repeating-linear-gradient(45deg,var(--panel) 0 4px,var(--line) 4px 6px)}
#flDialog .flnb{font-size:9px;margin:8px 0 2px;opacity:.8}
#flDialog .flnum{margin-top:6px;font-size:9px}
#flDialog .flnum summary{cursor:pointer;color:var(--accent);width:max-content}
#flDialog #flChips{max-height:96px;margin:8px 0 0}
#flDialog #flPalette{gap:7px;margin:0}
#flDialog #flSombres{gap:8px;margin:0}
#flDialog .flcoul{width:28px;height:28px;transition:transform .12s steps(2)}
#flDialog .flcoul:hover,#flDialog .fsombre:hover{transform:translateY(-2px)}
#flDialog #flBarre{margin:0;gap:8px}
#flDialog #flBarre button{font-size:9px;padding:7px 9px}
#flDialog .fsombre{min-width:0;flex:1 1 78px;max-width:110px}
#flDialog .fsombre[aria-pressed=true]{background:var(--ink);color:var(--panel);outline:3px solid var(--ink);outline-offset:1px}
#flDialog .fsombre[aria-pressed=true] small{color:var(--panel)}
#flDialog .fsombre.ferme{opacity:.45;cursor:not-allowed}
#flDialog .flpied{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:10px 18px;border-top:4px solid var(--line);background:var(--panel)}
#flDialog .flpied .msg{margin:0 auto 0 0;min-height:0}
#flDialog #flSave{padding:10px 16px}
@media (max-width:760px){#flDialog .flcorps{grid-template-columns:1fr}#flDialog .flcartes{max-width:420px;margin:0 auto}}

/* dessin du booster : une image au lieu d'un SVG de ~350 éléments */
.packbox .pkart{position:relative;height:100%;aspect-ratio:40/64;display:block;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.28))}
.packbox .pkart img{display:block;width:100%;height:100%;image-rendering:pixelated;user-select:none;-webkit-user-drag:none}
.packbox .pk-ctm{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.pack.dealer .packbox .pkart{filter:saturate(.5) brightness(.95) drop-shadow(4px 4px 0 rgba(0,0,0,.28))}


/* ---- trainée pixellisée du ciseau / couteau ---- */
.cutline{shape-rendering:crispEdges}
.cutline .c1{fill:var(--logo-bg);stroke:none}
.cutline .c2{fill:#fff;stroke:none;animation:px-scint .3s steps(2) infinite}
@keyframes px-scint{50%{opacity:.35}}
.cutline .tip{width:6px;height:6px}

/* ---- fenêtre « Terminer » : occupe toute la partie droite, glisse en ralentissant ---- */
#rateRow.rate-panel{position:fixed;top:0;right:0;bottom:0;width:clamp(200px,22vw,340px);z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 18px;
  background:linear-gradient(180deg,var(--panel),var(--bg));border-left:4px solid var(--line);box-shadow:-8px 0 0 rgba(0,0,0,.18);
  transform:translateX(105%);visibility:hidden;transition:transform .85s cubic-bezier(.05,.75,.12,1),visibility 0s .85s}
#rateRow.rate-panel.ouvert{transform:none;visibility:visible;transition-delay:0s}
.rp-t{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;text-align:center}
.rp-i{margin:0;font-size:9px;line-height:1.8;text-align:center;opacity:.8}
#rateRow.rate-panel #rateGo{width:100%}
@media (max-width:899px){
  #rateRow.rate-panel{top:auto;left:0;width:auto;flex-direction:row;flex-wrap:wrap;padding:12px;gap:10px;border-left:0;border-top:4px solid var(--line);box-shadow:0 -6px 0 rgba(0,0,0,.18);transform:translateY(105%)}
  #rateRow.rate-panel.ouvert{transform:none}
  #rateRow.rate-panel #rateGo{width:auto}
}
html.calme #rateRow.rate-panel,html.calme #rateRow.rate-panel.ouvert{transition:none}
@media (prefers-reduced-motion:reduce){#rateRow.rate-panel{transition:none}}

/* ---- effet glitch (remplace le halo doré de l'easter egg) ---- */
.glitch{position:fixed;z-index:10000;width:0;height:0;pointer-events:none;mix-blend-mode:screen}
.glitch i{position:absolute;opacity:0;animation:glitch-blk steps(1) 1 forwards}
@keyframes glitch-blk{0%{opacity:1;transform:translateX(0)}20%{opacity:0}35%{opacity:1;transform:translateX(var(--j))}55%{opacity:0}70%{opacity:1;transform:translateX(calc(var(--j) * -1))}85%{opacity:1;transform:translateX(0) scaleY(.4)}100%{opacity:0}}
.glitchcol{position:fixed;top:0;width:64px;margin-left:-32px;z-index:9998;pointer-events:none;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,#00f0ff 0 6px,transparent 6px 16px,#ff2bd6 16px 22px,transparent 22px 40px);animation:glitchcol .9s steps(1) forwards}
@keyframes glitchcol{0%{opacity:0}10%{opacity:1;clip-path:inset(0 30px 0 0)}25%{clip-path:inset(0 0 0 34px);transform:translateX(8px)}40%{opacity:0}50%{opacity:1;clip-path:inset(0 12px 0 12px);transform:translateX(-10px)}70%{opacity:.8;clip-path:inset(0);transform:none}85%{opacity:0}100%{opacity:0}}
html.calme .glitch,html.calme .glitchcol{display:none}
.sci.couteau svg{filter:drop-shadow(2px 0 rgba(0,240,255,.8)) drop-shadow(-2px 0 rgba(255,43,214,.8)) drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.sci.couteau:not(.cutting) svg{animation:couteau-gl 2.4s steps(1) infinite}
@keyframes couteau-gl{0%,90%,100%{transform:none}92%{transform:translateX(3px)}95%{transform:translateX(-3px) skewX(-6deg)}}

/* ---- gros boutons des dossiers : dégradé dans la couleur principale ---- */
.dbtn{background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 60%,var(--g3)) 100%);color:var(--on-accent);text-shadow:1px 1px 0 rgba(0,0,0,.25)}
#dColl .dbtn{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 70%,var(--g1)) 0%,var(--accent) 100%)}
#dHall .dbtn{background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,var(--g2)) 55%,color-mix(in srgb,var(--accent) 65%,#fff) 100%)}
.dbtn:hover{filter:brightness(1.08)}
.dbtn[aria-expanded=true]{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#000),var(--accent))}

/* ---- mention « (original) » dans le float ---- */
.vorig{color:var(--accent);text-shadow:1px 1px 0 rgba(0,0,0,.35);animation:vorig-b 1.6s steps(2) infinite}
@keyframes vorig-b{50%{text-shadow:1px 1px 0 rgba(0,0,0,.35),0 0 6px var(--accent);filter:brightness(1.25)}}
html.calme .vorig{animation:none}

/* ---- galerie : lueur animée des cartes légendaires uniquement (pseudo-élément : n'entre pas en conflit avec l'animation « flotte ») ---- */
:is(.dstrip,#galerie) .mini.r-legendary .rframe::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;animation:leg-lueur 1.8s steps(6) infinite}
@keyframes leg-lueur{
  0%,100%{box-shadow:0 0 4px 0 rgba(255,200,61,.2)}
  50%{box-shadow:0 0 9px 2px rgba(255,226,122,.45),0 0 16px 4px rgba(255,138,31,.18)}
}
@media (prefers-reduced-motion:reduce){:is(.dstrip,#galerie) .mini.r-legendary .rframe::after{animation:none;box-shadow:0 0 8px 2px rgba(255,200,61,.4)}}
html.calme :is(.dstrip,#galerie) .mini.r-legendary .rframe::after{animation:none;box-shadow:0 0 8px 2px rgba(255,200,61,.4)}
.dossier.anim .dstrip .mini.r-legendary .rframe::after{animation-play-state:paused}

/* ---- galerie : mention de rareté sans encadré, police 8 bits, ornements et couleurs selon la rareté ---- */
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar{
  --o:#5f574f;background:none!important;color:var(--o)!important;font-family:"Pixelify Sans","Press Start 2P",monospace;font-size:14px;font-weight:700;line-height:1.2;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 0 2px;margin-top:2px;display:flex;justify-content:center;align-items:center;gap:9px;overflow:visible;text-overflow:clip;
  text-shadow:1px 1px 0 color-mix(in srgb,var(--o) 30%,transparent)}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar::before,
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar::after{content:"";flex:none;width:3px;height:3px;background:var(--o);color:var(--o)}
/* ornements en pixels : 1 point, 2 points, croix, losange, étoile, couronne d'étincelles */
.mini .t.rar-common::before,.mini .t.rar-common::after{box-shadow:none}
.mini .t.rar-uncommon::before{box-shadow:-6px 0 0 var(--o)}.mini .t.rar-uncommon::after{box-shadow:6px 0 0 var(--o)}
.mini .t.rar-rare::before,.mini .t.rar-rare::after{box-shadow:0 -3px 0 var(--o),0 3px 0 var(--o),-3px 0 0 var(--o),3px 0 0 var(--o);margin:0 3px}
.mini .t.rar-epic::before,.mini .t.rar-epic::after{box-shadow:0 -3px 0 var(--o),0 3px 0 var(--o),-3px 0 0 var(--o),3px 0 0 var(--o),0 -6px 0 var(--o),0 6px 0 var(--o),-6px 0 0 var(--o),6px 0 0 var(--o);margin:0 6px}
.mini .t.rar-mythic::before,.mini .t.rar-mythic::after{box-shadow:0 -3px 0 var(--o),0 3px 0 var(--o),-3px 0 0 var(--o),3px 0 0 var(--o),-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,3px 3px 0 #fff,0 -6px 0 var(--o),0 6px 0 var(--o),-6px 0 0 var(--o),6px 0 0 var(--o);margin:0 6px}
.mini .t.rar-legendary::before,.mini .t.rar-legendary::after{box-shadow:0 -3px 0 var(--o),0 3px 0 var(--o),-3px 0 0 var(--o),3px 0 0 var(--o),0 -6px 0 #fff3b0,0 6px 0 #fff3b0,-6px 0 0 #fff3b0,6px 0 0 #fff3b0,-3px -3px 0 #ffe27a,3px -3px 0 #ffe27a,-3px 3px 0 #ffe27a,3px 3px 0 #ffe27a,0 -9px 0 var(--o),0 9px 0 var(--o),-9px 0 0 var(--o),9px 0 0 var(--o);margin:0 9px;animation:rar-scint 1.2s steps(2) infinite}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar-common{--o:#6e655c}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar-uncommon{--o:#0a8f56}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar-rare{--o:#1f7fd6}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar-epic{--o:#8a3df0;animation:rar-pulse 2.2s steps(4) infinite}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar-mythic{--o:#e0287f;animation:rar-myth 2.4s steps(1) infinite}
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar-legendary{--o:#e09a00;animation:rar-leg 1.8s steps(1) infinite;text-shadow:1px 1px 0 rgba(110,60,0,.55)}
@property --o{syntax:"<color>";inherits:true;initial-value:#5f574f}
@keyframes rar-myth{0%{--o:#e0287f}25%{--o:#f0602f}50%{--o:#c43bd0}75%{--o:#8a3df0}}
@keyframes rar-leg{0%{--o:#d88a00}25%{--o:#f2b400}50%{--o:#ffd23f}75%{--o:#f2b400}}
@keyframes rar-pulse{50%{filter:brightness(1.25)}}
@keyframes rar-scint{50%{opacity:.45}}
html.calme .mini .t.rar,html.calme .mini .t.rar::before,html.calme .mini .t.rar::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.mini .t.rar,.mini .t.rar::before,.mini .t.rar::after{animation:none!important}}

/* mention de rareté : sans ornements */
.mini .t.rar::before,.mini .t.rar::after{content:none!important;display:none!important}

/* ---- galerie : plus de titre ni de mention de rareté sous les cartes (la rareté se lit au halo et dans la visionneuse) ---- */
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .t.rar,
:is(#galerie,.dstrip,#profColl,#profCrea,#cdjBox) .mini .mtitre{display:none!important}

/* ---- badge F (golden / black / god float) : lettre recentrée (la police a une colonne vide à droite et en bas) ---- */
.gf{box-sizing:border-box;padding:.1em 0 0 .12em}

/* ---- titre « Cartes du jour » ---- */
.cdjseul h2{text-align:left;font-family:"Pixelify Sans","Press Start 2P",monospace;font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.1;letter-spacing:.02em;margin:0 0 18px;
  -webkit-text-stroke:1px currentColor;text-shadow:2px 2px 0 var(--line)}

/* ---- cartes plus grandes (galerie, dossiers, profil, carte du jour) : le titre dessiné sur la carte reste lisible ---- */
.saved.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:34px 26px}
.dstrip .mini{width:clamp(170px,19vw,250px)}
.dstrip{gap:28px}
.cdj1{width:min(100%,270px)}
@media (max-width:600px){.saved.big{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px 16px}.dstrip .mini{width:clamp(150px,42vw,190px)}}

/* ---- dossier fermé : le bouton se réduit à son nom (sans « ouvrir »), il grandit à l'ouverture ---- */
#dColl{--n:10}#dCrea{--n:9}#dHall{--n:12}
.dbtn{min-height:0;white-space:nowrap;max-width:100%;padding-top:14px!important;padding-bottom:14px;
  transition:box-shadow .38s cubic-bezier(.8,0,.2,1),transform .38s cubic-bezier(.8,0,.2,1),max-width .38s cubic-bezier(.65,0,.35,1)}
.dossier.rentre .dbtn{max-width:calc(var(--n) * 1em + 28px)}
.dbtn small{transition:opacity .4s ease}
.dossier.rentre .dbtn small{position:absolute;left:0;right:0;top:calc(14px + 1.5 * clamp(9px,1.3vw,13px) + 10px);opacity:0;pointer-events:none}
html.calme .dbtn small{transition:none}
.dossier.ouvert .dwrap{min-height:0}
.dossier.ouvert .dstrip{min-height:246px}
#dJour{--n:14}
#dJour .dbtn{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 65%,var(--g2)) 0%,var(--accent) 60%,color-mix(in srgb,var(--accent) 70%,#fff) 100%)}

/* logo : l'éclat du diamant scintille */

/* ---- relief de la bordure de rareté à l'inclinaison : les motifs du cadre (anneaux, languettes, coins) s'épaississent ; invisible à plat ---- */
:is(#viewDialog,#flDialog) .vcard .cframe.ext{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;
  transform:translate(calc(var(--ox,0) * var(--k,1) * .1px),calc(var(--oy,0) * var(--k,1) * .1px));will-change:transform}
:is(#viewDialog,#flDialog) .vcard .cframe.ext.ombre{filter:brightness(.42) saturate(1.2)}
:is(#viewDialog,#flDialog) .vcard .cframe.ext.clair{filter:brightness(1.7) saturate(.5);opacity:.85}
:is(#viewDialog,#flDialog) .vcard .cframe.ext.dessus{transform:none}

/* bulle d'explication des floats spéciaux */
#floatTip{position:fixed;z-index:50;box-sizing:border-box;padding:12px 14px;text-align:left;font-size:9px;line-height:1.7;color:var(--ink);background:var(--panel);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);animation:tip-in .18s steps(4) both}
#floatTip strong{display:block;margin-bottom:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
#floatTip[data-k=gold] strong{color:#c98f00}#floatTip[data-k=black] strong{color:#c0123c}
#floatTip[data-k=god] strong{background:linear-gradient(90deg,#ff4fa3,#ffd23f,#3bd6ff,#a259ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#floatTip p{margin:0}
#floatTip .x{position:absolute;top:2px;right:2px;width:22px;height:22px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;box-shadow:none;border-width:2px}
@keyframes tip-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.calme #floatTip{animation:none}

/* ---- indice discret de la cible de l'easter egg (ciseaux lancés vers le haut) ---- */
.indice-sch{position:fixed;top:0;width:0;height:0;z-index:9990;pointer-events:none}
.indice-sch i{position:absolute;width:5px;height:5px;margin-left:-2px;background:#ffd23f;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 6px 1px rgba(255,210,63,.55);opacity:0;animation:indice-sch-monte 1.6s steps(9) both}
.indice-sch i:nth-child(odd){width:3px;height:3px;background:#fff;box-shadow:0 0 5px 1px rgba(255,226,122,.7)}
@keyframes indice-sch-monte{0%{opacity:0;transform:translate(0,0)}18%{opacity:.9}80%{opacity:.65}100%{opacity:0;transform:translate(var(--dx),calc(var(--h) * -1))}}
.indice-sch b{position:absolute;top:22px;left:-4px;width:3px;height:3px;margin:3px 0 0 3px;background:#fff;opacity:0;box-shadow:0 -3px 0 #ffd23f,0 3px 0 #ffd23f,-3px 0 0 #ffd23f,3px 0 0 #ffd23f,0 -6px 0 #ffe27a,0 6px 0 #ffe27a,-6px 0 0 #ffe27a,6px 0 0 #ffe27a,0 0 10px 2px rgba(255,210,63,.6);animation:indice-sch-croix 1.4s steps(1) both}
@keyframes indice-sch-croix{0%{opacity:0}15%{opacity:1}35%{opacity:.35}55%{opacity:.95}75%{opacity:.35}90%{opacity:.8}100%{opacity:0}}
html.calme .indice-sch{display:none}

/* Cartes du jour : rien sous les cartes de la galerie */
/* Vote intégré sous la carte, dans la visionneuse */
#viewDialog #vVote{position:absolute;z-index:1;left:0;right:0;margin:0 auto;width:max-content;max-width:100%;top:calc(100% + 18px);padding:10px 12px;background:var(--panel);color:var(--ink);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);display:flex;justify-content:center}
#viewDialog #vVote[hidden]{display:none}
#viewDialog #vVote .vvotes{display:flex;gap:calc(var(--vw) * .03);justify-content:center}
#viewDialog #vVote .vote{width:calc(var(--vw) * .13);height:calc(var(--vw) * .13);min-width:26px;min-height:26px;max-width:46px;max-height:46px}
#viewDialog #vVote .vinfo{font-size:11px}
#viewDialog #vVote.vitem{--sx:0px;--sy:calc(-100% - 30px)}
/* l'encadré glisse hors de la carte (du haut vers le bas), puis flotte légèrement */
#viewDialog.infos #vVote.vitem{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both,vbob 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * 150ms),calc(var(--i) * 150ms),calc(var(--i) * 150ms + 800ms)}
@keyframes vbob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion:reduce){#viewDialog.infos #vVote.vitem{animation:vslide .75s cubic-bezier(.1,.7,.25,1) both,vfade .25s linear both}}
@media (max-width:900px){#viewDialog #vVote{top:calc(100% + 12px)}#viewDialog .vside{top:calc(100% + 102px)}}
#viewDialog.avote{--vh:clamp(26px,calc(var(--vw) * .13),46px);translate:0 calc(var(--vh) * -.5 - 22px)}
#viewDialog:not(.avote){translate:none}
#viewDialog.sortie #vVote.vitem{animation:vrentre .5s cubic-bezier(.55,0,.85,.4) both}      /* à la fermeture, l'encadré remonte et rentre sous la carte */
@keyframes vrentre{from{transform:none;opacity:1}to{transform:translateY(calc(-100% - 30px));opacity:0}}

/* Signalement, modération, textes légaux */
.pied{margin:28px auto 18px;text-align:center;font-size:9px;opacity:.75}
.pied a,.cgu a{color:inherit;text-decoration:underline}
.pied .modbtn{margin-left:10px;font-size:9px;padding:4px 8px}
.cgu{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:9px;line-height:1.5;text-align:left}
.cgu input{flex:none;margin-top:2px}
#reportDialog label{display:block;margin:10px 0 4px}
#reportDialog select,#reportDialog textarea{width:100%;box-sizing:border-box;font:inherit;font-size:10px;padding:6px;border:3px solid var(--line);background:var(--paper);color:var(--ink)}
#modDialog{max-width:min(94vw,640px);max-height:86vh;overflow:auto}
.modcarte{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding-bottom:12px;border-bottom:3px dashed var(--line)}
.modvis{flex:none;width:96px;cursor:default}
.modinfo{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:10px;line-height:1.5}
.modtitre{font-weight:700}.moddet{opacity:.8;font-style:italic}
#legalDialog{max-width:min(94vw,620px);max-height:86vh;overflow:auto;line-height:1.6}
#legalDialog h3{font-size:10px;margin:14px 0 4px}
#legalDialog p,#legalDialog li{margin:4px 0}
#legalDialog ul{padding-left:18px;margin:4px 0}
#viewDialog #vSignal[hidden]{display:none}

/* ---- easter egg dans l'easter egg : couteau rouge, loterie des 5 cases, espadon ---- */
.packbox.oeuf1.rouge{filter:brightness(1.45) saturate(1.7) drop-shadow(0 0 12px #ff2a2a) drop-shadow(0 0 4px #ff2a2a)}
.pkcase{position:absolute;pointer-events:none;box-sizing:border-box}
.pkcase.arme{border:1px solid rgba(255,90,90,.45);background:rgba(255,30,30,.24);animation:case-arme 1.6s steps(4) infinite}
@keyframes case-arme{50%{background:rgba(255,40,40,.66);border-color:rgba(255,255,255,.75);box-shadow:0 0 7px 2px rgba(255,30,30,.95),inset 0 0 3px rgba(255,255,255,.55)}}
.pkcase.tension{background:rgba(255,30,30,.3);animation:case-tension 1.1s steps(4) infinite}
@keyframes case-tension{50%{background:rgba(120,0,10,.55)}}
.pkcase.gagnante{background:#ff2a2a;box-shadow:0 0 16px 5px #ff2a2a,0 0 4px 1px #fff;animation:case-flash .26s steps(2) infinite}
@keyframes case-flash{50%{background:#fff;box-shadow:0 0 22px 8px #ff2a2a}}
.egg-p.gros{width:9px;height:9px;margin:-4px 0 0 -4px;animation-duration:1s}
.sci.plante{pointer-events:none}
.sci.plante svg{animation:plante .14s steps(2) 4}
@keyframes plante{50%{transform:translate(2px,-3px) rotate(-3deg)}}
.sci.espadon svg{filter:drop-shadow(2px 0 rgba(255,26,26,.9)) drop-shadow(-2px 0 rgba(255,138,0,.8)) drop-shadow(0 0 6px #ff2a2a) drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.sci.espadon:not(.cutting) svg{animation:couteau-gl 2.2s steps(1) infinite}
.sci.espadon.cutting svg{animation:couteau-coupe .16s steps(2) infinite}
.glitchcol.rouge{background:repeating-linear-gradient(180deg,#ff1a1a 0 6px,transparent 6px 16px,#ff8a00 16px 22px,transparent 22px 40px);animation-duration:1.6s}
html.calme .pkcase.arme{animation:none}
.egg-p.braise{width:4px;height:4px;margin:-2px 0 0 -2px;animation-duration:1.2s;animation-timing-function:ease-out;box-shadow:0 0 6px var(--c)}
.coup-espadon{position:fixed;z-index:10000;height:6px;margin-top:-3px;transform-origin:0 50%;pointer-events:none;background:linear-gradient(90deg,transparent,#ff2a2a 20%,#fff 50%,#ff2a2a 80%,transparent);box-shadow:0 0 14px 3px #ff2a2a;animation:coup-espadon .65s steps(6) forwards}
@keyframes coup-espadon{0%{opacity:1;height:8px}60%{opacity:.9}100%{opacity:0;height:1px}}
html.calme .coup-espadon,html.calme .egg-p.braise{display:none}

/* carte jetable (glisser vers la corbeille) */
.fancard.jetable{cursor:grab;touch-action:none}
.fancard.tient{cursor:grabbing;box-shadow:8px 10px 0 rgba(0,0,0,.35)}

/* zone secrète du glèv (zone mystérieuse translucide, point d'interrogation) */
.zone-secrete{position:fixed;z-index:39;pointer-events:none;image-rendering:pixelated}
.zone-secrete svg{display:block;width:100%;height:100%}
.zone-secrete .zf{fill:var(--accent);fill-opacity:.14}
.zone-secrete .zb{fill:var(--accent);fill-opacity:.8}
.zone-secrete .zc{fill:var(--ink);fill-opacity:.35}
.zone-secrete .zq{fill:var(--ink);fill-opacity:.55}
.zone-secrete.pret{animation:zone-pulse 1.8s steps(4) infinite}
.zone-secrete.sur,.zone-secrete.ok{filter:drop-shadow(0 0 10px var(--accent));animation:none}
.zone-secrete.sur .zf,.zone-secrete.ok .zf{fill-opacity:.3}
@keyframes zone-pulse{50%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.zone-secrete.pret{animation:none}}

/* sélecteur de langue (drapeaux en pixels) */
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.lang-btn{padding:4px;width:48px;height:36px;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.lang-btn svg{width:32px;height:21px;image-rendering:pixelated;outline:2px solid var(--line);outline-offset:0;display:block}
.lang-btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent)}

/* arrivée sur le site : rien ne déborde pendant que les éléments entrent depuis l'extérieur */
html.intro,html.intro body{overflow:hidden}
html.intro #boostTimer{opacity:0}      /* le temps restant n'apparaît qu'après toutes les autres animations */
html.boost-fixe,html.boost-fixe body{overflow:hidden}      /* onglet Boosters : la page ne défile pas (donc pas de barre de défilement qui apparaît ou disparaît) */

/* booster déplacé vers la corbeille : il passe devant tout le site (y compris le logo) et n'est plus rogné par la scène */
#boostStage:has(.pack.tient){overflow:visible}
.pack.tient,.packs.file .pack.tient{z-index:9000!important}

/* choix d'une carte dans un godpack du dealer */
#godChoix{width:min(96vw,980px);max-width:none}
#godChoix .gc-cartes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}
#godChoix .gc-carte{width:clamp(110px,16vw,170px);padding:4px;background:var(--panel);cursor:pointer;line-height:0}
#godChoix .gc-carte:hover:not(:disabled){transform:translateY(-4px)}
#godChoix .gc-fan{position:relative;left:auto;top:auto;width:100%;animation:none;box-shadow:none}

/* étincelles permanentes autour des cartes god float (godfx.js) : sous la carte et les infos, sans jamais gêner les clics */
#viewDialog #vFx{position:absolute;left:-70px;top:-70px;z-index:0;pointer-events:none;image-rendering:pixelated}

/* schlass et glèv : apparition plus fluide (zone et page en fondu progressif, filtres fixes gardés dans leur propre calque) */
.sci-zone:has(.sci.couteau),.sci-zone:has(.sci.espadon){animation-timing-function:cubic-bezier(.2,.8,.3,1)}
#vueBoosters.entre:has(.sci.couteau),#vueBoosters.entre:has(.sci.espadon){animation:bf-entre-opa .5s ease-out both;will-change:opacity}
.sci.couteau svg,.sci.espadon svg{will-change:transform}

/* bulle « quelque chose ne va pas… » (ciseau qui ne se plante pas dans une case rouge) */
.bulle-bizarre{position:fixed;z-index:10000;transform:translate(-50%,-100%);padding:8px 12px;max-width:min(260px,80vw);text-align:center;font-size:9px;line-height:1.5;background:var(--panel);color:var(--ink);border:3px solid var(--line);box-shadow:3px 3px 0 var(--line);pointer-events:none}
.bulle-bizarre::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-6px;width:9px;height:9px;background:var(--panel);border:3px solid var(--line);border-top:0;border-left:0;transform:rotate(45deg) translate(-3px,-3px)}
#floatTip .nonplus{display:block;margin-top:10px;font-size:8px;padding:6px 8px;min-height:0;box-shadow:2px 2px 0 var(--line);border-width:2px}

/* ---- légende « Jamais sans le … » et particules autour du saint schlass / du glèv ---- */
.sci-label.lab-sch{color:#fff;text-shadow:2px 0 #00f0ff,-2px 0 #ff2bd6,0 0 6px rgba(0,240,255,.7);animation:lab-gl 2.4s steps(1) infinite}
@keyframes lab-gl{0%,88%,100%{transform:none}91%{transform:translateX(3px) skewX(-8deg)}95%{transform:translateX(-3px)}}
.sci-label.lab-glev{color:#fff4d0;text-shadow:0 0 4px #ff6a00,0 0 10px #ff1a1a,2px 2px 0 #8a0010;animation:lab-feu .7s steps(3) infinite}
@keyframes lab-feu{0%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-1px);filter:brightness(1.35)}100%{transform:translateY(0);filter:brightness(1)}}
.sci-label.lab-bascule{animation:none;color:#fff}
.sci-label.bascule-sch{text-shadow:3px 0 #00f0ff,-3px 0 #ff2bd6,0 0 12px #00f0ff;animation:bascule-sch .9s linear!important}
@keyframes bascule-sch{0%,100%{transform:none}20%{transform:translateX(5px) skewX(-12deg) scale(1.1)}40%{transform:translateX(-5px) scale(1.2)}60%{transform:translateX(3px) skewX(10deg) scale(1.1)}80%{transform:scale(1.15)}}
.sci-label.bascule-glev{text-shadow:0 0 6px #ffd84a,0 0 16px #ff6a00,0 0 28px #ff1a1a;animation:bascule-glev 1.5s linear!important}
@keyframes bascule-glev{0%,100%{transform:none}10%{transform:translate(-4px,2px) scale(1.15) rotate(-2deg)}20%{transform:translate(5px,-3px) scale(1.3) rotate(2deg)}35%{transform:translate(-6px,3px) scale(1.45) rotate(-3deg)}50%{transform:translate(6px,-2px) scale(1.55) rotate(3deg)}70%{transform:translate(-3px,2px) scale(1.35)}85%{transform:scale(1.2)}}
.onde-glev{position:fixed;z-index:9999;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:4px solid #ff6a00;box-shadow:0 0 18px #ff1a1a,inset 0 0 18px #ff6a00;pointer-events:none;animation:onde-glev 1.2s ease-out forwards}
@keyframes onde-glev{0%{transform:scale(.3);opacity:1}100%{transform:scale(22);opacity:0;border-width:1px}}
.aura{position:absolute;inset:0;pointer-events:none;z-index:3}
.aura i{position:absolute;display:block;opacity:0;pointer-events:none;animation:aura-p 1.4s linear infinite}
@keyframes aura-p{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.aura-sch i{box-shadow:0 0 4px currentColor}
.aura-glev i{box-shadow:0 0 6px #ff6a00}
html.calme .aura,html.calme .onde-glev{display:none}
@media (prefers-reduced-motion:reduce){.aura,.onde-glev{display:none}.sci-label{animation:none!important}}

/* bouton « Précédente » à côté de « Suivante » */
.pk-votes button.prec{grid-column:span 3;background:var(--panel);color:var(--ink)}
.pk-votes button.suiv.avec-prec{grid-column:span 3}

/* booster du dealer : le panneau « Dealer » laisse place au bouton « main » */
#rateRow.rate-panel .rp-t,#rateRow.rate-panel .rp-i{transition:opacity .35s ease,transform .35s ease}
#rateRow.rate-panel.rend .rp-t,#rateRow.rate-panel.rend .rp-i{opacity:0;transform:translateY(-10px)}
.rendre{position:fixed;z-index:70;width:150px;margin-left:-75px;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.rd-btn{width:92px;box-sizing:border-box;padding:10px 6px 8px;display:flex;justify-content:center;background:var(--panel);color:var(--ink);border:4px solid var(--line);box-shadow:6px 6px 0 var(--line);
  transform:translateY(160%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .3s ease-out,border-color .25s ease,background .25s ease}
.rd-btn svg{width:48px;height:51px;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.28));transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.rendre span{font-size:8px;line-height:1.6;text-align:center;opacity:0;transition:opacity .2s ease}
.rendre.vue .rd-btn{transform:none;opacity:1}
.rendre.vue span{opacity:1;transition:opacity .9s ease .45s}      /* le texte apparaît progressivement sous le bouton */
.rd-btn.ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,var(--panel));color:var(--accent);transform:scale(1.1)!important}
.rd-btn.ok svg{transform:translateY(-3px) rotate(-8deg)}
html.calme .rd-btn,html.calme .rendre span{transition:none}
.trash{bottom:44px}
.pk-votes button.prec.seule{grid-column:1/-1;font-size:calc(var(--fs) * .85);padding:calc(var(--fs) * .35) 1px}

/* easter egg du compteur vide */
.pack.gris{filter:grayscale(1) brightness(.72);transition:filter .35s ease}
.pack.gris-ok{animation:gris-ok .6s cubic-bezier(.2,.9,.3,1)}
@keyframes gris-ok{0%{scale:1;filter:brightness(2.4)}35%{scale:1.07;filter:brightness(1.6)}100%{scale:1;filter:grayscale(1) brightness(.72)}}
.pack.cadeau{animation:pack-cadeau 1.3s cubic-bezier(.2,.9,.3,1)}
@keyframes pack-cadeau{0%{scale:1;filter:brightness(1)}20%{scale:1.12;filter:brightness(2.2) saturate(1.6)}45%{scale:.97;filter:brightness(1.4)}70%{scale:1.05;filter:brightness(1.2)}100%{scale:1;filter:none}}
.scint.v2 i{box-shadow:0 0 8px var(--c);animation-duration:1.1s}
html.calme .pack.gris-ok,html.calme .pack.cadeau{animation:none}

/* ---------- Brouillons : gros bouton qui s'agrandit vers le bas (comme les dossiers de la galerie) ---------- */
.side .bbox{position:relative;display:flex;flex-direction:column;margin-top:12px;background:var(--panel);border:4px solid var(--line);box-shadow:6px 6px 0 var(--line);overflow:hidden;transition:height .45s cubic-bezier(.8,0,.2,1)}
.side .bbox .bhead{flex:none;width:100%;min-height:clamp(110px,14vw,150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 10px;border:0;box-shadow:none;background:transparent;font-size:10px;line-height:1.5;text-align:center;transition:min-height .45s cubic-bezier(.8,0,.2,1),padding .45s cubic-bezier(.8,0,.2,1)}
.side .bbox .bhead:active{transform:none}
.side .bbox .bhead small{font-size:7px;opacity:.7}
.side .bbox.ouvert .bhead{min-height:0;padding:12px 10px 6px}
.side .bbox .bstrip{flex:1;min-height:0;display:flex;gap:14px;align-items:center;overflow-x:auto;overflow-y:hidden;padding:10px 14px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-x:contain}
.side .bbox .bstrip[hidden]{display:none}
.side .bbox .bstrip .mini{flex:none;width:128px}
.side .bbox .bstrip .empty{margin:auto;text-align:center}
html.calme .side .bbox,html.calme .side .bbox .bhead{transition:none}

/* traînée selon l'arme : ciseau = noire (réglage de base) ; schlass = dorée et brillante ; glèv = rouge avec glitch */
.cutline.or .c1,.cutline.trglitch .c1{fill:var(--logo-bg)}
.cutline .cm{stroke:none}
.cutline.or .c2{stroke:#fffbe0}
.cutline.or .cm{animation:tr-brille .7s steps(1) infinite}
.cutline.or .cm:nth-of-type(2n){animation-delay:-.2s}
.cutline.or .cm:nth-of-type(3n){animation-delay:-.45s}
@keyframes tr-brille{0%{filter:brightness(1)}30%{filter:brightness(1.55) saturate(1.2)}55%{filter:brightness(1)}80%{filter:brightness(1.8)}}
.cutline.trglitch .c2{stroke:#fff}
.cutline.trglitch .cm{animation:tr-glitch .32s steps(1) infinite}
.cutline.trglitch .cm:nth-of-type(2n){animation-delay:-.11s}
.cutline.trglitch .cm:nth-of-type(3n){animation-delay:-.2s}
@keyframes tr-glitch{0%{transform:translate(0,0);filter:none}20%{transform:translate(3px,-1px);filter:drop-shadow(-3px 0 0 #00f0ff) drop-shadow(3px 0 0 #ff00c8)}40%{transform:translate(-4px,1px);filter:none}60%{transform:translate(2px,2px);filter:drop-shadow(3px 0 0 #00f0ff) drop-shadow(-3px 0 0 #ff00c8)}80%{transform:translate(-1px,-2px);filter:brightness(1.6)}}
html.calme .cutline .cm{animation:none}
@media (prefers-reduced-motion:reduce){.cutline .cm{animation:none!important}}

/* booster jeté ou rendu au dealer : il continue de rétrécir vers la corbeille / la main au lieu d'être coupé par le bord de l'écran de jeu ou de passer sous le panneau Dealer */
#boostStage:has(.pack.jete){overflow:visible}
.pack.jete,.packs.file .pack.jete{z-index:9000!important}

/* le booster jeté / rendu rétrécit franchement vers la corbeille ou la main, et ne s'efface qu'à la fin */
.packs.file .pack.jete{--sj:.08;transition:transform .8s cubic-bezier(.45,0,.2,1),opacity .8s cubic-bezier(.6,0,1,1)}

/* indice du saint schlass : plus discret en mode sombre (les points dorés ressortent beaucoup plus sur fond foncé) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .indice-sch i{background:#4a3f1d;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 4px 1px rgba(255,210,63,.1)}
:root:not([data-theme="light"]) .indice-sch i:nth-child(odd){background:#555248;box-shadow:0 0 3px 1px rgba(255,226,122,.1)}
:root:not([data-theme="light"]) .indice-sch b{background:#555248;box-shadow:0 -3px 0 #403718,0 3px 0 #403718,-3px 0 0 #403718,3px 0 0 #403718,0 -6px 0 #352f17,0 6px 0 #352f17,-6px 0 0 #352f17,6px 0 0 #352f17,0 0 6px 1px rgba(255,210,63,.1)}
:root:not([data-theme="light"]) .indice-sch{opacity:.6}}
:root[data-theme="dark"] .indice-sch i{background:#4a3f1d;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 4px 1px rgba(255,210,63,.1)}
:root[data-theme="dark"] .indice-sch i:nth-child(odd){background:#555248;box-shadow:0 0 3px 1px rgba(255,226,122,.1)}
:root[data-theme="dark"] .indice-sch b{background:#555248;box-shadow:0 -3px 0 #403718,0 3px 0 #403718,-3px 0 0 #403718,3px 0 0 #403718,0 -6px 0 #352f17,0 6px 0 #352f17,-6px 0 0 #352f17,6px 0 0 #352f17,0 0 6px 1px rgba(255,210,63,.1)}
:root[data-theme="dark"] .indice-sch{opacity:.6}

/* ---- carte rare ou mieux qui sort du booster : reflet brillant qui la parcourt + petits éclairs brefs autour ---- */
.rfx{position:absolute;inset:0;pointer-events:none;z-index:6;--c:#8fd8ff}
.rfx[data-r=epic]{--c:#d9a0ff}.rfx[data-r=mythic]{--c:#ff9ad5}.rfx[data-r=legendary]{--c:#ffe27a}
.rfx .sh{position:absolute;inset:0;overflow:hidden}
.rfx .sh i{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.0) 12%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 88%,transparent 100%);mix-blend-mode:overlay;transform:translateX(-330%) skewX(-18deg);animation:rfx-passe 1.15s cubic-bezier(.45,.05,.3,1) var(--d,1s) 1 both;will-change:transform}
.rfx .sh i+i{background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.85) 46.5% 53.5%,transparent 57%);mix-blend-mode:normal;opacity:.55;animation-delay:calc(var(--d,1s) + .08s)}      /* même largeur que le reflet large : sinon la raie fine s'arrêtait au milieu de la carte */
@keyframes rfx-passe{from{transform:translateX(-330%) skewX(-18deg)}to{transform:translateX(420%) skewX(-18deg)}}
.rfx b{position:absolute;width:20px;height:32px;margin:-16px 0 0 -10px;background:var(--c);clip-path:polygon(45% 0,80% 0,58% 36%,88% 36%,28% 100%,44% 56%,12% 56%);opacity:0;filter:drop-shadow(0 0 3px #fff);transform:rotate(var(--r,0deg));animation:rfx-eclair .5s steps(1) var(--d,1s) 1 both}
@keyframes rfx-eclair{0%{opacity:0}10%{opacity:1}35%{opacity:.2}50%{opacity:1}75%{opacity:0}100%{opacity:0}}
html.calme .rfx,.rfx[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.rfx{display:none}}

/* ---- nouveau système de vote : le booster a les dimensions d'une carte, sans encadré ; on glisse la carte à droite (j'aime) ou à gauche (je n'aime pas) ---- */
.pack{aspect-ratio:40/49;border:0;background:none;box-shadow:none}
.pack.pret,.pack.ouvert{box-shadow:none}
.pack.on{background:none;outline:4px solid var(--accent);outline-offset:5px}
.pack.dealer{border:0;background:none}
.pack.cutting{border-color:transparent}
.packs.file .pack.tient{box-shadow:none}
.packbox{left:0;right:0;top:0;bottom:0}
.packbox svg,.packbox .pkart{aspect-ratio:40/49}
.pkview .fancard{left:0;top:0;width:100%}
.pkview .fancard:not(.derriere){z-index:2;cursor:grab;user-select:none;-webkit-user-select:none}
.pkview .fancard.derriere{z-index:1;animation:none!important;pointer-events:none}
.pkview.swipe .fancard,.pkview.reveal .fancard{animation:none}
.pkview .pk-cnt{top:calc(100% + 10px);left:0;right:0;bottom:auto}
.pkview.fini .pk-cnt{top:auto}
.fancard.sw{cursor:grabbing!important;box-shadow:8px 10px 0 rgba(0,0,0,.35);z-index:3!important}
.fancard.vers-d{outline:4px solid #3ddc84;outline-offset:2px}
.fancard.vers-g{outline:4px solid #ff4d6d;outline-offset:2px}
.fancard.part{animation:none;z-index:9500}
#boostStage:has(.fancard.sw){overflow:visible}
.pack:has(.fancard.sw){z-index:9000!important}

/* cartes du jour : deux boutons de vote sous la visionneuse (j'aime / je n'aime pas) */
.vvotes .vbin{width:auto;height:auto;min-width:0;min-height:0;padding:9px 14px;font-size:10px;line-height:1.2;color:#fff;border:3px solid var(--line);box-shadow:3px 3px 0 var(--line);cursor:pointer}
.vvotes .vbin.aime{background:#008751}.vvotes .vbin.aimepas{background:#b3002f}
.vvotes .vbin:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.vvotes .vbin:disabled{opacity:.5;cursor:default}

/* fin de booster : plus d'écriteau « Terminé » ni de coche ; l'étiquette « À toi » / « Dealer » s'efface doucement */
.pack.pret .badge,.pack.ouvert .badge{display:none}
.pack .tag.fond{opacity:0;transition:opacity 1.4s linear}
.pkview.fini .pk-pile,.pkview.fini .pk-ok{display:none}
/* le logo et les onglets disparaissent pendant l'ouverture des boosters */
html.boost-fixe.sans-haut header.top{position:fixed;left:var(--hx);top:var(--hy);width:var(--hw);margin:0;z-index:30;pointer-events:none;animation:haut-sort .5s cubic-bezier(.5,0,.85,.4) both}
html.haut-entre header.top{animation:haut-entre .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes haut-sort{from{transform:none;opacity:1;visibility:visible}to{transform:translateY(calc(-100% - 60px));opacity:0;visibility:hidden}}
@keyframes haut-entre{from{transform:translateY(calc(-100% - 60px));opacity:0}to{transform:none;opacity:1}}
html.calme.boost-fixe.sans-haut header.top{animation:none;display:none}
html.calme.haut-entre header.top{animation:none}
@media (prefers-reduced-motion:reduce){html.boost-fixe.sans-haut header.top{animation:none;display:none}html.haut-entre header.top{animation:none}}

/* glisser une carte : elle s'assombrit en approchant du bord de l'écran et une étiquette se lit dessus */
.fancard .swv{position:absolute;inset:0;z-index:8;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,var(--va,0))}
.fancard .swv b{font-size:clamp(13px,2vw,24px);padding:10px 14px;border:4px solid currentColor;background:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;opacity:var(--vt,0)}
.fancard .swv.d b{color:#3ddc84;transform:rotate(-8deg)}
.fancard .swv.g b{color:#ff5d7d;transform:rotate(8deg)}
.fancard .swv.p b{color:#b9b9c4}      /* « Passer » (carte du dealer déjà votée) : gris, ni vert ni rouge */

/* compte rendu de fin de session */
#rapport{width:min(96vw,1000px);max-width:none;max-height:92vh;overflow:auto}
#rapport .rp-cartes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}
#rapport .rp-carte{position:relative;width:clamp(96px,14vw,150px);padding:4px;background:var(--panel);cursor:pointer;line-height:0}
#rapport .rp-carte:hover:not(:disabled){transform:translateY(-3px)}
#rapport .rp-fan{position:relative;left:auto;top:auto;width:100%;animation:none;box-shadow:none}
#rapport .rp-marque{position:absolute;inset:4px;display:none;align-items:center;justify-content:center;background:rgba(160,0,40,.62);color:#fff;font-size:11px;line-height:1.3;text-align:center;text-transform:uppercase;pointer-events:none}
#rapport .rp-carte.sel{outline:4px solid #ff4d6d;outline-offset:1px}
#rapport .rp-carte.sel .rp-marque{display:flex}
#rapport .rp-carte:disabled{opacity:.75;cursor:default}
#rapport .rp-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}

/* arrivée du compte rendu : la fenêtre monte et grandit en douceur */
:is(#rapport,.fenetre)[open]{animation:rp-entre .55s cubic-bezier(.2,.85,.25,1) both;will-change:transform,opacity}
:is(#rapport,.fenetre)[open]::backdrop{animation:rp-fond .55s ease-out both}
@keyframes rp-entre{from{opacity:0;transform:translateY(46px) scale(.9)}to{opacity:1;transform:none}}
@keyframes rp-fond{from{opacity:0}to{opacity:1}}
html.calme :is(#rapport,.fenetre)[open],html.calme :is(#rapport,.fenetre)[open]::backdrop{animation:none}
@media (prefers-reduced-motion:reduce){:is(#rapport,.fenetre)[open],:is(#rapport,.fenetre)[open]::backdrop{animation:none}}

/* sortie du compte rendu : la fenêtre redescend en s'effaçant */
:is(#rapport,.fenetre).sort[open]{animation:rp-sort .45s cubic-bezier(.5,0,.8,.4) both}
:is(#rapport,.fenetre).sort[open]::backdrop{animation:rp-fond-sort .45s ease-in both}
@keyframes rp-sort{from{opacity:1;transform:none}to{opacity:0;transform:translateY(60px) scale(.92)}}
@keyframes rp-fond-sort{from{opacity:1}to{opacity:0}}


/* fenêtres à part (brouillons, « Tout voir ») : même allure et mêmes animations que le compte rendu */
.fenetre{width:min(96vw,1000px);max-width:none;max-height:92vh;overflow:auto}
#brouillons{width:min(96vw,760px)}
.fenetre .rp-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.bouton-brouillons{width:100%;padding:14px 10px;font-size:10px}
#brouillons .saved{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px 16px;margin:12px 0}
#brouillons .mini .t{color:var(--ink)}
#toutVoir .tout-grille{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:16px 12px;margin:12px 0;align-items:start}
#toutVoir .tv-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
#toutVoir .tv-cell .mini{width:100%}
#toutVoir .tv-cell .mini .t{display:none}
#toutVoir .tv-cell>button{width:100%;font-size:6px;padding:5px 2px;box-shadow:2px 2px 0 var(--line);border-width:2px}
#toutVoir .tv-vide{grid-column:1/-1;text-align:center;opacity:.8;padding:24px 8px}
#toutVoir .tv-pages{display:flex;gap:10px}
#toutVoir .tv-pages[hidden]{display:none}
#toutVoir .tv-pages button:disabled{opacity:.45;cursor:default}
@media (max-width:760px){#toutVoir .tout-grille{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* pendant qu'on tient un booster, la corbeille / le bouton « rendre au dealer » passent PAR-DESSUS lui ; dès qu'on le lâche (classe .tient retirée), il repasse au-dessus et son animation se joue */
html:has(.pack.tient) .trash{z-index:9500}
html:has(.pack.tient) .rendre{z-index:9500}      /* le bouton « rendre » est dans #rateRow (contexte d'empilement à part) : on le monte en entier pendant le glissé d'un booster du dealer */

/* les boosters s'affichent AU-DESSUS du panneau blanc « Dealer » (grand écran) */
@media (min-width:900px){#rateRow.rate-panel{z-index:10}}

/* « Mes brouillons » : chaque brouillon est encadré d'un contour noir */
#brouillons .mini{border:4px solid var(--line);background:var(--panel);box-shadow:4px 4px 0 var(--line);padding:8px;gap:6px;cursor:default}
#brouillons .mini canvas{border:3px solid var(--line);background:#fff}
#brouillons .mini .t{color:var(--ink);padding:2px}
#brouillons .mini .acts{margin-top:2px}

/* « Tout voir » : fenêtre aux couleurs du site (couleur d'accent) */
#toutVoir{border:4px solid var(--accent);box-shadow:8px 8px 0 var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel));padding:0 16px 16px}
#toutVoir::-webkit-scrollbar{width:12px}
#toutVoir::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid transparent;background-clip:padding-box}
#toutVoir h2{position:sticky;top:0;z-index:2;margin:0 -16px 12px;padding:14px 18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--on-accent,#fff);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000)}
#toutVoir .hint{color:var(--accent);opacity:1}
#toutVoir .tv-cell{padding:6px 6px 6px;background:color-mix(in srgb,var(--accent) 16%,var(--panel));border:3px solid var(--accent);box-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 60%,#000)}
#toutVoir .tv-cell>button{background:var(--accent);color:var(--on-accent,#fff);border:2px solid color-mix(in srgb,var(--accent) 55%,#000);box-shadow:none}
#toutVoir .tv-cell>button:hover:not(:disabled){filter:brightness(1.12)}
#toutVoir .rp-pied{padding-top:12px;border-top:3px dashed var(--accent)}
#toutVoir .tv-nb{color:var(--accent);font-weight:700}
#toutVoir .tv-pages button,#toutVoir .tv-ferme{background:var(--accent);color:var(--on-accent,#fff);border:3px solid color-mix(in srgb,var(--accent) 55%,#000);box-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 55%,#000)}
#toutVoir .tv-pages button:disabled{opacity:.4}

/* « Tout voir » : taille fixe (emplacements invisibles pour compléter la page, message centré par-dessus) */
#toutVoir .tout-grille{position:relative}
#toutVoir .tv-fant{visibility:hidden;pointer-events:none}
#toutVoir .tout-grille>.empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;grid-column:auto}
#toutVoir .tv-msg{min-height:1.6em}

/* encadré d'accueil (première visite) */
#accueil{width:min(92vw,460px)}
#accueil .ac-bloc{margin:14px 0}
#accueil .lbl{margin-bottom:8px}
#accueil .ac-mus{display:flex;align-items:center;gap:10px;margin:16px 0 6px;cursor:pointer}

/* outils de dessin : boutons à petite image pixel art ; « Annuler / Rétablir » en haut, les outils en dessous */
.outils-haut,.outils-bas{display:grid;gap:8px}
.outils-haut{grid-template-columns:1fr 1fr;margin-bottom:12px;padding-bottom:12px;border-bottom:3px dashed var(--line)}
.outils-bas{grid-template-columns:1fr 1fr}
button.outil{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;min-width:0}
button.outil svg{width:24px;height:24px;display:block}
button.outil span{font-size:.8em;line-height:1.1;overflow-wrap:anywhere}
.outils-bas>button:not(.outil){grid-column:1/-1}      /* bouton « ? » (raccourcis) : sur toute la largeur, sous les outils */

/* halo de rareté des listes : suit la forme réelle du cadre (le bord extérieur transparent n'ajoute plus de ligne) */
.mini[class*=" r-"]>.rframe{box-shadow:none!important;filter:drop-shadow(0 0 calc(var(--hs) * .6) color-mix(in srgb,var(--rc) calc(var(--ho) * 100%),transparent)) drop-shadow(0 0 calc(var(--hs) * 1.4) color-mix(in srgb,var(--rc) calc(var(--ho) * 45%),transparent))}

/* Easter egg des réglages : fenêtre découpée au saint schlass */
@keyframes indice-reg-vers{0%{opacity:0;transform:translate(0,0)}18%{opacity:.9}80%{opacity:.65}100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
.reg-trace{position:fixed;z-index:61;pointer-events:none;overflow:visible}
.reg-moitie{position:fixed;z-index:60;pointer-events:none}
.reg-moitie.or{filter:drop-shadow(0 0 4px rgba(255,210,63,.9)) drop-shadow(0 0 1px #fff3b0)}
#bfSecret{position:fixed;z-index:59;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:#ffd23f;background:#150f2b;border:3px solid #ffd23f;box-shadow:0 0 0 2px #150f2b,0 0 10px 2px rgba(255,210,63,.6);cursor:pointer;image-rendering:pixelated}
#bfSecret:disabled{cursor:default}
#bfSecret.pret{animation:secret-pulse 1.4s steps(4) infinite}
#bfSecret.go{animation:secret-go .7s steps(7) forwards}
@keyframes secret-pulse{50%{box-shadow:0 0 0 2px #150f2b,0 0 16px 5px rgba(255,210,63,.85)}}
@keyframes secret-go{0%{transform:scale(1)}30%{transform:scale(1.35);color:#fff;background:#ffd23f}60%{transform:scale(.9) rotate(8deg)}100%{transform:scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){#bfSecret.pret{animation:none}}


/* mention discrète sous la carte de la visionneuse (première visite / après « Revoir la visite ») : apparaît quand la carte est prête, s'efface doucement dès qu'on la prend */
#vIncline{position:absolute;z-index:3;left:0;right:0;top:calc(100% + 4px);margin:0;text-align:center;font-size:9px;letter-spacing:.04em;color:#fff;text-shadow:1px 1px 0 #000,0 0 6px #000;opacity:0;pointer-events:none;transition:opacity 1.4s ease}
#vIncline.on{opacity:.8;transition-duration:.9s}

/* ---------- Éditeur : outil de sélection + couches ---------- */
#selcv{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;pointer-events:none;image-rendering:pixelated}
.outils-bas>button.outil:nth-child(7){grid-column:1/-1}
.laylist{--rh:54px;height:calc(5 * (var(--rh) + 4px));overflow-y:auto;overflow-x:hidden;border:3px solid var(--line);background:var(--paper);padding:2px;box-sizing:content-box;touch-action:pan-y;overscroll-behavior:contain}
.linner{position:relative;width:100%}
.lrow{position:absolute;left:0;right:0;top:0;transition:transform .2s ease;touch-action:none;cursor:grab;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:4px;row-gap:3px;align-items:center;box-sizing:border-box;height:var(--rh);margin:0;padding:4px 5px;border:3px solid var(--line);background:var(--panel);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lrow.act{background:var(--accent);color:#fff}
.lrow .lnom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding:3px 4px;color:inherit;font-size:8px;cursor:text}
.lrow .lnom{justify-self:start;max-width:100%}
.lrow.apercu{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lrow.apercu .lnom{font-size:11px;justify-self:auto;cursor:pointer;text-align:center;padding:0}
body.apercu:not(.anim) [data-tool]:not([data-tool=move]){opacity:.4;filter:grayscale(1);pointer-events:none}
.lrow.marque{outline:3px dashed var(--accent);outline-offset:-3px}
.lrow.marque.act{outline-color:#fff}
.ctxmenu{position:fixed;z-index:9999;min-width:150px;background:var(--panel);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:3px;display:flex;flex-direction:column;gap:2px}
.ctxmenu button{text-align:left;font-size:9px;padding:7px 9px;border-width:2px;box-shadow:none;width:100%}
.ctxmenu button:disabled{opacity:.4}
.lrow .lnom-in{min-width:0;width:100%;box-sizing:border-box;font-size:8px;padding:3px 4px;border-width:2px}
.lrow .lbtns{display:flex;gap:3px;justify-content:flex-end}
.lrow button.lib{width:22px;height:22px;min-width:0;padding:3px;box-shadow:2px 2px 0 var(--line);border-width:2px}
.lrow button.lib svg{display:block;width:100%;height:100%}
.lrow .lop{grid-column:1;width:100%;margin:0;min-width:0}
.lrow .lpc{grid-column:2;font-size:7px;text-align:right;min-width:26px}
.lrow.prise{z-index:5;opacity:.92;box-shadow:4px 4px 0 var(--line);cursor:grabbing;transition:none}
.lrow:first-child{cursor:default}
.laylist.deplace{cursor:grabbing}
.lrow.vise{outline:3px dashed var(--accent);outline-offset:-3px}
html.tel .studio .side #layersPanel{max-height:none}

.selbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.selbtns button{padding:7px 2px;font-size:8px;min-width:0}
.selbtns button:disabled{opacity:.4}
body.apercu:not(.anim) .selbtns button{opacity:.4;pointer-events:none}
/* La couche sur laquelle on travaille s'affiche toujours à fond : pas de réglage d'opacité pour elle */
.lrow.act .lop,.lrow.act .lpc{display:none}
.lrow.act{grid-template-rows:auto;align-content:center}

/* Éditeur de float : zoom sur la carte fixe */
#flDialog #flPreview{overflow:hidden;touch-action:pan-y}
#flDialog #flPreview.zoome{touch-action:none;cursor:grab}
#flDialog .flzoom{position:relative;transform-origin:0 0;will-change:transform}
#flDialog .flzoomctl{display:flex;justify-content:center;gap:6px;margin-top:6px}
#flDialog .flzoomctl button{padding:4px 0;min-width:34px;font-size:10px}

/* calque des contours de la sélection : plein écran, en pixels d'écran (la sélection peut dépasser de la carte) */
#selcv{position:fixed!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100vw!important;height:100vh!important;z-index:40;pointer-events:none}

/* ---------- Amis et échanges ---------- */
#profAmi .row,#profSocial .amis-lig{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.amis-bloc{margin-top:12px}.amis-bloc .lbl,#trDialog .lbl{font-size:9px;margin:8px 0 6px}
.amis-lig{margin:6px 0;font-size:9px}
.amis-lig .trinfo{flex:1 1 140px;min-width:0}.amis-lig .trst{font-size:8px;opacity:.8}
.amis-lig.aTraiter .trst{color:var(--accent);opacity:1}
.amis-lig.s-declined,.amis-lig.s-cancelled,.amis-lig.s-countered{opacity:.65}
/* fenêtre d'échange plein écran */
#trDialog{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;box-shadow:none;overflow:hidden;background:color-mix(in srgb,var(--panel) 94%,var(--accent))}
#trDialog::backdrop{background:rgba(0,0,0,.7)}
#trDialog .trwin{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1.1fr) minmax(150px,1fr) minmax(0,1.1fr) auto;height:100%;gap:0}
#trDialog .trwin.lect{grid-template-rows:auto minmax(0,1fr) auto}
#trDialog .trcentre{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:0 clamp(8px,2vw,24px)}
#trDialog .trqui2{text-align:center;margin:0 0 8px}
#trDialog .trhead{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--accent);color:var(--on-accent);border-bottom:4px solid var(--line)}
#trDialog .trhead h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
#trDialog .trqui{flex:1;font-size:10px;opacity:.9}
#trDialog .trx{padding:4px 10px}
#trDialog .trcol{display:flex;flex-direction:column;min-height:0;padding:6px 12px;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,0,0,.04) 11px 12px)}
#trDialog .trcol.get{border-bottom:3px dashed var(--line)}#trDialog .trcol.give{border-top:3px dashed var(--line)}
#trDialog .lbl{font-size:9px;margin:2px 0 4px;text-transform:uppercase;letter-spacing:.05em}
#trDialog .trstrip{flex:1;min-height:0;display:flex;gap:8px;overflow-x:auto;overflow-y:auto;align-items:flex-start;padding:4px 2px 8px;scrollbar-width:thin}
#trDialog .trstrip .empty{margin:auto}
#trDialog .trtuile{flex:none;width:clamp(92px,min(11vw,14vh),140px);position:relative;touch-action:pan-x;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .12s steps(3)}
#trDialog .trtuile:hover{transform:translateY(-4px)}
#trDialog .trtuile.tient{opacity:.3}
#trDialog .trtuile .mtitre{font-size:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trDialog .trtuile .rar{font-size:7px;padding:2px 0;text-align:center}
#trDialog .trloupe{position:absolute;right:3px;top:3px;z-index:20;width:22px;height:22px;min-width:0;min-height:0;padding:0;font-size:11px;line-height:1;border:2px solid var(--line);box-shadow:2px 2px 0 var(--line);background:var(--panel);cursor:zoom-in}
#trDialog .trzone{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;min-height:0;padding:10px clamp(8px,2vw,24px);flex:1}
#trDialog .trwin:not(.lect)>.trzone{background:repeating-conic-gradient(rgba(0,0,0,.05) 0 25%,transparent 0 50%) 0 0/16px 16px}
#trDialog .trhalf{display:flex;flex-direction:column;min-height:0;border:4px dashed var(--line);background:color-mix(in srgb,var(--panel) 80%,transparent);padding:6px 10px;transition:background .12s,transform .12s steps(3)}
#trDialog .trhalf.plein{border-style:solid;box-shadow:5px 5px 0 var(--line)}
#trDialog .trhalf.get{border-color:var(--accent)}
#trDialog .trhalf.give{border-color:var(--line)}
#trDialog .trslot{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;overflow:auto;padding:2px}
#trDialog .trslot .trtuile{width:clamp(76px,min(8.4vw,10.5vh),108px)}
#trDialog .trvide{margin:auto;font-size:9px;opacity:.65;text-align:center;max-width:22ch;line-height:1.6}
#trDialog.glisse .trhalf[data-zone]{opacity:.55}
#trDialog.glisse[data-cote=get] .trhalf.get,#trDialog.glisse[data-cote=give] .trhalf.give{opacity:1;border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
#trDialog .trhalf.sur{background:color-mix(in srgb,var(--accent) 38%,var(--panel))!important;transform:scale(1.01)}
#trDialog .trmid{align-self:center;font-size:clamp(22px,4vw,40px);padding:0 clamp(6px,1.5vw,18px);color:var(--accent);animation:trmid 1.2s steps(2) infinite}
@keyframes trmid{50%{transform:scale(1.18)}}
html.calme #trDialog .trmid{animation:none}
#trDialog .trghost{position:fixed;left:0;top:0;width:92px;z-index:99999;pointer-events:none;opacity:.92;box-shadow:6px 8px 0 rgba(0,0,0,.35);transition:none}
#trDialog .trfoot{padding:8px 14px 10px;border-top:4px solid var(--line);background:var(--panel);display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
#trDialog .trfoot .hint{flex:1 1 260px;margin:0;font-size:8px}
#trDialog .trfoot .msg{flex:1 1 100%;min-height:0;margin:0}
#trDialog .trok{background:var(--accent);color:var(--on-accent)}
#trDialog .trwin.lect .trslot .trtuile{width:clamp(110px,12vw,160px)}
#trDialog .trwin.lect .trzone{align-content:center}

/* la taille des étoiles du float suit la largeur de la carte (référence : carte de 460 px) : même rendu sur tous les appareils */
:is(#viewDialog,#flDialog) .vcard{container-type:inline-size}

/* zone de dessin : plus d'ombre « relief » blanche autour de la carte */
#vueEditeur .card{box-shadow:none}
/* tablettes en portrait (iPad mini, Surface, iPad Pro…) : la carte garde sa grande taille (560 px) ; les outils passent en une barre d'icônes AU-DESSUS de la carte,
   et pinceau + palette se rangent côte à côte juste en dessous, pour rester visibles sans défiler. Le reste (couches, titre, publier…) vient ensuite. */
@media (min-width:621px) and (max-width:1050px){
  html:not(.tel) main{padding:8px 6px 40px}
  html:not(.tel) .studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px;align-items:start}
  html:not(.tel) .studio>aside.side{display:contents}
  html:not(.tel) .studio>aside.side>.panel{margin:0;padding:8px;min-width:0;grid-column:1/-1;grid-row:auto}
  html:not(.tel) .studio>.center{grid-column:1/-1;grid-row:2;order:0;position:static;width:auto}
  html:not(.tel) .studio .card{width:min(100%,calc((100dvh - 200px) * .8))}      /* presque toute la largeur de l'écran */
  /* barre d'outils */
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1){grid-row:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:6px}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) h2{display:none}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .row,html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .selbtns{display:contents}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .outils-haut+.outils-bas{margin:0}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .outil{font-size:0;line-height:0;padding:6px;width:50px;height:50px;min-width:0;min-height:0;display:inline-flex;align-items:center;justify-content:center}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .outil svg{width:26px;height:26px}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) hr,html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .sep{display:none}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(1) .selbtns button{font-size:8px;padding:6px 8px}
  /* pinceau et palette côte à côte sous la carte */
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2){grid-row:3;grid-column:1}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(4){grid-row:3;grid-column:2}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(3){grid-row:4;grid-column:1/-1}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2) .row{gap:5px}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2) button{padding:5px 8px}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2){display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2)>h2{flex:1 1 100%;margin:0}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2) .row{display:contents}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2) .lbl{margin:0}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2) .field,html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(2) label{flex:1 1 100%;margin:0}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(4) .hint{display:none}
  html:not(.tel) .studio>aside.side:first-of-type>.panel:nth-child(4)>h2{margin-bottom:4px}
}
}

/* échange : flèches pour faire défiler les bandes ; barre de défilement visible */
#trDialog .trcol{position:relative}
#trDialog .trstrip{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
#trDialog .trfl{position:absolute;top:50%;z-index:30;width:34px;height:56px;min-width:0;min-height:0;margin-top:-20px;padding:0;font-size:22px;line-height:1;box-shadow:3px 3px 0 var(--line);border-width:3px}
#trDialog .trfl.g{left:4px}#trDialog .trfl.d{right:4px}
#trDialog .trfl[hidden]{display:none}
#trDialog .trtuile{cursor:grab}
/* onglet Social */
#vueSocial .panel{max-width:760px;margin:0 auto 12px}
#trDialog .trwin>*{min-width:0}
#trDialog .trzone{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}

/* bouton « ? » : affiche / masque une aide (texte caché par défaut pour gagner de la place) */
button.aide{min-width:34px;padding-left:0;padding-right:0;text-align:center;font-weight:bold}
button.aide[aria-expanded="true"]{background:var(--accent);color:var(--on-accent)}
#layHint[hidden]{display:none}

/* Bande de cartes des dossiers : les cartes disparaissent net au bord du bouton (leur halo ne dépasse plus du bouton avant d'être coupé) */
.dstrip{clip-path:inset(0 0 0 16px)}

/* « Tout voir » : favoris / tri (affichés seulement sur téléphone, voir mobile.css) */
.tv-opts{display:none}
.dstrip{position:relative;z-index:3;
  -webkit-mask-image:linear-gradient(to right,transparent 16px,#000 34px),linear-gradient(to bottom,transparent,#000 30px,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to right,transparent 16px,#000 34px),linear-gradient(to bottom,transparent,#000 30px,#000 calc(100% - 30px),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Panneau « Dégradé » (menu de la sélection) : s'ouvre à côté de la sélection */
.degpanel{position:fixed;z-index:9998;width:230px;box-sizing:border-box;background:var(--panel);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:10px;display:flex;flex-direction:column;gap:8px}
.degpanel[hidden]{display:none}
.degpanel h3{margin:0;font-size:11px}
.degpanel .field{display:flex;flex-direction:column;gap:4px;align-items:stretch;margin:0}
.degpanel label{font-size:9px}
.degpanel input[type=range]{width:100%;margin:0}
.degpanel input[type=color]{width:100%;height:30px}
.degpanel .hint{margin:0;font-size:8px;line-height:1.5}
.degpanel .row{display:flex;gap:6px}.degpanel .row button{flex:1;font-size:9px;padding:7px 4px}
.degpanel button:disabled{opacity:.45}
.lrow .lpoi{display:none}
.degpanel .chk{display:flex;align-items:center;gap:6px;font-size:9px;cursor:pointer}

/* éditeur : les gestes à deux doigts sur la carte ne doivent jamais être pris par le navigateur (tablettes) */
.view,.art{touch-action:none}

#calqcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto!important}
.lrow.calque{background:color-mix(in srgb,var(--paper) 78%,#3aa0ff)}
.lrow.calque.act{background:color-mix(in srgb,var(--accent) 60%,#3aa0ff)}
.lrow.calque .lnom::before{content:"▧ ";opacity:.8}

/* minutes gagnées en défaussant : animation sur l'onglet Boosters */
.boost-gain{display:block;text-align:center;font-size:12px;color:var(--accent);text-shadow:2px 2px 0 var(--line);pointer-events:none;animation:boost-gain 2.4s steps(12) forwards}
@keyframes boost-gain{0%{opacity:0;transform:translateY(14px)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.boost-time.gagne{animation:boost-gain-t .4s steps(2) 5}
@keyframes boost-gain-t{50%{transform:scale(1.12);color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.boost-gain{animation:none;opacity:1}.boost-time.gagne{animation:none}}