/* ---------- séries : marqueurs partagés (cartes, révélation, bilan, fiches) */
:root { --s-follow:#a99bff; --s-target:#4fd1c5; --s-week:#ffb84d }
.smark { position:absolute; top:8px; right:8px; z-index:4; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(12,10,30,.78); box-shadow:0 0 0 1.5px currentColor }
.smark.r-follow { color:var(--s-follow) } .smark.r-week { color:var(--s-week) } .smark.r-target { color:var(--s-target) }
.smark.r-follow .ico-svg { fill:currentColor; stroke-width:1.2 }
.reveal .smark { width:19px; height:19px; top:6px; right:6px }
.card .qty { top:auto; bottom:8px }
.pslot { display:flex; flex-direction:column; gap:6px; min-width:0; grid-column:span 2 }
.pslot:nth-child(4) { grid-column:2 / span 2 }
.stag { display:flex; align-items:center; gap:5px; min-height:22px; padding:3px 7px; border-radius:8px; font-size:11px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); opacity:0; transform:translateY(-4px);
  transition:opacity .3s .35s, transform .3s .35s; min-width:0 }
.stag .sn { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.stag .sc { font-variant-numeric:tabular-nums; flex:none }
.stag.r-follow { color:var(--s-follow); border-color:color-mix(in srgb, var(--s-follow) 50%, var(--line)) }
.stag.r-target { color:var(--s-target); border-color:color-mix(in srgb, var(--s-target) 50%, var(--line)) }
.stag.r-week { color:var(--s-week); border-color:color-mix(in srgb, var(--s-week) 50%, var(--line)) }
.stag.empty { visibility:hidden }
.pslot.done .stag { opacity:1; transform:none }
.sreport { width:100%; max-width:620px; margin:22px auto 0; text-align:left; display:grid; gap:8px; opacity:0; transition:opacity .4s }
.sreport.in { opacity:1 }
.sreport h3 { margin:0 0 2px; font-size:15px }
.srow { display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:center; padding:10px 12px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); color:inherit; text-decoration:none }
.srow:hover { border-color:var(--accent) }
.srow .si { width:18px; display:grid; place-items:center; color:var(--muted) }
.srow.r-follow .si { color:var(--s-follow) } .srow.r-target .si { color:var(--s-target) } .srow.r-week .si { color:var(--s-week) }
.srow .sn { font-weight:650; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.srow .sn small { font-weight:600; font-size:11px; margin-left:6px; text-transform:uppercase; letter-spacing:.04em }
.srow.r-follow .sn small { color:var(--s-follow) } .srow.r-target .sn small { color:var(--s-target) } .srow.r-week .sn small { color:var(--s-week) }
.srow .sc { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.srow .sc b { color:var(--good) }
.srow .sbar { grid-column:2 / -1; height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; display:flex }
.srow .sbar i { height:100%; background:var(--accent) }
.srow .sbar i.gain { background:var(--good); animation:gain .8s ease-out }
@keyframes gain { from { transform:scaleX(0); transform-origin:left } }
.srow.done { border-color:color-mix(in srgb, var(--good) 55%, var(--line)) }
.sfoot { font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap }
.crow .smk { color:var(--s-follow); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-left:6px }
.crow .smk.r-week { color:var(--s-week) }

/* tri : une ligne par carte (fenêtre de fin de paquet, boîte à trier), choix à deux positions bien visible */
.pslot.gone .flip > .card { opacity:.35; filter:grayscale(.7); transition:opacity .3s, filter .3s }
.sortbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:12px 14px;
  border-radius:14px; background:var(--surface); border:1px solid var(--line) }
.sortbar .st { font-weight:700 }
.sortbar.done { border-color:color-mix(in srgb, var(--good) 45%, var(--line)) }
.sortnote { margin:6px 0 10px; font-size:12px; color:var(--muted); text-align:center }
.sorthead { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px;
  margin:10px 0 4px; font-size:12px; color:var(--muted) }
.sorthead > span:first-child { flex:1 1 220px }
.sorthead .links { white-space:nowrap }
.sorthead .linkbtn { font-size:12.5px; font-weight:600 }
.sortrows { display:grid }
/* une ligne compacte : vignette, nom et infos, interrupteur Garder / Démanteler à droite */
.sortrow { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center;
  padding:9px 0; border-top:1px solid var(--line) }
.sortrow:first-child { border-top:0 }
.sortrow .thumb { width:40px; height:54px; cursor:pointer }
.sortrow .sn { font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sortrow .sr { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sortrow .sr .why { color:var(--ink) }
.sortrow.out .thumb { opacity:.45 }
.sortrow.out .sn { color:var(--muted) }
/* interrupteur : l'option retenue légèrement teintée, l'autre discrète */
.sortseg { display:inline-flex; padding:2px; border:1px solid var(--line); border-radius:999px; background:var(--surface) }
.sortseg button { padding:5px 10px; border:0; border-radius:999px; background:transparent; color:var(--muted);
  font:inherit; font-size:12px; font-weight:650; cursor:pointer; white-space:nowrap }
.sortseg button[data-a="keep"].on { background:color-mix(in srgb, var(--good) 22%, transparent);
  color:color-mix(in srgb, var(--good) 75%, var(--ink)) }
.sortseg button[data-a="dismantle"].on { background:color-mix(in srgb, var(--bad) 22%, transparent);
  color:color-mix(in srgb, var(--bad) 75%, var(--ink)) }
.sortfoot { position:sticky; bottom:calc(-20px - var(--safe-b)); display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:8px -16px 0; padding:12px 16px calc(12px + var(--safe-b)); background:var(--bg); border-top:1px solid var(--line) }
/* Collection : onglets et album des séries */
.colseg { grid-template-columns:1fr 1fr 1fr; margin:8px 0 14px }
.colseg .cnt { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--bad); color:#fff;
  font-size:11px; line-height:18px }
.album { padding:14px 0 10px; border-top:1px solid var(--line) }
.album:first-child { border-top:0 }
.ahead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; color:inherit; text-decoration:none }
.ahead .an { font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ahead .ac { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.album.followed .an { color:var(--s-follow) }
.album .prog { margin-top:6px }
.aslots { display:grid; grid-auto-flow:column; grid-auto-columns:54px; gap:8px; overflow-x:auto; margin-top:10px;
  padding:2px 2px 4px; scrollbar-width:none }
.aslots::-webkit-scrollbar { display:none }
.thumb.mystery { display:grid; place-items:center; color:color-mix(in srgb, var(--t) 70%, var(--muted)); font-weight:800;
  font-size:18px; background:color-mix(in srgb, var(--t) 10%, var(--surface2)); cursor:pointer }
.thumb.amore { display:grid; place-items:center; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none;
  background:var(--surface) }

/* « Tout ouvrir » : bouton discret sous « Ouvrir un paquet », cartes du lot en grille */
.linkbtn.openall { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:650 }
.linkbtn.openall .ico-svg { margin:0 }
.manygrid { margin-top:14px; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px }
.manygrid .card .name { font-size:12px }
.manygrid .card .kind { font-size:10.5px }
.manygrid .card.gone { opacity:.35; filter:grayscale(.7); transition:opacity .3s, filter .3s }

/* paquet ciblé : la série est dans le titre, pas besoin d'icônes de cible sur chaque carte */
#packResult.is-targeted .smark.r-target { display:none }
#again .again-lbl { display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
#again .again-lbl .coin { margin:0 }

/* fin de révélation : bilan résumé en une ligne (à la place de la consigne), détail dans une fenêtre */
.bilanlink { position:relative; display:inline-flex; align-items:baseline; gap:8px; max-width:100%; padding:0; border:0;
  background:none; color:var(--muted); font:inherit; cursor:pointer; text-align:left }
.bilanlink .bs { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bilanlink .bm { flex:none; color:var(--accent); font-weight:650 }
.bilanlink .bdot { position:absolute; top:-2px; right:-10px; width:8px; height:8px; border-radius:50%; background:var(--bad) }
.bilangain { margin:0 0 6px }
.sheet .sreport { margin-top:12px }
.sheet .tip { margin-top:14px }