/* WikiTCG direction C « Terrain de jeu ». Echelle compacte. */

:root {
  /* Budget de mouvement : aucune duree brute ailleurs dans le fichier. */
  --motion-fast: 120ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;
  --motion-hero: 700ms;            /* reserve a l'ouverture du sachet */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   /* leger depassement, pour le « clac » */

  /* 60 / 30 / 10 : creme, blanc, orange. */
  --cream: #FBF0E2;
  --cream-deep: #F3E4D0;
  --white: #FFFFFF;
  --ink: #241A12;
  --ink-dim: #7A6857;
  --orange: #E4552B;
  --orange-dark: #B93A1B;
  --green: #1F7A5A;
  --sand: #EBDCC6;

  /* Une teinte par rarete. Elles ne servent QU'A la rarete. */
  --r-C:  #A08F79;
  --r-PC: #2E7D5B;
  --r-R:  #2B6CB0;
  --r-SR: #6B3FA0;
  --r-UR: #D6246E;
  --r-L:  #D9A125;

  --radius-sm: 6px;    /* badges, pastilles */
  --radius-md: 12px;   /* cartes, boutons */
  --radius-lg: 20px;   /* sachet, panneaux */

  --shadow-sm: 0 2px 6px rgba(36, 26, 18, .07);
  --shadow-md: 0 6px 18px rgba(36, 26, 18, .10);
  --shadow-lg: 0 20px 44px rgba(36, 26, 18, .18);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut hidden vient de la feuille du navigateur : n'importe quelle regle de
   classe posant un display le neutralise. On le rend non negociable. */
[hidden] { display: none !important; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ─────────────── barre du haut ─────────────── */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
}
.brand i { font-style: normal; color: var(--orange); }

.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tab {
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-dim);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.tab:hover { background: var(--cream); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--cream); }

.spacer { flex: 1; }

.progress { display: flex; align-items: center; gap: 9px; }
.progress .track { width: 84px; height: 6px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.progress .track i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: transform var(--motion-slow) var(--ease-out); transform-origin: left; }
.progress b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.progress small { font-size: 12px; color: var(--ink-dim); }

/* <select> natif : le menu deroulant du systeme est accessible et adapte au mobile. */
.lang {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-dim); background: var(--cream);
  border: none; border-radius: 999px; padding: 6px 10px; cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}
.lang:hover { color: var(--ink); }

.warn { font-size: 12px; color: var(--orange-dark); background: #FBE3DA; padding: 4px 10px; border-radius: var(--radius-sm); }

/* ─────────────── scene ─────────────── */
main { flex: 1; display: grid; place-items: center; padding: 28px 24px 40px; }
.view { display: none; width: 100%; max-width: 940px; }
.view.active { display: block; }
/* Listes : calees en haut. Centrees, une liste courte flotterait au milieu de l ecran. */
#view-collection.active, #view-friends.active, #view-profile.active, #view-duel.active { align-self: start; }

/* ─────────────── sachet au repos ─────────────── */
#view-open.active { display: grid; place-items: center; gap: 18px; text-align: center; }

.pack {
  position: relative;
  width: 168px; aspect-ratio: 3 / 4.1;
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, #F2793F 0%, var(--orange) 46%, var(--orange-dark) 100%);
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center; padding: 16px;
  overflow: hidden;
  transform: rotate(-2deg);
}
.pack::before {                        /* rayons : une conic-gradient, pas d'image */
  content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from 0deg, rgba(255,255,255,.14) 0 12deg, transparent 12deg 36deg);
  opacity: .55;
}
.pack::after {                         /* lisere de decoupe */
  content: ''; position: absolute; left: 0; right: 0; top: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 6px, transparent 6px 12px);
}
/* Le survol porte sur le CONTENEUR, pas sur le bouton : le couvercle est son voisin,
   pas son enfant. Sur le bouton seul, le paquet montait et la languette restait
   en arriere, visiblement decollee. */
.pack-stage:hover { transform: translateY(-6px) scale(1.02); }
.pack-stage:active { transform: translateY(-2px) scale(.99); }
.pack[disabled] { opacity: .5; cursor: not-allowed; transform: rotate(-2deg); }

.pack-core { position: relative; color: var(--white); }
.pack-core .kicker { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.pack-core .name { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 25px; line-height: .95; letter-spacing: -.03em; margin: 6px 0 8px; }
.pack-core .count { display: inline-block; font-size: 11px; font-weight: 600; background: rgba(0,0,0,.22); padding: 3px 10px; border-radius: 999px; }

.pack-hint { font-size: 13px; color: var(--ink-dim); }
.pack-hint kbd { font: inherit; font-weight: 600; background: var(--white); border-radius: var(--radius-sm); padding: 2px 7px; box-shadow: var(--shadow-sm); }

/* reserve de paquets : compteur, et sachet verrouille quand elle est vide */
.stock { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.4em; }
/* Le filtre va sur la scene : le couvercle est un voisin du bouton, pas un enfant. */
.pack.locked { cursor: not-allowed; }
.pack-stage:has(.locked) { filter: grayscale(.85) brightness(.9); transform: none !important; }

/* le sachet s'ouvre : on ne bouge que transform et opacity */
.pack.tearing { animation: packShake var(--motion-base) var(--ease-in-out) 2; }
.pack.tearing::after { animation: tearRip var(--motion-hero) var(--ease-out) forwards; }
.pack.gone { animation: packGone var(--motion-slow) var(--ease-out) forwards; }
/* Le serveur n'a pas encore repondu : le paquet respire, ouvert, au lieu de se
   figer. Un paquet immobile a mi-dechirure passe pour une interface plantee. */
.pack.waiting { animation: packBreathe 1.3s var(--ease-in-out) infinite; }
@keyframes packBreathe {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50%      { transform: rotate(-2deg) scale(1.045); }
}

@keyframes packShake {
  0%, 100% { transform: rotate(-2deg); }
  25% { transform: rotate(-4.5deg) translateX(-3px); }
  75% { transform: rotate(.5deg) translateX(3px); }
}
@keyframes tearRip { to { transform: scaleX(1.6) translateY(-14px); opacity: 0; } }
@keyframes packGone { to { transform: rotate(-2deg) scale(1.35); opacity: 0; } }

/* eclat au moment de l'ouverture */
/* L'eclat accompagne l'ouverture, il ne doit pas la masquer : a pleine opacite il
   blanchissait tout l'ecran et on ne voyait plus le couvercle se detacher. */
.flash {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(255,243,214,.85) 0%, rgba(255,226,170,.35) 18%, transparent 42%);
  opacity: 0;
}
.flash.on { animation: flashPop var(--motion-hero) var(--ease-out) forwards; }
@keyframes flashPop { 22% { opacity: .6; } 100% { opacity: 0; } }

/* ─────────────── revelation ─────────────── */
#view-reveal.active { display: grid; place-items: center; gap: 18px; }

.reveal-count { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }

.arena { display: flex; align-items: flex-start; justify-content: center; gap: 32px; }

/* La pile porte les cartes face cachee ET les cartes en vol : pas d'overflow:hidden,
   et un z-index superieur a .laid pour que la carte survole les emplacements. */
.pile {
  position: relative; flex: none;
  width: 196px; height: 278px;
  z-index: 2; display: block; text-align: left;
  perspective: 1500px;
}
.pile:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; border-radius: var(--radius-md); }
/* Nom d'etat distinct : .empty est deja la boite d'etat vide de la collection
   (bordure pointillee), et la collision habillait la pile d'un cadre fantome.
   Une fois le paquet epuise la pile sort du flux, l'eventail se recentre. */
.pile.spent { display: none; }

/* Les 5 emplacements sont la des le depart : le joueur voit ce qu'il lui reste a sortir.
   Ils se chevauchent en eventail et se deplient au survol. --i porte l'ecart au centre
   (-2 a +2), pose par le JS : aucune hypothese sur la taille du paquet dans le CSS. */
.laid {
  position: relative;
  width: 676px; height: 226px;
  z-index: 1;
  --fan-gap: 106px;                      /* recouvrement au repos : ~1/4 de carte */
}
.laid:hover, .laid:focus-within { --fan-gap: 132px; }   /* deplie */

/* Meme proportion que la carte de la pile (196x278) : une mise a l'echelle uniforme
   ne doit pas ecraser la carte a l'atterrissage. */
.target {
  position: absolute; left: 50%; top: 0;
  width: 148px; height: 210px;
  border-radius: var(--radius-md);
  /* transform-origin au centre : sinon la rotation deplace le centre de l'element
     et la mesure du vol, qui vise ce centre, tombe a cote. */
  transform: translateX(-50%) translateX(calc(var(--i) * var(--fan-gap)))
             translateY(calc(var(--dy) * 1px)) rotate(calc(var(--i) * 3deg));
  transition: transform var(--motion-base) var(--ease-out);
}
/* Deplie : l'eventail s'ouvre, se redresse ET s'aplatit une rangee lisible. */
.laid:hover .target, .laid:focus-within .target {
  transform: translateX(-50%) translateX(calc(var(--i) * var(--fan-gap))) translateY(0) rotate(0deg);
}
/* Pendant le vol on fige l'eventail : sinon un survol deplacerait la cible visee. */
.laid.dealing { pointer-events: none; }

.laid .mini { width: 100%; height: 100%; animation: settle var(--motion-base) var(--ease-pop); }
.laid .mini .shot { aspect-ratio: auto; height: 102px; }
@keyframes settle { from { transform: scale(1.06); } }

/* ---- la carte ---- */
.card3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--motion-slow) var(--ease-out);
  will-change: transform;
}
/* Sortie du paquet : elle monte, grossit legerement et se retourne d'un seul geste. */
.card3d.out { transform: translate(0, -58px) scale(1.06) rotateY(180deg); z-index: 9; }

.face {
  position: absolute; inset: 0;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  overflow: hidden;
}

/* --- dos : c'est LUI qui annonce la rarete, avant le retournement --- */
.face.back {
  background: linear-gradient(150deg, #33261C, #1B1410);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
}
.face.back::before {                    /* halo de rarete */
  content: ''; position: absolute; inset: -40%;
  background: radial-gradient(circle, var(--aura, transparent) 0%, transparent 62%);
  opacity: var(--aura-strength, 0);
  animation: auraPulse 2.4s var(--ease-in-out) infinite;
}
.face.back::after {                     /* lisere de rarete */
  content: ''; position: absolute; inset: 9px;
  border: 1px solid var(--aura, rgba(255,255,255,.18));
  border-radius: var(--radius-sm);
  opacity: calc(var(--aura-strength, 0) + .25);
}
@keyframes auraPulse { 50% { opacity: calc(var(--aura-strength, 0) * .55); } }

.back-mark {
  position: relative;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 28px; letter-spacing: -.04em;
  color: var(--aura, #6A5B4C);
}
.back-mark span { display: block; font-size: 8px; font-weight: 600; letter-spacing: .3em; margin-top: 6px; color: rgba(255,255,255,.4); }

/* --- recto --- */
.face.front {
  transform: rotateY(180deg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
/* L'image est sortie du flux : un element flex a min-height:auto, donc une image
   en flux imposerait sa hauteur intrinseque et ecraserait l'aspect-ratio. */
.face.front .shot { position: relative; aspect-ratio: 16 / 11; background: var(--sand); flex: none; min-height: 0; }
.face.front .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.face.front .body { padding: 9px 10px 11px; flex: 1; display: flex; flex-direction: column; }
.face.front h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.face.front p { font-size: 10.5px; line-height: 1.36; color: var(--ink-dim); margin-top: 4px; text-wrap: pretty; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.chip {
  position: absolute; top: 7px; left: 7px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--r, var(--ink)); color: var(--white);
}
.chip.dark { color: var(--ink); }
.new-badge {
  position: absolute; top: 7px; right: 7px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--ink); color: #FFD98A;
}

.stats { display: flex; gap: 6px; margin-top: 8px; }
.stat { flex: 1; background: var(--cream); border-radius: var(--radius-sm); padding: 5px 7px; }
.stat span { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.stat b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat.atk b { color: var(--orange); }
.stat.def b { color: var(--green); }

/* ---- fin du paquet ---- */
.done { display: grid; place-items: center; gap: 12px; }
.summary-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }

.actions { display: flex; gap: 10px; }
.btn {
  padding: 11px 22px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 14px;
  background: var(--ink); color: var(--cream);
  transition: transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--sand); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ─────────────── collection ─────────────── */
.collection-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.collection-head h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.collection-head .sub { font-size: 13px; color: var(--ink-dim); }

.filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filter {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: var(--white); color: var(--ink-dim); box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast) var(--ease-out);
}
.filter:hover { transform: translateY(-1px); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-rows: 220px; gap: 12px; }

.mini {
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
  position: relative;
  display: flex; flex-direction: column;
}
.mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mini .shot { position: relative; height: 106px; flex: none; background: var(--sand); }
.mini .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mini .body { padding: 7px 9px 9px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mini h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: none; }
.mini p { font-size: 10px; line-height: 1.34; color: var(--ink-dim); margin-top: 4px; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1 1 auto; min-height: 0; }
/* Carte non obtenue : ni description ni stats. Un texte quasi invisible passe pour
   un bug de rendu ; l'absence franche se lit comme un etat. */
.mini.locked p { display: none; }
/* margin-top:auto colle la ligne de stats au bas, que le titre tienne sur 1 ou 2 lignes. */
.mini .line { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 5px; font-size: 10.5px; font-variant-numeric: tabular-nums; flex: none; }
.mini .line .a { color: var(--orange); font-weight: 600; }
.mini .line .d { color: var(--green); font-weight: 600; }
.mini .line .dupe { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-dim); }

/* Etiquette de rarete : meme code couleur que sur la grande carte. */
.mini .rank {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--r, var(--ink)); color: var(--white);
}
.mini .rank.dark { color: var(--ink); }
.mini.locked .rank { background: var(--sand); color: var(--ink-dim); }

/* Carte pas encore obtenue : aucune image. Un filtre en niveaux de gris rend les
   photos claires invisibles et les sombres lisibles, donc incoherent et charger
   les images de centaines de cartes non possedees ne sert a rien. */
.mini.locked { box-shadow: none; background: var(--cream-deep); }
.mini.locked .shot { background: repeating-linear-gradient(135deg, var(--cream-deep) 0 7px, var(--sand) 7px 14px); }
.mini.locked h4 { color: var(--ink-dim); }
.mini.locked .line { visibility: hidden; }
.mini.locked:hover { transform: none; }

.empty {
  padding: 48px 32px; text-align: center;
  border: 2px dashed var(--sand); border-radius: var(--radius-lg);
}
.empty h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.empty p { font-size: 13px; color: var(--ink-dim); margin-bottom: 16px; }

/* ─────────────── squelette de chargement ─────────────── */
.skeleton { background: linear-gradient(90deg, var(--cream-deep) 25%, var(--sand) 50%, var(--cream-deep) 75%); background-size: 200% 100%; animation: shimmer 1.4s var(--ease-in-out) infinite; border-radius: var(--radius-md); }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

footer { padding: 14px 24px 22px; text-align: center; font-size: 11.5px; color: var(--ink-dim); }
footer a { color: var(--orange); }

/* ─────────────── telephone ─────────────── */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; }
  .topbar .spacer { display: none; }
  .lang { margin-left: auto; }
  .progress { width: 100%; }
  .progress .track { flex: 1; width: auto; }
  main { padding: 20px 16px 32px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .actions { flex-direction: column; width: 100%; }
  .actions .btn { width: 100%; }
  .arena { flex-direction: column; align-items: center; gap: 22px; }
  .laid { width: 100%; height: 184px; --fan-gap: 52px; }
  .laid:hover, .laid:focus-within { --fan-gap: 60px; }
  .target { width: 100px; height: 142px; }
  .laid .mini .shot { height: 70px; }
  .mini h4 { font-size: 11.5px; }
  .mini p { -webkit-line-clamp: 2; font-size: 9px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 196px; }
}

/* ─────────────── appareils tactiles ─────────────── */
/* L'eventail replie se deplie au survol. Sans survol, il n'y a aucun moyen de le
   lire : on repasse donc a une grille, ou les cartes sont visibles d'emblee. */
@media (hover: none) {
  .laid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    width: 100%; height: auto;
  }
  .target { position: static; transform: none; width: 100%; height: 158px; }
  .laid .mini .shot { height: 72px; }
}

/* ─────────────── fiche detaillee ─────────────── */
/* Le dialog occupe tout l'ecran et la carte est centree dedans : c'est ce qui rend
   le clic « a cote » detectable (un clic sur ::backdrop n'atteint pas l'element). */
.modal {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 24px; border: none; background: none;
  display: grid; place-items: center;
  overflow: auto;
}
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(36, 26, 18, .55); }
.modal[open]::backdrop { animation: veilIn var(--motion-base) var(--ease-out); }
.modal.closing::backdrop { animation: veilIn var(--motion-fast) var(--ease-out) reverse forwards; }
@keyframes veilIn { from { opacity: 0; } }

.modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  cursor: default;
}
.modal[open] .modal-card { animation: cardIn var(--motion-base) var(--ease-pop); }
.modal.closing .modal-card { animation: cardOut var(--motion-fast) var(--ease-out) forwards; }
@keyframes cardIn  { from { transform: scale(.94) translateY(12px); opacity: 0; } }
@keyframes cardOut { to   { transform: scale(.96); opacity: 0; } }

.modal-shot { position: relative; aspect-ratio: 16 / 10; background: var(--sand); }
.modal-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  font-size: 17px; line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast) var(--ease-out);
}
.modal-close:hover { transform: scale(1.08); }
.modal-close:active { transform: scale(.94); }

.modal-body { padding: 18px 20px 20px; }
.modal-body h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-wrap: pretty; margin-top: 10px; }
.modal-body .desc { font-size: 14px; color: var(--ink-dim); margin-top: 6px; text-wrap: pretty; }
/* Pas de troncature ici : c'est tout l'interet d'ouvrir la fiche. */
.modal-body .extract { font-size: 13.5px; line-height: 1.55; margin-top: 14px; text-wrap: pretty; }

.modal-stats { display: flex; gap: 10px; margin-top: 18px; }
.modal-stats .stat { flex: 1; background: var(--cream); border-radius: var(--radius-md); padding: 10px 12px; }
.modal-stats .stat span { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.modal-stats .stat b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.modal-stats .atk b { color: var(--orange); }
.modal-stats .def b { color: var(--green); }

.modal-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--ink-dim); }
.modal-meta a { margin-left: auto; color: var(--orange); font-weight: 600; }

.mini { cursor: pointer; }
.mini.locked { cursor: default; }

@media (max-width: 560px) {
  .modal { padding: 14px; }
  .modal-body h2 { font-size: 22px; }
}

/* ─────────────── compte ─────────────── */
.account { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.account b { font-weight: 600; }
.account button {
  font-size: 12.5px; font-weight: 600; color: var(--ink-dim);
  padding: 5px 11px; border-radius: 999px; background: var(--cream);
  transition: color var(--motion-fast) var(--ease-out);
}
.account button:hover { color: var(--ink); }
.account button.primary { background: var(--ink); color: var(--cream); }

.auth-card { padding: 26px 26px 22px; width: min(380px, 100%); }
.auth-card h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 16px; }

.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-dim); margin-bottom: 5px; }
.field input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--cream); border: none;
  box-shadow: inset 0 0 0 1.5px var(--sand);
  transition: box-shadow var(--motion-fast) var(--ease-out);
}
/* Bordure qui s'affirme, pas de halo : un glow rend un formulaire criard. */
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }

.auth-card .btn { width: 100%; margin-top: 6px; }
.form-error { font-size: 12.5px; color: var(--orange-dark); margin: 8px 0 4px; }
.form-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }
.form-note.guest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sand); }
.form-switch { margin-top: 10px; text-align: center; }
.linkish { font-size: 12.5px; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--orange); }

.recovery-code {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0; padding: 14px;
  background: var(--cream); border-radius: var(--radius-md);
}
.recovery-code code {
  flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  word-break: break-all;
}
.recovery-code .btn { width: auto; margin: 0; padding: 8px 14px; font-size: 12.5px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 13px; margin: 14px 0 4px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer; }

/* ─────────────── message bref ─────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 40;
  transform: translateX(-50%);
  background: var(--ink); color: var(--cream);
  font-size: 13.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  animation: toastIn var(--motion-base) var(--ease-pop);
}
@keyframes toastIn { from { transform: translateX(-50%) translateY(14px); opacity: 0; } }

@media (max-width: 560px) {
  .account { order: 3; }
  .auth-card { padding: 22px 18px 18px; }
}

/* ─────────────── carte sans illustration ─────────────── */
/* La marque est toujours dans le DOM, masquee derriere l'image. Elle apparait si
   l'image manque ou echoue : pas de second rendu, pas de scintillement. */
.art-mark {
  position: absolute; inset: 0; display: none; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; letter-spacing: -.05em;
  color: var(--white);
  background: linear-gradient(152deg, #F2793F, var(--orange) 48%, var(--orange-dark));
}
.art-mark::after {
  content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from 0deg, rgba(255,255,255,.13) 0 12deg, transparent 12deg 36deg);
}
.shot:not(:has(img)) .art-mark,
.modal-shot:not(:has(img)) .art-mark,
.no-image .art-mark { display: grid; }
/* Specificite alignee sur ".mini .shot img", sinon l'image cassee reste affichee
   (masquee derriere la marque, mais presente). */
.shot.no-image img, .modal-shot.no-image img { display: none; }

.face.front .art-mark { font-size: 54px; }
.mini .art-mark { font-size: 34px; }
.modal-shot .art-mark { font-size: 84px; }

/* ─────────────── pagination ─────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.pager .btn { width: auto; padding: 9px 18px; font-size: 13px; }
.pager .btn[disabled] { opacity: .35; cursor: not-allowed; }
.pager span { font-size: 13px; font-weight: 600; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.pack-stage {
  position: relative; width: 168px;
  transition: transform var(--motion-base) var(--ease-out);
}

/* ─────────────── les cartes sortent du paquet ─────────────── */
/* Elles partent de la position du sachet et rejoignent la pile, decalees dans le
   temps. Le delai est pose en JS puis retire : sinon il s'appliquerait aussi aux
   transformations suivantes, et la pile se reordonnerait au ralenti. */
.card3d.spilling { transition: transform var(--motion-slow) var(--ease-pop); }

/* ─────────────── amis ─────────────── */
.btn.small { padding: 7px 14px; font-size: 12.5px; }
.add-friend { display: flex; gap: 8px; max-width: 440px; margin-bottom: 20px; }
.add-friend input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px;
  border: none; border-radius: var(--radius-md); background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--sand);
}
.add-friend input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.friends-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 18px 0 8px; }
.friend-list { list-style: none; display: grid; gap: 6px; max-width: 560px; }
.friend {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.friend-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; background: none; border: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.friend-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.friend-name small { color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.friend-name:hover b { text-decoration: underline; }
.friend-actions { display: flex; gap: 6px; }
.empty-line { font-size: 13px; color: var(--ink-dim); margin: 10px 0; }
.me-link { background: none; border: none; font: inherit; color: var(--ink); cursor: pointer; padding: 0; }
.me-link:hover b { text-decoration: underline; }

/* ─────────────── profil ─────────────── */
.profile-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.profile-head .spacer { flex: 1; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(158deg, #F2793F, var(--orange)); color: var(--white);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px;
}
.who h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.who .sub { font-size: 13px; color: var(--ink-dim); }
.chip-state { font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: var(--radius-md); background: var(--sand); }
.chip-state.ok { background: var(--ink); color: var(--cream); }
.profile-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.stat-big { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 12px 18px; min-width: 120px; }
.stat-big b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.stat-big span { font-size: 12px; color: var(--ink-dim); }
.stat-big b small { font-size: 15px; color: var(--ink-dim); font-weight: 600; }
.rarity-mix { flex: 1; min-width: 220px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 14px 18px; display: grid; gap: 10px; align-content: center; }
.rarity-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sand); gap: 2px; }
.rarity-bar i { min-width: 4px; }
.rarity-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-dim); }
.rarity-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
@media (max-width: 560px) {
  .profile-head .btn { flex: 1; }
  .friend-actions .btn { padding: 7px 10px; }
}

/* ─────────────── presence et defis ─────────────── */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); flex: none; align-self: center; }
.dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(31, 122, 90, .18); }
.challenge-pop {
  position: fixed; right: 20px; bottom: 20px; z-index: 45; max-width: 320px;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 16px 18px; display: grid; gap: 12px; font-size: 14px;
  animation: popIn var(--motion-base) var(--ease-pop);
}
.challenge-pop .pop-actions { display: flex; gap: 8px; }
@keyframes popIn { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.tab-duel { color: var(--orange); }
.tab-duel:not([aria-selected="true"]) { animation: duelPulse 1.6s var(--ease-in-out) infinite; }
@keyframes duelPulse { 50% { box-shadow: 0 0 0 4px rgba(228, 85, 43, .22); } }

/* ─────────────── choix du deck ─────────────── */
.pick-tray { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; font-weight: 600; font-size: 14px; }
.pick-tray .spacer { flex: 1; }
.pickable { cursor: pointer; border-radius: var(--radius-md); transition: transform var(--motion-fast) var(--ease-out); }
.pickable .mini { height: 100%; pointer-events: none; }
.pickable:hover { transform: translateY(-3px); }
.pickable.picked { box-shadow: 0 0 0 3px var(--orange); transform: translateY(-3px); }
.duel-clock { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; margin-left: auto; }
.duel-clock.urgent { color: var(--orange-dark); }

/* ─────────────── plateau ─────────────── */
.duel-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.duel-side { display: flex; align-items: baseline; gap: 10px; flex: 1; font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.duel-side b { color: var(--ink); font-size: 15px; }
.duel-side.mine { justify-content: flex-end; }
.duel-bar .duel-clock { margin: 0; }
.duel-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.duel-hint { text-align: center; margin: 14px 0; }
.dcard { position: relative; height: 236px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--radius-md); transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out); }
.dcard .mini { flex: 1; min-height: 0; pointer-events: none; }
.dcard .hp { height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.dcard .hp i { display: block; height: 100%; background: var(--green); transform-origin: left; transition: transform var(--motion-slow) var(--ease-out); }
.dcard.them .hp i, .duel-row.them .hp i { background: var(--orange); }
.dcard .hp-line { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pips { display: flex; gap: 3px; align-items: center; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.pips i.used { background: var(--sand); }
.dcard.attackable { cursor: pointer; }
.dcard.attackable:hover { transform: translateY(-6px); }
.dcard.attackable:hover .mini { box-shadow: 0 0 0 2px var(--orange), var(--shadow-sm); }
.dcard.closed { opacity: .55; }
.dcard.dead { opacity: .3; filter: grayscale(1); }
.dcard.targeted .mini { box-shadow: 0 0 0 3px var(--orange-dark); animation: aimed .5s var(--ease-in-out) 3; }
@keyframes aimed { 50% { transform: translateY(-4px); } }
.target-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--orange-dark); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; }
.dmg { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; pointer-events: none; text-shadow: 0 2px 0 var(--white); animation: dmgFly 1.1s var(--ease-out) forwards; }
.dmg.hit { color: var(--orange-dark); }
.dmg.self { color: #7A2E8E; }
@keyframes dmgFly { from { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.duel-foot { display: flex; justify-content: center; margin-top: 16px; }

/* ─────────────── question ─────────────── */
.duel-q { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(36, 26, 18, .35); animation: fadeIn var(--motion-fast) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } }
.q-card { width: min(520px, 100%); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px; display: grid; gap: 12px; animation: popIn var(--motion-base) var(--ease-pop); }
/* Deja affichee : le rendu du resultat ne doit pas rejouer l'entree. */
.q-card.settled { animation: none; }
.q-meta { font-size: 12px; color: var(--ink-dim); font-weight: 600; }
.q-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.q-timer { height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.q-timer i { display: block; height: 100%; background: var(--orange); transform-origin: left; animation: drain linear forwards; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-opt { font: inherit; font-size: 14px; font-weight: 600; text-align: left; padding: 12px 14px; border: none; border-radius: var(--radius-md); background: var(--cream); color: var(--ink); cursor: pointer; transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.q-opt:hover:not(:disabled) { background: var(--sand); transform: translateY(-1px); }
.q-opt:disabled { cursor: default; }
.q-opt.right { background: var(--green); color: var(--white); }
.q-opt.wrong { background: var(--orange-dark); color: var(--white); }
.q-result { font-weight: 700; text-align: center; }
.q-result.correct { color: var(--green); }
.q-result.wrong, .q-result.timeout { color: var(--orange-dark); }

/* ─────────────── fin de duel ─────────────── */
.duel-end { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 48px 16px; }
.duel-end h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -.03em; animation: popIn var(--motion-slow) var(--ease-pop); }
.duel-end.win h2 { color: var(--green); }
.duel-end.lose h2 { color: var(--orange-dark); }
.duel-end .reward { font-weight: 700; background: var(--ink); color: var(--cream); padding: 8px 16px; border-radius: 999px; }

@media (max-width: 720px) {
  .duel-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .dcard { height: 170px; }
  .dcard .mini .body p { display: none; }
  .q-options { grid-template-columns: 1fr; }
  .challenge-pop { left: 12px; right: 12px; max-width: none; }
}

/* ─────────────── recherche et tri ─────────────── */
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.tools .search { flex: 1; min-width: 200px; max-width: 420px; position: relative; display: flex; align-items: center; }
.tools .search span { position: absolute; left: 12px; font-size: 16px; color: var(--ink-dim); pointer-events: none; }
.tools .search input {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 12px 9px 34px;
  border: none; border-radius: 999px; background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--sand);
  transition: box-shadow var(--motion-fast) var(--ease-out);
}
.tools .search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tools .sort { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.tools .sort select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--white); border: none; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--sand);
}
.tools .sort select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (max-width: 560px) { .tools .search { max-width: none; } }

/* ─────────────── pied de page legal, zone sensible ─────────────── */
.legal-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.legal-links a, .legal-links .linkish { font-size: 12px; color: var(--ink-dim); }
.danger-zone { margin-top: 36px; text-align: center; }
.danger-zone .linkish:hover { color: var(--orange-dark); }
.btn.danger { background: var(--orange-dark); color: var(--white); }

/* ─────────────── pages legales ─────────────── */
a.brand { text-decoration: none; color: inherit; }
.legal-back { font-size: 13px; font-weight: 600; color: var(--ink-dim); text-decoration: none; }
.legal-back:hover { color: var(--ink); }
.legal { width: 100%; max-width: 760px; align-self: start; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px 36px 40px; line-height: 1.6; font-size: 14.5px; }
.legal h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.legal h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 28px 0 8px; }
.legal p, .legal ul { margin: 8px 0; }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--orange-dark); }
.legal-date { font-size: 12.5px; color: var(--ink-dim); margin-top: 4px !important; }
.legal-lead { font-size: 15.5px; background: var(--cream); border-radius: var(--radius-md); padding: 14px 16px; }
.legal mark { background: #FFE9A8; padding: 1px 4px; border-radius: 4px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--sand); }
.legal-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
.legal code { font-size: 12.5px; background: var(--cream); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 560px) {
  .legal { padding: 22px 18px 28px; }
  .legal-table { display: block; overflow-x: auto; }
}