/* File: deck.css - Page construction de deck
   Desc: Dans l'architecture, je suis la table de draft : recherche | commander | liste.
   Version 1.4.90
   Copyright 2026 DNAvatar.org - Arnaud Maignan
   Licensed under Apache License 2.0 with Commons Clause.
   See LICENSE_HEADER.txt for full terms.
   Date: August 26, 2026 10:25 UTC+1
   Logs:
   - 1.4.90: loupe à gauche toute + filet .pf-sep la sépare des params ; contour
     loupe fin ; anneau âge sélectionné = gros marron (pas vert)
   - 1.4.89: anneau d'état (fin/vert) autour des params ; .tile-acts en overlay
     bas-gauche de l'art ; #pf-textless supprimé
   - 1.4.88: .tile-act = petits ronds (gabarit croix deck) ; loupe seule à droite
     des params ; « Filtres : » retiré ; .deck-search-actions / .search-filters-lab morts
   - 1.4.87: .tile-acts / .tile-act (boutons carrés ajouter / oublier)
   - 1.4.86: .card-tile-set inline à droite du nom (span)
   - 1.4.85: .card-tile-set (SET num sous le nom, ProggyDotted)
   - 1.4.84: #pf-age = mini-carte 3 bandes (comme bord / cadrage) ; bouton recherche coins arrondis bord or
   - 1.4.83: #print-filter pictural — .pf-card lotus (bord / cadrage), #pf-textless ; bouton recherche nowrap
   - 1.4.82: #print-filter (tableau de bord âge/bord/traitement/sans texte) remplace #print-pref
   - 1.4.81: #print-pref (segmenté Ancienne/Moderne/Défaut) ; .scryfall-wm (mot stylé)
   - 1.4.80: .deck-save-new (3e bouton, 🆕)
   - 1.4.79: regle .deck-save-hint morte retiree (element supprime)
   - 1.4.78: .deck-save-hint aligne sur l'input (padding-left manquant)
   - 1.4.77: .deck-save-hint une ligne (nowrap, police -8%)
   - 1.4.76: kill = rouge plat + petite ombre (plus de degrade gemme) ; .deck-box max-width plafonnee
   - 1.4.75: deck-act-kill/vault-pick-kill : img SVG (plus de color sur emoji, sans effet)
   - 1.4.74: #vault-grid noms seuls (plus de vignettes)
   - 1.4.73: .deck-save-hint (nouveau nom → deck vierge)
   - 1.4.72: .card-art overflow visible (cache hors clip)
   - 1.4.71: .card-art fond --card-ink (clip, plus de calque)
   - 1.4.70: .card-art rayon = --card-rx/ry
   - 1.4.69: filet coins = base.css ::before
   - 1.4.68: .card-art 0.5rem (clip seul, plus de double rayon)
   - 1.4.67: cadre 0.45rem ; art 0.52rem (croissant noir)
   - 1.4.66: .card-art radius Alpha (coins blancs)
   - 1.4.65: Filtres : devant #search-colors
   - 1.4.64: .deck-search-head ; bouton recherche une ligne
   - 1.4.63: séparateurs 3px
   - 1.4.62: --fat = H art × tan(skew) ; largeur boîte suit
   - 1.4.61: #deck-split-cat + --catalog-w (frontière deck / decks)
   - 1.4.60: #deck-trash fixed bas de fenêtre
   - 1.4.59: #vault-colors sous les genres
   - 1.4.58: pile : z-index = Y seulement (plus hover/press devant)
   - 1.4.57: #deck-trash unique ; plus de croix par boîte
   - 1.4.56: pips catalogue ronds (plus de scaleY 0.55)
   - 1.4.55: --stack-z (hover/drag passent devant) ; revert 1.4.54
   - 1.4.54: pile catalogue : clic = tranche (art pointer-events none)
   - 1.4.53: .color-filter = cercles clip comme .deck-box-pip (plus de dalle)
   - 1.4.52: img ready = visible même si class img-loading
   - 1.4.51: .color-filters + data-color-hit (deck / recherche)
   - 1.4.50: --search-w + #deck-split (colonne recherche / deck)
   - 1.4.49: img-spin anim seulement data-phase=download
   - 1.4.48: colonne recherche plus étroite ; plus de place au deck
   - 1.4.47: .deck-box-load:hover sans fond (plus de dalle parasite)
   - 1.4.46: bord image 3px ; catalogue sans scroll X
   - 1.4.45: image selected --ok ; rollover blanc
   - 1.4.44: boîte absolute = largeur contenu (plus le padding flanc)
   - 1.4.43: croix bas-droit image + skewX ; catalogue position absolute (Y)
   - 1.4.42: bord noir inset sur image skew (cache coins blancs)
   - 1.4.41: 100 --fat 84px (même longueur que 60)
   - 1.4.40: 100 --fat 140px (ratio 100/60 sur 84px)
   - 1.4.39: --skew-side -58deg (jauge retirée)
   - 1.4.38: #deck-skew jauge --skew-side
   - 1.4.37: flanc skewY -78deg (pente) ; carte garde --skew
   - 1.4.36: 60 plus gros (84px) ; skew -32deg
   - 1.4.35: flanc = copie bandeau nom ; skewY ; largeur 60px / 100px
   - 1.4.34: flanc = copie bordNom + skewY (montants verticaux)
   - 1.4.33: une face 3D ; extérieur vertical ; biais jusqu'au bas du nom ; plus d'encoche
   - 1.4.32: flanc = copie bord image (biais) + bord nom (vertical) ; plus de dalle
   - 1.4.31: épaisseur collée au bas du nom ; 60=fin 100=épais
   - 1.4.30: flanc skewX comme l'image (suit le bord)
   - 1.4.29: flanc sous l'image (plus de mur noir au-dessus)
   - 1.4.28: 60/100 flanc net ; overlap 1/2 image ; flanc = hauteur tranche
   - 1.4.27: skew inverse ; carte 180° ; bords noirs ; pile tassée z décroissant
   - 1.4.26: dessus skewX ; flanc vertical + trait vers bas de tranche
   - 1.4.25: dessus scaleY 50% ; croix sur la tranche ; bord 1.5/2.5rem = 60/100
   - 1.4.24: tranche : nom droit ; pips scaleY perspective
   - 1.4.23: boîte : carte entière rectangle ; plus de trapèze ni coins ronds
   - 1.4.22: rollover boîte > selected (swap devant)
   - 1.4.21: boîte : carte contain + perspective ; titre aplati centré ; pips sans blanc
   - 1.4.20: .deck-box 60/100 ; dessus carte, tranche nom+pips, pile verticale
   - 1.4.19: dirty = rouge vif ; contour aussi .deck-save-disk
   - 1.4.18: #deck-save au-dessus de #deck-commander si deck choisi
   - 1.4.17: plus de cadre carte ; coins arrondis (art)
   - 1.4.16: .card-tile-wait / .card-tile-net (file + ping upload download)
   - 1.4.15: #modal-vault grille coffre ; bouton #vault-flag
   - 1.4.14: .deck-kind-block[data-kind=saga]
   - 1.4.13: #deck-count data-lands-low
   - 1.4.12: .deck-row-qty plus gros, cream, fond plus lisible
   - 1.4.11: .deck-act-kill bas gauche sur l'art
   - 1.4.10: .img-flag-lang (FR n/a) en bas à droite
   - 1.4.9: .deck-row-qty milieu droit (plus en haut)
   - 1.4.8: #deck-find + data-find contour blanc
   - 1.4.7: #modal-genre overlay liste bloquants
   - 1.4.6: résultats auto-fill 3+ colonnes ; page deck alignée à gauche
   - 1.4.5: .deck-save-copy 📋 à gauche de la disquette
   - 1.4.4: .deck-genre data-ask contour vert/rouge
   - 1.4.3: disquette .deck-save-disk en bout du champ nom
   - 1.4.2: #deck-board en tête ; #deck-meta (genres + n/100) dans l'encart
   - 1.4.1: #deck-catalog-col sticky droite (liste verticale + Sauver)
   - 1.4.0: colonne recherche sticky ; sauver à droite ; meta genres+count
   - 1.3.6: badges #deck-genres ; pick data-cmd blanc / --down
   - 1.3.5: contour --kind ; data-pick blanc pour choisir commander
   - 1.3.4: 👑 visible à droite du genre si groupe déplié
   - 1.3.3: .deck-face-peek ; ❌ coin haut gauche image
   - 1.3.2: 👑 drop genre (data-drop) ; ❌ haut gauche
   - 1.3.1: .deck-pick portrait + croix ; contour --ok / --down
   - 1.3.0: #deck-board horizontal ; groupes data-open ; .img-spin FIFO
   - 1.2.4: DFC miniature 3 lignes (4.58rem)
   - 1.2.3: .deck-kind-n quantité à côté du titre
   - 1.2.2: 👑/❌ bas de ligne ; nom sans ellipsis
   - 1.2.1: .deck-kind-head groupe ▼/▶
   - 1.2.0: 👑/❌ sous le nom ; bandeaux .deck-kind
   - 1.1.3: .img-flag ⚠ / ↻
   - 1.1.2: liste sans scroll X ; Cmd/kill overlay UTF-8 ; qty seulement si >1
   - 1.1.0: catalog horizontal, quota, save row
   - 1.0.1: .deck-paste textarea import
   - Initial: grid results ; row deck ; commander slot */

:root {
  --dirty: #ff2d1a;
}

main.deck-page {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-right: 0;
  display: grid;
  grid-template-columns: var(--search-w, 17.5rem) 3px minmax(18rem, 1fr) 3px var(--catalog-w, 18.75rem);
  gap: 0 0.2rem;
  align-items: start;
}

#deck-split,
#deck-split-cat {
  width: 3px;
  min-height: 70vh;
  align-self: stretch;
  cursor: col-resize;
  background: #5a4a20;
  border-radius: 1px;
}

#deck-split:hover,
#deck-split[data-drag="1"],
#deck-split-cat:hover,
#deck-split-cat[data-drag="1"] {
  background: var(--gold);
}

#deck-search-col {
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 1.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  justify-self: start;
  width: 100%;
}

.deck-search {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.deck-search textarea {
  width: 100%;
  /* Assez haut pour laisser voir les 4 lignes du placeholder d'emblee. */
  min-height: 6.2rem;
  resize: vertical;
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Tableau de bord d'illustration + loupe, tout sur une ligne. La loupe est
   poussée à droite (margin-left:auto). */
#print-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

/* Loupe = action, à gauche toute, séparée des paramètres par un filet. */
#deck-search-go {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  border: 1px solid #5a4a20;
  border-radius: 4px;
}

.pf-sep {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: #5a4a20;
  margin: 0 0.15rem;
}

/* Anneau extérieur d'état, commun aux trois contrôles : fin quand l'axe est
   neutre, épais et vert quand une valeur est posée — comme un bouton actif.
   Le pointillé intérieur des mini-cartes (le cadre d'illustration) reste. */
#pf-age,
#pf-border,
#pf-treat {
  box-shadow: 0 0 0 1px #5a4a20;
  border-radius: 4px;
}

#pf-border:not([data-border=""]),
#pf-treat:not([data-treat=""]) {
  box-shadow: 0 0 0 2px var(--ok);
}

/* Âge sélectionné : anneau gros mais marron (pas vert). */
#pf-age:has(button[data-fval]:not([data-fval="neutral"])[data-on="1"]) {
  box-shadow: 0 0 0 3px #8a6a2c;
}

/* Boutons carte : mini-carte. Âge = 3 bandes empilées ; bord = couleur du
   cadre ; cadrage = débordement du lotus. */
.pf-card {
  position: relative;
  width: 30px;
  height: 42px;
  padding: 0;
  border: 2px dashed #5a4a20;
  border-radius: 4px;
  background: #0e0b07;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-card-svg {
  width: 24px;
  height: 24px;
  color: var(--mute);
  transition: transform 0.12s, color 0.12s;
}

/* Âge : carte coupée en trois bandes horizontales (récente ▲ / — / ancienne ▼). */
.pf-bands {
  flex-direction: column;
  border-style: dashed;
  border-color: #5a4a20;
}

.pf-bands button {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--mute);
  background: transparent;
}

.pf-bands button + button {
  border-top: 1px solid #5a4a20;
}

.pf-bands button[data-on="1"] {
  background: #1a2418;
  color: var(--ok);
}

/* --- Bouton 2 : couleur du bord --- */
#pf-border[data-border=""]        { border-style: dashed; border-color: #5a4a20; }
#pf-border[data-border="black"]   { border-style: solid; border-color: #000; }
#pf-border[data-border="white"]   { border-style: solid; border-color: #f0ece3; }
#pf-border[data-border="silver"]  { border-style: solid; border-color: #c2c7cd; }
#pf-border[data-border="gold"]    { border-style: solid; border-color: var(--gold); }
#pf-border:not([data-border=""]) .pf-card-svg { color: var(--cream); }

/* --- Bouton 3 : cadrage de l'art (le lotus déborde ou non) --- */
.pf-artbox {
  position: absolute;
  inset: 6px 5px 12px;
  border: 1px solid #5a4a20;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0;
}
#pf-treat[data-treat="normal"] .pf-artbox { opacity: 1; }
#pf-treat[data-treat="normal"]     .pf-card-svg { transform: scale(0.62) translateY(-4px); color: var(--cream); }
#pf-treat[data-treat="fullart"]    .pf-card-svg { transform: scale(1.15); color: var(--cream); }
#pf-treat[data-treat="extendedart"] .pf-card-svg { transform: scaleX(1.9) scaleY(1); color: var(--cream); }
#pf-treat[data-treat="borderless"] { overflow: visible; }
#pf-treat[data-treat="borderless"] .pf-card-svg { transform: scale(1.7); color: var(--cream); }

.color-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
}

.color-filter {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

.color-filter:hover,
.color-filter:focus {
  background: transparent;
  border: none;
}

.color-filter img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50%);
  pointer-events: none;
}

.color-filter[data-on="1"] {
  box-shadow: 0 0 0 2px #f4ead4;
}

#deck-results .card-tile[data-color-hit="0"],
#deck-board .deck-card[data-color-hit="0"],
#deck-board .card-tile-cmd[data-color-hit="0"] {
  display: none;
}

.deck-kind-block:has(.deck-card[data-color-hit="0"]):not(:has(.deck-card[data-color-hit="1"])) {
  display: none;
}

#deck-complete {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.complete-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.complete-q {
  width: 100%;
  font-size: 0.75rem;
  color: var(--mute);
}

.complete-miss {
  font-size: 0.75rem;
  color: var(--down);
}

.complete-name {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
}

.complete-name[data-on="1"] {
  border-color: var(--ok);
  background: #1a2418;
}

#deck-search-col h2 {
  font-size: 1rem;
  margin: 0.35rem 0 0.45rem;
}

#deck-search-col .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  justify-content: start;
}

#deck-search-col .card-grid .card-art {
  min-height: 10.4rem;
}

#deck-catalog-col {
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 1.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 2.8rem;
}

.deck-save {
  position: relative;
  margin-bottom: 0.6rem;
}

.deck-save input {
  width: 100%;
  padding-right: 5.68rem;
}

.deck-save-new,
.deck-save-copy,
.deck-save-disk {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  line-height: 1;
  font-size: 1.05rem;
  background: transparent;
  border: none;
}

.deck-save-new {
  right: 3.68rem;
}

.deck-save-copy {
  right: 1.9rem;
}

.deck-save-disk {
  right: 0.12rem;
}

.deck-save-new:hover,
.deck-save-copy:hover,
.deck-save-disk:hover {
  background: #3a2e1c;
}

.deck-catalog {
  position: relative;
  padding: 0.35rem 0 1.1rem;
  margin: 0;
  --fat: 84px;
}

#deck-trash {
  position: fixed;
  right: 0;
  bottom: 0;
  width: var(--catalog-w, 18.75rem);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  margin: 0;
  font-size: 1.45rem;
  line-height: 1;
  background: #1a1410;
  border: 1px dashed #5a4a20;
  color: #c4a574;
}

#deck-trash[data-over="1"] {
  border-style: solid;
  border-color: var(--dirty);
  background: #3a1810;
  color: #ff6a4a;
}

.deck-box {
  position: absolute;
  left: 0;
  width: calc(100% - var(--fat));
  /* Largeur plafonnée : élargir la colonne (séparateur #deck-split-cat) ne
     doit plus étirer les boîtes au-delà de leur taille par défaut — sinon
     la carte 3D (chanfrein skewé) se déforme. --box-w suit CONFIG.BOX_W_MAX
     (paintBoxFat, deck-render.js) ; 13.75rem = repli avant le premier calcul. */
  max-width: calc(var(--box-w, 13.75rem) - var(--fat));
  overflow: visible;
  cursor: grab;
  user-select: none;
  z-index: var(--stack-z);
  --spine-h: 1.8rem;
  --skew: -32deg;
  --skew-side: calc(-90deg - var(--skew));
  --art-inset: 3px;
}

.deck-box[data-size="100"] {
  --spine-h: 2.6rem;
}

.deck-box[data-drag="1"] {
  cursor: grabbing;
}

.deck-box-iso {
  position: relative;
}

.deck-box-load {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
}

.deck-box-load:hover,
.deck-box-load:focus {
  background: transparent;
}

.deck-box-top {
  display: block;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.deck-box-art,
.deck-box-empty {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: #120e0a;
  border-radius: 0;
  border: 1px solid #000;
  transform: skewX(var(--skew));
  transform-origin: bottom left;
}

.deck-box-art::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 var(--art-inset) #000;
  pointer-events: none;
}

.deck-box-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3.5;
  display: block;
  object-fit: fill;
  object-position: center;
  border-radius: 0;
  transform: rotate(180deg);
  cursor: pointer;
}

.deck-box-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  aspect-ratio: 5 / 3.5;
  color: var(--mute);
}

.deck-box-spine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0 0.28rem;
  background: linear-gradient(180deg, #4a3420 0%, #2a1c10 55%, #16100a 100%);
  border: 1px solid #000;
  border-radius: 0;
}

.deck-box[data-size="60"] .deck-box-spine {
  height: var(--spine-h);
}

.deck-box[data-size="100"] .deck-box-spine {
  height: var(--spine-h);
}

.deck-box-name {
  flex: 0 1 auto;
  max-width: 68%;
  min-width: 0;
  font-size: 0.68rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-box-colors {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.08rem;
}

.deck-box-pip {
  width: 0.72rem;
  height: 0.72rem;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50%);
}

.deck-box[data-size="100"] .deck-box-pip {
  width: 0.85rem;
  height: 0.85rem;
}

.deck-box-side {
  position: absolute;
  z-index: 0;
  left: 100%;
  bottom: 0;
  width: var(--fat);
  height: var(--spine-h);
  box-sizing: border-box;
  background: linear-gradient(180deg, #4a3420 0%, #2a1c10 55%, #16100a 100%);
  border: 1px solid #000;
  transform: skewY(var(--skew-side));
  transform-origin: top left;
  pointer-events: none;
}

.deck-box[data-current="1"][data-clean="1"] .deck-box-spine,
.deck-box[data-current="1"][data-clean="1"] .deck-box-side,
.deck-box[data-current="1"][data-clean="1"] .deck-box-art,
.deck-box[data-current="1"][data-clean="1"] .deck-box-empty {
  border-color: var(--ok);
}

.deck-box[data-current="1"][data-clean="1"] .deck-box-art::after {
  box-shadow: inset 0 0 0 var(--art-inset) var(--ok);
}

.deck-box[data-current="1"][data-clean="0"] .deck-box-spine,
.deck-box[data-current="1"][data-clean="0"] .deck-box-side,
.deck-box[data-current="1"][data-clean="0"] .deck-box-art,
.deck-box[data-current="1"][data-clean="0"] .deck-box-empty {
  border-color: var(--dirty);
  box-shadow: 0 0 0 1px var(--dirty);
}

.deck-box[data-current="1"][data-clean="0"] .deck-box-art::after {
  box-shadow: inset 0 0 0 var(--art-inset) var(--dirty);
}

.deck-box:hover .deck-box-spine,
.deck-box:hover .deck-box-side,
.deck-box:hover .deck-box-art,
.deck-box:hover .deck-box-empty {
  border-color: #fff;
}

.deck-box:hover .deck-box-art::after {
  box-shadow: inset 0 0 0 var(--art-inset) #fff;
}

#deck-save[data-clean="0"] .deck-save-disk {
  outline: 2px solid var(--dirty);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.deck-quota {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--mute);
}

.deck-results-wrap h2 button {
  margin-left: 0.6rem;
  font-size: 0.85rem;
  vertical-align: middle;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}

.card-tile { position: relative; }

.card-art {
  position: relative;
  background: var(--card-ink);
  overflow: visible;
  border-radius: var(--card-rx) / var(--card-ry);
}

.deck-box-art.card-art,
.deck-box-empty {
  overflow: visible;
  border-radius: 0;
}

.card-art img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  border-radius: inherit;
}

.card-grid .card-art {
  min-height: 12.2rem;
}

img.img-loading {
  opacity: 0;
}

img[data-img="ready"] {
  opacity: 1;
}

.img-spin {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #241c14;
  border-radius: inherit;
}

.card-tile-wait[data-phase="download"] .img-spin,
img.img-loading + .img-spin {
  background: linear-gradient(90deg, #241c14 0%, #5a4a20 50%, #241c14 100%);
  background-size: 200% 100%;
  animation: img-fifo 0.9s linear infinite;
}

img[data-img="ready"] + .img-spin,
img[data-img="err"] + .img-spin {
  display: none;
}

@keyframes img-fifo {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.img-flag {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  font-size: 0.85rem;
  line-height: 1;
  z-index: 2;
}

.img-flag-sniff { opacity: 0.85; }

.img-flag-lang {
  top: auto;
  bottom: 0.15rem;
  right: auto;
  left: 0.15rem;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  background: #120e0a;
  color: var(--gold);
  padding: 0.08rem 0.25rem;
}

.card-tile-net {
  margin: 0 0 0.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  opacity: 0.55;
}

.card-tile-miss-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0.35;
}

.card-tile-name {
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

.card-tile-set {
  font-family: "ProggyDotted", "Courier New", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--mute);
  white-space: nowrap;
}

.card-tile-name .deck-row-name {
  font-size: 0.8rem;
}

.card-tile button { width: 100%; }

/* Trois petits ronds EN BAS À GAUCHE de l'art (dans .card-art) — même
   gabarit que la croix du deck : ＋ ajouter · ⇄ remplacer · × oublier
   l'impression du coffre. */
.tile-acts {
  position: absolute;
  left: 0.15rem;
  bottom: 0.15rem;
  z-index: 4;
  display: flex;
  gap: 0.25rem;
}

.card-tile .tile-acts .tile-act {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.1s ease;
}

.card-tile .tile-acts .tile-act:hover  { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.card-tile .tile-acts .tile-act:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }

.tile-act svg,
.tile-act img {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
}

.tile-add    { background: #2f6b3a; color: #eafff0; }
.tile-replace { background: #3a2e1c; color: var(--gold); }
.tile-forget {
  background: #4a4a4a;
}
.tile-forget img {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3));
}

#deck-board {
  margin: 0 0 1.25rem;
  padding: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--gold);
}

#deck-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #5a4a20;
}

#deck-board > #deck-save {
  max-width: 10rem;
  margin: 0 0 0.35rem;
}

#deck-commander {
  min-height: 4rem;
  margin-bottom: 0.75rem;
  border: 1px dashed var(--gold);
  padding: 0.4rem;
  max-width: 10rem;
}

#deck-commander .card-tile {
  max-width: 9.5rem;
}

.card-tile-cmd button { display: none; }

.slot-empty {
  margin: 0;
  color: var(--mute);
  text-align: center;
}

#deck-cards {
  margin: 0;
  padding: 0;
}

.deck-kind-block {
  margin: 0.65rem 0 0.4rem;
  padding: 0;
  border-left: 3px solid var(--kind, var(--gold));
}

.deck-kind-block[data-open="0"] .deck-kind-rail {
  display: none;
}

.deck-kind-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.deck-kind-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  width: auto;
  margin: 0;
  padding: 0.12rem 0 0.12rem 0.4rem;
  border: none;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.deck-kind-cmd {
  display: none;
  flex: 0 0 auto;
  margin-right: 0.4rem;
  padding: 0.05rem 0.35rem;
  font-size: 1.05rem;
  line-height: 1.2;
  background: #1a2418;
  border: 1px dashed var(--gold);
  cursor: copy;
}

.deck-kind-block[data-open="1"] .deck-kind-cmd {
  display: inline-flex;
}

.deck-kind-block[data-open="1"][data-drop="1"] .deck-kind-cmd,
.deck-kind-block[data-pick="1"] .deck-kind-cmd {
  border-color: #f4f0e8;
  background: #2a2418;
}

#deck-board[data-drag="1"] #deck-commander {
  outline: 2px dashed var(--ok);
}

.deck-card[data-dragging="1"] .card-art::after {
  content: '👑';
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  font-size: 1.2rem;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 0 0.3rem #120e0a;
}

.deck-kind-chevron {
  width: 0.75rem;
  font-size: 0.65rem;
  color: var(--mute);
  text-transform: none;
  letter-spacing: 0;
}

.deck-kind-block:first-child { margin-top: 0; }

.deck-kind-block[data-kind="planeswalker"] { --kind: #c9a227; }
.deck-kind-block[data-kind="battle"] { --kind: #a33b2b; }
.deck-kind-block[data-kind="creature"] { --kind: #3d7a4a; }
.deck-kind-block[data-kind="instant"] { --kind: #4a6aaa; }
.deck-kind-block[data-kind="sorcery"] { --kind: #8a3d3d; }
.deck-kind-block[data-kind="enchantment"] { --kind: #7a5a9a; }
.deck-kind-block[data-kind="saga"] { --kind: #b08a3a; }
.deck-kind-block[data-kind="artifact"] { --kind: #8a8a70; }
.deck-kind-block[data-kind="land"] { --kind: #6a5a3a; }
.deck-kind-block[data-kind="other"] { --kind: var(--mute); }

.deck-kind-mark {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}

.deck-kind-n {
  margin-left: 0.15rem;
  color: var(--cream);
  letter-spacing: 0;
  text-transform: none;
}

.deck-kind-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.45rem 0.4rem 0.2rem;
}

.deck-card {
  flex: 0 0 8.5rem;
  width: 8.5rem;
}

.deck-card[data-find="1"],
#deck-commander .card-tile-cmd[data-find="1"] {
  outline: 3px solid #f4f0e8;
  outline-offset: 2px;
}

.deck-kind-block[data-pick="1"] .deck-card[data-cmd="1"] {
  outline: 3px solid #f4f0e8;
  outline-offset: 2px;
}

.deck-kind-block[data-pick="1"] .deck-card[data-cmd="0"] {
  outline: 2px solid var(--down);
  outline-offset: 2px;
}

.deck-card .card-art {
  min-height: 11.9rem;
}

.deck-card[data-dfc="1"] .card-art {
  min-height: 11.9rem;
}

.deck-card-meta {
  display: flex;
  flex-direction: column;
  min-height: 1.8rem;
}

.deck-card[data-dfc="1"] .deck-card-meta {
  min-height: 3.6rem;
}

.deck-row-qty {
  position: absolute;
  top: 50%;
  right: 0.1rem;
  left: auto;
  transform: translateY(-50%);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  background: #120e0a;
  color: var(--cream);
  padding: 0.12rem 0.28rem;
  border: 1px solid var(--gold);
  z-index: 2;
}

/* Plat, rouge uni, gravure sombre — une seule petite ombre portée pour le
   volume, pas de dégradé façon gemme. */
.deck-act-kill,
.vault-pick-kill {
  border: 1px solid #3a1108;
  background: #a33b2b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.1s ease;
}

.deck-act-kill:hover,
.vault-pick-kill:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.deck-act-kill:active,
.vault-pick-kill:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.deck-act-kill {
  position: absolute;
  top: auto;
  bottom: 0.1rem;
  left: 0.1rem;
  z-index: 4;
  line-height: 1;
  padding: 0;
  margin: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.deck-act-kill img {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  /* Filet clair sous le trait sombre = la lumière accroche le fond du sillon
     gravé, pas le dessus — c'est ce qui lit comme creusé plutôt que posé. */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

.deck-act-cmd {
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  z-index: 4;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.05rem;
  background: #120e0a;
}

.deck-face-peek {
  position: absolute;
  right: 0.15rem;
  bottom: 0.15rem;
  width: 2.35rem;
  height: auto;
  z-index: 3;
  border: 1px solid var(--gold);
  cursor: pointer;
}

.deck-row-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.deck-row-name-other {
  color: var(--mute);
  font-size: 0.72rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.deck-row-name {
  min-width: 0;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.15;
  color: var(--cream);
}

#deck-count {
  margin: 0;
  font-size: 1.1rem;
  color: var(--gold);
}

#deck-count[data-lands-low="1"] {
  color: var(--down);
}

#deck-find {
  width: 9rem;
  min-width: 7rem;
  padding: 0.2rem 0.45rem;
}

#deck-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  flex: 1;
}

.deck-genre {
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--mute);
  color: var(--mute);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.deck-genre[data-on="1"] {
  border-color: var(--ok);
  color: var(--cream);
  background: #1a2418;
}

.deck-genre[data-ask="1"][data-on="1"] {
  outline: 2px solid var(--ok);
  outline-offset: 2px;
}

.deck-genre[data-ask="1"][data-on="0"] {
  outline: 2px solid var(--down);
  outline-offset: 2px;
}

#modal-genre {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#modal-genre[hidden] {
  display: none;
}

#modal-genre .modal-panel {
  max-width: 36rem;
  max-height: 80vh;
  overflow: auto;
  background: #241c14;
  border: 1px solid #c9a227;
  padding: 1rem 1.25rem;
}

#modal-genre-title {
  margin: 0 0 0.75rem;
  color: var(--gold);
  font-size: 1.1rem;
}

#modal-genre-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--cream);
  line-height: 1.45;
}

#modal-genre-close {
  cursor: pointer;
}

button.vault-flag {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

#modal-vault {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#modal-vault[hidden] {
  display: none;
}

#modal-vault .modal-panel {
  width: min(72rem, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #241c14;
  border: 1px solid #c9a227;
  padding: 1rem 1.25rem;
}

#vault-title {
  margin: 0 0 0.75rem;
  color: var(--gold);
  font-size: 1.1rem;
}

#vault-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

#vault-kinds button[data-on="1"] {
  border-color: var(--gold);
  color: var(--gold);
}

#vault-colors {
  margin: 0 0 0.7rem;
}

.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.85rem;
}

#vault-find {
  min-width: 12rem;
}

/* Liste de noms, pas de vignettes : ouvrir 700+ illustrations d'un coup
   n'apporte rien ici (la carte se zoome déjà depuis le deck / la recherche). */
#vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.15rem 0.6rem;
}

.vault-pick {
  position: relative;
  border: 1px solid transparent;
  border-radius: 3px;
}

.vault-pick[data-picked="1"] {
  border-color: var(--gold);
}

.vault-pick-name {
  display: block;
  width: 100%;
  padding: 0.3rem 1.6rem 0.3rem 0.4rem;
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-pick[data-picked="1"] .vault-pick-name {
  color: var(--gold);
}

.vault-pick-kill {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vault-pick-kill img {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

.card-tile[data-cmd="1"] .card-tile-name::after {
  content: ' 👑';
}