/* =========================================================
   Nexus Card — habillage
   Direction : plateau esport contemporain. Surfaces neutres,
   angles adoucis, un seul accent, typo sportive.
   ========================================================= */

:root{
  --bg:#0E0E11;
  --surface:#16161A;
  --surface-2:#1D1D22;
  --surface-3:#26262C;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --text:#F2F2F4;
  --muted:#9A9AA6;
  --accent:#D6FF3D;
  --accent-2:#FF2E7E;
  --on-accent:#0E0E11;

  --r:12px; --r-sm:8px; --r-lg:16px;
  --car:0.714; --ch:360px; --chfan:210px; --chprev:300px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 700px at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.5;min-height:100vh;
}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
h1{font-family:'Anton',sans-serif;font-size:clamp(26px,3.4vw,36px);text-transform:uppercase;letter-spacing:.01em;font-weight:400}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:18px}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ---------------- barre du haut ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 24px;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:11px;
  font-family:'Anton',sans-serif;font-size:23px;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;color:var(--text);line-height:1;margin-right:auto;
}
/* le logo suit la couleur d accent du theme */
/* SVG inline : currentColor fonctionne, le logo suit l accent du theme */
.brand-mark{height:30px;width:21px;display:block;flex:0 0 auto;color:var(--accent);overflow:visible}
.brand small{
  display:block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}
.topright{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.topright>*{flex:0 0 auto}
@media(max-width:900px){.pill.user{display:none}}

/* boutons carrés à icône : réglages et déconnexion */
.iconbtn{
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--muted);transition:color .16s,border-color .16s,background .16s;
}
.iconbtn:hover{color:var(--text);border-color:var(--text);background:var(--surface-2)}
.iconbtn.on{color:var(--accent);border-color:var(--accent)}
.iconbtn svg{width:18px;height:18px;fill:currentColor;display:block}
.iconbtn.on svg{transform:rotate(45deg);transition:transform .25s}

/* panneau de réglages, ancré sous le rouage */
.gearwrap{position:relative}
.gearpop{
  position:absolute;right:0;top:calc(100% + 9px);z-index:60;width:210px;padding:14px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.gearpop.on{opacity:1;visibility:visible;transform:translateY(0)}
.gearpop .field{margin-bottom:12px}
.gearpop .field:last-child{margin-bottom:0}
.gearpop .mini-select{width:100%;max-width:none}

.segmented{
  display:flex;gap:2px;padding:3px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.segmented button{
  border:none;background:none;cursor:pointer;color:var(--muted);
  padding:8px 15px;border-radius:6px;font-size:13px;font-weight:600;
  transition:background .16s,color .16s;
}
.segmented button:hover{color:var(--text)}
.segmented button.on{background:var(--accent);color:var(--on-accent)}

.mini-select{
  font:inherit;font-size:12px;font-weight:600;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;cursor:pointer;max-width:150px;
}
.mini-select:focus{outline:none;border-color:var(--line-2)}
.pill{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  padding:8px 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.pill em{font-style:normal;color:var(--muted);font-weight:500}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pill.user{color:var(--muted)}

/* ---------------- boutons ---------------- */
.btn{
  border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  padding:11px 20px;font-size:13px;font-weight:700;letter-spacing:.01em;
  transition:filter .16s,transform .12s,border-color .16s,background .16s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.danger{background:transparent;border-color:rgba(255,90,120,.35);color:#FF7D97}
.btn.danger:hover{background:rgba(255,90,120,.1)}
.btn.sm{padding:8px 14px;font-size:12px}
.btn.block{width:100%}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* ---------------- structure ---------------- */
.page{max-width:1220px;margin:0 auto;padding:38px 24px 80px}
.view{display:none}
.view.on{display:block}
.stack{display:flex;flex-direction:column;align-items:center;gap:22px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.head-right{display:flex;align-items:center;gap:16px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.hint{font-size:13px;color:var(--muted);text-align:center}
.hint kbd{
  font:inherit;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line);
}
.lead{color:var(--muted);font-size:14px;margin-top:8px}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:13px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.panel.flush{padding:0;overflow:hidden}
.panel.flush .pad{padding:20px 22px;margin:0}
.panel.flush h3.pad{padding-bottom:0}
.panel.center-panel{display:flex;flex-direction:column;align-items:center;gap:20px}
.panel.center-panel h3{align-self:flex-start}
.cols{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:22px;align-items:start}
.stackcol{display:flex;flex-direction:column;gap:22px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.pane{display:none}.pane.on{display:block}
.tabs{margin-bottom:24px;display:inline-flex}
/* sous-onglets d'un volet d'admin */
.subtabs{margin-bottom:20px;display:inline-flex}
.subtabs button{font-size:12px;padding:7px 13px}
.subpane{display:none}.subpane.on{display:block}

/* ---------------- formulaires ---------------- */
.field{display:block;margin-bottom:15px}
.field>span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
input[type=text],input[type=password],input[type=number],select:not(.mini-select){
  width:100%;font:inherit;font-size:14px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;transition:border-color .16s,box-shadow .16s;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
input[type=color]{
  width:100%;height:42px;padding:3px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=range]{width:100%;accent-color:var(--accent);background:none;border:none;padding:0;height:24px;cursor:pointer}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.range{position:relative}
.field.range b{position:absolute;right:0;top:0;font-size:12px;color:var(--accent)}
.check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:15px}
.check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.err{color:#FF7D97;font-size:13px;min-height:19px;margin-bottom:6px}
.ok{color:var(--accent);font-size:12px;font-weight:600;min-height:18px;margin-top:12px}
.notice{
  font-size:13px;color:var(--muted);line-height:1.6;padding:14px 16px;margin-bottom:20px;
  background:var(--surface-2);border-radius:var(--r-sm);border-left:2px solid var(--accent);
}
.switch{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.switch a{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none}
.switch a:hover{text-decoration:underline}

.auth{max-width:400px;margin:6vh auto 0}
.auth-head{margin-bottom:22px}

.drop{
  border:1px dashed var(--line-2);background:var(--surface-2);border-radius:var(--r);
  padding:22px;text-align:center;cursor:pointer;color:var(--muted);font-size:12px;
  margin-bottom:18px;transition:border-color .16s,color .16s;
}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--text)}
.drop img{max-width:100%;max-height:170px;display:block;margin:0 auto 10px;border-radius:var(--r-sm)}

/* ---------------- tableaux ---------------- */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;padding:13px 18px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
}
.table td{padding:12px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--surface-2)}
.thumb{height:46px;width:calc(46px * var(--car));object-fit:cover;border-radius:6px;display:block;background:var(--surface-2)}
.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:20px;background:var(--surface-3);
}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--rc,var(--muted))}

/* classement */
.board .rank{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;font-size:12px;font-weight:700;background:var(--surface-3);color:var(--muted);
}
.board .rank.r1{background:#F5C542;color:#1a1200}
.board .rank.r2{background:#C9CFDA;color:#131519}
.board .rank.r3{background:#C9834A;color:#1c0f04}
.board tr.me td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.board .me-tag{
  margin-left:8px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:20px;background:var(--accent);color:var(--on-accent);
}
.track{display:block;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;min-width:90px}
.track i{display:block;height:100%;background:var(--accent);border-radius:3px}
.completion{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}

/* ---------------- carte ---------------- */
.card{
  width:calc(var(--ch) * var(--car));height:var(--ch);position:relative;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.25,1);
}
.card.flipped{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);
}
.back{
  background:
    radial-gradient(120% 80% at 50% 0%, var(--surface-3), var(--surface) 70%);
  display:grid;place-items:center;
}
/* logo au dos de la carte */
.back .bmark{
  width:calc(var(--ch) * .3);height:auto;display:block;
  color:var(--line-2);fill:currentColor;
  transition:color .25s ease,filter .25s ease;
}

/* Halo à la Hearthstone : au survol d'une carte encore retournée, le dos
   prend la couleur de sa rareté. L'intensité suit --rg, le rang de la
   rareté, donc une commune reste discrète et une secrète éclate. */
.card-slot .card:not(.flipped){cursor:pointer}
.card-slot .card:not(.flipped):hover .back{
  border-color:color-mix(in srgb,var(--rc) 55%,transparent);
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb,var(--rc) calc(30% + var(--rg,0) * 50%),transparent),
    0 0 calc(18px + var(--rg,0) * 46px) color-mix(in srgb,var(--rc) calc(18% + var(--rg,0) * 45%),transparent),
    inset 0 0 calc(20px + var(--rg,0) * 40px) color-mix(in srgb,var(--rc) calc(6% + var(--rg,0) * 22%),transparent);
  animation:backPulse calc(2.4s - var(--rg,0) * 1s) ease-in-out infinite;
}
.card-slot .card:not(.flipped):hover .back .bmark{
  color:color-mix(in srgb,var(--rc) calc(45% + var(--rg,0) * 55%),var(--line-2));
  filter:drop-shadow(0 0 calc(4px + var(--rg,0) * 14px) color-mix(in srgb,var(--rc) 60%,transparent));
}
.card-slot .card:not(.flipped):hover .back::after{
  border-color:color-mix(in srgb,var(--rc) calc(25% + var(--rg,0) * 45%),transparent);
}
@keyframes backPulse{
  0%,100%{filter:brightness(1)}
  50%    {filter:brightness(calc(1.04 + var(--rg,0) * .12))}
}
@media(prefers-reduced-motion:reduce){
  .card-slot .card:not(.flipped):hover .back{animation:none}
}
.back::after{content:"";position:absolute;inset:12px;border:1px solid var(--line);border-radius:calc(var(--r) - 4px)}
.front{
  transform:rotateY(180deg);background:var(--surface);display:flex;flex-direction:column;
}
.card.fx .front{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent),0 6px 44px color-mix(in srgb,var(--rc) 22%,transparent)}
.c-art{position:relative;flex:1;min-height:0;overflow:hidden;background:transparent}
/* contain : le visuel entre en entier, jamais rogné. Il n'y a plus de bande
   autour parce que la fenêtre adopte le ratio de l'image envoyée, carte par
   carte — voir cardRatioFor() dans app.js. */
.c-art img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:center}
.c-art .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Anton',sans-serif;font-size:calc(var(--ch)*.26);color:var(--surface-3);
}
.c-info{padding:calc(var(--ch)*.035) calc(var(--ch)*.04) calc(var(--ch)*.026)}
.c-name{
  font-size:calc(var(--ch)*.062);font-weight:700;letter-spacing:-.01em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.c-team{font-size:calc(var(--ch)*.028);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:.35em}
.c-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.c-stats div{padding:calc(var(--ch)*.022) calc(var(--ch)*.012);text-align:center;border-right:1px solid var(--line)}
.c-stats div:last-child{border-right:none}
.c-stats b{display:block;font-size:calc(var(--ch)*.038);font-weight:700}
.c-stats span{display:block;font-size:calc(var(--ch)*.021);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.25em}
.c-rar{
  display:flex;align-items:center;gap:.6em;
  padding:calc(var(--ch)*.022) calc(var(--ch)*.04);
  border-top:1px solid var(--line);
  font-size:calc(var(--ch)*.024);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rc);
}
.c-rar i{width:.5em;height:.5em;border-radius:50%;background:var(--rc)}
.c-rar b{margin-left:auto;color:var(--muted);font-weight:600}
.front::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rc);opacity:.9}
/* sans cadre : le visuel porte déjà son propre contour, plus rien par-dessus */
.card.bleed .front{background:transparent}
.card.bleed .front::after{display:none}
.card.bleed .face{border:0}
.card.bleed .c-art{background:transparent}
.holo{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:3;
  mix-blend-mode:var(--hx-blend,overlay);
}

/* Métal : une seule teinte, celle de la rareté. Tous les nombres viennent
   d'Admin → Raretés, panneau « Reflets ». */
.card.fx .front .holo{
  background:
    repeating-linear-gradient(114deg,
      rgba(255,255,255,var(--hx-grain,.09)) 0 1px, transparent 1px 4px),
    linear-gradient(105deg,
      transparent 30%, rgba(255,255,255,var(--hx-sheen,.62)) 47%, transparent 65%),
    linear-gradient(140deg,
      color-mix(in srgb,var(--rc) calc(var(--hx-tint,85) * 1%),transparent),
      color-mix(in srgb,var(--rc) calc(var(--hx-tint,85) * .21%),transparent) 48%,
      color-mix(in srgb,var(--rc) calc(var(--hx-tint,85) * .82%),transparent));
  background-size:auto, 250% 250%, 190% 190%;
  background-position:0 0, 0% 22%, 0% 50%;
  animation:holoSheen var(--hx-speed,9s) ease-in-out infinite;
}

/* Prisme : rareté la plus haute. La saturation pilote la vivacité des teintes. */
.card.hx-prisme .front .holo{
  mix-blend-mode:var(--hx-blend,overlay);
  filter:saturate(var(--hx-sat,1));
  background:
    linear-gradient(100deg,
      transparent 32%, rgba(255,255,255,var(--hx-sheen,.66)) 49%, transparent 66%),
    conic-gradient(from 200deg,
      #D875F5, #57C6F0, #A8EE68, #FFC963, #FF7ABE, #D875F5);
  background-size:260% 260%, 200% 200%;
  background-position:0% 25%, 0% 50%;
  animation:holoPrism var(--hx-speed,13s) ease-in-out infinite;
}

/* Texture gravée de la rareté la plus haute. */
.card.hx-prisme .front .tex{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .3s;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,var(--hx-dots,.22)) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 68% 74%, rgba(255,255,255,calc(var(--hx-dots,.22) * .72)) 0 .6px, transparent 1.2px),
    repeating-linear-gradient(45deg,  rgba(255,255,255,var(--hx-hatch,.07)) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,calc(var(--hx-hatch,.07) * .7)) 0 1px, transparent 1px 11px);
  background-size:
    var(--hx-tex-size,37px) var(--hx-tex-size,37px),
    calc(var(--hx-tex-size,37px) * 1.6) calc(var(--hx-tex-size,37px) * 1.6),
    auto, auto;
  mix-blend-mode:overlay;
  animation:texDrift var(--hx-tex-speed,19s) linear infinite;
}
.card.hx-prisme.flipped .front .tex{opacity:calc(var(--holo,0) * .85)}
.card.hx-prisme .front .tex.manual{animation:none}

.card.flipped .front .holo{opacity:var(--holo,0)}
.card.fx .front .holo.manual{animation:none}

@keyframes texDrift{
  0%  {background-position:0 0, 0 0, 0 0, 0 0}
  100%{background-position:var(--hx-tex-size,37px) var(--hx-tex-size,37px),
       calc(var(--hx-tex-size,37px) * -1.6) calc(var(--hx-tex-size,37px) * 1.6), 0 0, 0 0}
}
@keyframes holoSheen{
  0%  {background-position:0 0, 0%   22%, 0%   50%}
  50% {background-position:0 0, 100% 78%, 100% 50%}
  100%{background-position:0 0, 0%   22%, 0%   50%}
}
@keyframes holoPrism{
  0%  {background-position:0%   25%, 0%   50%}
  50% {background-position:100% 75%, 100% 50%}
  100%{background-position:0%   25%, 0%   50%}
}
@media(prefers-reduced-motion:reduce){
  .card.fx .front .holo,.card.hx-prisme .front .tex{animation:none}
}

/* ---------------- ouverture ---------------- */
.card-slot{
  /* --chopen vaut --ch majore de 10 % (voir applyCardFormat). Le redefinir ici
     agrandit du meme coup la carte, son halo et l'eclat : tout ce qui vit dans
     l'emplacement est dimensionne a partir de --ch. */
  --ch:var(--chopen, 360px);
  position:relative;width:calc(var(--ch) * var(--car));height:var(--ch);max-width:100%;
  perspective:1400px;container-type:size;display:grid;place-items:center;
}
/* même principe à la révélation : la carte garde sa forme, centrée */
.card-slot .card{
  position:relative;cursor:pointer;
  --ch:min(100cqh, calc(100cqw / var(--car)));
  height:var(--ch);width:calc(var(--ch) * var(--car));
}
.card.incoming{animation:incoming .42s cubic-bezier(.2,.9,.3,1)}
@keyframes incoming{from{transform:translateY(40px) scale(.92);opacity:0}}
.burst{
  position:absolute;left:50%;top:50%;width:calc(var(--ch) * var(--car));height:var(--ch);border-radius:var(--r);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;box-shadow:0 0 0 2px var(--rc);
}
.burst.go{animation:burst .8s ease-out}
@keyframes burst{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.tray{display:flex;gap:8px;min-height:92px;align-items:center;flex-wrap:wrap;justify-content:center}
.mini{
  height:88px;width:calc(88px * var(--car));border-radius:8px;overflow:hidden;position:relative;
  background:var(--surface-2);border:1px solid var(--line);animation:pop .3s cubic-bezier(.2,1.5,.4,1);
}
.mini img{width:100%;height:100%;object-fit:cover}
.mini .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:26px;color:var(--surface-3)}
.mini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rc)}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.fan{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;perspective:1400px}
.fan .card{--ch:var(--chfan);width:calc(var(--ch) * var(--car));height:var(--ch);transform:none;animation:fanIn .45s backwards}
.fan .card .front{transform:none}
.fan .card .back{display:none}
@keyframes fanIn{from{transform:translateY(24px);opacity:0}}
.best{font-size:13px;color:var(--muted);font-weight:600}
.best b{color:var(--rc-best);font-weight:700}
#flash{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;background:#fff}
#flash.go{animation:flash .45s}
@keyframes flash{0%{opacity:.42}100%{opacity:0}}
body.shake{animation:shakeAll .38s}
@keyframes shakeAll{0%,100%{transform:translate(0,0)}20%{transform:translate(-8px,4px)}50%{transform:translate(7px,-5px)}80%{transform:translate(-4px,-2px)}}

/* onglets de boosters dans l'admin */
.packtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.packtabs button{
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  padding:8px 13px;border-radius:var(--r-sm);cursor:pointer;font-size:12px;font-weight:600;
  transition:background .16s,color .16s,border-color .16s;
}
.packtabs button:hover{color:var(--text)}
.packtabs button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.packtabs .cnt{opacity:.65;font-weight:500;margin-left:6px}

/* ---------------- carrousel de boosters ---------------- */
/* le booster occupe le centre de l'écran, ses voisins reculent sur les côtés */
.stack.fill{min-height:calc(100vh - 230px);justify-content:center}
.carousel{
  position:relative;width:100%;max-width:900px;height:min(58vh,460px);
  display:grid;place-items:center;user-select:none;
}
.cstage{position:absolute;inset:0}
.cstage .pack-wrap{
  position:absolute;left:50%;top:50%;
  transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .42s,filter .42s;
  will-change:transform;
}
.cstage .pack-wrap.side{cursor:pointer;filter:brightness(.6) saturate(.7)}
.cstage .pack-wrap.side:hover{filter:brightness(.8) saturate(.85)}
.cstage .pack-wrap.side .pack{cursor:pointer}
.cstage .pack-wrap.side .pack:hover{transform:none}
.cstage .pack-wrap.far{opacity:0;pointer-events:none}
/* un booster sans carte se voit avant qu'on clique dessus */
.cstage .pack-wrap.vide .pack::after{
  content:attr(data-vide);position:absolute;left:50%;top:50%;z-index:8;
  transform:translate(-50%,-50%);white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 12px;border-radius:20px;color:#FF7D97;
  background:rgba(10,10,12,.82);border:1px solid rgba(255,90,120,.4);
}
.cnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:12;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-size:24px;line-height:1;display:grid;place-items:center;
  transition:background .16s,border-color .16s,opacity .16s;
}
.cnav:hover{background:var(--surface-3);border-color:var(--line-2)}
.cnav.prev{left:0}.cnav.next{right:0}
.cnav[disabled]{opacity:.2;cursor:default}
/* ---- onglets de classeur : un booster = un classeur ---- */
.segmented.binders{margin:0 0 16px;flex-wrap:wrap;max-width:100%}
.segmented.binders button{
  font-size:12px;display:inline-flex;align-items:center;gap:7px;
}
.segmented.binders small{font-size:10.5px;opacity:.55;font-variant-numeric:tabular-nums}
.segmented.binders button.on small{opacity:.8}

@media(max-width:640px){
  .carousel{height:min(52vh,400px)}
  .cnav{width:38px;height:38px;font-size:20px}
}

/* ---------------- booster ---------------- */
.pack-wrap{perspective:1400px}
.pack{
  --ph:352px; --tear:60px;
  width:250px;height:var(--ph);position:relative;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.pack:hover{transform:rotateY(-8deg) rotateX(4deg) translateY(-6px)}
.pack.tearing:hover{transform:none}
.pack-half{position:absolute;left:0;width:100%;overflow:hidden}
.pack-half.lid{top:0;height:var(--tear);z-index:6;border-radius:var(--r) var(--r) 0 0}
.pack-half.body{top:var(--tear);height:calc(var(--ph) - var(--tear));z-index:4;border-radius:0 0 var(--r) var(--r)}
.pack-half .pack-face{position:absolute;left:0;top:0;width:100%;height:var(--ph)}
.pack-half.body .pack-face{top:calc(-1 * var(--tear))}
.pack-face{
  overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:22px 20px;
  background:linear-gradient(160deg,var(--surface-3),var(--surface) 55%,var(--bg));
  background-size:cover;background-position:center;box-shadow:var(--shadow);
}
.pack-face::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,var(--sa,.5)) 47%,var(--sc,rgba(214,255,61,.28)) 52%,transparent 60%);
  background-size:260% 100%;animation:sheen var(--ss,3.4s) linear infinite;
}
/* Boucle sans coupure : en pourcentage, le décalage réel vaut
   P x (largeur - 2,6 x largeur) = P x -1,6. Pour avancer d exactement un
   motif (2,6), il faut donc parcourir 162,5 points de pourcentage.
   L ancien 190 -> -90 en parcourait 280, soit 1,72 motif : le raccord
   sautait visiblement a chaque tour. */
@keyframes sheen{from{background-position:162.5% 0}to{background-position:0% 0}}
.pack.nosheen .pack-face::before{display:none}
.pack-face.custom{background-color:transparent;background-repeat:no-repeat;background-size:100% 100%;padding:0;box-shadow:none}
.pack-face.custom::before{
  -webkit-mask-image:var(--packimg);mask-image:var(--packimg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.pack-face.custom .pack-top,.pack-face.custom .pack-bottom{display:none}
.pack-top{position:relative;z-index:2}
.pack-top h2{font-family:'Anton',sans-serif;font-weight:400;font-size:27px;letter-spacing:.02em;text-transform:uppercase}
.pack-top p{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.pack-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.pack-glow{
  position:absolute;left:3%;right:3%;top:calc(var(--tear) - 3px);height:6px;z-index:5;
  opacity:0;pointer-events:none;transform-origin:center;
  background:linear-gradient(90deg,transparent,#fff 18%,var(--accent) 50%,#fff 82%,transparent);
  filter:blur(3px);box-shadow:0 0 30px 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.pack-out{position:absolute;left:50%;top:var(--tear);z-index:2;pointer-events:none}
.pack-out i{
  position:absolute;left:-34px;top:-6px;width:68px;height:95px;display:block;opacity:0;border-radius:8px;
  background:linear-gradient(150deg,var(--surface-3),var(--surface));border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.6);
}
.pack-out i:nth-child(1){--rot:-9deg}
.pack-out i:nth-child(2){--rot:4deg}
.pack-out i:nth-child(3){--rot:12deg}
.pack.tearing{cursor:default;animation:grab .5s cubic-bezier(.3,0,.5,1)}
.pack.tearing .pack-half.lid{animation:lidTear .8s cubic-bezier(.35,0,.55,1) forwards}
.pack.tearing .pack-glow{animation:glowOpen .85s .2s ease-out forwards}
.pack.tearing .pack-out i{animation:cardsOut .85s ease-out forwards}
.pack.tearing .pack-out i:nth-child(1){animation-delay:.30s}
.pack.tearing .pack-out i:nth-child(2){animation-delay:.38s}
.pack.tearing .pack-out i:nth-child(3){animation-delay:.46s}
.pack.tearing .pack-half.body{animation:bodyFall .5s .82s cubic-bezier(.6,0,.9,.2) forwards}
@keyframes grab{0%{transform:none}22%{transform:translateY(-5px) rotate(-1.6deg)}45%{transform:translateY(2px) rotate(1.4deg)}100%{transform:none}}
@keyframes lidTear{
  0%{transform:none}
  16%{transform:translate(-3px,-7px) rotate(-2deg)}
  38%{transform:translate(10px,-26px) rotate(7deg)}
  100%{transform:translate(74px,-250px) rotate(42deg);opacity:0}
}
@keyframes glowOpen{0%{opacity:0;transform:scaleX(.15)}35%{opacity:1;transform:scaleX(1) scaleY(1.6)}100%{opacity:0;transform:scaleX(1) scaleY(3.4)}}
@keyframes cardsOut{
  0%{transform:translateY(26px) scale(.92);opacity:0}
  40%{transform:translateY(-48px) rotate(calc(var(--rot) * .4));opacity:1}
  100%{transform:translateY(-136px) rotate(var(--rot)) scale(1.04);opacity:0}
}
@keyframes bodyFall{to{transform:translateY(56px) rotate(3deg) scale(.9);opacity:0}}

/* ---------------- classeur ---------------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chips button{
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
  padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;transition:all .16s;
}
.chips button:hover{color:var(--text);border-color:var(--line-2)}
.chips button.on{border-color:var(--fc,var(--accent));color:var(--fc,var(--accent));background:color-mix(in srgb,var(--fc,var(--accent)) 10%,transparent)}
.binder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
/* align-items:start — sinon la grille étire chaque pochette à la hauteur de
   la plus haute de sa rangée, l'aspect-ratio saute et les bandes reviennent. */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
/* La pochette prend la forme de la carte qu'elle contient (--pcar, posé au
   rendu), et retombe sur le format global pour les emplacements vides. La
   carte remplit donc sa pochette : plus de bande sombre sur les côtés. */
.pocket{position:relative;aspect-ratio:var(--pcar,var(--car));border-radius:var(--r);background:var(--surface-2);container-type:size}
.pocket .holder{position:absolute;inset:0;display:grid;place-items:center}
.pocket .card{
  /* la carte se loge dans la pochette sans jamais se déformer :
     --ch devient la hauteur réellement tenable, la largeur en découle */
  --ch:min(100cqh, calc(100cqw / var(--car)));
  height:var(--ch);width:calc(var(--ch) * var(--car));
  transform:none;cursor:default;
}
.pocket .card .back{display:none}
.pocket .card .front{transform:none}
.slot-miss{
  position:absolute;inset:0;border-radius:var(--r);border:1px dashed var(--line-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;text-align:center;
}
.slot-miss .num{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.slot-miss .sil{width:34%;color:var(--surface-3);display:block}
.slot-miss .sil svg{width:100%;height:auto;display:block;fill:currentColor}
.slot-miss .nm{font-size:13px;font-weight:600;color:var(--muted);line-height:1.2}
.slot-miss .rb{position:absolute;left:12px;right:12px;bottom:10px;height:3px;border-radius:3px;background:var(--rc);opacity:.4}
.dupe{
  position:absolute;top:9px;left:9px;z-index:6;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:20px;background:var(--accent);color:var(--on-accent);
}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;font-size:12px;font-weight:600;color:var(--muted)}

/* ---------------- admin : listes ---------------- */
/* le champ Nom doit rester lisible : colonnes fixes resserrees et
   padding reduit, sinon le 1fr se fait ecraser dans un panneau etroit */
.rline{display:grid;grid-template-columns:38px minmax(70px,1fr) 62px 56px 34px;gap:7px;align-items:center;margin-bottom:10px}
.tline{display:grid;grid-template-columns:minmax(70px,1fr) 46px 46px 46px 34px;gap:7px;align-items:center;margin-bottom:10px}
.rline input,.tline input{margin:0;min-width:0;padding-left:9px;padding-right:9px}
.rline>*,.tline>*{min-width:0}
/* une rareté et ses deux prix : la grille reste lisible plutôt que de
   s'étirer sur toute la largeur du panneau */
#sp-prices .panel{max-width:620px}
.pline{display:grid;grid-template-columns:14px minmax(80px,1fr) 110px 110px;gap:10px;align-items:center;margin-bottom:10px}
.pline>*{min-width:0}
.pline input{margin:0;min-width:0}
.pline .rdot{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(255,255,255,.16)}
.pline .rname{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pline.head-row .rname{font-size:10px;font-weight:700}

.head-row{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.rline .btn,.tline .btn{padding:8px 0;text-align:center}
.swatches{display:grid;gap:12px}
.tcard{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);cursor:pointer;transition:border-color .16s}
.tcard:hover{border-color:var(--line-2)}
.tdots{display:flex;gap:5px}
.tdots i{width:18px;height:18px;border-radius:5px;display:block;border:1px solid rgba(255,255,255,.14)}
.tname{font-size:14px;font-weight:600}
.tsee{margin-left:auto;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------------- quêtes ---------------- */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.quest{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;display:flex;flex-direction:column;gap:12px;
}
.quest.done{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.quest.claimed{opacity:.55}
.quest h4{font-size:15px;font-weight:700;letter-spacing:-.01em}
.quest .goal{font-size:12px;color:var(--muted)}
.quest .bar{height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.quest .bar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.quest .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.quest .rw{font-size:13px;font-weight:700;color:var(--accent)}
.quest .rw small{color:var(--muted);font-weight:600;margin-left:4px}
.quest .state{font-size:12px;font-weight:600;color:var(--muted)}

/* ---------------- shop ---------------- */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sitem{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:12px;
}
.sitem .thumbbox{
  height:170px;border-radius:var(--r);overflow:hidden;background:var(--surface-2);
  display:grid;place-items:center;position:relative;
}
.sitem .thumbbox img{width:100%;height:100%;object-fit:contain}
/* Carte affichee en entier. Meme traitement que dans la pochette de la
   collection : le basculement 3D est neutralise, on ne montre que la face
   avant, et la hauteur vient de --chshop pour suivre le format global. */
.sitem .cardbox,
.sitem .packbox{position:relative;display:grid;place-items:center;padding:4px 0}
/* le booster du shop ne s'ouvre pas d'ici : il s'achete, puis se lance
   depuis l'accueil. Pas de curseur trompeur, pas d'agrandissement au survol. */
.sitem .packbox .pack{cursor:default}
.sitem .packbox .pack:hover{transform:none}
/* Et puisqu'il ne s'ouvre pas, inutile de le couper en deux : le rabat et le
   corps n'existent que pour l'animation de dechirure. Ici le corps reprend
   toute la hauteur, ce qui supprime le raccord visible au 17e centile — celui
   qui tombe en plein dans le sertissage de l'emballage. */
.sitem .packbox .pack-half.lid{display:none}
.sitem .packbox .pack-half.body{top:0;height:var(--ph);border-radius:var(--r)}
.sitem .packbox .pack-half.body .pack-face{top:0}
.sitem .packbox .pack-glow,
.sitem .packbox .pack-out{display:none}
.sitem .cardbox .card{--ch:var(--chshop, 240px);transform:none;cursor:default;max-width:100%}
.sitem .cardbox .card .back{display:none}
.sitem .cardbox .card .front{transform:none}
.sitem .thumbbox .ph{font-family:'Anton',sans-serif;font-size:44px;color:var(--surface-3)}
.sitem .kind{
  /* le visuel du booster est peint apres ce badge dans l ordre du DOM : sans
     z-index explicite, l image recouvrait entierement l etiquette Booster */
  position:absolute;left:8px;top:8px;z-index:10;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;border-radius:20px;background:rgba(10,10,12,.75);
}
.sitem h4{font-size:14px;font-weight:700}
.sitem .sub{font-size:12px;color:var(--muted)}
.sitem .buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.sitem .price{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}
.sitem.gone{opacity:.45}

/* lignes d'édition admin */
.qline,.sline{display:grid;gap:8px;align-items:center;margin-bottom:8px}
.qline{grid-template-columns:1.6fr 1fr .9fr .7fr .8fr 42px}
.sline{grid-template-columns:.8fr 1.5fr 1.2fr .7fr 42px}
.qline input,.qline select,.sline input,.sline select{margin:0}
.qline.head-row,.sline.head-row{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 8px;
}
@media(max-width:760px){
  .qline,.sline{grid-template-columns:1fr 1fr;gap:6px}
  .qline.head-row,.sline.head-row{display:none}
}

/* panneau des reflets */
.fxh{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:20px 0 12px;padding-top:14px;border-top:1px solid var(--line);
}
.fxh:first-of-type{margin-top:14px}

/* réglages à gauche, aperçu collé à droite : il reste visible pendant
   qu'on fait défiler les curseurs et ne mange plus de hauteur */
.fxcols{grid-template-columns:minmax(340px,430px) 1fr}
.fxlayout{display:grid;grid-template-columns:1fr minmax(230px,290px);gap:26px;align-items:start}
.fxside{position:sticky;top:82px}
.fxside .small{text-align:center;margin-top:10px;line-height:1.5}
@media(max-width:1080px){
  .fxlayout{grid-template-columns:1fr}
  .fxside{position:static;order:-1}
}

/* aperçu des reflets */
.fxprev{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  padding:0;perspective:1100px;
}
.fxprev figure{display:flex;flex-direction:column;align-items:center;gap:9px}
.fxprev figcaption{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.fxprev .card{--ch:min(46vh,360px);cursor:default}
/* aperçu de face : la carte ne tourne pas et l avant ne se contre-tourne pas,
   sinon la face regarde à l opposé et backface-visibility l efface */
.fxprev .card.flipped{transform:none}
.fxprev .card .back{display:none}
.fxprev .card .front{transform:none}

/* ---------------- pied de page et pages légales ---------------- */
.foot{
  border-top:1px solid var(--line);margin-top:40px;
  padding:22px 24px 34px;display:flex;gap:14px 26px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  max-width:1220px;margin-inline:auto;
}
.foot .fnote{font-size:12px;color:var(--muted);line-height:1.5}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{font-size:12px;color:var(--muted);cursor:pointer;text-decoration:none;font-weight:600}
.foot a:hover{color:var(--text);text-decoration:underline}

.legalbox{max-width:820px;line-height:1.75;font-size:14px}
.legalbox h4{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
.legalbox p{margin:0 0 14px;color:var(--text)}
.legalbox p:last-child{margin-bottom:0}
.legalbox .ident{
  background:var(--surface-2);border-radius:var(--r-sm);padding:16px 18px;margin-bottom:20px;
  font-size:13px;color:var(--muted);
}
.legalbox .ident b{color:var(--text);font-weight:600}
.legalbox .todo{color:#FF7D97}

textarea{
  width:100%;font:inherit;font-size:13px;line-height:1.6;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;resize:vertical;min-height:90px;
  transition:border-color .16s,box-shadow .16s;
}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* compteur de boosters en réserve, sur le visuel du carrousel */
.pack-count{
  position:absolute;top:-9px;right:-9px;z-index:11;min-width:26px;height:26px;
  display:grid;place-items:center;padding:0 7px;border-radius:14px;
  background:var(--accent);color:var(--on-accent);
  font-size:12px;font-weight:700;line-height:1;
  border:2px solid var(--bg);box-shadow:0 3px 12px rgba(0,0,0,.45);
}
.cstage .pack-wrap.side .pack-count{opacity:.75}

/* tableau des comptes */
.tablewrap{overflow-x:auto}
.tablewrap .table{min-width:640px}
.table .who{font-weight:700}
.table .who small{display:block;font-weight:500;color:var(--muted);font-size:11px;margin-top:2px}
.table .bar{display:block;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;min-width:70px}
.table .bar i{display:block;height:100%;background:var(--accent)}
#userRows tr.on{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* vente des doublons */
.dupbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 18px;margin-bottom:18px;font-size:13px;
}
.dupbar b{color:var(--accent)}
.pocket .sell{
  position:absolute;left:8px;bottom:8px;z-index:6;
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;cursor:pointer;
  background:var(--accent);color:var(--on-accent);border:none;
  opacity:0;transition:opacity .16s;
}
.pocket:hover .sell{opacity:1}
@media(hover:none){.pocket .sell{opacity:1}}

/* bandeau de confirmation */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
  padding:12px 20px;border-radius:var(--r-sm);pointer-events:none;
  background:var(--surface-3);border:1px solid var(--line-2);color:var(--text);
  font-size:13px;font-weight:600;box-shadow:var(--shadow);
  opacity:0;transition:opacity .22s,transform .22s;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------- taux au survol du booster ---------------- */
/* Seul le booster centré porte le panneau : les voisins sont mis à l'échelle,
   le panneau le serait aussi. */
.oddspop{
  position:absolute;left:calc(100% + 18px);top:50%;
  transform:translateY(-50%) translateX(-8px);
  width:290px;padding:16px 18px;z-index:30;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow);text-align:left;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.25,1);
}
.cstage .pack-wrap:not(.side):hover .oddspop,
.cstage .pack-wrap.peek .oddspop{opacity:1;transform:translateY(-50%) translateX(0)}
.cstage .pack-wrap.side .oddspop{display:none}
.oddspop::before{
  content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:8px solid transparent;border-right-color:var(--line-2);
}
.oddspop h5{
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.oddspop .oline{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:6px 0}
.oddspop .oline + .oline{border-top:1px solid var(--line)}
.oddspop .onm{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.oddspop .onm i{width:8px;height:8px;border-radius:50%;background:var(--rc);flex:0 0 auto}
.oddspop .onm small{color:var(--muted);font-weight:500}
.oddspop .opc{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.oddspop .ofoot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.55}
.oddspop.left{left:auto;right:calc(100% + 18px);transform:translateY(-50%) translateX(8px)}
.cstage .pack-wrap:not(.side):hover .oddspop.left,
.cstage .pack-wrap.peek .oddspop.left{transform:translateY(-50%) translateX(0)}
.oddspop.left::before{right:auto;left:100%;border-right-color:transparent;border-left-color:var(--line-2)}

/* Sans survol, le panneau ne peut pas rester ancre sous le booster : celui-ci
   occupe deja le bas de l'ecran, le panneau tombait donc hors du cadre (79 px
   sous le pli en 375x667, bien plus avec plusieurs raretes) et recouvrait la
   consigne d'ouverture. On le centre sur le booster : toujours dans le champ,
   quelle que soit la hauteur de l'ecran ou le nombre de raretes. */
@media(max-width:900px){
  .oddspop{
    left:50%;right:auto;top:50%;
    transform:translate(-50%,-50%) scale(.96);
    width:min(300px,calc(100vw - 40px));
    max-height:min(72vh,420px);overflow-y:auto;
  }
  .cstage .pack-wrap:not(.side):hover .oddspop,
  .cstage .pack-wrap.peek .oddspop{transform:translate(-50%,-50%) scale(1)}
  /* la variante .left n'a plus lieu d'etre : elle est plus specifique et
     reimposerait l'ancrage lateral */
  .oddspop.left{left:50%;right:auto;transform:translate(-50%,-50%) scale(.96)}
  .cstage .pack-wrap:not(.side):hover .oddspop.left,
  .cstage .pack-wrap.peek .oddspop.left{transform:translate(-50%,-50%) scale(1)}
  .oddspop::before{display:none}
}

/* sélecteur de saison */
.segmented.seasons{margin-bottom:16px;flex-wrap:wrap;max-width:100%}
.segmented.seasons button{font-size:12px}
#seasonNav{align-self:center}
.sline.head-row + #seasonList .sline{margin-bottom:8px}
#seasonList .sline{grid-template-columns:1fr 84px 42px}
#seasonList .cnt{
  display:grid;place-items:center;height:38px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted);
}

/* Décourage la récupération des visuels : ni glisser-déposer, ni menu
   contextuel, ni sélection. Une capture d'écran reste possible — c'est un
   frein, pas une protection. */
.c-art img, .mini img, .sitem img, .drop img, .thumb{
  -webkit-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;-webkit-user-select:none;
  pointer-events:none;
}
.c-art, .mini, .fan .card, .card-slot .card{-webkit-touch-callout:none}

/* filtres par équipe, sous les filtres de rareté */
.chips.teams{margin-top:-8px}
.chips.teams button{font-size:11px}

/* barre de filtres de la collection : une seule ligne, qui se replie
   proprement quand la place manque */
.colbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 14px;margin-bottom:18px;
}
.colbar .search{
  display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:170px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 11px;transition:border-color .16s,box-shadow .16s;
}
.colbar .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.colbar .search svg{width:15px;height:15px;fill:var(--muted);flex:0 0 auto}
.colbar .search input{
  border:0;background:none;padding:10px 0;width:100%;
  font:inherit;font-size:13px;color:var(--text);outline:none;
}
.colbar .search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6);cursor:pointer}
.colbar .mini-select{max-width:none;flex:0 1 auto}
.colbar #colCount{margin-left:auto;white-space:nowrap}
@media(max-width:640px){
  .colbar #colCount{margin-left:0;width:100%}
  .colbar .mini-select{flex:1 1 40%}
}

/* emplacement vide : la carte n'existe pas a ce numero */
.pocket.gap{background:transparent;border:1px dashed var(--line);border-radius:var(--r)}

/* article deja achete aujourd hui */
.sitem.bought{opacity:.5}
.sitem.bought .thumbbox{filter:grayscale(1)}
.sitem .done{
  font-size:12px;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:6px;
}
#shopPreview{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
#shopPreview span{
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:20px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
select[multiple]{padding:6px;min-height:96px}


/* ---------------- ajout en lot ---------------- */
.bulkpanel{margin-top:22px}

/* les valeurs par défaut sont repliées : on ne les ouvre qu'au besoin */
.bulkdef{
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);margin:16px 0 4px;
}
.bulkdef summary{
  cursor:pointer;list-style:none;padding:11px 14px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.bulkdef summary::-webkit-details-marker{display:none}
.bulkdef summary::before{content:"▸";margin-right:9px;display:inline-block;transition:transform .18s}
.bulkdef[open] summary::before{transform:rotate(90deg)}
.bulkdef summary:hover{color:var(--text)}
.bulkdefaults{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;padding:4px 14px 0;
}
.bulkdefaults .field{margin-bottom:0}
.bulkdef > .btn{margin:14px}

/* tableau : lignes légères, séparateurs plutôt que blocs pleins */
.bulkhead,.bulklist .bl{
  display:grid;
  grid-template-columns:34px minmax(110px,1.5fr) minmax(70px,.9fr) 96px 112px 112px 66px 78px 78px 70px;
  gap:6px;align-items:center;
}
.bulkpanel.onepack .bulkhead,.bulkpanel.onepack .bulklist .bl{
  grid-template-columns:34px minmax(110px,1.5fr) minmax(70px,.9fr) 96px 112px 66px 78px 78px 70px;
}
.bulkpanel.onepack .cpack{display:none}

.bulkhead{
  position:sticky;top:0;z-index:2;background:var(--surface);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:14px 6px 9px;border-bottom:1px solid var(--line);
}
.bulklist{display:flex;flex-direction:column;margin-top:0;max-height:440px;overflow-y:auto}
.bulklist .bl{
  font-size:12px;padding:7px 6px;border-bottom:1px solid var(--line);
  transition:background .14s;
}
.bulklist .bl:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}
.bulklist .bl img{width:34px;height:34px;object-fit:cover;border-radius:5px;display:block}

/* champs discrets : le cadre n'apparaît qu'au survol ou à la saisie */
.bulklist .bl input,.bulklist .bl select{
  margin:0;padding:6px 7px;font-size:12px;min-width:0;width:100%;
  background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--text);transition:background .14s,border-color .14s;
}
.bulklist .bl input:hover,.bulklist .bl select:hover{border-color:var(--line)}
.bulklist .bl input:focus,.bulklist .bl select:focus{
  background:var(--surface-2);border-color:var(--accent);outline:none;
}
.bulklist .bl input[type=number]{text-align:right}

.bulklist .bl .st{font-weight:700;font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap}
.bulklist .bl.ok{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.bulklist .bl.ok .st{color:var(--accent)}
.bulklist .bl.ok input,.bulklist .bl.ok select{opacity:.45;pointer-events:none}
.bulklist .bl.ko .st{color:#FF7D97}

@media(max-width:1000px){
  .bulkpanel .bulkwrap{overflow-x:auto}
  .bulkhead,.bulklist .bl{min-width:860px}
}

/* champ en conflit */
input.bad{border-color:#FF7D97!important;box-shadow:0 0 0 3px rgba(255,90,120,.15)!important}
#numWarn{min-height:0;margin:-8px 0 14px}
#numWarn:empty{display:none}

/* barre de recherche et filtre du tableau des cartes */
.listbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 22px 14px;
}
.listbar .search{
  display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:150px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 11px;transition:border-color .16s,box-shadow .16s;
}
.listbar .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.listbar .search svg{width:14px;height:14px;fill:var(--muted);flex:0 0 auto}
.listbar .search input{
  border:0;background:none;padding:9px 0;width:100%;
  font:inherit;font-size:13px;color:var(--text);outline:none;
}
.listbar #cardShown{margin-left:auto;white-space:nowrap}

/* sept lignes visibles, la huitième déclenche le défilement */
.tablescroll{max-height:546px;overflow-y:auto}
.tablescroll thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface);
}

/* ---------------- godpacks ---------------- */
.godcard{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);padding:18px;margin-bottom:14px;
}
.godcard.off{opacity:.55}
.godtop{display:grid;grid-template-columns:1.4fr 1.2fr .7fr .7fr auto auto;gap:10px;align-items:end}
.godtop .field{margin-bottom:0}
.godtop .check{margin-bottom:0;align-self:center;white-space:nowrap}
.godpick{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.godpick .pickbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.godpick .pickbar input[type=search]{
  flex:1 1 160px;min-width:140px;font:inherit;font-size:13px;color:var(--text);
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;outline:none;
}
.godpick .pickbar input[type=search]:focus{border-color:var(--accent)}
.godgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:6px;max-height:260px;overflow-y:auto;padding-right:4px;
}
.godgrid label{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);
  background:var(--surface-3);cursor:pointer;font-size:12px;
  border:1px solid transparent;transition:border-color .14s;
}
.godgrid label:hover{border-color:var(--line-2)}
.godgrid label.on{border-color:var(--accent)}
.godgrid input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto}
.godgrid img{width:24px;height:24px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.godgrid .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.godcount{font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:900px){.godtop{grid-template-columns:1fr 1fr}}


/* barre de la simulation de godpacks */
.simbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:6px}
.simbar .field{margin-bottom:0;flex:1 1 160px;min-width:140px}
.simbar .btn{height:42px;white-space:nowrap}
#gsimRows td:nth-child(n+2){text-align:right;white-space:nowrap}
#gsimRows tr.none td{color:var(--muted)}

/* =========================================================
   TÉLÉPHONE — vues joueur uniquement
   Tout est enfermé sous 640 px : l'affichage bureau ne change pas.
   L'admin garde son défilement horizontal, il n'est pas visé.
   ========================================================= */

/* les navigateurs mobiles font entrer et sortir la barre d'adresse du
   calcul de 100vh, ce qui fait sauter la mise en page au défilement */
@supports (height:100dvh){
  .stack.fill{min-height:calc(100dvh - 230px)}
}

@media(max-width:640px){
  .page{padding:20px 14px 64px}

  /* ---- barre du haut ---- */
  .topbar{gap:8px;padding:8px 12px}
  .brand{font-size:17px;gap:8px}
  .brand-mark{height:22px;width:16px}
  .brand small{display:none}
  .topright{gap:6px}
  .pill{padding:6px 9px;font-size:11px}
  .pill em{display:none}
  .pill.user{display:none}
  .iconbtn{width:34px;height:34px}
  .iconbtn svg{width:16px;height:16px}
  /* la navigation passe sur sa propre ligne et défile au doigt */
  #nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  #nav button{flex:0 0 auto;padding:8px 13px;font-size:12.5px}
  .gearpop{width:min(240px,calc(100vw - 24px))}

  /* ---- titres et panneaux ---- */
  h1{font-size:24px}
  .head{margin-bottom:16px;gap:12px}
  .panel{padding:18px}
  .notice{padding:12px 14px}

  /* ---- ouverture de booster ---- */
  .stack.fill{min-height:auto}
  /* les boosters voisins dépassaient de l écran et faisaient défiler la page ;
     clip et non hidden, pour ne pas rogner le panneau des taux qui sort en bas */
  .carousel{height:min(46vh,340px);overflow-x:clip}
  .cnav{width:34px;height:34px;font-size:19px}
  .cnav.prev{left:-2px}
  .cnav.next{right:-2px}
  .segmented.seasons{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .segmented.seasons::-webkit-scrollbar{display:none}
  .segmented.seasons button{flex:0 0 auto}
  .tray{min-height:76px;gap:6px}
  .mini{height:66px;width:calc(66px * var(--car))}
  .fan{gap:9px}

  /* ---- collection ---- */
  .colbar{padding:10px;gap:8px}
  /* la recherche partage sa ligne avec le bouton Filtres */
  .colbar .search{flex:1 1 150px;min-width:130px}
  .colbar .mini-select{flex:1 1 calc(50% - 4px);max-width:none}
  .colbar #colCount{width:100%;margin-left:0;text-align:center}
  .binder{padding:12px}
  .grid{gap:10px}
  .dupbar{padding:12px 14px;gap:10px}
  .dupbar .btn{width:100%}
  .pager{gap:8px;flex-wrap:wrap}

  /* ---- quêtes et shop ---- */
  .qgrid{grid-template-columns:1fr}
  .sgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .sitem{padding:12px;gap:9px}
  .sitem .thumbbox{height:124px}
  .sitem h4{font-size:13px}

  /* ---- classement ---- */
  /* on ne garde que le rang, le joueur et le nombre de cartes : les deux
     autres colonnes imposaient un defilement horizontal */
  #v-board .panel.flush{overflow-x:visible}
  .table.board{min-width:0}
  .table.board .b-comp,.table.board .b-packs{display:none}

  /* ---- légal et pied de page ---- */
  .legalbox{padding:18px;font-size:13.5px}
  .foot{padding:18px 14px 28px;flex-direction:column;align-items:flex-start;gap:12px}

  /* iOS agrandit la page dès qu'un champ fait moins de 16 px */
  input,select,textarea{font-size:16px}
  .colbar .search input{font-size:16px}
  /* 16 px minimum : en dessous, iOS zoome sur le champ touché */
  .mini-select{font-size:16px;padding:9px 10px}
}

/* très petits écrans : une seule carte par ligne au shop */
@media(max-width:380px){
  .sgrid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}

/* sans survol, ce qui n'apparaissait qu'au passage de la souris doit rester visible */
@media(hover:none){
  .cstage .pack-wrap.side{filter:brightness(.7) saturate(.8)}
}

/* ---- filtres de collection repliables ---- */
.colbar .filtoggle{display:none}
.colfilters{display:contents}

@media(max-width:640px){
  /* la recherche reste visible, le reste se déplie à la demande */
  .colbar{position:relative}
  .colbar .filtoggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
  .colbar .filtoggle.actif::after{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  }
  .colfilters{
    display:none;width:100%;
    grid-template-columns:1fr 1fr;gap:8px;
  }
  .colfilters.on{display:grid}
  .colfilters .mini-select{width:100%;max-width:none}
  .colfilters #fReset{grid-column:1/-1}

  /* cibles tactiles : 44 px recommandés, on ne descend plus sous 40 */
  #nav button{padding:11px 14px;font-size:13px}
  .iconbtn{width:40px;height:40px}
  .iconbtn svg{width:18px;height:18px}
  .segmented.seasons button{padding:11px 14px}
  .btn.sm{padding:11px 15px;font-size:12.5px}
  .pager .btn{min-height:40px}
  .foot a{padding:6px 0;display:inline-block}
}

/* les classeurs defilent au doigt plutot que de s'empiler */
@media(max-width:640px){
  .segmented.binders{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .segmented.binders::-webkit-scrollbar{display:none}
  .segmented.binders button{flex:0 0 auto;padding:11px 12px}
}

/* les prix passent sur deux lignes plutôt que de déborder */
@media(max-width:640px){
  .pline{grid-template-columns:14px 1fr 1fr;row-gap:4px}
  .pline .rname{grid-column:2/-1}
  .pline.head-row span:nth-child(2){grid-column:2/-1}
  .subtabs{width:100%}
  .subtabs button{flex:1 1 0;padding:11px 8px}
}


/* =============================================================================
   MODE FAILLE
   ========================================================================== */

.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.row3{grid-template-columns:1fr 1fr}.row3 .field:last-child{grid-column:1/-1}}

/* ---- badges de carte : énergie à gauche, puissance à droite ---- */
.c-art{position:relative}
/* Métadonnées de jeu sur la ligne de rareté : discrètes, alignées à droite,
   dimensionnées en em pour suivre la taille de la carte. */
.c-meta{
  margin-left:auto;display:inline-flex;align-items:center;gap:.55em;
  letter-spacing:0;font-size:1.05em;
}
.c-meta .m-role{display:inline-flex;align-items:center;gap:.25em;opacity:.85;font-weight:700}
.c-meta .m-role .ricon{width:1.25em;height:1.25em}
.c-meta .m-en,.c-meta .m-pw{
  font-family:'Anton',sans-serif;font-weight:400;line-height:1.3;
  min-width:1.7em;padding:.05em .35em;border-radius:.35em;text-align:center;
}
.c-meta .m-en{background:rgba(74,168,255,.16);color:#7cc3ff;border:1px solid rgba(74,168,255,.32)}
.c-meta .m-pw{background:rgba(214,255,61,.14);color:var(--accent);border:1px solid rgba(214,255,61,.32)}
.c-meta .m-ab{width:1.35em;height:1.35em;border-radius:.3em;overflow:hidden;display:inline-block;opacity:.9}
.c-meta .m-ab img{width:100%;height:100%;display:block}
/* en plein cadre il n'y a pas de bandeau : on le pose sur le bas du visuel */
.c-rar.over{
  position:absolute;left:0;right:0;bottom:0;z-index:6;border-top:0;
  background:linear-gradient(transparent,rgba(8,8,10,.82) 55%);
}
.card .role{display:inline-flex;align-items:center;gap:5px}
.ricon{width:14px;height:14px;fill:currentColor;flex:0 0 auto}
.ricon .fr{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.34}
.rchip{
  display:inline-flex;align-items:center;gap:4px;color:var(--rl,var(--muted));
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb, var(--rl,#888) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--rl,#888) 34%, transparent);
  border-radius:999px;padding:2px 7px 2px 5px;white-space:nowrap;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .rchip{background:rgba(255,255,255,.06);border-color:var(--line-2)}
}
.aicon{width:100%;height:100%;display:block}

/* -----------------------------------------------------------------------------
   Accueil de la Faille. Entrer dans une partie est l'action principale : elle
   tient la banniere, pas le bas de page. Le deck, lui, devient un objet — une
   boite qu'on ouvre — plutot qu'une rangee de vignettes noyee dans la page.
   -------------------------------------------------------------------------- */
.rifthero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--surface);
  padding:34px 30px 30px;margin-bottom:26px;
}
.rh-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rh-glow{position:absolute;border-radius:50%;filter:blur(58px);opacity:.4}
.rh-glow.a{width:420px;height:420px;left:-90px;top:-190px;background:var(--accent)}
.rh-glow.b{width:380px;height:380px;right:-100px;bottom:-210px;background:var(--accent-2)}
.rh-grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 36%,#000 22%,transparent 76%);
  mask-image:radial-gradient(130% 95% at 50% 36%,#000 22%,transparent 76%);
}
.rh-in{position:relative;max-width:740px}
.rh-tag{
  display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.rifthero h1{font-size:clamp(34px,6vw,54px);line-height:.95;margin-bottom:8px}
.rh-sub{color:var(--muted);font-size:14px;max-width:54ch;margin-bottom:18px}
.rh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,134px));gap:10px;margin-bottom:22px}
.rh-stats div{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 8px;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-2) 76%,transparent);
}
.rh-stats b{font-family:'Anton',sans-serif;font-size:24px;line-height:1;color:var(--accent)}
.rh-stats span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center}
.rh-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rh-hint{font-size:12px;color:var(--muted)}
.rh-hint:empty{display:none}

.head.sub{margin-top:22px}
.head.sub h2{font-size:17px;display:flex;align-items:baseline;gap:6px}
.head.sub h2 b{font-family:'Anton',sans-serif;color:var(--accent)}

/* ---- la boite de deck ---- */
.decklane{display:block;margin-top:8px}
/* width:100% explicite : tout le contenu de la face est en position absolue,
   la boite n'a donc aucune largeur propre. Sur mobile les marges auto
   annulaient en plus l'etirement de la grille — elle tombait a 4 px. */
.deckbox{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;perspective:900px}
.db-side{
  position:absolute;left:-9px;top:10px;bottom:10px;width:14px;border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,#05060a,#14161d);border:1px solid var(--line);border-right:0;
}
.db-face{
  position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  background:linear-gradient(165deg,#171a23,#0b0d13);
  border:1px solid var(--line-2);border-top:4px solid var(--rc);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .22s ease,box-shadow .22s ease;
}
.deckbox:hover .db-face{transform:translateY(-6px) rotateX(4deg);box-shadow:0 32px 58px -22px rgba(0,0,0,.95)}
.db-art{position:absolute;inset:0}
.db-art img{width:100%;height:100%;object-fit:cover;display:block}
.db-veil{
  position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 6%,transparent,rgba(6,7,11,.24) 42%,rgba(6,7,11,.94) 88%),
             linear-gradient(180deg,color-mix(in srgb,var(--rc) 30%,transparent),transparent 46%);
}
.db-mark{position:absolute;left:50%;top:13%;width:40%;transform:translateX(-50%)}
.db-mark .pmark{position:static;transform:none;width:100%;height:auto;fill:var(--rc);opacity:.95;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.75))}
.db-band{
  position:absolute;left:0;right:0;top:45%;display:flex;align-items:center;justify-content:space-between;
  padding:6px 12px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--rc) 34%,transparent),transparent);
  border-top:1px solid color-mix(in srgb,var(--rc) 50%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--rc) 50%,transparent);
}
.db-band b{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.db-band i{font-family:'Anton',sans-serif;font-style:normal;font-size:16px;color:var(--rc)}
.db-foot{position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;flex-direction:column;gap:7px;text-align:center}
.db-foot em{font-style:normal;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-shadow:0 1px 4px #000}
.db-open{
  display:block;padding:7px;border-radius:7px;color:#fff;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:.16s;
}
.deckbox:hover .db-open{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.deckbox.vide .db-face{border-top-color:var(--line-2);border-style:dashed}

/* ---- resume du deck ---- */
.deckside{min-width:0}
.dstats{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ds{flex:1 1 96px;display:flex;flex-direction:column;gap:2px;padding:11px 12px;
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.ds b{font-family:'Anton',sans-serif;font-size:23px;line-height:1}
.ds span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ds.roles{flex:1 1 200px;flex-direction:row;align-items:center;justify-content:space-around;gap:8px}
.dsr{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.3}
.dsr.on{opacity:1}
.dsr .ricon{width:19px;height:19px}
.dsr i{font-style:normal;font-family:'Anton',sans-serif;font-size:14px;color:var(--rl)}

/* Courbe d'energie : une composition qui ne coute que cher ne se pose pas
   avant le tour 4. La voir evite de s'en apercevoir en pleine partie. */
.dcurve{display:flex;align-items:flex-end;gap:5px;margin-top:12px;padding:14px 14px 10px;
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.dcurve:empty{display:none}
.dc-lbl{align-self:center;max-width:78px;margin-right:10px;line-height:1.3;
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dc{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:74px}
.dc i{display:block;position:relative;width:100%;max-width:28px;height:var(--h);min-height:3px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent))}
.dc i em{position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  font-style:normal;font-family:'Anton',sans-serif;font-size:11px;color:var(--muted)}
.dc u{text-decoration:none;font-size:10px;color:var(--muted)}

/* ---- barre de la collection ---- */
.poolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 2px}
.poolbar .search{
  display:flex;align-items:center;gap:8px;flex:1 1 200px;max-width:320px;min-width:170px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 11px;transition:border-color .16s,box-shadow .16s;
}
.poolbar .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.poolbar .search svg{width:15px;height:15px;fill:var(--muted);flex:0 0 auto}
.poolbar .search input{border:0;background:none;padding:9px 0;width:100%;font:inherit;font-size:13px;color:var(--text);outline:none}
.rolefil{display:flex;gap:6px;flex-wrap:wrap}
.rfil{
  display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);transition:.15s;
}
.rfil .ricon{width:14px;height:14px}
.rfil i{font-style:normal;font-size:10.5px;color:var(--muted);background:var(--surface-3);
  border-radius:999px;padding:1px 6px}
.rfil:hover{color:var(--text);border-color:var(--line-2)}
.rfil.on{color:var(--rl);border-color:var(--rl);background:color-mix(in srgb,var(--rl) 14%,transparent)}
.rfil.on i{color:var(--rl)}

/* Le pool empile des blocs pleine largeur : c'est la grille intérieure de
   chaque bloc qui aligne les cartes. */
.deckpool{
  display:block;margin-top:10px;
  max-height:56vh;overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;
}
.dtile{
  position:relative;display:block;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 0 6px;overflow:hidden;transition:border-color .15s,transform .15s;
  border-top:3px solid var(--rc);
}
.dtile:hover{transform:translateY(-2px);border-color:var(--line-2)}
.dtile.in{box-shadow:inset 0 0 0 1px var(--accent)}
.dtile.in::after{content:"−";position:absolute;right:5px;bottom:4px;color:var(--accent);font-weight:800}
.dtile:not(.in)::after{content:"+";position:absolute;right:5px;bottom:4px;color:var(--muted);font-weight:800}
.dt-art{display:block;aspect-ratio:1/1;background:var(--surface-3);position:relative}
.dt-art img{width:100%;height:100%;object-fit:cover;display:block}
.dt-art i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:26px;color:var(--surface-3);font-style:normal}
.dt-en,.dt-pw{position:absolute;top:4px;min-width:20px;height:20px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:12px}
.dt-en{left:4px;background:#2f6fd0;color:#fff}
.dt-pw{right:4px;background:var(--accent);color:var(--on-accent)}
.dt-name{display:block;padding:5px 6px 0;font-size:11.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-role{display:flex;align-items:center;gap:4px;padding:0 6px;font-size:10px;color:var(--muted)}

.actions.center{justify-content:center;margin-top:22px}
.btn.big{font-size:16px;padding:14px 32px}
.btn.glow:not(:disabled){
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),
             0 12px 34px -10px color-mix(in srgb,var(--accent) 70%,transparent);
}
.btn.glow:not(:disabled):hover{transform:translateY(-1px)}

/* ---- HUD ---- */
.rifthud{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.hud-turn{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hud-turn b{font-family:'Anton',sans-serif;font-size:24px;color:var(--text);margin-left:6px}
.hud-turn i{font-style:normal;color:var(--muted)}
.hud-energy{display:flex;align-items:center;gap:4px;margin-left:auto}
.hud-energy b{font-family:'Anton',sans-serif;font-size:20px;color:#6fb4ff;margin-right:4px}
.hud-energy i{width:9px;height:9px;border-radius:50%;background:var(--surface-3);
  border:1px solid var(--line-2);transition:background .2s}
.hud-energy i.on{background:#4aa8ff;border-color:#4aa8ff;box-shadow:0 0 6px rgba(74,168,255,.7)}

/* ---- plateau ---- */
.riftboard{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.zone{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:8px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s,box-shadow .15s,opacity .2s;
}
.zone.veiled{opacity:.45}
.zone.ok{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px rgba(214,255,61,.18);cursor:pointer}
.zone.no{opacity:.5}
/* Les cartes d'une zone sont posées côte à côte, deux par rangée : empilées,
   on ne distinguait plus les visuels. */
/* deux colonnes, mais plafonnees : sur large ecran un 1fr etirait chaque
   emplacement a 180 px et le plateau depassait 800 px de haut */
.zrow{display:grid;grid-template-columns:repeat(2,minmax(0,86px));justify-content:center;gap:6px}
.slot{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform .15s ease;
}
.zrow .slot:hover{z-index:6;transform:translateY(-3px)}
.slot.libre{border-style:dashed;background:transparent}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:20px;color:var(--surface-3);font-style:normal}
.slot .s-pw{position:absolute;right:3px;bottom:3px;min-width:19px;height:19px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:12px;background:var(--accent);color:var(--on-accent)}
.zrow.foe .slot .s-pw{background:var(--accent-2);color:#fff}
.slot .s-ab{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:4px;overflow:hidden}
.slot.dead{filter:grayscale(1) brightness(.45)}
.slot.dead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(45deg,transparent 46%,var(--accent-2) 47%,var(--accent-2) 53%,transparent 54%)}
.slot.fresh{box-shadow:inset 0 0 0 2px var(--accent);cursor:pointer}
.zrow.me .slot{border-color:rgba(214,255,61,.22)}
.zrow.foe .slot{border-color:rgba(255,46,126,.22)}

.zinfo{position:relative;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);padding:8px;min-height:92px;
  display:flex;flex-direction:column;justify-content:space-between}
.zicon{position:absolute;right:7px;top:7px;width:30px;height:30px;fill:currentColor;opacity:.85;z-index:2}
.ztext{position:relative}
.ztext h4{font-size:12.5px;line-height:1.2;margin-bottom:3px}
.ztext p{font-size:10.5px;line-height:1.35;color:var(--muted)}
.zonly{display:inline-flex;gap:8px;align-items:center;margin-top:4px;font-size:10px;
  color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.zonly .ricon{width:11px;height:11px}
.zsc{position:relative;display:flex;justify-content:space-between;margin-top:6px}
.zsc b{font-family:'Anton',sans-serif;font-size:17px;line-height:1}
.zsc .me{color:var(--accent)}
.zsc .foe{color:var(--accent-2)}

/* Le fond d'une zone est une scene dessinee (voir ZONE_ART dans app.js), pas
   une photo : les visuels de la Faille ne nous appartiennent pas. Le voile
   sombre reste leger, sinon on ne voit plus le dessin. */
.art-dragon{--zt:255,152,48}
.art-baron {--zt:158,102,255}
.art-river {--zt:70,178,255}
.art-jungle{--zt:82,208,122}
.art-bot   {--zt:255,94,156}
.art-mid   {--zt:214,255,61}
.art-top   {--zt:240,164,74}
.art-bush  {--zt:64,180,110}
.art-turret{--zt:190,200,220}
.art-herald{--zt:140,128,255}
.zart{position:absolute;inset:0;overflow:hidden}
.zscene{position:absolute;inset:0;width:100%;height:100%;display:block}
.zart::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 34%, rgba(10,10,14,.72) 88%);
}
.art-baron {--zt:158,102,255; background-size:341.3%;background-position:19.9% 16.0%}
.art-river {--zt:70,178,255;  background-size:341.3%;background-position:32.6% 35.4%}
.art-bot   {--zt:255,94,156;  background-size:336.8%;background-position:94.4% 94.4%}
.art-mid   {--zt:214,255,61;  background-size:365.7%;background-position:50.5% 50.5%}
.art-top   {--zt:240,164,74;  background-size:336.8%;background-position:6.1% 6.1%}
.art-bush  {--zt:64,180,110;  background-size:365.7%;background-position:77.4% 29.0%}

/* ---- main et actions ---- */
.riftfoot{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:14px}
.rifthand{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.hcard{
  position:relative;flex:0 0 92px;width:92px;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--rc);
  border-radius:var(--r-sm);overflow:hidden;padding:0 0 5px;
  transition:transform .15s,box-shadow .15s;
}
.hcard:hover{transform:translateY(-4px)}
.hcard.sel{box-shadow:0 0 0 2px var(--accent),0 8px 20px rgba(0,0,0,.5);transform:translateY(-6px)}
.hcard.cher{opacity:.45}
.h-art{display:block;aspect-ratio:1/1;background:var(--surface-3);position:relative}
.h-art img{width:100%;height:100%;object-fit:cover;display:block}
.h-art i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:24px;color:var(--surface-3);font-style:normal}
.h-en,.h-pw{position:absolute;top:4px;min-width:21px;height:21px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:13px}
.h-en{left:4px;background:#2f6fd0;color:#fff}
.h-pw{right:4px;background:var(--accent);color:var(--on-accent)}
.h-name{display:block;padding:5px 6px 0;font-size:11px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-role{display:block;padding:0 6px;color:var(--muted)}
.h-ab{position:absolute;left:4px;bottom:26px;width:20px;height:20px;border-radius:5px;overflow:hidden}
.riftside{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.riftlog{display:flex;flex-direction:column;gap:2px;font-size:11px;text-align:right;max-width:260px}
.riftlog .me{color:var(--accent)}
.riftlog .foe{color:var(--accent-2)}

/* ---- écran de fin ---- */
.endcard{max-width:460px;margin:40px auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px}
.endcard h1{font-size:38px;margin-bottom:4px}
.endcard h1.end-win{color:var(--accent)}
.endcard h1.end-loss{color:var(--accent-2)}
.endzones{display:flex;flex-direction:column;gap:6px;margin:18px 0}
.ez{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--line-2);font-size:13px}
.ez.w{border-left-color:var(--accent)}
.ez.l{border-left-color:var(--accent-2)}
.ez b{font-family:'Anton',sans-serif;font-size:15px}
.endgain{color:var(--accent);font-weight:800;font-size:15px}

@media(max-width:640px){
  .riftboard{gap:6px}
  .zone{padding:5px;gap:5px;border-radius:var(--r-sm)}
  .zrow{grid-template-columns:repeat(2,minmax(0,48px));gap:4px}
  .zinfo{padding:6px;min-height:78px}
  .ztext h4{font-size:11px}
  .ztext p{font-size:9.5px}
  .zicon{width:24px;height:24px}
  .zsc b{font-size:14px}
  .slot .s-pw{min-width:15px;height:15px;font-size:9.5px;right:2px;bottom:2px}
  .slot .s-ab{width:13px;height:13px;left:2px;top:2px}
  .riftfoot{grid-template-columns:1fr;align-items:stretch}
  .riftside{align-items:stretch}
  .riftlog{max-width:none;text-align:left}
  .hcard{flex:0 0 78px;width:78px}
  .deckrow{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
  .deckpool{max-height:48vh}
}


/* ---- bandeaux de combat ---- */
.riftbar{
  display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.riftbar.me{margin:10px 0 0;flex-wrap:wrap}
.riftbar.foe{border-left:3px solid var(--accent-2)}
.riftbar.me{border-left:3px solid var(--accent)}
.rb-who{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rb-who i{width:8px;height:8px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 8px var(--accent-2)}
.rb-hand{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}
.rb-hand .hcount{font-family:'Anton',sans-serif;font-size:16px;color:var(--text)}
.rb-hand::before{content:"";width:13px;height:16px;border-radius:2px;
  background:var(--surface-3);border:1px solid var(--line-2);
  transform:rotate(-8deg);display:inline-block}
.rb-zones{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.rb-zones i{width:11px;height:11px;border-radius:3px;background:var(--surface-3);
  border:1px solid var(--line-2);transition:background .25s}
.riftbar.me .rb-zones{margin-left:0;margin-right:auto}
.riftbar.me .rb-zones i.on{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 8px rgba(214,255,61,.55)}
.riftbar.foe .rb-zones i.on{background:var(--accent-2);border-color:var(--accent-2);
  box-shadow:0 0 8px rgba(255,46,126,.55)}
.rb-zones b{font-family:'Anton',sans-serif;font-size:16px;margin-left:3px}
.riftbar.me .rb-zones b{color:var(--accent)}
.riftbar.foe .rb-zones b{color:var(--accent-2)}

.hud-turn{display:flex;flex-direction:column;gap:4px;align-items:center}
.pips{display:flex;gap:4px}
.pips i{width:16px;height:4px;border-radius:2px;background:var(--surface-3);transition:background .25s}
.pips i.on{background:var(--muted)}
.pips i.now{background:var(--accent);box-shadow:0 0 8px rgba(214,255,61,.6)}
.hud-turn .tlbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hud-turn .tlbl b{font-family:'Anton',sans-serif;font-size:14px;color:var(--text);margin-left:3px}
.hud-turn .tlbl i{font-style:normal}
.riftbar.me .btn{margin-left:auto}
.riftbar.me .btn.ghost{margin-left:0}

/* ---- pioche : un vrai talon face cachée ---- */
.pile{display:flex;align-items:center;gap:7px}
.pstack{position:relative;display:inline-block;width:34px;height:46px;flex:0 0 auto}
.pcard{
  position:absolute;inset:0;border-radius:5px;
  background:linear-gradient(150deg,#1b1d24,#101116 60%,#0b0c10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
  transform:translate(calc(var(--i) * 1.6px), calc(var(--i) * -1.6px));
}
.pcard.vide{background:none;border-style:dashed;opacity:.4;transform:none}
.pmark{position:absolute;left:50%;top:50%;width:52%;height:52%;
  transform:translate(-50%,-50%);fill:var(--accent);opacity:.5}
.pn{font-family:'Anton',sans-serif;font-size:17px;color:var(--text)}
.pile.me{flex-direction:column;gap:4px}
.pile.me .pstack{width:52px;height:70px}

.riftfoot{grid-template-columns:1fr auto;align-items:end}
.riftlog{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;margin-top:10px;
  padding:8px 10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);min-height:32px;align-items:center}
.riftlog:empty{display:none}

/* ---- plateau : un peu plus de relief ---- */
.zone{background:linear-gradient(180deg,var(--surface),var(--bg));box-shadow:0 2px 10px rgba(0,0,0,.28)}
.zinfo{border-color:var(--line-2)}
.ztext h4{letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.ztext p{text-shadow:0 1px 3px rgba(0,0,0,.85)}
.zicon{filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.zsc b{text-shadow:0 1px 4px rgba(0,0,0,.8)}
.zone.veiled .zart{filter:grayscale(1) brightness(.45)}

@media(max-width:640px){
  .riftbar{gap:7px;padding:6px 8px;flex-wrap:wrap}
  .rb-who span{display:none}
  .pile.me .pstack{width:40px;height:54px}
  .pstack{width:28px;height:38px}
  .hud-turn .tlbl{display:none}
  .pips i{width:12px}
  .riftbar.me .btn{margin-left:auto}
}



/* ---- pool du deck, groupé par rôle ---- */
.poolgrp{margin-bottom:10px;border-bottom:1px solid var(--line)}
.poolgrp>summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:8px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.poolgrp>summary::-webkit-details-marker{display:none}
.poolgrp>summary::before{
  content:"";width:0;height:0;flex:0 0 auto;
  border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease;
}
.poolgrp[open]>summary::before{transform:rotate(90deg)}
.poolgrp>summary:hover{color:var(--text)}
.poolgrp>summary b{font-family:'Anton',sans-serif;font-size:14px;color:var(--text);margin-left:auto}
.poolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px;padding:2px 0 10px}
@media(max-width:640px){.poolgrid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}}

/* ---- réglages du jeu ---- */
.zonelist{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.zline{align-items:flex-start;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.zline span{display:flex;flex-direction:column;gap:1px}
.zline b{font-size:12.5px}
.zline small{font-size:11px;color:var(--muted);line-height:1.35}
.lgline{padding:11px;margin-bottom:9px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.lgline .btn{margin-top:8px}

/* ---- sélection multiple de cartes ---- */
.pickbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.pickbar span{font-size:12.5px;color:var(--muted);margin-right:auto}
.pickcell{width:34px;text-align:center}
.pickcell input{width:17px;height:17px;accent-color:var(--accent)}
#cardRows tr.picked{background:rgba(214,255,61,.07)}
h3.pad .btn{float:right;margin-top:-3px}


/* ---- édition en lot ---- */
.editpanel{margin:0 14px 14px;padding:12px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2)}
.edithead,.editlist .bl{
  display:grid;
  grid-template-columns:34px minmax(110px,1.5fr) minmax(66px,.9fr) 96px 112px 112px 62px 74px 74px 116px;
  gap:6px;align-items:center;
}
.editpanel.onepack .edithead,.editpanel.onepack .editlist .bl{
  grid-template-columns:34px minmax(110px,1.5fr) minmax(66px,.9fr) 96px 112px 62px 74px 74px 116px;
}
.editpanel.onepack .cpack{display:none}
.edithead{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.editlist{display:flex;flex-direction:column;gap:5px;max-height:52vh;overflow-y:auto}
.editlist .bl{padding:3px 2px}
.editlist .bl img{width:34px;height:34px;border-radius:5px;object-fit:cover;background:var(--surface-3)}
.editlist input,.editlist select{width:100%;min-width:0}
@media(max-width:900px){
  .editpanel{margin:0 8px 10px}
  .edithead{display:none}
  .editlist .bl{grid-template-columns:34px 1fr 1fr;grid-auto-rows:auto;row-gap:4px}
  .editpanel.onepack .editlist .bl{grid-template-columns:34px 1fr 1fr}
  .editlist .bl img{grid-row:span 4}
}


/* ---- aperçu des stats ---- */
.statspanel{margin-top:14px;padding:12px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2)}
.statshead,.statslist .bl{
  display:grid;
  grid-template-columns:34px minmax(110px,1.5fr) minmax(74px,.9fr) 96px 48px 48px 44px 52px 48px 52px 52px 88px 78px;
  gap:6px;align-items:center;
}
.statshead{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.statslist{display:flex;flex-direction:column;gap:3px;max-height:50vh;overflow-y:auto}
.statslist .bl{padding:4px 2px;border-radius:var(--r-sm);font-size:12px}
.statslist .bl.approx{background:rgba(255,190,60,.07)}
.statslist .bl.peu,.statslist .bl.nope{opacity:.5}
.statslist .sn{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statslist .sv{font-family:'Anton',sans-serif;font-size:13px;white-space:nowrap}
.statslist .sv i{color:var(--muted);font-style:normal;margin:0 2px}
.statslist .sv b{color:var(--accent)}
.statslist .sv em{font-family:'Archivo',sans-serif;font-size:11px;font-style:normal;color:var(--muted)}
.statslist .bl i{font-style:normal;color:#ffbe3c}
#s-bands{line-height:1.9}
#s-bands b{font-family:'Anton',sans-serif;font-weight:400;margin-right:3px}
@media(max-width:900px){
  .statshead{display:none}
  .statslist .bl{grid-template-columns:28px 1fr 1fr;row-gap:3px}
}


/* ---- poids des mesures ---- */
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
@media(min-width:1100px){.wgrid{grid-template-columns:repeat(7,1fr)}}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}}
#s-sum{font-weight:700}
.statslist .bl.warn{background:rgba(255,120,60,.09)}
.statslist .bl i.w{color:#ff8a3c;cursor:help}


/* ---- alias d'équipe ---- */
#g-alias{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;max-height:30vh;overflow-y:auto}
.alline{display:grid;grid-template-columns:1fr 18px 1fr 32px;gap:6px;align-items:center}
.alline span{text-align:center;color:var(--muted)}
.alline input{width:100%;min-width:0}


/* ---- illustration de zone televersee ---- */
.zphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.zline{align-items:center}
.zthumb{
  flex:0 0 auto;width:52px;height:34px;border-radius:6px;overflow:hidden;cursor:pointer;
  background:var(--surface-3);border:1px dashed var(--line-2);padding:0;
  display:flex;align-items:center;justify-content:center;
}
.zthumb:hover{border-color:var(--accent)}
.zthumb img{width:100%;height:100%;object-fit:cover;display:block}
.zthumb i{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.notice.warn{border-color:rgba(255,138,60,.45);background:rgba(255,138,60,.1);color:#ffb37a;margin-bottom:12px}

/* ---- apercu d'une carte posee, au survol ---- */
.slotpeek{
  position:fixed;z-index:80;pointer-events:none;
  --ch:300px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.65));
  animation:peekIn .13s ease both;
}
@keyframes peekIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media(max-width:900px){.slotpeek{display:none}}


/* =============================================================================
   REFONTE — calques, scene de la Faille, nouvelles zones
   ========================================================================== */

/* ---- calques : boite de deck et confirmation ---- */
body.noscroll{overflow:hidden}
.ovl{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,6,10,.74);backdrop-filter:blur(5px);
  animation:ovlIn .16s ease both;
}
.ovl[hidden]{display:none}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
.ovlbox{
  position:relative;width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column;
  padding:20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  animation:boxIn .2s cubic-bezier(.2,.9,.3,1) both;
}
.ovlbox.sm{width:min(440px,100%)}
@keyframes boxIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ovlhead{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.ovlhead h3{font-size:20px;margin:0}
.ovlbox.sm h3{font-size:19px;margin-bottom:8px}
.dmcount{margin-left:auto;font-family:'Anton',sans-serif;font-size:20px}
.dmcount b{color:var(--accent)}
.dmcount i{font-style:normal;font-size:15px;color:var(--muted)}
.ovlx{
  width:32px;height:32px;border-radius:8px;font-size:22px;line-height:1;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
.ovlx:hover{color:var(--text);border-color:var(--line-2)}
.ovlfoot{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

.dmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;
  margin-top:12px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.dmtile{
  position:relative;display:block;text-align:left;cursor:pointer;padding:0 0 8px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);border-top:3px solid var(--rc);
  border-radius:var(--r-sm);transition:transform .15s,border-color .15s;
}
.dmtile:hover{transform:translateY(-3px);border-color:var(--accent-2)}
.dm-art{display:block;aspect-ratio:1/1;background:var(--surface-3);position:relative}
.dm-art img{width:100%;height:100%;object-fit:cover;display:block}
.dm-art i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:30px;color:var(--surface-3);font-style:normal}
.dm-en,.dm-pw{position:absolute;top:5px;min-width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:13px}
.dm-en{left:5px;background:#2f6fd0;color:#fff}
.dm-pw{right:5px;background:var(--accent);color:var(--on-accent)}
/* Le geste est le retrait : la pastille le dit au survol, sans encombrer. */
.dm-x{
  position:absolute;left:50%;top:34%;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-family:'Anton',sans-serif;font-size:28px;background:var(--accent-2);color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.6);opacity:0;
  transform:translate(-50%,-50%) scale(.7);transition:.16s;
}
.dmtile:hover .dm-x{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dm-name{display:block;padding:7px 8px 0;font-size:12px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-sub{display:flex;align-items:center;gap:6px;padding:2px 8px 0;font-size:10px;color:var(--muted)}
.dm-sub em{font-style:normal;margin-left:auto;white-space:nowrap}

/* ---- la scene ---- */
/* Pas d'overflow:hidden ici : il ferait de la scene un conteneur de
   defilement, et la main collante en bas cesserait de coller. Le decor est
   detoure par son propre calque. */
.riftstage{
  position:relative;padding:14px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:radial-gradient(130% 100% at 50% 50%,var(--surface),var(--bg) 74%);
}
.stage-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.stage-bg span{position:absolute;width:62%;height:72%;border-radius:50%;filter:blur(86px);opacity:.15}
.stage-bg span:first-child{background:var(--accent-2);left:-14%;top:-34%}
.stage-bg span:last-child{background:var(--accent);right:-14%;bottom:-34%}
.riftstage>:not(.stage-bg){position:relative}
.riftstage .riftbar{background:color-mix(in srgb,var(--surface) 82%,transparent)}

/* ---- zones : qui mene, et de combien ---- */
.zone{transition:border-color .18s,box-shadow .18s,opacity .25s,transform .18s}
.zone.lead{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),
             0 8px 26px -12px rgba(214,255,61,.55);
}
.zone.behind{border-color:color-mix(in srgb,var(--accent-2) 42%,transparent)}
.zone.ok{transform:translateY(-3px)}
.zone.veiled{filter:saturate(.35)}
.zone.veiled .ztext p{font-style:italic}
/* Deux nombres se comparent mal passe la vingtaine : la barre le dit d'un
   coup d'oeil, l'adversaire a gauche, soi a droite. */
.zsc{align-items:center;gap:0}
.zbal{
  position:relative;flex:1;height:5px;margin:0 9px;align-self:center;
  border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--accent-2) 60%,transparent);
}
.zbal i{position:absolute;right:0;top:0;bottom:0;width:var(--p);border-radius:999px;
  background:var(--accent);transition:width .3s ease}
/* Sur un plateau dense, le role est le seul reperage qui tienne a 48 px. */
.s-role{position:absolute;left:3px;top:3px;z-index:2;line-height:0;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}
.s-role .ricon{width:14px;height:14px}
.slot .s-ab{left:auto;right:3px;top:3px}
.slot{border-top:2px solid color-mix(in srgb,var(--rc) 70%,transparent)}

/* ---- main : des cartes qu'on lit ---- */
.rifthand{gap:10px;padding:10px 2px 12px}
.hcard{flex:0 0 104px;width:104px}
.hcard.sel{box-shadow:0 0 0 2px var(--accent),0 14px 30px -8px rgba(214,255,61,.5)}

/* ---- teintes des nouvelles zones ---- */
.art-nexus   {--zt:104,196,255}
.art-inhib   {--zt:255,126,84}
.art-blue    {--zt:96,140,255}
.art-teleport{--zt:186,124,255}
.art-fount   {--zt:104,224,214}
.art-mist    {--zt:176,186,204}
.art-wall    {--zt:158,136,104}

@media(max-width:900px){
  .decklane{grid-template-columns:186px 1fr;gap:16px}
}
@media(max-width:640px){
  .rifthero{padding:22px 16px 20px;border-radius:var(--r)}
  .rh-stats{grid-template-columns:repeat(2,1fr)}
  .rh-go{width:100%}
  .rh-go .btn.big{width:100%}
  .decklane{grid-template-columns:1fr;gap:14px}
  .deckbox{max-width:196px;margin:0 auto}
  .db-side{display:none}
  .dcurve{padding:12px 10px 8px}
  .dc-lbl{display:none}
  .ovl{padding:10px}
  .ovlbox{padding:14px;max-height:92vh}
  .dmgrid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
  .dm-sub em{display:none}
  .riftstage{padding:8px;border-radius:var(--r)}
  .rifthand .hcard{flex:0 0 84px;width:84px}
  .s-role .ricon{width:12px;height:12px}
}


/* -----------------------------------------------------------------------------
   Le plateau tient rarement dans un ecran : entre le camp adverse, les trois
   zones et le sien, il faut faire defiler. La main, elle, doit rester sous les
   yeux — sinon on remonte a chaque carte pour verifier ce qu'on tient.
   -------------------------------------------------------------------------- */
/* `.riftstage>:not(.stage-bg)` pose deja position:relative avec la meme
   specificite : il faut viser aussi precis pour reprendre la main. */
.riftstage>.riftfoot{
  position:sticky;bottom:0;z-index:20;
  margin:14px -14px -14px;padding:10px 14px 12px;
  border-top:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 68%,transparent),
    color-mix(in srgb,var(--bg) 94%,transparent) 42%);
  backdrop-filter:blur(9px);
}
.rifthand{padding:6px 2px 2px}

/* Un cran plus serre : deux rangees de quatre cartes par zone poussaient le
   plateau au-dela de neuf cents pixels. */
.zrow{grid-template-columns:repeat(2,minmax(0,78px))}
.zinfo{min-height:84px}
.hcard{flex:0 0 96px;width:96px}

@media(max-width:640px){
  .riftfoot{margin:10px -8px -8px;padding:8px 8px 10px;border-radius:0 0 var(--r) var(--r)}
  .zrow{grid-template-columns:repeat(2,minmax(0,48px))}
  .rifthand .hcard{flex:0 0 80px;width:80px}
}


/* =============================================================================
   NIVEAUX D'ADVERSAIRE — cinq crans, du debutant au challenger
   ========================================================================== */

.rh-lvl{margin-bottom:20px}
.rh-lvl-lbl{display:block;margin-bottom:8px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.lvlpick{display:flex;gap:8px;flex-wrap:wrap}
.lvl{
  position:relative;flex:1 1 116px;max-width:170px;display:flex;flex-direction:column;
  align-items:flex-start;gap:5px;padding:10px 12px;cursor:pointer;text-align:left;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-2) 80%,transparent);
  transition:border-color .15s,background .15s,transform .15s;
}
.lvl:hover{border-color:var(--line-2);transform:translateY(-2px)}
.lvl.on{
  border-color:var(--lv);background:color-mix(in srgb,var(--lv) 13%,transparent);
  box-shadow:0 0 0 1px var(--lv),0 8px 22px -12px var(--lv);
}
.lvl b{font-size:13px;line-height:1.1}
.lvl.on b{color:var(--lv)}
/* Cinq jetons : le niveau se lit avant meme son nom. */
.lv-pips{display:flex;gap:3px}
.lv-pips i{width:13px;height:4px;border-radius:2px;background:var(--surface-3)}
.lvl.on .lv-pips i.on{background:var(--lv)}
.lvl .lv-pips i.on{background:var(--muted)}
.lvl em{font-style:normal;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lvl.on em{color:color-mix(in srgb,var(--lv) 72%,var(--text))}
.lvl-desc{margin-top:9px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;
  gap:10px;flex-wrap:wrap}
.lvl-desc:empty{display:none}
.lv-bonus{
  flex:0 0 auto;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
}

/* ---- rappel pendant la partie ---- */
.rb-lvl{
  padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--lv,var(--accent-2));
  border:1px solid color-mix(in srgb,var(--lv,var(--accent-2)) 45%,transparent);
  background:color-mix(in srgb,var(--lv,var(--accent-2)) 12%,transparent);
  white-space:nowrap;
}
.rb-lvl:empty{display:none}

/* ---- rappel sur l'ecran de fin ---- */
.endlvl{margin-top:2px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--lv,var(--muted))}
.endlvl:empty{display:none}

/* ---- reglages de l'admin ---- */
.lvlgrid{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.lvline{
  display:grid;grid-template-columns:minmax(0,1.6fr) 128px 148px 110px;gap:10px;align-items:center;
  padding:8px 11px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--lv);
}
.lvname{display:flex;flex-direction:column;gap:1px;min-width:0}
.lvname b{font-size:13px;color:var(--lv)}
.lvname small{font-size:11px;color:var(--muted);line-height:1.35}
.lvcap{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvline .field span{font-size:9.5px}

@media(max-width:900px){
  .lvline{grid-template-columns:1fr 1fr;row-gap:8px}
  .lvname{grid-column:1 / -1}
  .lvcap{grid-column:1 / -1;text-align:left}
}
@media(max-width:640px){
  .lvlpick{gap:6px}
  .lvl{flex:1 1 calc(50% - 3px);max-width:none;padding:9px 10px}
  .rb-lvl{font-size:9.5px;padding:2px 7px}
}


/* =============================================================================
   PLUSIEURS DECKS — une etagere de boites
   ========================================================================== */
.deckshelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.deckside{margin-top:20px}

/* Le deck actif porte l'anneau ; les autres reculent d'un cran, sans
   disparaitre — on doit pouvoir lire leur couverture pour les reconnaitre. */
.deckbox:not(.on) .db-face{opacity:.66;transition:opacity .16s,transform .22s,box-shadow .22s}
.deckbox:not(.on):hover .db-face{opacity:1}
.deckbox.on .db-face{box-shadow:0 0 0 2px var(--accent),0 22px 44px -20px rgba(0,0,0,.92)}
.deckbox.on::before{
  content:"";position:absolute;z-index:3;right:9px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 10px var(--accent);
}

/* la case de creation garde la forme d'une boite, en creux */
.deckbox.add .db-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:3/4;border-radius:12px;color:var(--muted);
  background:var(--surface-2);border:1px dashed var(--line-2);transition:.16s;
}
.deckbox.add:hover .db-add{border-color:var(--accent);color:var(--accent);background:var(--surface-3)}
.db-add i{font-style:normal;font-family:'Anton',sans-serif;font-size:36px;line-height:1}
.db-add em{font-style:normal;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  text-align:center;padding:0 10px;line-height:1.3}

/* renommage dans l'entete de la boite */
.dmname{
  flex:1;min-width:0;padding:5px 9px;border-radius:8px;
  font:inherit;font-size:19px;font-weight:800;color:var(--text);
  background:transparent;border:1px solid transparent;transition:.15s;
}
.dmname:hover{border-color:var(--line)}
.dmname:focus{border-color:var(--accent);background:var(--surface-2);outline:none}
.btn.ghost.danger{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 40%,transparent)}
.btn.ghost.danger:hover:not(:disabled){background:color-mix(in srgb,var(--accent-2) 12%,transparent)}
.ovlfoot .btn.ghost.danger{margin-right:auto}

/* =============================================================================
   SIMULATEUR — le releve
   ========================================================================== */
.simpanel{margin-top:14px;padding:12px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2)}
.simhead,.simlist .bl{
  display:grid;
  grid-template-columns:minmax(94px,1.4fr) 54px 50px 58px minmax(104px,1.2fr) 60px 60px 60px 60px 64px;
  gap:6px;align-items:center;
}
.simhead{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:7px}
.simlist{display:flex;flex-direction:column;gap:5px}
.simlist .bl{padding:7px 2px 7px 9px;border-radius:var(--r-sm);
  border-left:3px solid var(--lv);background:color-mix(in srgb,var(--lv) 7%,transparent)}
.sim-n{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;font-weight:700}
.sim-n b{font-family:'Anton',sans-serif;font-size:15px;color:var(--lv)}
.simlist .sv{font-family:'Anton',sans-serif;font-size:14px}
.simlist .sv.w{color:var(--accent)}
.simlist .sv.l{color:var(--accent-2)}
.simlist .sv.c{color:#F5C542}
/* La jauge dit l'essentiel avant qu'on lise les nombres : rouge a gauche pour
   ce que l'IA prend, vert a droite pour ce que le joueur garde. */
.sim-rate{display:flex;align-items:center;gap:8px;min-width:0}
.sim-rate i{position:relative;flex:1;height:6px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--accent-2) 55%,transparent)}
.sim-rate i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);
  border-radius:999px;background:var(--accent)}
.sim-rate b{font-family:'Anton',sans-serif;font-size:13px;min-width:46px;text-align:right}
#simMeta{margin-bottom:10px}

@media(max-width:900px){
  /* l'entete ne tient plus : chaque valeur porte alors son propre libelle */
  .simhead{display:none}
  .simlist .bl{grid-template-columns:1fr 1fr 1fr;row-gap:6px}
  .sim-n{grid-column:1 / -1}
  .sim-rate{grid-column:1 / -1}
  .simlist .sv{display:flex;align-items:baseline;gap:5px}
  .simlist .sv::before{
    content:attr(data-l);font-family:'Archivo',sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  }
}
@media(max-width:640px){
  .decklane{display:block}
  .deckshelf{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
  .deckbox{max-width:none;margin:0}
  .db-add i{font-size:28px}
  .db-add em{font-size:9.5px}
  .dmname{font-size:16px;padding:4px 7px}
  .ovlfoot .btn.ghost.danger{margin-right:0;width:100%}
}


/* =============================================================================
   NEXUS GRAD — la carte sous coque
   ========================================================================== */

.coltabs{margin-bottom:14px}
.colpane{display:none}
.colpane.on{display:block}

.gstats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.gstats .dsr{flex-direction:column;gap:1px}
.gstats .dsr em{font-style:normal;font-family:'Anton',sans-serif;font-size:13px;color:var(--rl)}
.gstats .dsr i{font-style:normal;font-size:11px;color:var(--muted);font-family:'Archivo',sans-serif}

/* ---- la coque ---- */
/* meme grille que la collection : cinq par rangee, memes points de rupture */
.slabgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:10px;align-items:start}
@media(max-width:1100px){.slabgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.slabgrid{grid-template-columns:repeat(3,1fr)}}
.slab{
  position:relative;display:block;padding:0;cursor:pointer;text-align:left;overflow:hidden;
  border-radius:10px;border:1px solid var(--line-2);
  /* le plastique : un dégradé oblique très pâle par-dessus la teinte de note */
  background:
    linear-gradient(148deg,rgba(255,255,255,.14),transparent 34%,transparent 62%,rgba(255,255,255,.07)),
    linear-gradient(180deg,color-mix(in srgb,var(--gc) 22%,var(--surface)),var(--surface) 42%);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .18s ease,box-shadow .18s ease;
}
.slab:hover{transform:translateY(-4px);box-shadow:0 22px 42px -18px rgba(0,0,0,.95)}
.slab::after{
  /* le reflet qui glisse au survol — c'est du plastique, ça brille */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 48%,transparent 58%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.slab:hover::after{transform:translateX(120%)}

.sl-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;
  border-bottom:1px solid color-mix(in srgb,var(--gc) 45%,transparent);
}
.sl-brand{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;color:var(--text)}
.sl-brand i{font-style:normal;color:var(--gc);margin-left:3px}
.sl-note{
  min-width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:22px;line-height:1;
  color:#0b0c10;background:var(--gc);box-shadow:0 0 16px -2px var(--gc);
}
/* La fenetre accueille la carte telle qu'elle est dans la collection : meme
   pochette, meme ratio, meme rendu. Plus de recadrage carre — c'est une carte
   sous coque, pas une vignette. */
.sl-win{display:block;position:relative;padding:7px;background:var(--surface-3);
  border-top:2px solid var(--rc)}
.sl-win .pocket{background:transparent;border-radius:var(--r-sm)}
.sl-win .card{cursor:inherit}
.sl-bot{display:flex;flex-direction:column;gap:2px;padding:8px 11px 10px}
.sl-bot b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-bot i{font-style:normal;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* ---- le comptoir ---- */
.benchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;margin-top:10px}
.btile{
  position:relative;display:block;text-align:left;cursor:pointer;padding:0 0 7px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--rc);
  border-radius:var(--r-sm);transition:transform .15s,border-color .15s;
}
.btile:hover:not(:disabled){transform:translateY(-3px);border-color:var(--line-2)}
.btile.cher{opacity:.4;cursor:not-allowed}
.bt-art{display:block;aspect-ratio:1/1;position:relative;background:var(--surface-3)}
.bt-art img{width:100%;height:100%;object-fit:cover;display:block}
.bt-art i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:28px;color:var(--surface-3);font-style:normal}
.bt-qty{position:absolute;left:5px;top:5px;padding:1px 7px;border-radius:999px;
  font-size:10.5px;font-weight:800;background:rgba(6,7,11,.78);color:var(--text)}
.bt-name{display:block;padding:6px 8px 0;font-size:11.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-cost{display:block;padding:1px 8px 0;font-family:'Anton',sans-serif;font-size:14px;color:#F5C542}
.bt-cost::after{content:" c";font-family:'Archivo',sans-serif;font-size:10px;color:var(--muted)}

/* ---- la révélation ---- */
.gradreveal{align-items:center;text-align:center}
.gr-tag{display:block;font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.gr-slab{display:flex;justify-content:center;margin-bottom:12px}
.gr-slab .slab{width:min(230px,72vw);cursor:default;pointer-events:none}
.gr-sub{font-size:12.5px;color:var(--muted);margin-bottom:2px}
/* La coque arrive, puis le chiffre tombe. Ce sont des animations, pas des
   transitions declenchees par une classe : elles repartent d'elles-memes a
   chaque insertion du bloc, sans dependre d'un requestAnimationFrame qui ne se
   declenche pas sur un onglet en arriere-plan.
   Et aucun « fill both » sur la coque : son etat de repos doit rester visible.
   Si les animations ne tournent pas — onglet masque, moteur qui les suspend,
   mouvement reduit — on veut une carte visible, pas un rectangle vide. Seul le
   chiffre garde un « backwards », le temps de son retard : c'est decoratif. */
.gr-slab .slab{animation:slabIn .42s cubic-bezier(.2,.9,.3,1)}
.gr-slab .sl-note{animation:notePop .45s cubic-bezier(.2,1.5,.4,1) .34s backwards}
.gr-slab .slab::after{animation:slabShine 1s ease .62s backwards}
@keyframes slabIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes notePop{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:none}}
@keyframes slabShine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){
  .gr-slab .slab,.gr-slab .sl-note,.gr-slab .slab::after{animation:none}
}

/* ---- réglages admin ---- */
#gr-prices input::placeholder{color:var(--muted);opacity:.7}
#gr-sum{line-height:2}
#gr-sum b{font-family:'Anton',sans-serif;font-weight:400;font-size:14px;margin:0 2px 0 8px}

@media(max-width:640px){
  .slabgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .benchgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
  .sl-note{min-width:28px;height:28px;font-size:18px}
  .sl-brand{font-size:10.5px}
  .gstats{gap:7px}
}


/* -----------------------------------------------------------------------------
   NEXUS GRAD — la carte est au service

   Deux etats avant la vitrine : elle voyage (note cachee, compte a rebours),
   puis elle est revenue sans avoir ete ouverte (elle appelle un clic).
   -------------------------------------------------------------------------- */
.slab.pending{cursor:default}
/* Le film de protection : il couvre la carte sans la faire disparaitre — on
   doit reconnaitre ce qu'on a envoye, sans rien lire de la note. */
.sl-seal{
  position:absolute;inset:0;border-radius:var(--r-sm);pointer-events:none;
  backdrop-filter:blur(3px) grayscale(.7) brightness(.62);
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.05) 0 10px, transparent 10px 22px);
}
.slab.ready .sl-seal{backdrop-filter:blur(2px) grayscale(.4) brightness(.75)}
.slab.pending .sl-note{
  background:transparent;color:var(--muted);
  border:1px dashed var(--line-2);box-shadow:none;font-size:18px;
}
.slab.pending::after{display:none}          /* pas de reflet tant que rien n'est joué */
.sl-left{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}
.sl-left::before{content:"⏳ ";filter:grayscale(1)}

/* revenue, pas encore ouverte : elle se signale sans clignoter agressivement */
.slab.ready{border-color:var(--accent)}
.slab.ready .sl-note{animation:notePulse 1.8s ease-in-out infinite}
@keyframes notePulse{
  0%,100%{box-shadow:0 0 16px -2px var(--gc)}
  50%{box-shadow:0 0 26px 2px var(--gc)}
}
.sl-flag{
  position:absolute;left:50%;top:calc(50% - 8px);transform:translate(-50%,-50%);
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 20px rgba(0,0,0,.55);
}
@media(prefers-reduced-motion:reduce){
  .slab.ready .sl-note{animation:none}
}


/* -----------------------------------------------------------------------------
   NEXUS GRAD — coque au format de la collection, memoire, simulateur
   -------------------------------------------------------------------------- */

/* .slab n'est plus un <button> : un div ne peut pas contenir de bouton, mais
   une carte oui — et c'est la carte qu'on voulait dedans. */
.slab{cursor:pointer;-webkit-tap-highlight-color:transparent}
.slab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- la note deja acquise, annoncee au comptoir ---- */
.btile.connu{border-top-color:var(--gc)}
.bt-memo{
  position:absolute;right:5px;top:5px;z-index:2;
  min-width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:13px;
  background:var(--gc);color:#0b0c10;box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.bt-wait{display:block;padding:0 8px;font-size:10px;color:var(--muted)}
.bt-wait::before{content:"⏳ ";filter:grayscale(1)}

/* ---- simulateur de gradation ---- */
.gsim{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.gsrow{padding:11px 12px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.gshead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px;
  font-size:11.5px;color:var(--muted)}
.gshead b{font-family:'Anton',sans-serif;font-size:15px}
.gshead em{font-style:normal;margin-left:auto;color:#F5C542;font-weight:700;white-space:nowrap}
.gsbars{display:flex;flex-direction:column;gap:5px}
.gsb{display:grid;grid-template-columns:22px minmax(60px,1fr) 56px 78px minmax(0,150px);
  gap:9px;align-items:center;font-size:11.5px;color:var(--muted)}
.gsb-n{font-family:'Anton',sans-serif;font-size:15px;color:var(--gc);text-align:center}
.gsb-bar{position:relative;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.gsb-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:999px;background:var(--gc)}
.gsb-pct{font-family:'Anton',sans-serif;font-size:13px;color:var(--text)}
.gsb-exp,.gsb-ev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsb-ev{text-align:right}

@media(max-width:900px){
  .gsb{grid-template-columns:20px 1fr 50px;row-gap:2px}
  .gsb-exp,.gsb-ev{grid-column:2 / -1;text-align:left;font-size:10.5px}
}
@media(max-width:640px){
  .gshead em{margin-left:0;width:100%}
}


/* ---- Faille : quitter abandonne, autant le dire pendant la partie ----
   L'avertissement vit dans le pied collant. Pose juste au-dessus, il passait
   derriere la main des que la page defilait. */
.riftwarn{
  grid-column:1 / -1;order:-1;
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-size:11.5px;color:#ffb37a;
}
.riftwarn::before{content:"⚠";font-size:13px;filter:grayscale(1) brightness(1.6)}
@media(max-width:640px){.riftwarn{font-size:10.5px;margin-bottom:6px}}