/* =========================================================
   Grail — feuille de style
   Parti pris : une interface moderne et nette, façon boutique
   de drop (fond sombre, typo grotesque grasse, beaucoup d'air),
   qui contraste avec les vêtements et l'avatar en pixel art.
   Mobile d'abord : tout est pensé pour ~375 px de large ;
   sur tablette et PC, le contenu reste centré dans une colonne.
   ========================================================= */

:root {
  /* Fond sombre presque noir, texte blanc cassé */
  --bg: #0f0f11;
  --surface: #1a1a1e;
  --surface-2: #242429;
  --border: #2c2c33;
  --text: #f2f1ee;
  --muted: #8f8d88;

  /* Couleurs des raretés (section 6 du CLAUDE.md), lisibles sur fond sombre */
  --rarity-commun: #9a9aa4;
  --rarity-rare: #4d8dff;
  --rarity-epique: #a56bff;
  --rarity-legendaire: #f2c230;
  --rarity-ultime: #c9a7ff;   /* Ultime (album) : au-dessus de Légendaire, irisé sur les cartes */
  --ultime-gradient: linear-gradient(100deg, #5ae6e6, #78a0ff 30%, #be78ff 50%, #ff78d2 70%, #ffc88c);

  /* Couleur d'accent de chaque marque (section 5 du CLAUDE.md) :
     cartes ET image partagée (share.js les lit ici) */
  --brand-signal9: #ff6a13;
  --brand-halvane: #d4a72c;
  --brand-pigeon_social_club: #4f9a68;
  --brand-ferrant_fils: #6f8fcf;
  --brand-brume: #8fc2a8;
  --brand-faubourg_78: #e0384f;
  --brand-orbite_2000: #ff7ad9;

  --radius: 16px;
  --tabbar-h: 64px;
  /* Largeur max de la colonne de contenu (en-tête, écrans, onglets alignés) */
  --col: 480px;
  /* Marge latérale : 20 px sur téléphone, plus sur grand écran pour centrer */
  --gutter: max(20px, calc((100% - var(--col)) / 2 + 20px));
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Tablette et PC : colonne plus large, donc des cartes plus grandes */
@media (min-width: 700px) {
  :root { --col: 720px; }
}

* { box-sizing: border-box; }

/* L'attribut hidden cache TOUJOURS l'élément, même si une règle lui donne
   un display (grid, flex…) : sinon il resterait affiché (ex. récap du booster). */
[hidden] { display: none !important; }

/* La page ne défile jamais (comme une appli) : seule la zone <main>
   peut défiler si son contenu dépasse. overscroll-behavior: none
   supprime l'effet « élastique » d'iOS quand on tire la page. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* Supprime le zoom au double-tap (taper vite deux fois sur le paquet) */
  touch-action: manipulation;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* hauteur réelle visible, barres de Safari comprises */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; /* empêche iOS de grossir le texte tout seul */
  -webkit-tap-highlight-color: transparent;
}

/* --- En-tête --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 14px;
}

/* Logo : grotesque très grasse et étirée (axe « wdth » de la police) */
.logo {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.02em;
}

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* Boutons ronds « Amis » et « Mon profil », à gauche du solde (la barre du bas n'a que 5 onglets) */
.profile-button,
.friends-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
}
.profile-button[aria-current="page"],
.friends-button[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.friends-button { position: relative; }

/* Réputation : anneau de progression vers le niveau suivant autour du bouton + pastille du niveau (reputation.js) */
.profile-button { position: relative; }
.rep-badge { display: none; }
.profile-button.has-rep::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  /* anneau : la part --rep (0 à 1) est dorée, le reste gris */
  background: conic-gradient(var(--rarity-legendaire) calc(var(--rep, 0) * 1turn), var(--border) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  pointer-events: none;
}
.profile-button.has-rep .rep-badge {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--rarity-legendaire);
  color: #1a1405;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
/* Montée de niveau : le bouton « pulse » */
.profile-button.rep-up { animation: rep-pulse 1.1s ease-out; }
@keyframes rep-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(242, 194, 48, 0.8); transform: scale(1); }
  30%  { transform: scale(1.18); }
  100% { box-shadow: 0 0 0 16px rgba(242, 194, 48, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .profile-button.rep-up { animation: none; } }

/* Solde de pièces, en haut à droite de toutes les pages */
.coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--rarity-legendaire);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.coins-amount { color: var(--text); }
.coins.bump { animation: coins-bump 0.5s ease-out; }
@keyframes coins-bump { 40% { transform: scale(1.18); border-color: var(--rarity-legendaire); } }

/* Écran de connexion : tant qu'on n'est pas connecté, le jeu est caché */
body[data-auth="out"] .topbar,
body[data-auth="out"] main,
body[data-auth="out"] .tabbar,
body[data-auth="public"] .topbar,
body[data-auth="public"] main,
body[data-auth="public"] .tabbar,
body[data-auth="public"] .auth { display: none; }
.auth { display: none; }
body[data-auth="out"] .auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(24px + env(safe-area-inset-top)) var(--gutter) 24px;
}
.auth-card { display: flex; flex-direction: column; gap: 18px; width: min(420px, 100%); }
.auth-logo { font-size: 40px; text-align: center; }
.auth-tab {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.auth-tab[aria-selected="true"] { background: var(--text); color: var(--bg); }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.auth-input {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;         /* 16 px : Safari ne zoome pas dans le champ */
}
.auth-input:focus { outline: none; border-color: var(--text); }
.auth-message { margin: 4px 0 0; font-size: 14px; font-weight: 600; text-align: center; }
.auth-message[data-kind="error"] { color: #ff7a6b; }
.auth-message[data-kind="ok"] { color: var(--rarity-legendaire); }
.auth-form .btn { margin-top: 8px; }
.auth-title { margin: 0; font-size: 22px; font-weight: 900; font-stretch: 125%; text-align: center; }
.auth-hint { margin: 0; font-size: 14px; text-align: center; }
.auth-link {
  align-self: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.signout {
  align-self: center;
  margin-top: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Notification sous l'en-tête */
.toast {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  z-index: 60;
  max-width: calc(100vw - 2 * var(--gutter));
  width: max-content;
  padding: 10px 18px;
  border-radius: 18px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast.error { background: #ff7a6b; color: #1a0705; }
.toast.show { animation: toast-in 3.6s ease-in-out both; }
@keyframes toast-in {
  0% { opacity: 0; transform: translate(-50%, -12px); }
  8%, 88% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}
@media (prefers-reduced-motion: reduce) { .coins.bump, .toast.show { animation: none; } }


/* --- Écrans --- */
main {
  flex: 1;               /* prend toute la hauteur entre en-tête et onglets */
  min-height: 0;
  overflow-y: auto;      /* seul endroit qui peut défiler */
  overscroll-behavior: contain;
  padding: 8px var(--gutter) 24px;
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

/* L'écran Booster est centré verticalement dans l'espace disponible */
#screen-booster {
  min-height: 100%;
  justify-content: center;
}


.screen-title {
  margin: 8px 0 0;
  font-size: 34px;
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.muted { color: var(--muted); margin: 0; }

/* Petite étiquette au-dessus d'un titre */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* --- Écran Booster : le paquet sert de bouton --- */
.booster-eyebrow { text-align: center; }

/* Agrandissement du paquet : toujours un facteur ENTIER (×6 sur téléphone).
   Il grandit sur tablette / PC (voir les @media plus bas). */
.booster-pack { --pack-scale: 6; }

.booster-pack {
  position: relative;
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none; /* glisser le doigt déchire le paquet au lieu de faire défiler */
  -webkit-user-select: none;
  user-select: none;
  /* Légère flottaison au repos pour inviter à toucher */
  animation: booster-float 3s ease-in-out infinite;
}

/* Le dessin est affiché deux fois, découpé en dents de scie (clip-path posé par
   booster.js) : la bande du haut, qui s'arrache, et le reste du paquet. */
.pack-art {
  position: relative;
  display: block;
  width: calc(32px * var(--pack-scale));
  height: calc(48px * var(--pack-scale));
}

.pack-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Pas de filter sur l'image : Safari la rendrait floue */
  /* Le doigt agit sur le bouton, pas sur l'image : sinon le navigateur
     « fait glisser l'image » et annule le geste de déchirure, et l'iPhone
     ouvre son menu « Enregistrer l'image » sur un appui long. */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* La bande pivote depuis son coin gauche, au niveau de la ligne pointillée */
.pack-top {
  transform-origin: 0% 15%;
  transition: transform 0.15s ease-out;
}
.booster-pack.dragging .pack-top { transition: none; }

/* Ombre au sol, dessinée à part pour ne pas toucher aux pixels du paquet */
.booster-pack::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -20px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  filter: blur(8px);
  z-index: -1;
}

/* Pas de booster disponible : paquet éteint, plus d'animation */
.booster-pack:disabled {
  cursor: not-allowed;
  animation: none;
  opacity: 0.35;
}

/* Tablette et PC assez hauts : ×8 (256 × 384 px) */
@media (min-width: 600px) and (min-height: 700px) {
  .booster-pack { --pack-scale: 8; }
}

/* Tablette en portrait (iPad) : ×10 (320 × 480 px) */
@media (min-width: 700px) and (min-height: 1000px) {
  .booster-pack { --pack-scale: 10; }
}

/* Écran peu haut (téléphone à l'horizontale) : ×4 pour tout voir */
@media (max-height: 520px) {
  .booster-pack { --pack-scale: 4; }
}

/* Un simple toucher n'ouvre pas : le paquet sursaute pour rappeler qu'il faut glisser */
.booster-pack.nudge { animation: booster-shake 0.4s ease-in-out; }

@keyframes booster-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes booster-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

.booster-status { text-align: center; }

/* --- Tutoriel du 1er booster : un « doigt » qui glisse de gauche à droite --- */
.swipe-hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none; /* le vrai doigt passe au travers */
  transition: opacity 0.2s;
}
/* Sur la carte du booster : par-dessus la carte (même case de la grille) */
.reveal-stage > .swipe-hint {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
}
/* Dès que le joueur glisse vraiment, le tuto s'efface */
.booster-pack.dragging .swipe-hint,
.flip-card.dragging ~ .swipe-hint { opacity: 0; }

.swipe-track {
  position: relative;
  width: 140px;
  height: 44px;
}
/* Le « doigt » : un point lumineux qui laisse une traînée */
.swipe-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: rgba(242, 241, 238, 0.95);
  box-shadow: 0 0 0 6px rgba(242, 241, 238, 0.25), 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: swipe-dot 1.6s ease-in-out infinite;
}
.swipe-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(242, 241, 238, 0.6));
  animation: swipe-trail 1.6s ease-in-out infinite;
}
@keyframes swipe-dot {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { transform: translateX(0); opacity: 1; }
  70%  { transform: translateX(106px); opacity: 1; }
  100% { transform: translateX(106px); opacity: 0; }
}
@keyframes swipe-trail {
  0%, 15% { width: 0; }
  70%     { width: 100px; }
  100%    { width: 100px; }
}
.swipe-label {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 15, 17, 0.88);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Jauge « Légendaire garantie » (pity) --- */
.pity {
  width: min(320px, 100%);
  align-self: center;
}
.pity-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-wrap: wrap;    /* très petit écran : le compteur passe à la ligne… */
}
.pity-head span { white-space: nowrap; } /* …mais aucun des deux textes n'est coupé */
.pity-label { color: var(--muted); }
.pity-count { color: var(--rarity-legendaire); }
.pity-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.pity-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a6d12, var(--rarity-legendaire));
  transition: width 0.6s ease-out;
}
/* Jauge Épique : même dessin, en violet */
.pity.epic .pity-count { color: var(--rarity-epique); }
.pity.epic .pity-fill { background: linear-gradient(90deg, #4b2c86, var(--rarity-epique)); }

/* Stock de boosters gratuits (pastilles) + minuteur, en une ligne au-dessus du paquet */
.stock-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.stock-pips { display: flex; gap: 5px; }
.stock-pip { width: 12px; height: 17px; border-radius: 3px; border: 2px solid var(--border); }
.stock-pip.full { border-color: var(--text); background: var(--text); }
.stock-bonus { font-size: 13px; font-weight: 800; color: var(--rarity-legendaire); white-space: nowrap; }
.stock-bonus[hidden] { display: none; }
.stock-timer { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sous le paquet : compteur Signature */
.stock { display: flex; flex-direction: column; gap: 6px; width: min(320px, 100%); align-self: center; text-align: center; }
.stock-signature { margin: 0; font-size: 13px; }
.stock-signature { color: var(--muted); }
.stock-signature.now { color: var(--rarity-legendaire); font-weight: 700; }

/* Booster Signature : étiquette dorée et halo doré FIXE autour du paquet (aucune animation) */
.booster-eyebrow.signature { color: var(--rarity-legendaire); }
/* Lueur dessinée DERRIÈRE le paquet (pas de filter sur les pixels : Safari les rendrait flous) */
.booster-pack.signature::before {
  content: "";
  position: absolute;
  inset: -10% -22%;
  background: radial-gradient(closest-side, rgba(242, 194, 48, 0.5), rgba(242, 194, 48, 0));
  z-index: -1;
}
.booster-pack.signature.torn::before { opacity: 0; transition: opacity 0.3s; }

/* Pity douce en cours : la jauge brille, la Légendaire approche */
.pity.almost .pity-fill { animation: pity-glow 1.2s ease-in-out infinite; }
@keyframes pity-glow {
  50% { box-shadow: 0 0 12px 2px var(--rarity-legendaire); }
}

/* --- Boutons : larges, faciles au pouce (min. 48 px de haut) --- */
.btn {
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  border: 1.5px solid var(--text);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* --- Pixel art : jamais de flou (réservé aux vêtements et à l'avatar) --- */
.pixel {
  /* L'ordre compte : la dernière valeur comprise par le navigateur gagne.
     crisp-edges sert de repli (anciens Firefox), pixelated doit rester en dernier. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* --- Écran « Ma tenue » : fiche de tenue --- */

/* 3 colonnes : cases à gauche | silhouette | cases à droite */
.outfit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.outfit-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tenue à plat 64×96 : facteur entier ×2 (128×192) sur téléphone, ×3 sur tablette / PC */
.outfit-body {
  --avatar-scale: 2;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  background: #cccac4; /* fond clair : les contours noirs restent visibles */
  border-radius: var(--radius);
}
@media (min-width: 700px) {
  /* Tablette / PC : fiche centrée et limitée en largeur ; avatar 3D ×5, cases ×3, tenue à plat ×3 */
  .outfit { width: 100%; max-width: 440px; margin-inline: auto; }
  .outfit-body { --avatar-scale: 3; }
}
/* Vue 3D : cadre gris sombre, un peu plus clair que le fond du jeu (le dessin 3D a son propre contour) */
.outfit-body.is-3d {
  background: radial-gradient(ellipse at 50% 40%, #34353c 0%, #2a2b31 60%, #232429 100%);
}

.avatar-canvas {
  width: calc(64px * var(--avatar-scale));
  height: calc(96px * var(--avatar-scale));
}

/* Sélecteur 3D / À plat, au-dessus de la fiche */
.outfit-switch { margin-bottom: 12px; }

/* Les deux vues de l'avatar : une seule visible à la fois */
.outfit-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.outfit-view[hidden] { display: none; }

/* Avatar 3D 46×88 (recadré sur l'avatar) : facteur entier ×4 (184×352), ×3 sous 360 px, ×5 sur tablette / PC.
   Glisser horizontalement le fait tourner ; le défilement vertical de la page
   reste possible (pan-y). */
.outfit-body { --avatar3d-scale: 4; min-width: calc(46px * var(--avatar3d-scale)); } /* même largeur en 3D et à plat : les cases gardent leur taille */
@media (min-width: 700px) { .outfit-body { --avatar3d-scale: 5; } }
@media (max-width: 359px) { .outfit-body { --avatar3d-scale: 3; } } /* petit téléphone : laisse la place aux cases */
.avatar-3d {
  width: calc(46px * var(--avatar3d-scale));
  height: calc(88px * var(--avatar3d-scale));
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-3d:active { cursor: grabbing; }

/* Sous le cadre (vue 3D) : indication, choix Garçon / Fille, pièces pas encore en 3D */
.outfit-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.outfit-tools[hidden] { display: none; }
.outfit-3d-hint,
.outfit-3d-note {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

/* Choix Garçon / Fille : petite pilule centrée */
.body-switch {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.body-tab {
  min-height: 36px;
  min-width: 96px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.body-tab[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Invitation posée sur la vitrine tant qu'aucune pièce n'est portée */
.outfit-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #6e6c67;
}

/* Une case de la fiche. Taille de l'icône selon la largeur RÉELLE de la case :
   largeur nécessaire = 32 × facteur (la bordure est dessinée à l'intérieur). ×1 à ×4. */
.slot {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font);
  cursor: pointer;
}

.slot-tile { --slot-scale: 1; }
@container (min-width: 64px) { .slot-tile { --slot-scale: 2; } }
@container (min-width: 96px) { .slot-tile { --slot-scale: 3; } }
@container (min-width: 128px) { .slot-tile { --slot-scale: 4; } }

.slot-tile {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: calc(32px * var(--slot-scale));
  height: calc(32px * var(--slot-scale));
  padding: 0;
  border-radius: 10px;
  background: #cccac4; /* case claire : les contours noirs restent visibles */
  /* Bordure de rareté dessinée à l'intérieur (sous le sprite) : la case garde la taille exacte du sprite */
  box-shadow: inset 0 0 0 2px var(--rarity-color, transparent);
}

.slot-tile img {
  display: block;
  width: calc(32px * var(--slot-scale));
  height: calc(32px * var(--slot-scale));
}

/* Case vide : pointillés et « + » */
.slot:not([data-rarity]) .slot-tile {
  box-shadow: none;
  border: 2px dashed var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 28px;
  font-weight: 400;
}

.slot:active .slot-tile { opacity: 0.8; }

.slot-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.share-status { text-align: center; min-height: 1.4em; }

/* --- Onglet Collection : sélecteur Collection / Atelier --- */
.view-switch {
  display: grid;
  grid-auto-flow: column;       /* 2 ou 3 onglets, à parts égales */
  grid-auto-columns: 1fr;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.view-tab {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.view-tab[aria-selected="true"] { background: var(--text); color: var(--bg); }

.collection-view { display: flex; flex-direction: column; gap: 16px; }

/* --- Atelier (atelier.js) : une ligne par modèle + rareté --- */
.atelier-intro { margin: 0; font-size: 14px; }
.atelier-list { display: flex; flex-direction: column; gap: 10px; }

.atelier-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-left: 4px solid var(--rarity-color); /* liseré de la rareté actuelle */
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.atelier-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.atelier-main:active { opacity: 0.85; }
.atelier-row { cursor: default; }
.atelier-discard-btn {
  align-self: flex-end;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.atelier-discard-btn:active { opacity: 0.7; }
/* Séparateur de rareté : nom + nombre de modèles + filet coloré */
.atelier-divider { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--rarity-color); }
.atelier-divider:first-child { margin-top: 0; }
.atelier-divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--rarity-color); opacity: 0.5; }
.atelier-divider-name { font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.atelier-divider-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--rarity-color); color: #0b0b0d; font-size: 12px; font-weight: 800; text-align: center; }
/* Indice cliquable en bas de ligne (couleur de la rareté visée) */
.atelier-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--rarity-color); color: var(--rarity-color);
  font-size: 14px; font-weight: 800;
}
.atelier-cta-arrow { font-size: 22px; line-height: 1; }
.atelier-row.ready .atelier-cta { background: var(--rarity-color); color: #0b0b0d; animation: atelier-pulse 1.8s ease-in-out infinite; }
@keyframes atelier-pulse { 50% { box-shadow: 0 0 14px 0 var(--rarity-color); } }
@media (prefers-reduced-motion: reduce) { .atelier-row.ready .atelier-cta { animation: none; } }
/* 5 exemplaires ou plus : amélioration garantie, la ligne s'allume */
.atelier-row.ready { border-color: var(--rarity-color); box-shadow: 0 0 14px -4px var(--rarity-color); }

.atelier-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.atelier-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.atelier-name { font-size: 16px; font-weight: 800; line-height: 1.2; }
.atelier-title .rarity-tag { margin-top: 2px; }
.atelier-odds { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.atelier-chance { font-size: 22px; font-weight: 900; line-height: 1; color: var(--rarity-color); }
.atelier-target { font-size: 12px; font-weight: 700; color: var(--rarity-color); white-space: nowrap; }

.atelier-progress { display: flex; align-items: center; gap: 10px; }
.atelier-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.atelier-fill { height: 100%; border-radius: inherit; background: var(--rarity-color); transition: width 0.4s ease-out; }
.atelier-count { font-size: 13px; font-weight: 800; min-width: 3ch; text-align: right; }

/* Les coloris possédés : miniature + nom + nombre */
.atelier-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atelier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 8px 3px 3px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
}
.atelier-chip-tile { display: grid; place-items: center; flex: none; padding: 1px; border-radius: 8px; background: #cccac4; } /* case claire */
.atelier-chip-tile img { display: block; width: 32px; height: 32px; } /* ×1 */
.atelier-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.atelier-chip-count { flex: none; font-weight: 800; }

/* Défausse : bloc en bas de l'Atelier */
.atelier-discard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.atelier-discard p { margin: 0; font-size: 13px; }

/* --- Fiche d'une carte et roue d'amélioration (upgrade.js) --- */
.card.tappable { cursor: pointer; }
.card.tappable:active .card-face { opacity: 0.85; }
.card.used { opacity: 0.35; }

.sheet-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.sheet-card { align-self: center; width: min(220px, 62vw); }
.sheet-text, .sheet-subtitle { margin: 0; text-align: center; }
.sheet-subtitle { font-weight: 700; }
.sheet-eyebrow { margin: 6px 0 0; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; }

/* Défausse (discard.js) */
.discard-summary { margin: 0; text-align: center; font-size: 22px; font-weight: 900; color: var(--muted); }
.discard-summary.on { color: var(--rarity-legendaire); }
.discard-warning { font-size: 13px; }
.discard-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.discard-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 3px;
  border: 2px solid var(--rarity-color);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
}
.discard-tools { display: flex; gap: 8px; }
.discard-tools .btn { min-height: 44px; padding: 8px 10px; font-size: 13px; }
.btn.armed { background: #e0503f; border-color: #e0503f; color: #fff; }
.card.picked .card-face { outline: 3px solid var(--text); outline-offset: -3px; }
.pick-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: #e0503f;
}
.discard-gain { margin: 8px 0 0; text-align: center; font-size: 44px; font-weight: 900; font-stretch: 125%; color: var(--rarity-legendaire); }

/* Mode « Sélectionner » de la Collection : barre collée en bas de la zone qui défile */
.select-bar {
  position: sticky;
  bottom: -24px;               /* compense le padding-bas de <main> */
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 0 12px;
  background: var(--bg);
  box-shadow: 0 -12px 16px -4px var(--bg), -24px 0 var(--bg), 24px 0 var(--bg);
  border-top: 1px solid var(--border);
}
.select-summary { margin: 0; min-height: 2.5em; display: grid; place-items: center; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--muted); } /* hauteur fixe : la barre ne bouge pas quand le texte change */
.select-summary.on { color: var(--rarity-legendaire); }
.select-tools { display: flex; gap: 8px; }
.select-tools .btn { min-height: 40px; padding: 6px; font-size: 13px; }
.select-bar > .btn-primary { min-height: 48px; padding: 10px 16px; }

/* Market (market.js) */
.coin-text { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe27a, var(--rarity-legendaire) 60%, #b8860b);
}
.price-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
}
.price-badge.mine { background: var(--rarity-legendaire); }
.mine-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: #4d8dff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
/* Boutique Grail : badge sur les offres du vendeur système (elles ne passent pas pour des offres de joueurs) */
.shop-badge {
  position: absolute;
  top: 20px; /* une ligne sous la pastille de prix : à 320 px les deux ne tiennent pas côte à côte */
  left: -6px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: #2bb28a;
  color: #04140f;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.shop-banner {
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid #2bb28a;
  border-radius: 999px;
  color: #2bb28a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.shop-banner[hidden] { display: none; }
.market-price { margin: 0; text-align: center; font-size: 30px; }
.market-price .coin-dot { width: 22px; height: 22px; }
.price-row { display: flex; gap: 8px; align-items: stretch; }
.price-input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}
.price-input::-webkit-outer-spin-button, .price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-input:focus { outline: none; border-color: var(--text); }
.btn.price-step { width: 56px; min-height: 56px; padding: 0; font-size: 26px; }
.price-quick { display: flex; gap: 8px; }
.price-quick .btn { min-height: 44px; padding: 8px 10px; font-size: 13px; }
.market-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--rarity-color);
  border-radius: 14px;
  background: var(--surface);
}
.market-row-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.market-row-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-row-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-row-price { flex: none; font-size: 15px; }
.market-row-remove {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Amis (friends.js) : point rouge des demandes reçues, en haut à droite de la pastille ronde */
.tab { position: relative; }
.tab-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  box-sizing: border-box;
  border: 2px solid var(--bg);
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #ff7a6b;
  color: #1a0705;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.friends-error { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); color: #ff7a6b; font-size: 14px; font-weight: 600; }
.friends-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.friends-hint { margin: 0; font-size: 13px; }
.friends-input-row { display: flex; gap: 8px; }
.friends-input-row .auth-input { flex: 1; min-width: 0; }
.friends-input-row .btn { width: auto; min-height: 52px; padding: 0 18px; }
.friends-me { margin: 0; font-size: 15px; }
.friends-link {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.friends-section { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#friends-main { display: flex; flex-direction: column; gap: 12px; }
.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
}
.friend-link { cursor: pointer; }
.friend-link:active { opacity: 0.8; }
.friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 800; }
.friend-chevron { color: var(--muted); font-size: 22px; line-height: 1; }

/* Ligne d'ami avec aperçu (migration 0017) : mini avatar 3D | pseudo + mini cartes de la vitrine | › */
.friend-row-rich { padding: 10px 14px 10px 10px; gap: 12px; }
.friend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.friend-info .friend-name { flex: none; }
/* Mini avatar : canvas 46×88 en ×1 (facteur entier), sur le même fond gris sombre que l'écran Tenue */
.friend-mini {
  flex: none;
  display: grid;
  place-items: center;
  padding: 4px 6px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, #34353c 0%, #2a2b31 60%, #232429 100%);
}
.friend-mini-canvas { display: block; width: 46px; height: 88px; }
/* Mini cartes de la vitrine : sprite ×1 sur case claire, contour de rareté dessiné à l'intérieur */
.friend-showcase { display: flex; gap: 6px; align-items: center; min-height: 40px; }
.friend-card {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: #cccac4;
  box-shadow: inset 0 0 0 2px var(--rarity-color, transparent);
}
.friend-card img { width: 32px; height: 32px; }
.friend-showcase-empty { color: var(--muted); font-size: 13px; font-weight: 600; }
.friend-state { color: var(--muted); font-size: 13px; }
.friend-actions { display: flex; gap: 6px; }
.friend-actions .btn { width: auto; min-height: 40px; padding: 0 14px; font-size: 13px; }
.friend-canvas { align-self: center; width: 128px; height: 192px; /* ×2 : facteur entier */ }

/* Pièces qui volent vers le solde (wallet.js) */
.fly-coin {
  position: fixed;
  z-index: 90;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe27a, var(--rarity-legendaire) 60%, #b8860b);
  box-shadow: 0 0 8px rgba(242, 194, 48, 0.8);
  pointer-events: none;
}

/* Les 5 cases de mise */
.stake-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.stake-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--rarity-color, var(--border));
  border-radius: 10px;
  background: #cccac4; /* case claire : les contours noirs restent visibles */
  cursor: pointer;
}
.stake-slot img { width: 64px; height: 64px; } /* ×2 */
@media (max-width: 400px) { .stake-slot img { width: 32px; height: 32px; } } /* ×1 sur petit écran */
.stake-slot.empty {
  border-style: dashed;
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 22px;
  cursor: default;
}

/* La roue : la part colorée (réussite) fait chance × 3,6° depuis le haut,
   le reste est gris (échec). La flèche fixe en haut indique le résultat. */
.wheel-wrap {
  position: relative;
  align-self: center;
  width: 200px;
  height: 200px;
}
.wheel-wrap::before { /* la flèche */
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 2;
  margin-left: -11px;
  border: 11px solid transparent;
  border-top: 18px solid var(--text);
  border-bottom: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
.wheel {
  --chance: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--surface-2);
  background:
    repeating-conic-gradient(rgba(0, 0, 0, 0.18) 0deg 1deg, transparent 1deg 36deg), /* repères tous les 10 % */
    conic-gradient(var(--rarity-color) 0deg calc(var(--chance) * 3.6deg), #2a2a31 0deg);
  box-shadow: 0 0 24px -4px var(--rarity-color);
  transition: background 0.3s;
}
.wheel.spinning { transition: transform 3.2s cubic-bezier(0.12, 0.8, 0.18, 1); }
.wheel-chance {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  font-size: 24px;
  font-weight: 900;
  pointer-events: none;
}

/* Résultat réussi : la nouvelle carte arrive avec son aura */
.upgrade-win { animation: card-rise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.upgrade-win .card-face { box-shadow: 0 0 26px 6px var(--rarity-color); }

/* --- Panneau de choix d'une pièce (monte depuis le bas) --- */
.picker {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.6);
}

.picker-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: var(--col);
  max-height: 85dvh;
  margin: 0 auto;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  animation: sheet-up 0.25s ease-out;
}

@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.picker-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.picker-empty { text-align: center; padding: 24px 0; }

/* Panneau de choix d'une pièce SEULEMENT : hauteur fixe (il ne saute pas quand on filtre),
   seule la liste défile. Les autres panneaux (fiche d'une carte, profil d'un ami) défilent en entier. */
#picker .picker-sheet {
  height: min(85dvh, 680px);
  max-height: none;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow: hidden;
}

/* Barre de recherche / filtres du panneau : fixe en haut (ce n'est pas la barre collée des écrans) */
.picker-filters {
  position: static;
  flex: none;
  padding: 0;
  box-shadow: none;
}
.filters.picker-filters { grid-template-columns: 1.15fr 1fr 1.15fr; }
.filters.picker-filters select { padding: 0 20px 0 12px; background-position: right 8px center; font-size: 13px; }
.picker-count { flex: none; margin: 0; font-size: 12px; font-weight: 600; }
.picker-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 6px 4px;       /* place pour les contours et lueurs des cartes */
}

/* Chaque carte du panneau est un bouton. En grille + hauteur 100 % : la carte
   remplit le bouton (un bouton centre sinon son contenu, et les cartes d'une
   même ligne ne seraient plus alignées). */
.picker-choice {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font);
  cursor: pointer;
}

.picker-choice > .card,
.card.owned {
  display: grid;   /* la face remplit toute la hauteur de la carte */
  height: 100%;
}

/* Carte portée : contour blanc épais + halo + pastille « ✓ Portée » (elle est aussi toujours la 1re de la liste) */
.card.equipped .card-face,
.card.owned.equipped[data-rarity] .card-face {
  outline: 3px solid var(--text);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgba(244, 242, 236, 0.16), 0 0 22px 4px rgba(244, 242, 236, 0.3);
}
.worn-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--bg);
  background: var(--text);
}

/* --- Écran Booster : les deux vues (paquet fermé / cartes) --- */
.booster-view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

/* Déchirure : la bande du haut s'arrache et s'envole, puis le paquet descend */
.booster-pack.torn,
.booster-pack.dragging { animation: none; }
.booster-pack.torn .pack-top { animation: tear-off 0.5s ease-in forwards; }
.booster-pack.torn .pack-body { animation: pack-drop 0.45s ease-in 0.2s forwards; }
.booster-pack.torn::after { opacity: 0; transition: opacity 0.3s; }

@keyframes tear-off {
  0%   { transform: rotate(-6deg) translateY(-4px); opacity: 1; }
  100% { transform: rotate(-38deg) translate(70px, -140px); opacity: 0; }
}

@keyframes pack-drop {
  to { transform: translateY(40px); opacity: 0; }
}

/* --- Révélation carte par carte : une pile, une carte jouable à la fois --- */
.reveal-stage {
  --card-w: min(240px, 66vw); /* 240 px → sprite ×6 (container query des cartes) */
  position: relative;
  display: grid;
  justify-items: center;
  padding: 10px 0 18px;
}

/* La pile : 1 ou 2 cartes (dos) visibles derrière la carte jouée */
.reveal-stage::before,
.reveal-stage::after {
  content: "";
  grid-area: 1 / 1;
  width: var(--card-w);
  border-radius: 12px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  z-index: 0;
  display: none;
}
.reveal-stage::before { transform: translate(10px, 10px) rotate(3deg); }
.reveal-stage::after { transform: translate(-8px, 6px) rotate(-2deg); }
.reveal-stage[data-remaining="1"]::before,
.reveal-stage[data-remaining="2"]::before,
.reveal-stage[data-remaining="2"]::after { display: block; }

.reveal-stage .flip-card.current {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: var(--card-w);
  touch-action: none;           /* le doigt glisse la carte au lieu de faire défiler */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  transition: transform 0.2s ease-out;
}
.reveal-stage .flip-card.current img { pointer-events: none; -webkit-user-drag: none; }
.reveal-stage .flip-card.current.dragging { transition: none; }

/* La carte arrive du dessus de la pile */
.reveal-stage .flip-card.enter { animation: card-enter 0.35s ease-out; }
@keyframes card-enter {
  from { transform: translate(10px, 10px) rotate(3deg); opacity: 0.6; }
}

/* La carte part sur le côté (sens du glissement) */
.reveal-stage .flip-card.fly {
  transform: translateX(var(--fly)) rotate(18deg) !important;
  opacity: 0;
  transition: transform 0.32s ease-in, opacity 0.32s ease-in;
}

/* Rappel du geste quand on se contente de toucher */
.reveal-hint.pulse { animation: hint-pulse 0.5s ease-out; }
@keyframes hint-pulse {
  30% { color: var(--text); transform: translateY(-3px); }
}

/* Titre qui surgit au-dessus de la carte (Épique) */
.pop-title {
  position: absolute;
  top: -30px;
  left: 50%;
  z-index: 3;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(26px, 9vw, 40px);
  font-weight: 900;
  font-stretch: 112%;
  text-transform: uppercase;
  color: var(--rarity-epique);
  text-shadow: 0 0 18px var(--rarity-epique);
  pointer-events: none;
  animation: pop-title 1.8s ease-out forwards;
}
@keyframes pop-title {
  0%   { transform: translate(-50%, 20px); opacity: 0; }
  15%  { transform: translate(-50%, -8px); opacity: 1; }
  75%  { transform: translate(-50%, -14px); opacity: 1; }
  100% { transform: translate(-50%, -30px); opacity: 0; }
}

.reveal-hint { text-align: center; min-height: 1.4em; }

/* --- Cartes --- */
.card-row {
  display: grid;
  /* minmax(0, 1fr) : une colonne peut être plus étroite que son contenu
     (sinon « LÉGENDAIRE » élargit la grille et la fait déborder) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.card-grid {
  display: grid;
  /* minmax(0, 1fr) : une colonne peut être plus étroite que son contenu
     (sinon « LÉGENDAIRE » élargit la grille et la fait déborder) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Taille du sprite dans une carte : facteur ENTIER choisi selon la largeur
   RÉELLE de la carte (container query), pas celle de l'écran : le sprite
   ne peut donc jamais dépasser de la carte, quel que soit l'appareil.
   Largeur nécessaire = 32 × facteur + 10 px (bordure 4 + case 2 + marges 4). */
.card {
  position: relative;
  border-radius: 12px;
  container-type: inline-size;
}

.card-face { --sprite-scale: 2; }
@container (min-width: 106px) { .card-face { --sprite-scale: 3; } }
@container (min-width: 138px) { .card-face { --sprite-scale: 4; } }
@container (min-width: 170px) { .card-face { --sprite-scale: 5; } }
@container (min-width: 202px) { .card-face { --sprite-scale: 6; } }

/* Carte qui se retourne : le dos et la face sont superposés dans la même
   case de grille, donc la carte prend la hauteur de son contenu. */
.flip-card {
  display: grid;
  perspective: 600px;
}

.card-back,
.card-face {
  grid-area: 1 / 1;
  border-radius: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.45s ease;
}

.card-back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 2px solid var(--border);
  font-size: 40px;
  font-weight: 900;
  color: var(--muted);
}

.card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 8px;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--rarity-color, var(--border));
}

/* Dans le booster, la face commence retournée (dos visible) */
.flip-card .card-face { transform: rotateY(180deg); }

.flip-card.revealed .card-back { transform: rotateY(-180deg); }
.flip-card.revealed .card-face { transform: rotateY(0); }

/* Case claire derrière le sprite : les contours noirs restent visibles */
.sprite-tile {
  display: flex;
  padding: 1px;
  margin-bottom: 4px;
  background: #cccac4;
  border-radius: 6px;
}

.sprite-tile img {
  display: block;
  width: calc(32px * var(--sprite-scale));
  height: calc(32px * var(--sprite-scale));
}

/* Couleur d'accent de chaque marque (section 5 du CLAUDE.md) */
[data-brand="signal9"]            { --brand-color: var(--brand-signal9); }
[data-brand="halvane"]            { --brand-color: var(--brand-halvane); }
[data-brand="pigeon_social_club"] { --brand-color: var(--brand-pigeon_social_club); }
[data-brand="ferrant_fils"]       { --brand-color: var(--brand-ferrant_fils); }
[data-brand="brume"]              { --brand-color: var(--brand-brume); }
[data-brand="faubourg_78"]        { --brand-color: var(--brand-faubourg_78); }
[data-brand="orbite_2000"]        { --brand-color: var(--brand-orbite_2000); }

.card-brand {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-color, var(--muted));
}

.card-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.card-colorway {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}

.rarity-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f0f11;
  background: var(--rarity-color);
}

/* Petits écrans (iPhone SE) : étiquette plus compacte
   (placé APRÈS .rarity-tag pour passer devant) */
@media (max-width: 359px) {
  .rarity-tag { padding: 2px 4px; font-size: 9px; letter-spacing: 0; text-transform: none; }
}

/* Cartes larges (tablette, PC) : textes plus grands, à l'échelle du sprite */
@container (min-width: 170px) {
  .card-face { gap: 4px; padding: 8px 6px 12px; }
  .card-brand { font-size: 12px; }
  .card-name { font-size: 15px; }
  .card-colorway { font-size: 13px; }
  .rarity-tag { font-size: 12px; padding: 3px 10px; }
}

/* Chaque rareté fixe sa couleur (cartes et cases de la tenue) ;
   bordure et étiquette la réutilisent */
[data-rarity="commun"]     { --rarity-color: var(--rarity-commun); }
[data-rarity="rare"]       { --rarity-color: var(--rarity-rare); }
[data-rarity="epique"]     { --rarity-color: var(--rarity-epique); }
[data-rarity="legendaire"] { --rarity-color: var(--rarity-legendaire); }
[data-rarity="ultime"]     { --rarity-color: var(--rarity-ultime); }

/* --- Auras (de la plus discrète à la plus forte) ---
   Face cachée : rester appuyé fait monter l'aura palier par palier (booster.js
   ajoute aura-commun, puis aura-rare… jusqu'à la rareté de la carte).
   Retournée : l'aura de la vraie rareté reste (rien pour une Commune). */
.flip-card.aura-commun     { --aura-color: rgba(242, 241, 238, 0.6); }
.flip-card.aura-rare       { --aura-color: var(--rarity-rare); }
.flip-card.aura-epique     { --aura-color: var(--rarity-epique); }
.flip-card.aura-legendaire { --aura-color: var(--rarity-legendaire); }

.flip-card .card-back,
.flip-card .card-face { transition: transform 0.45s ease, box-shadow 0.4s ease, border-color 0.4s ease; }

/* Le bord de la carte prend la couleur de l'aura */
.flip-card[class*="aura-"]:not(.revealed) .card-back { border-color: var(--aura-color); }

/* Commun : un simple halo gris, très léger */
.flip-card.aura-commun:not(.revealed) .card-back { box-shadow: 0 0 10px 1px var(--aura-color); }

/* Rare : halo bleu net mais fixe */
.flip-card.aura-rare:not(.revealed) .card-back,
.flip-card.aura-rare.revealed .card-face { box-shadow: 0 0 16px 3px var(--aura-color); }

/* Épique : halo violet plus large, qui respire */
.flip-card.aura-epique:not(.revealed) .card-back,
.flip-card.aura-epique.revealed .card-face { animation: aura-epique 1.1s ease-in-out infinite; }
@keyframes aura-epique {
  0%, 100% { box-shadow: 0 0 16px 4px var(--aura-color); }
  50%      { box-shadow: 0 0 28px 8px var(--aura-color); }
}

/* Légendaire : halo doré intense, rapide, et la carte face cachée tremble */
.flip-card.aura-legendaire:not(.revealed) .card-back,
.flip-card.aura-legendaire.revealed .card-face { animation: aura-legendaire 0.8s ease-in-out infinite; }
/* Portée max ~65 px : au-delà, le halo serait coupé par les bords de l'écran
   (il formerait un rectangle). Il reste nettement plus fort que l'Épique :
   double halo, plus intense, plus rapide. */
@keyframes aura-legendaire {
  0%, 100% { box-shadow: 0 0 18px 6px var(--aura-color), 0 0 40px 10px var(--aura-color); }
  50%      { box-shadow: 0 0 26px 10px var(--aura-color), 0 0 50px 16px var(--aura-color); }
}
.flip-card.aura-legendaire:not(.revealed):not(.dragging) { animation: charge-shake 0.12s linear infinite; }

@keyframes charge-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

/* Épique : onde violette qui part de la carte au retournement */
.flip-card.epic-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 3px solid var(--rarity-epique);
  border-radius: 14px;
  pointer-events: none;
  animation: ring-out 0.7s ease-out forwards;
}
@keyframes ring-out {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(1.35); opacity: 0; }
}

/* Rare : un reflet passe sur la carte */
.card-face { position: relative; overflow: hidden; }
.flip-card.shine .card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: shine 0.9s ease-out forwards;
}

@keyframes shine {
  from { background-position: 100% 0; }
  to   { background-position: -50% 0; }
}

/* Badge « NOUVEAU » : carte jamais obtenue avant */
.new-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f0f11;
  background: var(--text);
}

/* --- Plein écran de révélation (Épique et Légendaire) --- */
.reveal-overlay {
  touch-action: none; /* on glisse pour continuer */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  overflow: hidden;
  background: rgba(5, 5, 7, 0.9);
  cursor: grab;
  animation: fade-in 0.25s ease-out;
}

/* Éclair blanc au début (plus fort en Légendaire) */
.reveal-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: flash 0.5s ease-out;
}
@keyframes flash {
  0%   { opacity: 0.35; }
  100% { opacity: 0; }
}
.reveal-overlay[data-rarity="legendaire"]::before { animation-duration: 0.8s; }

/* Rayons qui tournent derrière la carte */
.reveal-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(var(--rarity-color) 0deg 8deg, transparent 8deg 24deg);
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 32%);
  mask-image: radial-gradient(circle, #000 8%, transparent 32%);
  animation: spin 14s linear infinite;
  pointer-events: none;
}
.reveal-overlay[data-rarity="legendaire"] .reveal-rays { opacity: 0.4; animation-duration: 7s; }

.reveal-title {
  position: relative;
  margin: 0;
  font-size: clamp(26px, 9vw, 56px);
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--rarity-color);
  text-shadow: 0 0 24px var(--rarity-color);
  animation: title-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

/* La grande carte : 240 px de large → sprite ×6 (container query des cartes) */
.reveal-card {
  position: relative;
  width: min(240px, 66vw);
  animation: card-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.1s both;
}
.reveal-card .card-face { box-shadow: 0 0 40px 8px var(--rarity-color); }
.reveal-overlay img { pointer-events: none; -webkit-user-drag: none; }

.reveal-tap {
  position: relative;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  animation: fade-in 0.4s ease-out 1s both;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes title-in {
  from { transform: translateY(-30px); opacity: 0; letter-spacing: 0.3em; }
}
@keyframes card-rise {
  from { transform: translateY(80px) rotate(8deg); opacity: 0; }
}

/* --- Particules (effects.js) --- */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.fx-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  animation: particle 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) both;
}
@keyframes particle {
  from { transform: translate(0, 0); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* --- Écran Collection --- */

/* Filtres collés en haut de la zone qui défile */
.filters {
  position: sticky;
  top: -8px;            /* compense le padding-top de <main> */
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 0;
  background: var(--bg);
  /* Prolonge le fond sur les côtés : la lueur des cartes ne passe pas à côté */
  box-shadow: -24px 0 var(--bg), 24px 0 var(--bg);
}

/* Barre de recherche : pleine largeur, au-dessus des menus */
.filters .search {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* Loupe dessinée en SVG */
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238f8d88' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat left 14px center;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}
.filters.with-select .search { grid-column: span 2; }
.select-toggle {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.select-toggle[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.filters .search::placeholder { color: var(--muted); }
.filters .search:focus { outline: none; border-color: var(--text); }

.filters select {
  width: 100%;
  min-height: 44px;
  padding: 0 24px 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* Petite flèche dessinée en SVG (pas de fichier externe) */
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238f8d88'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;      /* pas de zoom au toucher : la page est bloquée à 100 % (viewport) */
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}

.collection-empty { text-align: center; padding: 32px 0; }

/* Pastille cadenas : carte verrouillée (en haut à gauche) */
.lock-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--bg);
  background: var(--rarity-legendaire);
}
.atelier-locked-note { margin: 0; font-size: 13px; }

/* Badge « ×2 » des doublons */
.count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--bg);
  background: var(--text);
}

/* Lueur fixe dans la collection, de plus en plus forte : Rare < Épique < Légendaire */
.card.owned[data-rarity="rare"] .card-face { box-shadow: 0 0 6px 0 var(--rarity-color); }
.card.owned[data-rarity="epique"] .card-face { box-shadow: 0 0 12px 1px var(--rarity-color); }
.card.owned[data-rarity="legendaire"] .card-face { box-shadow: 0 0 20px 4px var(--rarity-color); }

/* --- Barre d'onglets, toujours en bas (dernier élément de la colonne) --- */
.tabbar {
  flex: none;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 460px) {
  .tabbar { padding-left: 4px; padding-right: 4px; }
  .tab { font-size: 12px; }
}

.tab[aria-current="page"] {
  color: var(--text);
  font-weight: 800;
}

/* Pastilles de la barre du bas (badges.js) : nombre de boosters, point « Videur pas encore joué » */
.tab > .tab-badge { top: 8px; right: auto; left: calc(50% + 16px); }
.tab-main-pill .tab-badge { top: -9px; right: -9px; left: auto; }
.tab-dot { min-width: 12px; height: 12px; padding: 0; }
.tab > .tab-dot { top: 12px; left: calc(50% + 18px); }

/* Booster au centre : bouton principal, plus grand, d'une autre couleur (crème sur le fond sombre).
   Il dépasse un peu au-dessus de la barre ; un anneau de la couleur du fond le « découpe » de la ligne. */
.tab-main { flex: 0 0 92px; }
.tab-main-pill {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 84px;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--text);
  color: #0b0b0d;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  transform: translateY(-9px);
  box-shadow: 0 0 0 4px var(--bg);
  transition: box-shadow 0.2s;
}
.tab-main[aria-current="page"] { color: #0b0b0d; }
.tab-main[aria-current="page"] .tab-main-pill { box-shadow: 0 0 0 4px var(--bg), 0 0 16px 2px rgba(242, 241, 238, 0.4); }
.tab-main:active .tab-main-pill { transform: translateY(-8px) scale(0.97); }
@media (max-width: 460px) {
  .tab-main { flex-basis: 84px; }
  .tab-main-pill { min-width: 76px; padding: 0 12px; font-size: 13px; }
}

/* Partage de la tenue : un bouton ; sur ordinateur, petit menu posé AU-DESSUS (n'occupe pas de place dans la page) */
.share { position: relative; }
.share-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.share-menu[hidden] { display: none; }
.share-menu-item {
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.share-menu-item:hover, .share-menu-item:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }

/* Page publique d'une tenue partagée (sans compte) */
.public { display: none; }
body[data-auth="public"] .public {
  display: grid;
  place-items: start center;
  height: 100dvh;
  overflow-y: auto; /* le corps de page est bloqué (overflow: hidden) : cette page défile elle-même */
  -webkit-overflow-scrolling: touch;
  padding: calc(24px + env(safe-area-inset-top)) var(--gutter) 32px;
}
.public-card { display: flex; flex-direction: column; gap: 18px; width: min(460px, 100%); }
.public-card .auth-title { text-align: center; }
/* Tenue partagée en 3D (page du lien) : même avatar et même fond que dans le jeu, canvas 46×88 ×3 (×4 sur PC) */
.public-stage {
  --avatar3d-scale: 3;
  display: flex;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 40%, #34353c 0%, #2a2b31 60%, #232429 100%);
}
@media (min-width: 700px) { .public-stage { --avatar3d-scale: 4; } }
.public-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 16px; }
.public-pseudo { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-align: center; overflow-wrap: anywhere; }
.public-hint { font-size: 12px; font-weight: 600; text-align: center; }
.public-date { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); text-align: center; }
.public-cta { text-decoration: none; text-align: center; display: grid; place-items: center; }

/* Historique du Market : prix en rouge (achat) ou en vert (vente) */
.history-out { color: #ff8a7a; }
.history-in { color: #7fd99a; }
#market-history-more { margin-top: 12px; }
.history-sub { white-space: normal; }
@media (max-width: 380px) { #screen-market .view-tab { padding-inline: 4px; font-size: 12px; white-space: nowrap; } }

/* --- Videur : portes, dress code, jauges, verdict --- */
.door-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; }
.door-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 56px; padding: 8px 6px;
  border: 1.5px solid var(--border); border-radius: 18px;
  background: var(--surface); color: var(--muted);
  font-family: var(--font); cursor: pointer;
}
.door-tab-name { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.door-tab-state { font-size: 11px; }
.door-tab[aria-selected="true"] { border-color: var(--door-color); color: var(--text); box-shadow: 0 0 14px -4px var(--door-color); }
.door-tab[aria-selected="true"] .door-tab-name { color: var(--door-color); }

/* Enseigne lumineuse (CSS seulement, pas d'illustration) */
.door-sign {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 12px; margin-bottom: 8px;
  border: 2px solid var(--door-color); border-radius: 20px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--door-color) 16%, transparent), transparent 70%);
  box-shadow: 0 0 22px -6px var(--door-color), inset 0 0 18px -10px var(--door-color);
}
.door-sign-door { font-weight: 900; font-size: 30px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--door-color); text-shadow: 0 0 10px var(--door-color); }
.door-sign-venue { font-weight: 700; font-size: 15px; }
.door-intro { text-align: center; margin: 4px 0 8px; }
.videur-h { margin: 16px 0 8px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rule { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 14px; }
.rule-label { flex: 1; min-width: 0; }
.rule-weight { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rule.ok { border-color: #3f8f5b; }
.rule.ok .rule-mark { color: #7fd99a; }
.rule.no .rule-mark { color: #ff8a7a; }

/* Tenue en 3D (même rendu que l'écran Tenue) : fond gris sombre, canvas 46×88 ×3 (×4 sur tablette / PC) */
.videur-outfit { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 14px; }
.videur-stage {
  --avatar3d-scale: 3;
  display: flex;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 40%, #34353c 0%, #2a2b31 60%, #232429 100%);
}
@media (min-width: 700px) { .videur-stage { --avatar3d-scale: 4; } }
.videur-outfit-hint { font-size: 12px; font-weight: 600; text-align: center; }
.videur-empty { text-align: center; }
.gauge { margin-bottom: 12px; }
.gauge-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.gauge-value { font-variant-numeric: tabular-nums; color: #ff8a7a; }
.gauge-value.ok { color: #7fd99a; }
.gauge-bar { position: relative; height: 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.gauge-fill { height: 100%; border-radius: 999px; background: #ff8a7a; transition: width 0.4s ease; }
.gauge-fill.ok { background: #7fd99a; }
.gauge-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); transform: translateX(-1px); }
.videur-change { display: grid; place-items: center; text-decoration: none; margin-bottom: 10px; }
.videur-enter { margin-top: 4px; }
.videur-note { text-align: center; font-size: 12px; margin: 10px 0 0; }

.verdict { text-align: center; padding: 18px 12px; border-radius: 20px; margin-bottom: 14px; animation: verdict-flash 0.8s ease-out; }
.verdict.pass { background: rgba(63, 143, 91, 0.2); border: 2px solid #3f8f5b; }
.verdict.fail { background: rgba(224, 80, 63, 0.18); border: 2px solid #e0503f; }
.verdict-word { margin: 0; font-weight: 900; font-size: 34px; letter-spacing: 0.1em; }
.verdict.pass .verdict-word { color: #7fd99a; }
.verdict.fail .verdict-word { color: #ff8a7a; }
.verdict-line { margin: 6px 0 0; font-style: italic; }
.verdict-gain { color: var(--rarity-legendaire); font-size: 20px; }
@keyframes verdict-flash { 0% { filter: brightness(2.2); transform: scale(0.96); } 100% { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .verdict { animation: none; } .gauge-fill { transition: none; } }
.rule-list + .videur-change { margin-top: 12px; }
.verdict-count { margin: 0 0 6px; }

/* --- Page de profil (profile.js) : la sienne et celle d'un ami --- */
.profile { display: flex; flex-direction: column; gap: 20px; }
.profile-head { display: flex; flex-direction: column; gap: 6px; }
.profile-name { margin: 0; overflow-wrap: anywhere; }
.profile-link-inline { font-weight: 700; color: var(--text); }
.profile-error { text-align: center; padding: 32px 0; }

/* Avatar 3D sur fond gris sombre, comme l'écran Tenue. Canvas 46×88 : ×3 sur téléphone, ×4 sur tablette / PC */
.profile-stage {
  --avatar3d-scale: 3;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 40%, #34353c 0%, #2a2b31 60%, #232429 100%);
}
@media (min-width: 700px) { .profile-stage { --avatar3d-scale: 4; } }
.profile-under { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -10px; }
.profile-hint { font-size: 12px; font-weight: 600; text-align: center; }
.profile-edit { width: auto; min-height: 44px; padding: 8px 22px; font-size: 14px; }

.profile-section { display: flex; flex-direction: column; gap: 10px; }

/* Vitrine : les 3 cartes les plus rares */
.profile-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 6px 4px;   /* place pour la lueur des cartes */
}

/* Statistiques : cases de 2 colonnes */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.stat-value { font-size: 22px; font-weight: 800; font-stretch: 108%; letter-spacing: -0.01em; }
.stat-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.stat-sub { font-size: 12px; color: var(--muted); }
.stat-bar { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--text); }

/* Cartes possédées par rareté : une pastille colorée par rareté */
.rarity-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rarity-chip {
  padding: 5px 11px;
  border: 1.5px solid var(--rarity-color);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.rarity-chip b { color: var(--rarity-color); font-weight: 800; }

/* Vitrine vide + éditeur de vitrine */
.profile-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.showcase-empty {
  padding: 22px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
}
.showcase-intro { font-size: 13px; font-weight: 600; }
/* Cases de la vitrine (en haut de l'éditeur) : sprite ×1 sur case claire, numéro d'ordre */
.showcase-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* remplacé par le maximum du serveur (profile.js) */
  gap: 8px;
}
.showcase-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #cccac4; /* case claire : les contours noirs restent visibles */
  box-shadow: inset 0 0 0 2px var(--rarity-color, transparent);
  cursor: pointer;
}
.showcase-slot:disabled { background: var(--surface); border: 1.5px dashed var(--border); cursor: default; }
.showcase-slot img { width: 32px; height: 32px; }
.showcase-slots.few { max-width: 300px; margin: 0 auto; width: 100%; }
.showcase-slots.few .showcase-slot img { width: 64px; height: 64px; } /* ×2, facteur entier */
.showcase-slot-num,
.showcase-order {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--bg);
  background: var(--text);
}
/* Carte déjà dans la vitrine : même contour que la pièce portée + son numéro */
.card.owned.in-showcase[data-rarity] .card-face {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}
.showcase-filters { grid-template-columns: 1fr 1fr; }
/* Enregistrer / Tout retirer : côte à côte, plus compacts, pour garder la liste visible */
.showcase-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.showcase-actions .btn { min-height: 46px; padding: 8px 12px; font-size: 15px; }
.showcase-grid { padding: 6px 4px; }

/* Profil d'un ami dans le panneau : un peu moins d'espace */
.sheet-body .profile { gap: 16px; }

/* Carte Réputation de la page de profil */
.rep-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--rarity-legendaire);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(242, 194, 48, 0.1), rgba(242, 194, 48, 0.02));
}
.rep-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rep-card-level { font-size: 26px; font-weight: 900; font-stretch: 112%; letter-spacing: -0.02em; text-transform: uppercase; color: var(--rarity-legendaire); }
.rep-bar { height: 12px; border-radius: 999px; background: var(--border); overflow: hidden; }
.rep-bar-fill { height: 100%; min-width: 4px; border-radius: 999px; background: var(--rarity-legendaire); transition: width 0.6s ease-out; }
.rep-card-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }

/* --- Page « Règles du jeu » (rules.js) : sections repliables, tableaux, pastilles de rareté --- */
.rules-back {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 14px 0 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.rules-list { display: flex; flex-direction: column; gap: 10px; }
.rules-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.rules-section[open] { border-color: #4a4a54; }
.rules-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.rules-summary::-webkit-details-marker { display: none; }
.rules-summary-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rules-summary-title { font-size: 17px; font-weight: 800; }
.rules-summary-sub { font-size: 13px; color: var(--muted); }
.rules-chevron { flex: none; color: var(--muted); font-size: 24px; line-height: 1; transition: transform 0.2s ease; }
.rules-section[open] .rules-chevron { transform: rotate(90deg); }
.rules-body { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 18px; }
.rules-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.rules-sub {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rules-list li, .rules-body ul li { font-size: 14px; line-height: 1.5; }
ul.rules-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.rules-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
.rules-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; }
.rules-row + .rules-row { border-top: 1px solid var(--border); }
.rules-label { min-width: 0; }
.rules-value { flex: none; font-weight: 800; text-align: right; }
.rules-chip {
  display: inline-block;
  padding: 3px 11px;
  border: 1.5px solid var(--rarity-color);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--rarity-color);
}
/* Liens « ? » discrets vers la bonne rubrique + bouton du profil */
.rules-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
}
.rules-open {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 48px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .rules-chevron { transition: none; } }

.rules-more { margin: -2px 0 0; font-size: 14px; font-weight: 700; font-style: italic; color: var(--muted); }

/* =========================================================
   Ultime (rareté au-dessus de Légendaire) et Album (album.js)
   ========================================================= */

/* Carte Ultime : bordure irisée, léger halo violet, étiquette dégradée, case du sprite nacrée */
.card[data-rarity="ultime"] .card-face {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(#5ae6e6, #78a0ff, #be78ff, #ff78d2, #ffc88c, #96ffbe, #5ae6e6) border-box;
  box-shadow: 0 0 14px -2px rgba(190, 120, 255, 0.55);
}
.card[data-rarity="ultime"] .rarity-tag { background: var(--ultime-gradient); }
.card[data-rarity="ultime"] .sprite-tile { background: linear-gradient(160deg, #d6d3dc, #c4c2cc); }
.rules-chip[data-rarity="ultime"], .rarity-chip[data-rarity="ultime"] { border-color: transparent; background: var(--ultime-gradient); color: #0f0f11; }

/* Album : un bloc par modèle, dépliable */
.album-list { display: flex; flex-direction: column; gap: 10px; }
.album-piece {
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
/* Modèle complet : cadre irisé, comme l'Ultime */
.album-piece.complete {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(#5ae6e6, #78a0ff, #be78ff, #ff78d2, #ffc88c, #96ffbe, #5ae6e6) border-box;
  box-shadow: 0 0 14px -4px rgba(190, 120, 255, 0.55);
}
.album-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
/* L'Ultime du modèle : silhouette tant qu'il n'est pas gagné */
.album-ult {
  flex: none;
  display: flex;
  padding: 1px;
  border-radius: 6px;
  background: linear-gradient(160deg, #d6d3dc, #c4c2cc);
}
.album-ult img { display: block; width: 64px; height: 64px; }
.album-ult.locked img { filter: brightness(0); opacity: 0.4; }
.album-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.album-title .card-brand { align-self: flex-start; }
.album-name { font-size: 16px; font-weight: 800; line-height: 1.2; }
.album-progress { display: flex; align-items: center; gap: 10px; }
.album-progress .stat-bar { flex: 1; margin-top: 0; height: 6px; }
.album-piece.complete .stat-bar-fill { background: var(--ultime-gradient); }
.album-count { flex: none; font-size: 13px; font-weight: 800; white-space: nowrap; }
.album-chevron { flex: none; font-size: 22px; color: var(--muted); transition: transform 0.2s; }
.album-head[aria-expanded="true"] .album-chevron { transform: rotate(90deg); }

.album-body { display: flex; flex-direction: column; gap: 14px; padding: 0 14px 14px; }
.album-banner { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.album-banner-text { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.album-colorway { display: flex; flex-direction: column; gap: 6px; }
.album-colorway-name { font-size: 13px; font-weight: 700; }

/* Les 4 cases (une par rareté). Sprite ×1 sur très petit écran, ×2 dès que les cases sont assez larges
   (facteur entier, choisi selon la largeur réelle de la rangée). */
.album-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; container-type: inline-size; }
.album-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px 5px;
  border: 2px solid var(--rarity-color);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
}
.album-cell-tile { display: flex; padding: 1px; border-radius: 5px; background: #cccac4; }
.album-cell-tile img { display: block; width: 32px; height: 32px; }
@container (min-width: 300px) { .album-cell-tile img { width: 64px; height: 64px; } }
.album-cell-label { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rarity-color); }
.album-cell.empty { border-style: dashed; opacity: 0.4; filter: grayscale(1); }
.album-cell.placeable { border-style: dashed; animation: album-ready 2s ease-in-out infinite; }
@keyframes album-ready { 50% { box-shadow: 0 0 10px -1px var(--rarity-color); } }
@media (prefers-reduced-motion: reduce) { .album-cell.placeable { animation: none; } }
.album-mark {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rarity-color);
  color: #0f0f11;
  font-size: 11px;
  font-weight: 900;
}
.album-mark.plus { background: var(--bg); color: var(--rarity-color); border: 1.5px solid var(--rarity-color); }
.album-warning { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.4; }

/* =========================================================
   Confidentialité (privacy.js) et suppression du compte (account.js)
   ========================================================= */
.auth-legal { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; }
.auth-link-inline { display: inline; min-height: 0; padding: 0; font-size: inherit; }
.signout-danger { margin-top: 0; color: #ff7a6b; }

/* Le panneau de confidentialité passe au-dessus de l'écran de connexion et de la page publique */
.picker.privacy { z-index: 100; }
.privacy-body { gap: 4px; padding-bottom: 8px; }
.privacy-date { margin: 0 0 6px; font-size: 13px; }
.privacy-section { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); }
.privacy-title { margin: 0; font-size: 15px; font-weight: 800; }
.privacy-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.privacy-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.privacy-list li::marker { color: var(--text); }
.account-list { color: var(--text); }
.btn-danger { background: #ff7a6b; border-color: #ff7a6b; color: #1a0705; }
.btn-danger:disabled { opacity: 0.35; }