/* =============================================================
   CHRONOLEGENDS — Style
   Direction : musée nocturne. Fond encre, or patiné, parchemin.
   ============================================================= */

:root {
  --encre: #101320;
  --encre-2: #181c2e;
  --encre-3: #232842;
  --or: #d4b26a;
  --or-clair: #f1dc9f;
  --or-sombre: #8a6a2c;
  --parchemin: #f4ecdb;
  --parchemin-2: #e7dcc2;
  --texte-carte: #2a2418;
  --texte: #e9e3d3;
  --texte-doux: #a9a391;
  --serif-titre: "Cinzel", "Rubik", "Times New Roman", serif;   /* Rubik : lettres hébraïques */
  --serif: "Cormorant Garamond", "Rubik", Georgia, serif;
}

* { box-sizing: border-box; }

/* Pas de reflet bleuté au toucher sur Android (hérité par toute la page) ; le contour de focus
   reste pour le clavier seulement. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
/* Pas de sélection bleue en touchant longtemps (comme une appli) ; les champs restent sélectionnables. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, #2a3050 0%, transparent 60%),
    radial-gradient(ellipse at 50% 120%, #1d1a2a 0%, transparent 55%),
    var(--encre);
  background-attachment: fixed;
  color: var(--texte);
  font-family: var(--serif);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(212, 178, 106, .18);
}

.marque { display: flex; flex-direction: column; line-height: 1.1; }
.marque-titre {
  font-family: var(--serif-titre);
  font-weight: 700;
  font-size: clamp(20px, 5.2vw, 26px);
  letter-spacing: .12em;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--or-clair), var(--or) 55%, var(--or-sombre));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marque-sous { font-style: italic; color: var(--texte-doux); font-size: 15px; }

.onglets { display: flex; gap: 4px; background: var(--encre-2); padding: 4px; border-radius: 999px; border: 1px solid rgba(212, 178, 106, .2); }
.onglet {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--serif-titre);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--texte-doux);
  transition: background .2s, color .2s;
}
.onglet.actif { background: linear-gradient(180deg, #e3c682, #b18d45); color: var(--encre); }
.onglet span { opacity: .75; font-size: 12px; }

.region-joueur {
  display: inline-flex; align-items: center; gap: 5px; margin: -12px 0 0; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(212, 178, 106, .15);
  font-size: 13px; color: var(--texte-doux); opacity: .8; text-align: center;
}
.region-joueur::before {
  content: ""; width: 9px; height: 12px; flex: none; background: var(--or); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6zm0 8.5A2.5 2.5 0 1 1 6 3.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6zm0 8.5A2.5 2.5 0 1 1 6 3.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.region-joueur:empty { display: none; }
.anti-robot { min-height: 65px; display: flex; justify-content: center; }
.verrou-region { margin: -14px 0 0; max-width: 34ch; text-align: center; font-size: 15px; font-style: italic; color: var(--texte-doux); }

@media (max-width: 640px) {
  .entete { justify-content: center; text-align: center; }
  .marque { align-items: center; width: 100%; }
}

/* ---------- Paramètres : bouton engrenage + petit panneau ---------- */
.entete { position: relative; }
.reglages { position: relative; z-index: 30; }
.bouton-reglages {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .25); color: var(--texte-doux);
  transition: color .2s, border-color .2s, transform .4s;
}
.bouton-reglages svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bouton-reglages:hover, .bouton-reglages[aria-expanded="true"] { color: var(--or-clair); border-color: rgba(212, 178, 106, .6); }
.bouton-reglages[aria-expanded="true"] { transform: rotate(60deg); }
.panneau-reglages {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 230px; padding: 14px 16px 16px; border-radius: 14px;
  background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .3);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  text-align: start;
  animation: deplier .18s ease-out;
}
@keyframes deplier { from { opacity: 0; transform: translateY(-6px); } }
.reglages-titre { margin: 0 0 12px; font-family: var(--serif-titre); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); }
.reglages-libelle { margin: 0 0 6px; font-size: 14px; font-style: italic; color: var(--texte-doux); }
.panneau-reglages .langues { width: fit-content; }
.panneau-reglages .langues button { letter-spacing: .02em; padding: 6px 11px; cursor: pointer; }
/* Interrupteurs (cases à cocher en forme de bouton glissant) */
.interrupteur {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 0; font-size: 15px; color: var(--texte); cursor: pointer;
}
.interrupteur input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 40px; height: 23px; border-radius: 999px; position: relative;
  background: var(--encre-3); border: 1px solid rgba(212, 178, 106, .35); transition: background .2s;
}
.interrupteur input::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--texte-doux); transition: transform .2s, background .2s;
}
.interrupteur input:checked { background: linear-gradient(180deg, #e3c682, #b18d45); border-color: transparent; }
.interrupteur input:checked::after { background: var(--encre); transform: translateX(17px); }
html[dir="rtl"] .interrupteur input:checked::after { transform: translateX(-17px); }
.interrupteur input:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }
.panneau-reglages .reglages-libelle { margin-top: 10px; }
.lien-reglages {
  display: block; width: 100%; margin-top: 12px; padding: 9px 0 0; text-align: start; cursor: pointer;
  border: 0; border-top: 1px solid rgba(212, 178, 106, .2); background: none;
  font-family: var(--serif); font-size: 15px; color: var(--or-clair); text-decoration: underline; text-underline-offset: 3px;
}

/* Ouverture rapide : pas de guide de déchirure. */
.booster.ouverture-rapide .guide-dechirure { display: none; }

/* Chances de tirage */
.fond-dialogue { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 15, .75); }
.dialogue-chances {
  position: relative; width: min(100%, 420px); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 22px 22px 18px; border-radius: 16px;
  background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .3); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9);
}
.dialogue-chances h2 { margin: 0 40px 12px 0; font-family: var(--serif-titre); font-size: 18px; letter-spacing: .1em; color: var(--or-clair); }
html[dir="rtl"] .dialogue-chances h2 { margin: 0 0 12px 40px; }
html[dir="rtl"] .dialogue-chances .savoir-plus-fermer { right: auto; left: 14px; }
html[dir="rtl"] .regles-familles li { padding: 4px 4px 4px 10px; }
/* Fenêtre « Effets 3D » (iPhone) */
.dialogue-gyro { text-align: center; width: min(100%, 360px); }
.dialogue-gyro h2 { margin: 4px 0 8px; }
html[dir="rtl"] .dialogue-gyro h2 { margin: 4px 0 8px; }
.gyro-icone { width: 64px; height: 64px; fill: none; stroke: var(--or-clair); stroke-width: 2; stroke-linecap: round; animation: incliner-icone 2.4s ease-in-out infinite; }
@keyframes incliner-icone { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.gyro-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gyro-jamais { margin-top: 12px; background: none; border: 0; padding: 6px; font: inherit; font-size: 15px; color: var(--texte-doux); text-decoration: underline; cursor: pointer; }
/* Installer l'application */
.bouton-installer { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 14px; font-size: 13px; }
.bouton-installer[hidden] { display: none; }
.bouton-installer img { width: 20px; height: 20px; border-radius: 5px; }
.dialogue-installer { text-align: center; width: min(100%, 380px); }
.dialogue-installer h2 { margin: 8px 0 6px; }
html[dir="rtl"] .dialogue-installer h2 { margin: 8px 0 6px; }
.installer-icone { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8); }
.installer-etapes { text-align: start; margin: 14px 0 4px; padding-inline-start: 22px; display: grid; gap: 10px; color: var(--texte); line-height: 1.4; }
.icone-partage-ios { width: 20px; height: 20px; vertical-align: -4px; fill: none; stroke: #4ea3ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Historique des boosters */
.dialogue-historique { width: min(100%, 520px); }
.historique-booster { padding: 12px 0; border-bottom: 1px solid rgba(212, 178, 106, .15); }
.historique-booster:last-child { border-bottom: 0; }
.historique-booster h3 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px;
  font-family: var(--serif-titre); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--or-clair);
}
.historique-booster h3 span { font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--texte-doux); }
.historique-booster ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.historique-carte {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(212, 178, 106, .25);
  font-family: var(--serif); font-size: 15px; color: var(--texte);
}
.historique-carte:hover, .historique-carte:focus-visible { border-color: rgba(212, 178, 106, .7); }
.historique-carte:disabled { cursor: default; opacity: .55; }
.historique-carte .pastille-rarete { width: 10px; height: 10px; }
.dialogue-chances .savoir-plus-fermer { color: var(--or-clair); background: rgba(255, 255, 255, .06); border-color: rgba(212, 178, 106, .45); }
.dialogue-chances p { margin: 10px 0 6px; color: var(--texte-doux); }
.chances-ligne { color: var(--texte) !important; }
.chances-liste { list-style: none; margin: 0; padding: 0; }
.chances-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(212, 178, 106, .12); color: var(--texte); }
.chances-liste b { margin-inline-start: auto; font-weight: 600; color: var(--or-clair); }
.chances-liste small { font-weight: 400; color: var(--texte-doux); }
.pastille-rarete { width: 12px; height: 12px; border-radius: 50%; background: var(--cadre); flex: none; }
.chances-note { font-size: 14px; font-style: italic; }

/* Règles du jeu */
.dialogue-regles { width: min(100%, 560px); }
.dialogue-regles h3 { margin: 20px 0 6px; font-family: var(--serif-titre); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.dialogue-regles h3:first-of-type { margin-top: 4px; }
.dialogue-regles p { color: var(--texte); line-height: 1.45; }
.regles-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.regles-liste li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(212, 178, 106, .1); color: var(--texte-doux); line-height: 1.4; }
.regles-liste b { color: var(--texte); font-weight: 600; }
.regles-liste .pastille-rarete { margin-top: 5px; }
.regles-lettre {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--or); color: var(--or-clair); font-family: var(--serif-titre); font-size: 12px; font-weight: 700;
}
.regles-icone { flex: none; width: 22px; text-align: center; color: var(--or-clair); }
.regles-familles { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.regles-familles li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(212, 178, 106, .2); font-size: 14px; color: var(--texte); }
.embleme-mini { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #000; }
.embleme-mini svg { width: 64%; height: 64%; color: #fff; stroke-width: 1.8; --fond-embleme: #000; }

@media (max-width: 640px) {
  /* Sur téléphone, l'engrenage se range dans le coin : il ne prend pas de ligne. */
  .reglages { position: absolute; top: 12px; inset-inline-end: 12px; }
  .bouton-reglages { width: 36px; height: 36px; }
}

main { flex: 1; padding: clamp(20px, 4vw, 48px) 16px; }

/* ---------- Booster scellé ---------- */

.langues { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .2); }
.langues button {
  border: 0; background: transparent; padding: 5px 10px; border-radius: 999px;
  font-family: var(--serif-titre); font-size: 12px; letter-spacing: .08em; color: var(--texte-doux);
}
.langues button.actif { background: var(--encre-3); color: var(--or-clair); }

/* Collection : interrupteur Époques | Familles, puis UNE ligne de pastilles qu'on fait défiler. */
.bascule-collection {
  display: flex; width: fit-content; margin: 0 auto 14px; padding: 3px; gap: 2px;
  border-radius: 999px; background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .25);
}
.bascule-collection button {
  border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  font-family: var(--serif-titre); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
}
.bascule-collection button.actif { background: var(--encre-3); color: var(--or-clair); }

.rangee-puces {
  display: flex; justify-content: safe center; gap: 8px;
  margin: 0 -16px 24px; padding: 2px 16px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* bords estompés : on devine qu'il y a d'autres pastilles à faire défiler */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.rangee-puces::-webkit-scrollbar { display: none; }
.rangee-puces > * { flex: none; white-space: nowrap; scroll-snap-align: center; }

.epoque, .famille {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(212, 178, 106, .35);
  background: var(--encre-2);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--texte-doux);
  transition: background .2s, color .2s;
}
.epoque { font-family: var(--serif-titre); font-size: 13px; letter-spacing: .06em; }
.famille { font-family: var(--serif); font-size: 15px; }
.epoque:hover, .famille:hover { color: var(--texte); }
.epoque.actif, .famille.actif { background: linear-gradient(180deg, #e3c682, #b18d45); color: var(--encre); border-color: transparent; }
.epoque span, .famille span { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: 0; opacity: .7; }
.famille svg { width: 16px; height: 16px; flex: none; color: var(--or); stroke-width: 1.8; --fond-embleme: var(--encre-2); }
.famille.actif svg { color: var(--encre); --fond-embleme: #caa862; }
.famille.complete:not(.actif) { border-color: var(--or); color: var(--or-clair); }

.zone-booster { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 2vh; }

.booster {
  --fond-booster:
    repeating-linear-gradient(45deg, rgba(212, 178, 106, .05) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #283055 0%, #151a33 55%, #0d1022 100%);
  --dechirure: 0;
  container-type: inline-size;   /* tailles du titre en cqw (largeur du paquet) */
  /* Couleur du sachet : Moyen-Orient par défaut, puis une couleur par région (plus bas) */
  --sachet-1: #283055; --sachet-2: #151a33; --sachet-3: #0d1022;
  --fond-booster:
    repeating-linear-gradient(45deg, rgba(212, 178, 106, .05) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, var(--sachet-1) 0%, var(--sachet-2) 55%, var(--sachet-3) 100%);
  /* Soudures dentelées en haut et en bas du sachet */
  --masque-sachet:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 5px repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 9px) no-repeat;
  position: relative;
  width: min(62vw, 250px);
  aspect-ratio: 63 / 98;
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: none;
  touch-action: none;          /* le doigt déchire le paquet au lieu de faire défiler la page */
  user-select: none; -webkit-user-select: none;
  /* Ombre portée (filter) : elle suit la forme dentelée du sachet */
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .7));
  /* Inclinaison : --incl-x / --incl-y réglés par app.js (souris ou téléphone) */
  transform: perspective(800px) rotateX(calc(var(--incl-y, 0) * 1deg)) rotateY(calc(var(--incl-x, 0) * 1deg));
  transition: transform .25s ease-out, scale .3s ease, filter .3s ease;
  animation: flotter 4s ease-in-out infinite;
}
.booster:hover:not(:disabled) { scale: 1.03; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .8)) drop-shadow(0 0 18px rgba(212, 178, 106, .3)); }
.booster:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; animation: none; }

.booster-bord { position: absolute; inset: 10px; border: 1px solid rgba(212, 178, 106, .55); border-radius: 8px; pointer-events: none; }
.booster-bord::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(212, 178, 106, .25); border-radius: 5px; }
/* Placement fixe (et non en colonne) : les deux moitiés du paquet déchiré
   reprennent exactement la même disposition. */
.booster-titre, .booster-logo, .booster-info { position: absolute; left: 0; right: 0; margin-inline: auto; pointer-events: none; user-select: none; }
/* « ChronoLegends » en lettres dorées en haut, et à l'envers en bas, comme sur une carte à jouer */
/* « Chrono » petit et espacé au-dessus de « LEGENDS » en grand, en lettres d'or */
.booster-titre { top: 10.5%; display: grid; justify-items: center; gap: .6cqw;
  filter: drop-shadow(0 .4cqw 0 #4a330e) drop-shadow(0 1cqw 1.2cqw rgba(0, 0, 0, .55)); }
.booster-titre > span {
  font-family: "Cinzel", "Times New Roman", serif; line-height: 1.05; white-space: nowrap;
  background: linear-gradient(180deg, #fff6d0 0%, #f3d688 30%, #c79434 52%, #f6dd94 70%, #a8762a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.titre-chrono { font-weight: 700; font-size: 5cqw; letter-spacing: .55em; margin-inline-start: .55em; display: flex; align-items: center; gap: 2cqw; }
.titre-chrono::before, .titre-chrono::after { content: ""; width: 7cqw; height: 1px; background: linear-gradient(90deg, transparent, #e7c77c); }
.titre-chrono::after { transform: scaleX(-1); }
.titre-legends { font-weight: 900; font-size: 13.2cqw; letter-spacing: .06em; }
/* Rose des vents : même proportion que sur le dos des cartes */
.booster-logo { top: 50%; width: 30%; height: auto; transform: translateY(-50%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.booster-info { top: 61.2%; text-align: center; font-family: var(--serif-titre); font-size: 11px; letter-spacing: .3em; color: var(--texte-doux); text-transform: uppercase; }

.booster.ouverture { animation: secouer .55s ease-in-out, eclater .35s .55s ease-in forwards; }

@keyframes flotter { 50% { translate: 0 -8px; } }

/* ---------- Sachet du booster ---------- */
.booster-sachet, .booster-reflet {
  position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  -webkit-mask: var(--masque-sachet); mask: var(--masque-sachet);
}
.booster-sachet {
  background:
    /* soudures : fines stries verticales en haut et en bas, comme un vrai paquet */
    repeating-linear-gradient(90deg, rgba(255, 240, 200, .16) 0 1px, rgba(0, 0, 0, .2) 1px 3px) top / 100% 6.5% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 240, 200, .16) 0 1px, rgba(0, 0, 0, .2) 1px 3px) bottom / 100% 6.5% no-repeat,
    var(--fond-booster);
  box-shadow: 0 0 0 1px rgba(212, 178, 106, .4) inset;
}
/* Petites encoches sur les deux bords, en haut : là où on commence la découpe */
.booster-sachet::before, .booster-sachet::after {
  content: ""; position: absolute; top: 8%; width: 8px; height: 10px; margin-top: -5px; background: var(--encre);
}
.booster-sachet::before { left: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.booster-sachet::after { right: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
/* Monument en filigrane, à peine visible : un différent à chaque paquet */
.booster-filigrane { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--or); opacity: .45; }
.booster-bord { inset: 8.5% 10px; }

/* Une couleur par région */
.booster[data-region="europe"]    { --sachet-1: #5c1f2e; --sachet-2: #35111b; --sachet-3: #1c080e; }
.booster[data-region="afrique"]   { --sachet-1: #6a3f1c; --sachet-2: #3a220f; --sachet-3: #1d1007; }
.booster[data-region="asie"]      { --sachet-1: #1d4f40; --sachet-2: #0f2c24; --sachet-3: #071812; }
.booster[data-region="ameriques"] { --sachet-1: #4a2463; --sachet-2: #28123a; --sachet-3: #14091f; }
.booster[data-region="oceanie"]   { --sachet-1: #155a6e; --sachet-2: #0b3341; --sachet-3: #051a22; }

/* Reflet métallisé : un éclat passe toutes les 6 s ; un halo suit l'inclinaison */
.booster-reflet {
  mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 250, 230, .75) 50%, transparent 60%) 105% 0 / 250% 100% no-repeat;
  animation: balayer 6s ease-in-out 1.5s infinite;
}
.booster-reflet::before {
  content: ""; position: absolute; inset: 0; opacity: var(--brillance, 0); transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(255, 248, 225, .7), transparent 55%);
}
@keyframes balayer { 0% { background-position: 105% 0; } 30%, 100% { background-position: -5% 0; } }

/* ---------- Booster doré : noir et or, halo et paillettes ---------- */
.booster.dore {
  --fond-booster:
    repeating-linear-gradient(45deg, rgba(241, 210, 140, .12) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(241, 210, 140, .12) 0 1px, transparent 1px 10px),
    radial-gradient(ellipse at 50% 45%, #3d3119 0%, #18130a 60%, #070604 100%);
}
.booster.dore .booster-sachet { box-shadow: 0 0 0 1.5px rgba(241, 220, 159, .9) inset, 0 0 30px rgba(212, 178, 106, .25) inset; }
.booster.dore .booster-filigrane { opacity: .55; }
.booster.dore .booster-info { color: var(--or-clair); }
.booster.dore .booster-reflet { animation-duration: 3.5s; animation-delay: .5s; }
/* Halo doré qui respire derrière le paquet */
.booster.dore::after {
  content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 30px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(241, 200, 110, .45), transparent);
  animation: respirer 2.6s ease-in-out infinite;
}
@keyframes respirer { 50% { opacity: .35; transform: scale(.94); } }
/* Paillettes qui scintillent */
.booster.dore .booster-reflet::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 30%, #fff8dc 0 1px, transparent 2px),
    radial-gradient(circle at 80% 22%, #fff8dc 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 70% 70%, #fff8dc 0 1px, transparent 2px),
    radial-gradient(circle at 26% 76%, #fff8dc 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 50% 36%, #fff8dc 0 .8px, transparent 1.8px),
    radial-gradient(circle at 88% 52%, #fff8dc 0 .8px, transparent 1.8px);
  animation: scintiller 1.8s ease-in-out infinite alternate;
}
@keyframes scintiller { from { opacity: .2; } to { opacity: 1; } }
/* (pendant l'ouverture, ::after sert au halo de l'éclair : voir plus bas) */

/* ---------- Déchirer le booster (glisser de haut en bas, voir app.js) ---------- */

/* Guide : pointillés lumineux qui filent le long du haut du paquet (là où on découpe). */
.guide-dechirure {
  position: absolute; left: 7%; top: 8%; width: 86%; height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(243, 214, 150, .9) 0 6px, transparent 6px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: guider 1.8s ease-in-out infinite;
  pointer-events: none;
}
.guide-dechirure::after {
  content: ""; position: absolute; right: 10%; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-right: 2px solid rgba(243, 214, 150, .9); border-bottom: 2px solid rgba(243, 214, 150, .9);
  transform: rotate(-45deg);
}
@keyframes guider { 0% { opacity: 0; transform: translateX(-12%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(12%); } }
.booster:disabled .guide-dechirure, .booster.en-dechirure .guide-dechirure, .booster.dechire .guide-dechirure { display: none; }

/* Trait de découpe : il suit exactement le chemin du doigt (app.js, dessinerCoupe). */
.ligne-dechirure {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 3px #ffe7a8) drop-shadow(0 0 8px rgba(255, 215, 114, .7));
}
.ligne-dechirure polyline { fill: none; stroke: #fffaf0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Petite lumière au bout du doigt, comme la pointe d'une lame */
.pointe-coupe {
  position: absolute; left: var(--px, 0); top: var(--py, 8%); width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: radial-gradient(circle, #fff 0 22%, rgba(255, 226, 150, .75) 45%, transparent 70%);
}
.booster.en-dechirure .pointe-coupe { opacity: 1; }
.booster.en-dechirure { animation: none; transform: scale(calc(1 + var(--dechirure) * .03)); transition: none; }

/* Simple appui : le paquet invite à glisser vers le bas. */
.booster.indice { animation: indiquer .7s ease-in-out; }
.booster.indice .guide-dechirure { animation-duration: .9s; }
@keyframes indiquer { 30% { transform: translateY(10px); } 60% { transform: translateY(-3px); } }

/* Découpé : la bande du haut s'envole, la lumière jaillit par l'ouverture, puis le paquet descend. */
.booster.dechire { animation: none; background: transparent; box-shadow: none; }
.booster.dechire > :not(.moitie, .cartes-sortantes, .interieur-paquet) { visibility: hidden; }
/* Éclair à la fin de la coupe (à la Pokémon TCG Pocket) : un trait de lumière blanche et dorée très vif
   jaillit le long de la coupe et déborde largement du paquet (::before), avec un halo doré autour (::after). */
.booster.dechire::before, .booster.dechire::after {
  content: ""; position: absolute; pointer-events: none; z-index: 5;
}
.booster.dechire::before {
  display: block; left: -45%; right: -45%; top: calc(var(--coupe-y, 8%) - 3.5%); height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, #fff 30%, rgba(255, 236, 180, .9) 55%, rgba(255, 210, 120, 0) 100%);
  filter: blur(1px);
  animation: eclair-coupe .5s ease-out forwards;
}
.booster.dechire::after {
  display: block; left: -25%; right: -25%; top: calc(var(--coupe-y, 8%) - 16%); height: 32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 210, .85), rgba(255, 205, 110, .35) 50%, transparent);
  animation: halo-coupe .6s ease-out forwards;
}
.booster.dore.dechire::after { background: radial-gradient(closest-side, rgba(255, 248, 220, 1), rgba(255, 195, 80, .6) 50%, transparent); }
@keyframes eclair-coupe {
  from { transform: scaleX(.15); opacity: 0; }
  14% { transform: scaleX(1); opacity: 1; }
  45% { transform: scale(1.1, .7); opacity: .95; }
  to { transform: scale(1.2, .2); opacity: 0; }
}
@keyframes halo-coupe { from { transform: scale(.4, .2); opacity: 0; } 20% { opacity: 1; } to { transform: scale(1.1, 1.3); opacity: 0; } }

/* Sans pile sortie du paquet (cas de secours) : les cartes apparaissent une à une, puis s'empilent */
.tirage.pile.sortie .emplacement { animation: sortir-du-paquet .65s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--rang, 0) * 80ms); }
@keyframes sortir-du-paquet {
  from { translate: 0 28%; scale: .82; opacity: 0; filter: brightness(2.4); }
  50% { opacity: 1; }
  to { translate: 0 0; scale: 1; filter: brightness(1); }
}
/* Chaque moitié reprend une copie du sachet (fond, dents, filigrane) */
.moitie {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* Ordre d'empilement : les cartes sont DANS le paquet (derrière sa face avant),
   la bande découpée passe par-dessus tout. */
.moitie.bas { z-index: 2; }
.moitie.haut { z-index: 4; }
/* La bande découpée se soulève à peine pendant l'éclair, puis s'envole en tournoyant vers le haut à droite
   et sort de l'écran (on la suit des yeux, sans fondu). */
.moitie.haut { transform-origin: 70% var(--coupe-y, 8%); animation: envol-bande .7s cubic-bezier(.45, .05, .7, .6) forwards; }
@keyframes envol-bande {
  0% { transform: none; }
  22% { transform: perspective(700px) translate(1%, -4%) rotate(-4deg) rotateX(18deg); }
  to { transform: perspective(700px) translate(120%, -190%) rotate(70deg) rotateX(55deg) rotateY(35deg); }
}
/* Le paquet ouvert : petit sursaut pendant l'éclair, un court instant immobile, puis il tombe d'un coup
   vers le bas (sans fondu) pendant que les cartes montent. app.js attend la fin de cette animation. */
.moitie.bas { animation: descendre-paquet .85s forwards; }
@keyframes descendre-paquet {
  0% { transform: none; animation-timing-function: ease-out; }
  10% { transform: translateY(-2.5%) scale(1.025); animation-timing-function: ease-in-out; }
  24% { transform: none; }
  45% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  to { transform: translateY(130%) scale(.96); }
}

/* L'intérieur du paquet (à la Pokémon TCG Pocket) : par l'ouverture, on voit la face arrière de l'intérieur,
   un film argenté irisé, derrière les cartes. La bouche s'entrouvre juste après la coupe (avec un léger rebond) ;
   l'intérieur descend avec le paquet (même animation que .moitie.bas). */
.interieur-paquet {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  animation: descendre-paquet .85s forwards;
}
.bouche-paquet {
  position: absolute; left: 1%; right: 1%; top: calc(var(--coupe-y, 8%) - 7%); height: 11%; overflow: hidden;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;   /* bord du film arrière, bombé comme un sachet qui s'ouvre */
  transform-origin: 50% 100%;
  background:
    /* creux du paquet : de plus en plus sombre en descendant vers la face avant */
    linear-gradient(180deg, transparent 35%, rgba(12, 16, 34, .35) 65%, rgba(8, 10, 24, .85) 100%),
    /* film holographique : bandes de couleur qui glissent */
    linear-gradient(100deg, rgba(120, 180, 255, .45) 0%, rgba(150, 210, 255, .75) 18%, rgba(215, 150, 255, .7) 34%,
      rgba(255, 255, 255, .95) 46%, rgba(150, 240, 255, .7) 58%, rgba(255, 170, 225, .6) 72%, rgba(170, 160, 255, .55) 86%, rgba(120, 180, 255, .45) 100%) 0 0 / 260% 100%,
    /* métal argenté */
    linear-gradient(180deg, #ffffff 0%, #dfe5ee 18%, #b4bdcb 45%, #7f899b 75%, #59617a 100%);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 3px 4px -2px rgba(255, 255, 255, .8);
  animation: ouvrir-bouche .55s .05s cubic-bezier(.2, .9, .3, 1.25) both,
             reflet-bouche 2.2s .1s ease-in-out both,
             irisation 2.2s .1s ease-in-out both;
}
/* Éclat de lumière qui traverse le film d'un coup, comme une feuille métallisée qu'on incline */
.bouche-paquet::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent);
  filter: blur(2px); mix-blend-mode: screen;
  animation: eclat-bouche .9s .3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes ouvrir-bouche { 0% { transform: scaleY(0) scaleX(.94); } 70% { transform: scaleY(1.12) scaleX(1); } to { transform: scaleY(1); } }
@keyframes reflet-bouche { from { background-position: 0 0, 100% 0, 0 0; } to { background-position: 0 0, -80% 0, 0 0; } }
@keyframes irisation { from { filter: hue-rotate(-25deg) saturate(1.2); } to { filter: hue-rotate(30deg) saturate(1); } }
@keyframes eclat-bouche { from { translate: -120% 0; opacity: 0; } 25% { opacity: 1; } to { translate: 560% 0; opacity: 0; } }

/* Bord de la face avant (app.js : dechirerBooster, formes qui suivent exactement la coupe) :
   - .levre-paquet : un fin liseré argenté irisé, l'épaisseur du film ;
   - .pli-paquet : la face avant se courbe un peu vers nous sous la coupe (reflet clair puis ombre douce). */
.levre-paquet {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(150, 200, 255, .9), rgba(255, 255, 255, 1) 20%, rgba(205, 160, 255, .9) 38%,
      rgba(235, 245, 255, 1) 55%, rgba(150, 235, 255, .9) 72%, rgba(255, 255, 255, 1) 88%, rgba(170, 190, 255, .9)) 0 0 / 200% 100%,
    #c9d1dd;
  animation: reflet-levre 2.2s .1s ease-in-out both, irisation 2.2s .1s ease-in-out both;
}
@keyframes reflet-levre { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }
.pli-paquet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .32) calc(var(--coupe-y, 8%) + 1%),
    rgba(255, 255, 255, .08) calc(var(--coupe-y, 8%) + 3%),
    rgba(0, 0, 10, .28) calc(var(--coupe-y, 8%) + 4.5%),
    transparent calc(var(--coupe-y, 8%) + 9%));
  animation: apparaitre-pli .4s .05s ease-out both;
}
@keyframes apparaitre-pli { from { opacity: 0; } }

/* ---------- Les cartes sortent du paquet (à la Pokémon TCG Pocket) ----------
   Une pile de cartes face cachée, placée DANS le paquet juste sous la coupe :
   la face avant du paquet (moitié du bas) la cache, elle monte et sort par
   l'ouverture. Ensuite app.js la fait glisser jusqu'à la pile à révéler. */
.cartes-sortantes {
  position: absolute; z-index: 1; left: 6%; width: 88%; top: calc(var(--coupe-y, 8%) + 1.5%);
  aspect-ratio: 63 / 88; pointer-events: none;
  animation: cartes-montent .5s .36s cubic-bezier(.4, 0, .7, 1) both;   /* pendant la chute du paquet, sans s'arrêter */
}
.cartes-sortantes > span { position: absolute; inset: 0; container-type: inline-size; }
/* Épaisseur de la pile : les cartes du dessous dépassent un peu en bas */
.cartes-sortantes > span:nth-child(1) { translate: 0 6px; }
.cartes-sortantes > span:nth-child(2) { translate: 0 3px; }
/* Lueur dorée qui sort avec les cartes (blanche et plus forte pour un booster doré) */
.cartes-sortantes > span:last-child .dos { animation: lueur-cartes 1.1s .1s ease-out both; }
.booster.dore .cartes-sortantes > span:last-child .dos { animation-name: lueur-cartes-dore; }
@keyframes cartes-montent {
  from { transform: translateY(0); }
  to { transform: translateY(-9%) scale(1.04); }   /* peu : la pile part ensuite vers le centre de l'écran, plus bas */
}
@keyframes lueur-cartes {
  from { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 0 0 0 rgba(255, 220, 150, 0); }
  35% { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 -6px 34px 8px rgba(255, 220, 150, .75); }
  to { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 -4px 22px 2px rgba(255, 220, 150, .35); }
}
@keyframes lueur-cartes-dore {
  from { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 0 0 0 rgba(255, 246, 215, 0); }
  35% { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 -8px 46px 14px rgba(255, 236, 170, .95); }
  to { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 -4px 26px 4px rgba(255, 220, 150, .5); }
}

/* La pile arrive de l'endroit où les cartes sont sorties du paquet (app.js : afficherPile). */
.tirage.pile.arrivee { transition: transform .2s ease-out, translate .42s cubic-bezier(.15, .75, .3, 1), scale .42s cubic-bezier(.15, .75, .3, 1); }
@keyframes secouer {
  20% { transform: rotate(-4deg) scale(1.03); }
  40% { transform: rotate(4deg) scale(1.05); }
  60% { transform: rotate(-3deg) scale(1.06); }
  80% { transform: rotate(2deg) scale(1.07); }
}
@keyframes eclater { to { transform: scale(1.3); opacity: 0; filter: brightness(2.5); } }

.consigne { font-style: italic; color: var(--texte-doux); text-align: center; margin: 0; max-width: 32ch; }


/* ---------- Tirage ---------- */

.tirage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1400px;
}

.emplacement {
  position: relative;
  width: min(43vw, 210px);
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  background: none;
  container-type: inline-size;
  animation: distribuer .5s cubic-bezier(.2, .8, .3, 1.2) both;
}
@keyframes distribuer { from { opacity: 0; transform: translateY(-60px) scale(.6) rotate(-8deg); } }

.emplacement-interieur {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .7, .2, 1);
}
.emplacement.revelee .emplacement-interieur { transform: rotateY(180deg); }
.emplacement:not(.revelee):hover .emplacement-interieur { transform: translateY(-6px); }

.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face-avant { transform: rotateY(180deg); }

/* Halo à la révélation selon la rareté */
.emplacement.revelee.rarete-epique .face-avant { animation: halo-epique 1.4s .4s ease-out; }
.emplacement.revelee.rarete-legendaire .face-avant { animation: halo-legendaire 1.8s .4s ease-out; }
.emplacement.revelee.rarete-mythique .face-avant { animation: halo-mythique 2.2s .4s ease-out; }
@keyframes halo-epique { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 26px #b07de0); } }
@keyframes halo-legendaire { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 40px #ffd772) brightness(1.15); } }
/* Finitions : l'éclat de la révélation prend le pas sur celui de la rareté. */
.emplacement.revelee[data-finition="emeraude"] .face-avant { animation: halo-emeraude 2.2s .4s ease-out; }
.emplacement.revelee[data-finition="diamant"] .face-avant { animation: halo-diamant 2.6s .4s ease-out; }
/* Halos plus discrets : la comète de lumière (plus bas) fait l'essentiel. */
@keyframes halo-emeraude { 0% { filter: drop-shadow(0 0 0 transparent); } 45% { filter: drop-shadow(0 0 26px rgba(63, 227, 154, .8)) brightness(1.1); } }
@keyframes halo-diamant {
  0% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 30px rgba(190, 230, 255, .85)) brightness(1.15); }
}
@keyframes halo-mythique { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 52px #ff5fb0) brightness(1.2); } }

.nouvelle {
  position: absolute; top: -8px; right: -6px; z-index: 2;
  font-family: var(--serif-titre); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(180deg, #e3c682, #b18d45); color: var(--encre);
  padding: 4px 8px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  animation: apparaitre .4s .6s both;
}
@keyframes apparaitre { from { opacity: 0; transform: scale(.5); } }

/* ---------- Pile de cartes (ouverture type Pokémon) ---------- */

.tirage.pile {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 63 / 88;
  margin: 8px auto 0;
  perspective: 1400px;
  flex-wrap: nowrap;
  /* La pile se penche (souris ou téléphone, app.js : pencherPile) : les cartes étant
     les unes derrière les autres en profondeur, on aperçoit le bord des suivantes. */
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(calc(var(--pile-y, 0) * 1deg)) rotateY(calc(var(--pile-x, 0) * 1deg));
  transition: transform .2s ease-out;
}

/* Chaque carte occupe toute la pile ; les cartes du dessous sont décalées. */
.tirage.pile .emplacement {
  position: absolute;
  inset: 0;
  width: 100%;
  animation: none;
  transform:
    /* en retrait (profondeur), un peu plus bas pour montrer l'épaisseur de la pile,
       et agrandie juste ce qu'il faut pour compenser l'éloignement */
    translate3d(0, calc(var(--profondeur, 0) * 4px), calc(var(--profondeur, 0) * -28px))
    scale(calc(1 + var(--profondeur, 0) * 0.031));
  transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}

/* Bord lumineux des cartes encore cachées sous la pile : sa couleur trahit
   une carte intéressante (Épique, Légendaire, Mythique, Animée, Diamant). */
.tirage.pile .emplacement.dessous.rarete-epique { --tranche: #a25ee0; }
.tirage.pile .emplacement.dessous.rarete-legendaire { --tranche: #f0b43a; }
.tirage.pile .emplacement.dessous.rarete-mythique { --tranche: #ff5fb0; }
.tirage.pile .emplacement.dessous[data-finition="emeraude"] { --tranche: #3fe39a; }
.tirage.pile .emplacement.dessous[data-finition="diamant"] { --tranche: #bdf0ff; }
.tirage.pile .emplacement.dessous:is(.rarete-epique, .rarete-legendaire, .rarete-mythique, [data-finition="emeraude"], [data-finition="diamant"]) .face-dos .dos {
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 178, 106, .5) inset,
    0 0 0 2px var(--tranche), 0 0 22px 5px var(--tranche);
  animation: tranche 1.6s ease-in-out infinite alternate;
}
@keyframes tranche { from { filter: brightness(.9); } to { filter: brightness(1.25); } }

/* Sur smartphone, la pile laisse défiler la page verticalement, mais le
   glissement horizontal sert à écarter la carte (voir activerGlissement dans app.js). */
.tirage.pile .emplacement { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.tirage.pile .emplacement.glisse { transition: none; }

/* Appui simple sur une carte déjà révélée (smartphone) : petit frémissement
   qui invite à la faire glisser. */
.tirage.pile .emplacement.fremit { animation: fremir .5s ease; }
@keyframes fremir {
  25% { translate: 14px 0; rotate: 2deg; }
  55% { translate: -8px 0; rotate: -1deg; }
  80% { translate: 4px 0; rotate: 0deg; }
}

/* La carte révélée que l'on écarte : elle s'envole sur le côté (droite par
   défaut, ou du côté où on l'a fait glisser : --sens = -1 ou 1) et disparaît. */
.tirage.pile .emplacement.ecartee {
  transform: translate3d(calc(var(--sens, 1) * 120%), 0, 40px) rotate(calc(var(--sens, 1) * 13deg)) scale(.92);
  opacity: 0;
  transition: transform .55s cubic-bezier(.4, 0, .5, 1), opacity .55s ease;
}

#consigne-pile { margin: 22px auto 0; }

/* ---------- Étalement final des 5 cartes ---------- */

.tirage.etalement {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1400px;
}

.carte-etalee {
  position: relative;
  width: min(43vw, 200px);
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  background: none;
  container-type: inline-size;
  cursor: pointer;
  transition: transform .2s;
  animation: distribuer .5s cubic-bezier(.2, .8, .3, 1.2) both;
}
.carte-etalee:hover { transform: translateY(-6px); }

.actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.bouton {
  border: 1px solid rgba(212, 178, 106, .5);
  background: var(--encre-2);
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--serif-titre);
  font-size: 14px;
  letter-spacing: .08em;
  transition: background .2s, transform .2s;
}
.bouton:hover { background: var(--encre-3); transform: translateY(-2px); }
.bouton-or { background: linear-gradient(180deg, #e3c682, #b18d45); color: var(--encre); border-color: transparent; }
.bouton-or:hover { background: linear-gradient(180deg, #ecd39a, #c19c52); }

/* ---------- Dos de carte ---------- */

.dos {
  width: 100%; height: 100%;
  border-radius: 4.5cqw;
  background:
    repeating-linear-gradient(60deg, rgba(212, 178, 106, .06) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-60deg, rgba(212, 178, 106, .06) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #283055, #11152a);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 178, 106, .5) inset;
  display: grid; place-items: center;
  position: relative;
}
.dos::before { content: ""; position: absolute; inset: 6%; border: 1px solid rgba(212, 178, 106, .5); border-radius: 3cqw; }
/* Logo de ChronoLegends (rose des vents dorée) */
.dos-motif { display: block; width: 30%; height: auto; user-select: none; pointer-events: none;
  filter: drop-shadow(0 1cqw 2cqw rgba(0, 0, 0, .6)); }

/* Hébreu : pas d'italique (le navigateur penche artificiellement les lettres)
   ni de lettres espacées. Les cartes (en anglais) et le nom du jeu gardent leur style. */
html[lang="he"] *:not(.carte, .carte *, .marque-titre, .booster-titre, .booster-titre *, .affiche-titre, .affiche-pied) {
  font-style: normal;
  letter-spacing: normal;
}
/* Hébreu : Rubik pour toute l'interface (chiffres compris) ; cartes et nom du jeu gardent leurs polices. */
html[lang="he"] { --serif-titre: "Rubik", sans-serif; --serif: "Rubik", sans-serif; }
html[lang="he"] :is(.carte, .marque-titre, .booster-titre, .affiche-titre, .affiche-pied) {
  --serif-titre: "Cinzel", "Rubik", "Times New Roman", serif;
  --serif: "Cormorant Garamond", "Rubik", Georgia, serif;
}
html[lang="he"] .carte { font-family: var(--serif); }   /* sinon la carte hériterait de Rubik */

/* ---------- Carte ---------- */

.carte {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 63 / 88;
  position: relative;
  text-align: center;
  color: var(--texte-carte);
}

.carte-cadre {
  position: absolute; inset: 0;
  padding: 3.6cqw;
  border-radius: 4.5cqw;
  background: var(--cadre);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8), inset 0 0 0 .6cqw rgba(255, 255, 255, .25), inset 0 0 0 1.2cqw rgba(0, 0, 0, .15);
  overflow: hidden;
}

.carte-interieur {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 2.6cqw;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .55), transparent 65%),
    linear-gradient(180deg, var(--parchemin), var(--parchemin-2));
  box-shadow: inset 0 0 0 .5cqw var(--filet), inset 0 0 6cqw rgba(120, 90, 40, .18);
}

.carte-tete { padding: 2.6cqw 3cqw 2cqw; }
.carte-nom {
  margin: 0;
  font-family: var(--serif-titre);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #231d12;
}

.carte-illus {
  position: relative;
  margin: 0 3.4cqw;
  aspect-ratio: 4 / 3;
  border-radius: 1.2cqw;
  overflow: hidden;
  box-shadow: 0 0 0 .5cqw var(--filet), 0 0 0 1.2cqw rgba(255, 255, 255, .5), 0 1cqw 2cqw rgba(0, 0, 0, .25);
  background: #1a1a22;
}
.carte-illus > svg, .carte-illus > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Appui long sur l'illustration : pas de menu « Copier / Télécharger l'image » ni de surlignage
   (le doigt sert à pencher la carte) ; le geste passe à la carte elle-même. */
.carte img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* Emblèmes de famille (carte.js : EMBLEMES). Couleur du dessin = color ; --fond-embleme = couleur du fond
   derrière, pour les découpes des silhouettes pleines. */
svg.embleme { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg.embleme .p { fill: currentColor; stroke: none; }
svg.embleme .c { fill: var(--fond-embleme, #000); stroke: none; }
svg.embleme .c-trait { stroke: var(--fond-embleme, #000); stroke-width: 1.3; }
svg.embleme .t { stroke-width: 2.3; }
svg.embleme .fin { stroke-width: 1.5; }

.carte-bandeau {
  margin: 2.6cqw 6cqw 0;
  padding: 1cqw 0;
  display: flex; align-items: center; justify-content: center; gap: 2.4cqw;
  font-family: var(--serif-titre);
  font-size: 3.4cqw;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--encre-bandeau);
  border-top: .3cqw solid var(--filet);
  border-bottom: .3cqw solid var(--filet);
}
.gemme { width: 2.2cqw; height: 2.2cqw; transform: rotate(45deg); background: var(--gemme); box-shadow: 0 0 1.5cqw var(--gemme); flex: none; }

/* --reduction : rétrécit le texte si le téléphone l'agrandit et qu'il déborde (voir carte.js). */
.carte-corps { --reduction: 1; flex: 1; min-height: 0; padding: 2cqw 6cqw 0; overflow: hidden; display: flex; flex-direction: column; }
.carte-dates { margin: 0; font-family: var(--serif-titre); font-size: calc(3.9cqw * var(--reduction)); font-weight: 600; letter-spacing: .03em; }
.carte-lieu { margin: .4cqw 0 1.6cqw; font-style: italic; font-size: calc(4.1cqw * var(--reduction)); color: #5d4f36; }
.carte-texte { margin: 0; font-size: calc(4.35cqw * var(--reduction)); line-height: 1.22; font-weight: 500; text-align: left; hyphens: auto; color: #2f2819; }

.carte-pied {
  display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  padding: 1.4cqw 5cqw 2.4cqw;
  font-family: var(--serif-titre);
  font-size: 2.8cqw;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a6a4a;
}

.carte-pied > span { white-space: nowrap; }
/* Gamme : son initiale (P, A, É, L, M, O) dans un petit rond, entre l'époque et le numéro. */
.carte-pied .carte-gamme {
  flex: none; width: 4.2cqw; height: 4.2cqw; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: .25cqw solid currentColor; border-radius: 50%;
  font-size: 2.6cqw; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.carte-pied .carte-gamme:empty { display: none; }
/* Rond de la gamme + symbole de religion éventuel, groupés au centre du pied. */
.carte-pied > .carte-signes { flex: none; display: inline-flex; align-items: center; gap: 1.2cqw; }
.carte-religion { display: inline-flex; }
/* Famille : petit rond plein de la couleur du pied, emblème couleur parchemin. */
.carte-famille {
  --fond-embleme: #7a6a4a;
  width: 4.2cqw; height: 4.2cqw; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: currentColor;
}
.carte-famille svg { width: 72%; height: 72%; color: var(--parchemin); }
.carte-religion svg { width: 4.2cqw; height: 4.2cqw; fill: currentColor; }
.carte-religion .trait { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }

/* Raretés : couleurs de cadre, filet, gemme */
.rarete-ordinaire {
  --cadre: linear-gradient(150deg, #a59c8b, #6e6758 45%, #9a917f 70%, #5d574a);
  --filet: #9b8e72; --gemme: #8a8170; --encre-bandeau: #5a5240;
}
.rarete-notable {
  --cadre: linear-gradient(150deg, #edc699, #8f5d2e 40%, #d9a26b 65%, #6a4120);
  --filet: #a87443; --gemme: #c9793a; --encre-bandeau: #5e3a17;
}
.rarete-rare {
  --cadre: linear-gradient(150deg, #e3eaf2, #8798ad 40%, #cdd7e3 65%, #627389);
  --filet: #7d8ea4; --gemme: #4f7fbf; --encre-bandeau: #34506f;
}
.rarete-epique {
  --cadre: linear-gradient(150deg, #a57ccc, #4f2c74 40%, #8b62b5 65%, #3a1f58);
  --filet: #8a69a8; --gemme: #a25ee0; --encre-bandeau: #4e2a72;
}
.rarete-legendaire {
  --cadre: linear-gradient(150deg, #fff1b8, #c99a3b 30%, #f7da84 52%, #9c6f22 78%, #e8c46a);
  --filet: #b8913f; --gemme: #e8a92c; --encre-bandeau: #7a5410;
}
.rarete-mythique {
  --cadre: linear-gradient(150deg, #ff6fd8, #7c3bd4 28%, #43e0e0 52%, #ffd36e 78%, #ff6fd8);
  --filet: #c86ad0; --gemme: #ff5fb0; --encre-bandeau: #561a66;
}

/* Reflet animé (légendaires et mythiques) : une bande lumineuse, trois fois
   plus large que la carte, glisse de gauche à droite. Pas de mix-blend-mode
   ni d'animation du fond : beaucoup de téléphones ne les affichent pas sur
   les cartes en 3D ; un simple déplacement (transform) marche partout. */
.rarete-legendaire .carte-cadre::after,
.rarete-mythique .carte-cadre::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 300%;
  animation: reflet 4.5s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
.rarete-legendaire .carte-cadre::after {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 248, 215, .32) 47%, rgba(255, 225, 150, .14) 51%, transparent 57%);
}
@keyframes reflet { 0% { transform: translateX(-64%); } 60%, 100% { transform: translateX(-3%); } }

/* Lueur discrète sur les épiques */
.rarete-epique .carte-cadre { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8), 0 0 18px rgba(162, 94, 224, .25), inset 0 0 0 .6cqw rgba(255, 255, 255, .2); }

/* Mythique : le palier ultime, éclat iridescent animé et forte lueur */
.rarete-mythique .carte-cadre {
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .85), 0 0 26px rgba(255, 95, 176, .45), inset 0 0 0 .6cqw rgba(255, 255, 255, .28);
}
.rarete-mythique .carte-cadre::after {
  background: linear-gradient(115deg, transparent 37%, rgba(255, 170, 235, .26) 43%, rgba(130, 235, 235, .22) 48%, rgba(255, 220, 140, .22) 53%, transparent 59%);
  animation-duration: 3.2s;
}

/* ---------- Finitions : Diamant et Animée (par-dessus la rareté, voir carte.js) ---------- */

/* Sceau commun : petite pastille dans le coin haut droit, à cheval sur le cadre. */
.finition-sceau {
  position: absolute; top: -1.6cqw; right: -1.6cqw; z-index: 3;
  width: 10cqw; height: 10cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.finition-sceau svg { width: 62%; height: 62%; overflow: visible; }

/* Diamant : la carte de rareté reste intacte, le diamant s'ajoute par-dessus. */

/* Halo glacé qui respire derrière la carte. */
.diamant-halo {
  position: absolute; inset: -5cqw; z-index: -1; border-radius: 8cqw;
  background: radial-gradient(closest-side, rgba(215, 240, 255, .95), rgba(150, 210, 255, .55) 62%, transparent);
  animation: respirer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes respirer { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }

/* Sertissage : une rangée de petits diamants ronds tout autour du parchemin. */
.diamant-anneau {
  position: absolute; inset: 1.75cqw; z-index: 1;
  padding: 2cqw; border-radius: 3.3cqw; overflow: hidden;
  background:
    radial-gradient(circle at 36% 32%, #ffffff 0 12%, #e6f4ff 22%, #9cc9f2 42%, #3d6ea8 60%, #dff0ff 68%, transparent 71%) 0 0 / 2cqw 2cqw,
    linear-gradient(135deg, #f4f8fc, #a9b6c6 40%, #eef3f8 60%, #8e9cad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .9);
  pointer-events: none;
}
/* Feu du diamant : un éclat arc-en-ciel qui court tout autour de l'anneau. */
.diamant-feu {
  position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 110, 200, .6) 44%, rgba(255, 240, 140, .65) 46%, rgba(255, 255, 255, .9) 48%, rgba(120, 255, 210, .65) 50%, rgba(110, 180, 255, .65) 52%, transparent 56%);
  animation: reflet 2.6s ease-in-out infinite;
}

/* Reflet holographique arc-en-ciel sur toute la carte (remplace celui des légendaires / mythiques). */
.finition-diamant .carte-cadre::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 300%;
  background: linear-gradient(115deg, transparent 37%, rgba(255, 120, 200, .2) 41%, rgba(255, 235, 140, .24) 43.5%, rgba(140, 255, 200, .24) 46%, rgba(255, 255, 255, .55) 48%, rgba(120, 190, 255, .26) 50%, rgba(190, 140, 255, .22) 52.5%, transparent 57%);
  animation: reflet 3.4s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

/* Paillettes qui scintillent sur l'illustration. */
.diamant-paillettes {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 .25cqw, transparent .55cqw) 1.3cqw 2.1cqw / 13.7cqw 11.3cqw,
    radial-gradient(circle, rgba(205, 238, 255, .9) 0 .2cqw, transparent .5cqw) 7.9cqw 6.4cqw / 17.3cqw 13.9cqw,
    radial-gradient(circle, rgba(255, 220, 245, .85) 0 .18cqw, transparent .45cqw) 4.6cqw 9.8cqw / 11.1cqw 15.7cqw;
  animation: paillettes 1.9s ease-in-out infinite alternate;
}
@keyframes paillettes { from { opacity: .15; } to { opacity: .75; } }

/* Étincelles : étoiles à quatre branches qui s'allument un peu partout. */
.eclat {
  position: absolute; z-index: 3; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw;
  background: radial-gradient(circle, #fff 0 16%, rgba(215, 240, 255, .95) 28%, rgba(160, 215, 255, 0) 68%);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  transform: scale(0);
  animation: scintiller 2.6s ease-in-out infinite;
  pointer-events: none;
}
.eclat:nth-of-type(1)  { top: 2.5%;  left: 4%;    animation-delay: 0s; }
.eclat:nth-of-type(2)  { top: 36%;   left: 97%;   animation-delay: .7s;  width: 5cqw;   height: 5cqw;   margin: -2.5cqw 0 0 -2.5cqw; }
.eclat:nth-of-type(3)  { top: 97.5%; left: 28%;   animation-delay: 1.4s; }
.eclat:nth-of-type(4)  { top: 68%;   left: 3%;    animation-delay: 2s;   width: 5cqw;   height: 5cqw;   margin: -2.5cqw 0 0 -2.5cqw; }
.eclat:nth-of-type(5)  { top: 2%;    left: 70%;   animation-delay: 1s;   width: 6cqw;   height: 6cqw;   margin: -3cqw 0 0 -3cqw; }
.eclat:nth-of-type(6)  { top: 22%;   left: 24%;   animation-delay: .4s;  width: 5.5cqw; height: 5.5cqw; margin: -2.75cqw 0 0 -2.75cqw; }
.eclat:nth-of-type(7)  { top: 31%;   left: 78%;   animation-delay: 1.8s; width: 4.5cqw; height: 4.5cqw; margin: -2.25cqw 0 0 -2.25cqw; }
.eclat:nth-of-type(8)  { top: 97%;   left: 82%;   animation-delay: .2s;  width: 6cqw;   height: 6cqw;   margin: -3cqw 0 0 -3cqw; }
.eclat:nth-of-type(9)  { top: 14%;   left: 55%;   animation-delay: 2.3s; width: 4cqw;   height: 4cqw;   margin: -2cqw 0 0 -2cqw; }
.eclat:nth-of-type(10) { top: 52%;   left: 96.5%; animation-delay: 1.2s; width: 4cqw;   height: 4cqw;   margin: -2cqw 0 0 -2cqw; }
@keyframes scintiller { 0%, 50%, 100% { transform: scale(0) rotate(0deg); } 66% { transform: scale(1) rotate(45deg); } 82% { transform: scale(.35) rotate(80deg); } }

/* Nom gravé façon cristal, illustration sertie de glace. */
.finition-diamant .carte-nom {
  background: linear-gradient(180deg, #0f2140 0%, #2f5f95 45%, #0f2140 55%, #3b6ea6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.finition-diamant .carte-illus { box-shadow: 0 0 0 .5cqw #e8f6ff, 0 0 0 1.1cqw rgba(120, 180, 240, .55), 0 0 3cqw rgba(170, 225, 255, .7); }

.finition-diamant .finition-sceau {
  width: 12cqw; height: 12cqw; top: -2.4cqw; right: -2.4cqw;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d9efff 45%, #7fb0de);
  box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .9), 0 0 4cqw rgba(170, 225, 255, 1), 0 1cqw 2cqw rgba(0, 0, 0, .45);
  animation: pulser 2.4s ease-in-out infinite;
}
.finition-diamant .sceau-fond { fill: #e9f6ff; stroke: #2f5f95; stroke-width: 1.2; stroke-linejoin: round; }
.finition-diamant .sceau-trait { fill: none; stroke: #2f5f95; stroke-width: 1; stroke-linejoin: round; }

/* Émeraude : petites émeraudes serties dans une monture d'or, reflet vert, sceau taillé. */
/* Halo vert profond qui respire derrière la carte. */
.emeraude-halo {
  position: absolute; inset: -4cqw; z-index: -1; border-radius: 8cqw;
  background: radial-gradient(closest-side, rgba(90, 230, 160, .75), rgba(20, 150, 95, .4) 62%, transparent);
  animation: respirer 3.6s ease-in-out infinite;
  pointer-events: none;
}
/* Sertissage : une rangée d'émeraudes rondes sur un fil d'or, tout autour du parchemin. */
.emeraude-anneau {
  position: absolute; inset: 1.75cqw; z-index: 1;
  padding: 2cqw; border-radius: 3.3cqw; overflow: hidden;
  background:
    radial-gradient(circle at 36% 32%, #f2fff8 0 10%, #8ff2c0 22%, #19b071 42%, #075a36 62%, #b9f7d7 68%, transparent 71%) 0 0 / 2cqw 2cqw,
    linear-gradient(135deg, #f7e3a4, #a57a2c 40%, #f2d78c 60%, #7c5a22);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow: inset 0 0 0 .25cqw rgba(255, 240, 200, .85);
  pointer-events: none;
}
/* Éclat vert qui court tout autour de l'anneau. */
.emeraude-reflet {
  position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(115deg, transparent 42%, rgba(160, 255, 205, .6) 46%, rgba(255, 255, 255, .85) 48%, rgba(80, 230, 150, .6) 50%, transparent 54%);
  animation: reflet 3.2s ease-in-out infinite;
}
/* Reflet vert sur toute la carte (remplace celui des légendaires / mythiques). */
.finition-emeraude .carte-cadre::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 300%;
  background: linear-gradient(115deg, transparent 38%, rgba(90, 230, 160, .18) 43%, rgba(230, 255, 240, .45) 48%, rgba(40, 190, 120, .2) 53%, transparent 58%);
  animation: reflet 4s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
/* Lueurs vertes qui scintillent doucement sur l'illustration. */
.emeraude-lueurs {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(220, 255, 235, .9) 0 .22cqw, transparent .5cqw) 2.1cqw 3.3cqw / 15.1cqw 12.7cqw,
    radial-gradient(circle, rgba(120, 240, 180, .85) 0 .2cqw, transparent .48cqw) 9.4cqw 7.2cqw / 19.3cqw 14.9cqw;
  animation: paillettes 2.4s ease-in-out infinite alternate;
}
.finition-emeraude .carte-nom {
  background: linear-gradient(180deg, #06331f 0%, #137a4c 45%, #06331f 55%, #1c8f5b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.finition-emeraude .carte-illus { box-shadow: 0 0 0 .5cqw #e9d08a, 0 0 0 1.1cqw rgba(30, 170, 105, .6), 0 0 3cqw rgba(80, 230, 160, .55); }
.finition-emeraude .finition-sceau {
  width: 11cqw; height: 11cqw; top: -2cqw; right: -2cqw;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #e2b85a 50%, #8a6420);
  box-shadow: 0 0 0 .5cqw rgba(255, 238, 200, .9), 0 0 3.5cqw rgba(70, 220, 150, .9), 0 1cqw 2cqw rgba(0, 0, 0, .45);
  animation: pulser 2.4s ease-in-out infinite;
}
.finition-emeraude .sceau-fond { fill: #1fae6c; stroke: #064a2c; stroke-width: 1.1; stroke-linejoin: round; }
.finition-emeraude .sceau-trait { fill: none; stroke: #c9ffe2; stroke-width: .7; stroke-linejoin: round; opacity: .85; }
@keyframes pulser { 50% { transform: scale(1.12); } }

/* ---------- Collection ---------- */

.collection-entete { text-align: center; max-width: 520px; margin: 0 auto 34px; }
.collection-entete h1 { font-family: var(--serif-titre); font-weight: 600; letter-spacing: .14em; font-size: clamp(26px, 5vw, 36px); margin: 0; color: var(--or-clair); }
.collection-entete p { margin: 4px 0 0; font-style: italic; color: var(--texte-doux); }
.progression { margin-top: 18px; height: 6px; border-radius: 999px; background: var(--encre-3); overflow: hidden; }
#barre-progression { height: 100%; background: linear-gradient(90deg, var(--or-sombre), var(--or-clair)); transition: width .6s ease; }
.texte-progression { font-size: 15px; }

.grille-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(40vw, 170px), 1fr));
  gap: clamp(12px, 2vw, 22px);
  max-width: 1200px;
  margin: 0 auto;
}
.case-collection { position: relative; padding: 0; border: 0; background: none; text-align: inherit; transition: transform .2s; }
button.case-collection:hover { transform: translateY(-4px); }

.exemplaires {
  position: absolute; bottom: -6px; right: -6px;
  font-family: var(--serif-titre); font-size: 12px; font-weight: 700;
  background: var(--encre); color: var(--or-clair);
  border: 1px solid var(--or);
  padding: 3px 8px; border-radius: 999px;
}

.manquante {
  position: relative; overflow: hidden;
  aspect-ratio: 63 / 88;
  border-radius: 10px;
  background: linear-gradient(165deg, #1c2138, #11142a);
  box-shadow: inset 0 0 0 1px rgba(212, 178, 106, .16);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  padding-bottom: 16%;
  font-family: var(--serif-titre);
  color: rgba(212, 178, 106, .45);
  font-size: 13px;
  letter-spacing: .1em;
}
/* L'étoile du jeu en filigrane, et un trait de la couleur de la rareté en bas. */
.manquante::before {
  content: ""; position: absolute; inset: 18% 22% 42%;
  background: url(images/logo-etoile.webp) center / contain no-repeat;
  opacity: .1; filter: grayscale(1);
}
.manquante::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 8%; height: 3px; border-radius: 2px;
  background: var(--gemme, rgba(212, 178, 106, .4)); opacity: .7;
}
.manquante-rarete { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; }

/* Téléphone : 4 cartes par ligne (on touche une carte pour l'agrandir). */
@media (max-width: 640px) {
  .grille-collection { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .manquante { border-radius: 6px; gap: 3px; container-type: inline-size; }
  .manquante span { font-size: 13cqw; letter-spacing: .02em; }
  .manquante .manquante-rarete { font-size: 9.5cqw; letter-spacing: .04em; }
  .exemplaires { bottom: -4px; right: -4px; font-size: 10px; padding: 1px 5px; }
  button.case-collection:hover { transform: none; }
}

/* ---------- Modale ---------- */

.modale {
  position: fixed; inset: 0; z-index: 35;   /* au-dessus de l'engrenage des Paramètres (30), sous les fenêtres (40) */
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(6, 8, 16, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s;
  perspective: 1200px;
}
.modale.ouverte { opacity: 1; }
/* touch-action: none : sur téléphone, glisser le doigt sur la carte la penche au lieu de faire défiler la page. */
.modale-contenu { width: min(86vw, 400px, calc((100vh - 150px) * 63 / 88)); transition: transform .15s ease-out; touch-action: none; }
.modale.ouverte .modale-contenu { animation: zoom .3s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes zoom { from { transform: scale(.8); } }
.modale-fermer {
  position: absolute; top: 14px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(212, 178, 106, .4);
  background: var(--encre-2); color: var(--or-clair);
  font-size: 24px; line-height: 1;
}

/* ---------- Partage : affiche photographiée hors de l'écran (voir partage.js) ---------- */

.coulisse-partage { position: fixed; left: -10000px; top: 0; pointer-events: none; }
.affiche-partage {
  width: 540px; height: 675px;            /* ×2 à l'export = 1080×1350, format portrait des réseaux */
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--gemme, #d4b26a) 38%, transparent), transparent 58%),
    linear-gradient(170deg, #1d2342, #0b0d18);
  color: var(--texte);
  text-align: center;
}
.affiche-partage > p { margin: 0; white-space: nowrap; }
.affiche-titre { font-family: var(--serif-titre); font-weight: 700; font-size: 30px; letter-spacing: .16em; color: var(--or-clair); }
.affiche-sous { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--texte-doux); margin-bottom: 6px !important; }
.affiche-carte { width: 360px; }
/* Sur l'image, pas de lueur colorée ni de reflet : figés, ils bavent sur les côtés et tachent la carte. */
.affiche-carte .carte-cadre { box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .75), inset 0 0 0 .6cqw rgba(255, 255, 255, .25), inset 0 0 0 1.2cqw rgba(0, 0, 0, .15); }
.affiche-carte .carte-cadre::after { display: none; }
.affiche-pied { margin-top: 10px !important; font-family: var(--serif-titre); font-size: 17px; letter-spacing: .12em; color: var(--or); }

/* Boutons Partager : icône (flèche qui sort d'une boîte) + texte */
.bouton-partage { display: inline-flex; align-items: center; gap: 9px; }
.icone-partage { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-top: -2px; }

/* Boutons sous la carte agrandie (Partager ; sur iPhone : Pencher avec le téléphone) */
/* Versions possédées (Normale / Animée / Diamant), juste au-dessus des boutons du bas. */
.modale-versions {
  position: absolute; left: 0; right: 0; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 52px);
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 12px;
}
.modale-versions .version {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font-family: var(--serif-titre); font-size: 12px; letter-spacing: .06em;
  color: var(--texte-doux); background: rgba(255, 255, 255, .06); border: 1px solid rgba(212, 178, 106, .35);
}
.modale-versions .version.actif { color: var(--encre); background: var(--or-clair); border-color: var(--or-clair); }
.modale-versions .version[data-finition="emeraude"]:not(.actif) { color: #a9f5cf; border-color: rgba(70, 220, 150, .6); }
.modale-versions .version[data-finition="emeraude"].actif { background: linear-gradient(135deg, #c9ffe2, #3fd08c 50%, #138a55); border-color: #c9ffe2; color: #05301d; }
.modale-versions .version[data-finition="diamant"]:not(.actif) { color: #cfe9ff; border-color: rgba(170, 220, 255, .6); }
.modale-versions .version[data-finition="diamant"].actif { background: linear-gradient(135deg, #ffffff, #cfe9ff 50%, #9cc9f2); border-color: #e8f6ff; color: #12294a; }

.modale-actions {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 12px;
}
.modale-actions .bouton { white-space: nowrap; padding: 10px 14px; font-size: 12px; letter-spacing: .04em; gap: 7px; }
.activer-gyroscope {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 16px;
  padding: 9px 13px; font-size: 11px; letter-spacing: .04em; gap: 7px; white-space: nowrap;
}

/* « En savoir plus » : panneau de parchemin qui monte du bas, par-dessus la carte */
.savoir-plus {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: min(100%, 560px); max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 26px clamp(20px, 5vw, 34px) max(28px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(180deg, var(--parchemin), var(--parchemin-2));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(140, 105, 45, .45);
  color: #2f2819;
  text-align: start;
  transform: translateX(-50%);
  animation: monter .32s cubic-bezier(.2, .8, .3, 1);
}
@keyframes monter { from { transform: translate(-50%, 100%); } }
.savoir-plus-sur {
  margin: 0; font-family: var(--serif-titre); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: #8a6a2c;
}
.savoir-plus-nom { margin: 4px 40px 12px 0; font-family: var(--serif-titre); font-weight: 700; font-size: clamp(20px, 5vw, 24px); color: #231d12; }
.savoir-plus-texte { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 500; hyphens: auto; }
/* Hébreu : la croix passe à gauche, le nom (en anglais) s'aligne à droite comme le texte. */
html[dir="rtl"] .savoir-plus-fermer { right: auto; left: 14px; }
html[dir="rtl"] .savoir-plus-nom { margin: 4px 0 12px 40px; text-align: right; }
html[dir="rtl"] .savoir-plus-sur { font-size: 13px; }
.savoir-plus-fermer {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(140, 105, 45, .45); background: rgba(255, 255, 255, .35);
  color: #5d4f36; font-size: 22px; line-height: 1;
}

/* ---------- Divers ---------- */

.notification {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;   /* visible aussi par-dessus la carte agrandie et les fenêtres */
  transform: translate(-50%, 30px);
  opacity: 0;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--encre-2);
  border: 1px solid var(--or);
  color: var(--or-clair);
  font-size: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.notification.visible { opacity: 1; transform: translate(-50%, 0); }

.pied { text-align: center; padding: 24px 16px 32px; color: var(--texte-doux); font-size: 14px; font-style: italic; }
.pied p { margin: 0 0 6px; }
.pied .pied-geo { max-width: 60ch; margin: 0 auto 6px; font-size: 12px; opacity: .8; }
.lien { border: 0; background: none; color: var(--texte-doux); text-decoration: underline; font-size: 13px; padding: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Même chose quand le joueur coche « Animations réduites » dans les Paramètres. */
html.animations-reduites *, html.animations-reduites *::before, html.animations-reduites *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

/* ---------- Écran d'ouverture animé (environ 2,5 s) ----------
   Il prend le relais de l'écran fixe du téléphone (même fond bleu nuit).
   1. Attente : la rose des vents respire doucement, « Touchez pour jouer »
      (les navigateurs n'autorisent le son qu'après un appui).
   2. Au toucher (classe intro-lancee sur <html>, mise par app.js) : fanfare
      (sons.js), la rose arrive en tournant, une onde de lumière, le nom
      apparaît, un reflet passe, puis tout s'efface.
   Sons coupés : intro-lancee est mise dès le chargement, pas d'attente. */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(ellipse at 50% 42%, #232a4d 0%, #101320 68%);
  cursor: pointer;
}
.intro-lancee .intro { animation: intro-sortie .55s 2.5s ease-in forwards; }
.sans-intro .intro { display: none; }
.intro-lancee .intro.fini { animation: intro-sortie .3s ease-in forwards; }
.intro-etoile { position: relative; width: min(40vw, 170px); aspect-ratio: 1; }
.intro-etoile img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.intro-lancee .intro-etoile img { animation: intro-etoile 1.35s cubic-bezier(.2, .8, .2, 1) both; }
/* Lueur dorée derrière l'étoile */
.intro-etoile::before {
  content: ""; position: absolute; inset: -40%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 130, .55), rgba(255, 190, 90, .12) 60%, transparent);
}
.intro-lancee .intro-etoile::before { animation: intro-halo 1.7s .45s ease-out both; }
/* Onde de lumière qui part de l'étoile */
.intro-etoile::after {
  content: ""; position: absolute; inset: 2%; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(241, 220, 159, .85);
}
.intro-lancee .intro-etoile::after { animation: intro-onde 1.1s .95s ease-out both; }
.intro-titre { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.intro-titre span {
  font-family: "Cinzel", "Times New Roman", serif; line-height: 1.05; white-space: nowrap; opacity: 0;
  background:
    linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #fff6d0 0%, #f3d688 30%, #c79434 52%, #f6dd94 70%, #a8762a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #4a330e) drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
.intro-chrono { font-weight: 700; font-size: 15px; letter-spacing: .55em; margin-inline-start: .55em; }
.intro-lancee .intro-chrono { animation: intro-texte .6s .9s ease-out both; }
.intro-legends { font-weight: 900; font-size: clamp(34px, 11vw, 52px); letter-spacing: .06em; }
.intro-lancee .intro-legends { animation: intro-texte .7s 1.05s cubic-bezier(.2, .8, .2, 1) both, intro-reflet .9s 1.55s ease-in-out both; }
/* Attente : la rose respire, l'invitation clignote doucement en bas. */
.intro-invite {
  position: absolute; bottom: calc(14% + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center;
  font-family: "Cinzel", "Times New Roman", serif; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: #f1dc9f;
  animation: intro-invite 1.8s ease-in-out infinite;
}
html:not(.intro-lancee) .intro-etoile img { animation: intro-respire 2.6s ease-in-out infinite; }
.intro-lancee .intro-invite { animation: intro-sortie .25s ease-in forwards; }
@keyframes intro-respire {
  0%, 100% { opacity: .55; transform: scale(.94); filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: .9; transform: scale(1); filter: drop-shadow(0 0 22px rgba(255, 214, 130, .45)); }
}
@keyframes intro-invite { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes intro-etoile {
  from { opacity: 0; transform: scale(.35) rotate(-140deg); filter: brightness(2.2) blur(3px); }
  65% { opacity: 1; transform: scale(1.07) rotate(8deg); filter: brightness(1.35) blur(0); }
  to { opacity: 1; transform: none; filter: brightness(1); }
}
@keyframes intro-halo { from { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } to { opacity: .45; transform: scale(1); } }
@keyframes intro-onde { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(2.3); } }
@keyframes intro-texte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-reflet { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
@keyframes intro-sortie { to { opacity: 0; visibility: hidden; } }
/* Mouvements réduits (réglage du téléphone) : tout est affiché d'emblée, simple fondu. */
@media (prefers-reduced-motion: reduce) {
  .intro-lancee .intro { animation: intro-sortie .4s 1.6s ease-in forwards; }
  .intro *, .intro-etoile::before, .intro-etoile::after { animation: none !important; }
  .intro-titre span, .intro-etoile img { opacity: 1 !important; }
  .intro-lancee .intro-invite { opacity: 0; }
}

/* ---------- Icônes des onglets (visibles seulement dans la barre du bas, sur téléphone) ---------- */
.onglet { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.onglet-icone { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Téléphone : onglets en bas de l'écran, à portée du pouce ; en-tête plus compact ---------- */
@media (max-width: 640px) {
  .entete { padding-block: 10px; }
  .marque-sous { font-size: 13px; }
  .onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;   /* sous la carte agrandie (35) */
    justify-content: space-around; gap: 0;
    padding: 6px max(12px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    border-radius: 0; border: 0; border-top: 1px solid rgba(212, 178, 106, .25);
    background: rgba(13, 16, 30, .96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .onglet { flex: 1; max-width: 200px; flex-direction: column; gap: 3px; padding: 6px 4px; border-radius: 14px; font-size: 11px; letter-spacing: .06em; }
  .onglet.actif { background: rgba(212, 178, 106, .14); color: var(--or-clair); }
  .onglet-icone { display: block; }
  .onglet span { opacity: 1; }
  .onglet #compteur-collection { opacity: .7; font-size: 10px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .notification { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- Collection : Toutes / Obtenues / Manquantes ---------- */
.filtre-possession { margin: -14px auto 22px; }
.collection-vide { text-align: center; font-style: italic; color: var(--texte-doux); margin: 10px auto 40px; max-width: 34ch; }

/* ---------- Compte à rebours jusqu'au prochain booster gratuit ---------- */
.compte-a-rebours {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: -8px; padding: 14px 26px; border-radius: 16px;
  background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .3);
}
.car-libelle { font-family: var(--serif-titre); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-doux); }
.car-temps {
  font-family: var(--serif-titre); font-weight: 700; font-size: 34px; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; color: var(--or-clair);
  text-shadow: 0 0 18px rgba(212, 178, 106, .35);
}
.car-prevenir { margin-top: 8px; padding: 8px 16px; font-size: 12px; }
/* Téléphone : compte à rebours plus compact (libellé et temps sur une ligne), et la roue au milieu de l'écran
   (la zone occupe la hauteur libre entre l'en-tête et les onglets du bas, son contenu y est centré). */
@media (max-width: 640px) {
  .compte-a-rebours { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 10px; row-gap: 2px; padding: 8px 16px; border-radius: 12px; }
  .car-libelle { font-size: 10px; letter-spacing: .14em; }
  .car-temps { font-size: 20px; letter-spacing: .06em; }
  .car-prevenir { flex-basis: 100%; max-width: max-content; margin-top: 4px; padding: 6px 14px; font-size: 11px; }
  .zone-booster.mode-roue { gap: 14px; padding-top: 0; min-height: calc(100svh - 190px - env(safe-area-inset-bottom)); justify-content: flex-start; }
  /* Roue : compte à rebours, consigne et région en haut de l'écran ; la roue est poussée tout en bas, près du pouce */
  .zone-booster.mode-roue > .compte-a-rebours { order: -4; margin-top: 0; }
  .zone-booster.mode-roue > .consigne { order: -3; }
  .zone-booster.mode-roue > .region-joueur, .zone-booster.mode-roue > .verrou-region { order: -2; margin-top: -6px; }
  .zone-booster.mode-roue > .anti-robot { order: -1; }
  .zone-booster.mode-roue > .roue { margin-top: auto; margin-bottom: -40px; }   /* le bas du reflet passe sous les onglets */
}

/* ---------- 1er booster : un doigt fait le geste de découpe, en boucle ---------- */
@keyframes tuto-geste {
  0% { left: 6%; opacity: 0; transform: translateY(8px) scale(1.1); }
  15% { left: 8%; opacity: 1; transform: translateY(0) scale(1); }
  70% { left: 78%; opacity: 1; transform: translateY(0) scale(1); }
  85%, 100% { left: 82%; opacity: 0; transform: translateY(0) scale(1); }
}

/* ---------- Paramètres rangés en deux rubriques : Réglages / Infos ---------- */
.reglages-rubrique {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 4px;
  font-family: var(--serif-titre); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--or);
}
.reglages-rubrique::after { content: ""; flex: 1; height: 1px; background: rgba(212, 178, 106, .22); }
.reglages-titre + .reglages-rubrique { margin-top: 0; }
.panneau-reglages .lien-reglages { margin-top: 0; padding: 7px 0; border-top: 0; text-decoration: none; }
.panneau-reglages .lien-reglages::after { content: " ›"; color: var(--texte-doux); }
html[dir="rtl"] .panneau-reglages .lien-reglages::after { content: " ‹"; }
.panneau-reglages .lien-reglages:hover { text-decoration: underline; }
/* Sur un petit écran, le panneau peut dépasser : on le fait défiler. */
.panneau-reglages { max-height: calc(100vh - 90px); overflow-y: auto; }

/* ---------- Point rouge : nouvelles cartes dans la collection ---------- */
.onglet { position: relative; }
.point-nouveau {
  position: absolute; top: 5px; inset-inline-end: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff4d4d; box-shadow: 0 0 0 2px var(--encre-2), 0 0 8px rgba(255, 77, 77, .7);
  animation: point-battement 1.6s ease-in-out infinite;
}
.point-nouveau[hidden] { display: none; }
@keyframes point-battement { 50% { transform: scale(1.25); } }
@media (max-width: 640px) {
  .point-nouveau { top: 4px; inset-inline-end: calc(50% - 20px); box-shadow: 0 0 0 2px #0d101e, 0 0 8px rgba(255, 77, 77, .7); }
}
/* Étiquette « Nouvelle » dans la collection : plus petite que dans le booster. */
/* À gauche : le coin droit porte le médaillon de famille ou de finition. */
.case-collection .nouvelle { top: -6px; right: auto; left: -4px; font-size: 9px; padding: 3px 6px; animation-delay: .1s; }

/* ---------- Doublons : badge ×N bien visible, pour les futurs échanges ---------- */
.exemplaires {
  z-index: 2; background: linear-gradient(180deg, #e3c682, #b18d45); color: var(--encre);
  border-color: #f1dc9f; box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
}
.doublons-info { text-align: center; font-style: italic; color: var(--texte-doux); margin: -12px auto 18px; max-width: 40ch; }
@media (max-width: 640px) {
  /* 4 boutons de filtre : plus serrés pour tenir sur la largeur du téléphone. */
  .filtre-possession button { padding: 6px 9px; font-size: 10.5px; letter-spacing: .05em; }
}

/* ---------- Carte agrandie : précédente / suivante ---------- */
.modale-fleche {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 4px;
  border: 1px solid rgba(212, 178, 106, .4); background: var(--encre-2); color: var(--or-clair);
  font-size: 30px; line-height: 1;
}
.modale-fleche[hidden] { display: none; }
.modale-fleche.precedente { left: 16px; }
.modale-fleche.suivante { right: 16px; }
html[dir="rtl"] .modale-fleche.precedente { left: auto; right: 16px; transform: scaleX(-1); }
html[dir="rtl"] .modale-fleche.suivante { right: auto; left: 16px; transform: scaleX(-1); }
/* Sur téléphone, on glisse la carte : pas de flèches qui cachent les bords. */
@media (pointer: coarse) { .modale-fleche { display: none; } }
.modale-position {
  position: absolute; top: max(24px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0;
  font-family: var(--serif-titre); font-size: 12px; letter-spacing: .12em; color: var(--texte-doux);
}
.modale-contenu.arrivee-suivante > * { animation: arrivee-suivante .28s cubic-bezier(.2, .8, .3, 1); }
.modale-contenu.arrivee-precedente > * { animation: arrivee-precedente .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes arrivee-suivante { from { opacity: 0; transform: translateX(28%) rotate(4deg); } }
@keyframes arrivee-precedente { from { opacity: 0; transform: translateX(-28%) rotate(-4deg); } }
html[dir="rtl"] .modale-contenu.arrivee-suivante > * { animation-name: arrivee-precedente; }
html[dir="rtl"] .modale-contenu.arrivee-precedente > * { animation-name: arrivee-suivante; }

/* ---------- Grande révélation : Légendaire et Mythique en dernière carte (app.js) ----------
   Sobre et « cinéma » : de la lumière diffuse, peu d'éléments, des mouvements lents.
   La scène couvre l'écran, la pile de cartes passe par-dessus.
   --cx / --cy : centre de la carte ; --l / --h : sa largeur et sa hauteur.
   --c1 lumière principale, --c2 lumière secondaire, --c3 reflet. */
.revelation {
  --c1: #ffd77a; --c2: #f0a83a; --c3: #fff6dc;
  position: fixed; inset: 0; z-index: 31; overflow: hidden; cursor: pointer;
}
.revelation.mythique { --c1: #ff8ade; --c2: #8e5cf0; --c3: #f4fbff; }
.revelation[hidden] { display: none; }
body.en-revelation #tirage { z-index: 32; }
body.en-revelation #consigne-pile, body.en-revelation #actions-tirage { visibility: hidden; }

/* Fond : l'écran s'assombrit, une lueur très douce reste autour de la carte */
.rev-fond {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--cx) var(--cy), color-mix(in srgb, var(--c2) 14%, transparent), transparent 42%),
    radial-gradient(circle at var(--cx) var(--cy), rgba(6, 7, 14, .55), rgba(3, 4, 9, .96) 70%);
  animation: rev-fondu .8s ease-out both;
}
@keyframes rev-fondu { from { opacity: 0; } }

/* Aurore (Mythique seulement) : trois grandes lueurs floues qui ondulent lentement derrière la carte */
.rev-aurore { position: absolute; inset: 0; opacity: 0; filter: blur(48px); transition: opacity 1.2s ease-out; }
.revelation.mythique.explosion .rev-aurore { opacity: .85; }
.rev-aurore i {
  position: absolute; left: var(--cx); top: var(--cy); width: calc(var(--l) * 1.5); height: calc(var(--h) * 1.1);
  border-radius: 50%; translate: -50% -50%; mix-blend-mode: screen;
}
.rev-aurore i:nth-child(1) { background: #ff6fd0; animation: rev-aurore-1 7s ease-in-out infinite alternate; }
.rev-aurore i:nth-child(2) { background: #3fd6e6; animation: rev-aurore-2 8s ease-in-out infinite alternate; }
.rev-aurore i:nth-child(3) { background: #7d4cf0; animation: rev-aurore-3 9s ease-in-out infinite alternate; }
@keyframes rev-aurore-1 { from { transform: translate(-38%, -18%) scale(.9); } to { transform: translate(-8%, -30%) scale(1.15); } }
@keyframes rev-aurore-2 { from { transform: translate(34%, 12%) scale(1); } to { transform: translate(8%, 30%) scale(.85); } }
@keyframes rev-aurore-3 { from { transform: translate(0, 28%) scale(1.1); } to { transform: translate(-22%, -6%) scale(.9); } }

/* Colonne de lumière verticale derrière la carte */
.rev-colonne {
  position: absolute; left: var(--cx); top: 0; bottom: 0; width: calc(var(--l) * .9);
  translate: -50% 0; opacity: 0; scale: .3 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 30%, transparent) 30%,
    color-mix(in srgb, var(--c3) 55%, transparent) 50%, color-mix(in srgb, var(--c1) 30%, transparent) 70%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
          mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  filter: blur(14px);
  transition: opacity 1s ease-out, scale 1.2s cubic-bezier(.2, .8, .2, 1);
}
.revelation.explosion .rev-colonne { opacity: .75; scale: 1 1; }
.revelation.gloire .rev-colonne { animation: rev-respire 3.5s ease-in-out infinite alternate; }
@keyframes rev-respire { to { opacity: .45; } }

/* Halo diffus derrière la carte : naît pendant le suspense, puis respire */
.rev-halo {
  position: absolute; left: var(--cx); top: var(--cy); width: calc(var(--h) * 1.5); height: calc(var(--h) * 1.5);
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 55%, transparent), color-mix(in srgb, var(--c2) 18%, transparent) 55%, transparent);
  filter: blur(10px);
  animation: rev-halo-nait 1.2s ease-in both;
}
.revelation.mythique .rev-halo { animation-duration: 1.7s; }
.revelation.gloire .rev-halo { animation: rev-halo-respire 3s ease-in-out infinite alternate; }
@keyframes rev-halo-nait { from { opacity: 0; scale: .5; } to { opacity: .8; scale: 1; } }
@keyframes rev-halo-respire { from { opacity: .8; scale: 1; } to { opacity: .55; scale: 1.08; } }

/* Anneau fin qui s'étend au moment de la révélation */
.rev-anneau {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--h); height: var(--h);
  translate: -50% -50%; border-radius: 50%; opacity: 0;
  border: 1.5px solid color-mix(in srgb, var(--c3) 90%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 60%, transparent);
}
.revelation.explosion .rev-anneau { animation: rev-anneau 1.3s cubic-bezier(.15, .7, .25, 1) both; }
@keyframes rev-anneau { from { scale: .6; opacity: .9; } to { scale: 3.2; opacity: 0; } }

/* Reflet horizontal « de cinéma » qui traverse tout l'écran (irisé pour la Mythique) */
.rev-flare {
  position: absolute; left: 50%; top: var(--cy); width: 160vw; height: 3px; translate: -50% -50%;
  opacity: 0; scale: 0 1; border-radius: 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 70%, transparent) 30%, #fff 50%,
    color-mix(in srgb, var(--c1) 70%, transparent) 70%, transparent);
  box-shadow: 0 0 22px 6px color-mix(in srgb, var(--c1) 45%, transparent);
}
.revelation.mythique .rev-flare {
  background: linear-gradient(90deg, transparent, #7d4cf0aa 20%, #ff8ade 38%, #fff 50%, #9be9f0 62%, #7d4cf0aa 80%, transparent);
  box-shadow: 0 0 24px 6px rgba(255, 138, 222, .45);
}
.revelation.explosion .rev-flare { animation: rev-flare 1.1s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rev-flare { 0% { opacity: 0; scale: 0 1; } 12% { opacity: 1; } 45% { opacity: .9; scale: 1 1; } 100% { opacity: 0; scale: 1.1 .4; } }

/* Flash : bref et doux, teinté de la couleur de la carte */
.rev-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--cx) var(--cy), #fff 0%, color-mix(in srgb, var(--c3) 85%, transparent) 30%, color-mix(in srgb, var(--c1) 30%, transparent) 70%);
}
.revelation.explosion .rev-flash { animation: rev-flash .55s ease-out both; }
@keyframes rev-flash { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }

/* Particules de lumière qui convergent vers la carte (suspense) */
.rev-particule {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  border-radius: 50%; background: var(--c); box-shadow: 0 0 6px 1px var(--c); opacity: 0;
  animation: rev-converge var(--duree) var(--d) cubic-bezier(.55, 0, .85, .35) forwards;
}
@keyframes rev-converge { 0% { translate: var(--x) var(--y); opacity: 0; } 25% { opacity: .9; } 100% { translate: 0 0; opacity: 0; scale: .4; } }

/* Poussières lumineuses qui montent lentement (gloire) */
.rev-poussiere {
  position: absolute; left: calc(var(--cx) + var(--x) * var(--l)); top: calc(var(--cy) + var(--y) * var(--h));
  width: var(--t); height: var(--t); border-radius: 50%; background: var(--c);
  box-shadow: 0 0 6px var(--c); filter: blur(var(--flou)); opacity: 0;
  animation: rev-monte var(--duree) var(--d) ease-in-out infinite;
}
@keyframes rev-monte { 0% { translate: 0 0; opacity: 0; } 20% { opacity: .85; } 100% { translate: var(--derive) calc(var(--h) * -.8); opacity: 0; } }

/* Titre : lettres fines et très espacées entre deux filets, qui apparaissent du flou au net */
.rev-texte {
  position: absolute; left: 0; right: 0; top: calc(var(--cy) + var(--h) / 2 + 22px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; pointer-events: none;
}
.rev-titre {
  margin: 0; display: flex; align-items: center; gap: 14px;
  font-family: "Cinzel", "Times New Roman", serif; font-weight: 600; font-size: clamp(20px, 6vw, 30px); letter-spacing: .38em; line-height: 1;
  opacity: 0;
}
.rev-titre::before, .rev-titre::after {
  content: ""; width: clamp(28px, 10vw, 60px); height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--c1));
}
.rev-titre::after { transform: scaleX(-1); }
.rev-titre span {
  margin-inline-end: -.38em;   /* l'espacement après la dernière lettre décentrerait le mot */
  background: linear-gradient(180deg, #fffaf0 0%, #f6dc96 45%, #c8973e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c1) 55%, transparent));
}
.revelation.mythique .rev-titre span {
  background: linear-gradient(100deg, #ffffff 0%, #ffd0f1 25%, #c9e9ff 50%, #e6d4ff 75%, #ffffff 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rev-nacre 5s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(40, 10, 60, .8)) drop-shadow(0 0 16px rgba(255, 138, 222, .75));
}
@keyframes rev-nacre { to { background-position: 300% 0; } }
.revelation.gloire .rev-titre { animation: rev-titre 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes rev-titre { from { opacity: 0; letter-spacing: .7em; filter: blur(8px); } to { opacity: 1; letter-spacing: .38em; filter: blur(0); } }
.rev-nom {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; letter-spacing: .04em; color: rgba(240, 232, 214, .85);
  opacity: 0;
}
.revelation.gloire .rev-nom { animation: rev-nom .8s .45s ease-out forwards; }
@keyframes rev-nom { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* La carte pendant le suspense : elle s'élève, vibre à peine, son liseré s'illumine */
.tirage.pile .emplacement.suspense { animation: rev-eleve 1.15s cubic-bezier(.4, 0, .6, 1) both; z-index: 10 !important; }
.tirage.pile .emplacement.suspense-mythique { animation-duration: 1.7s; }
.tirage.pile .emplacement.suspense .face-dos .dos { animation: rev-liseré 1.15s ease-in both; }
.tirage.pile .emplacement.suspense-mythique .face-dos .dos { animation: rev-liseré-mythique 1.7s ease-in both; }
@keyframes rev-eleve {
  0% { translate: 0 0; scale: 1; }
  40% { translate: 0 -4px; }
  55% { translate: -1px -6px; } 62% { translate: 1px -6px; } 69% { translate: -1.5px -7px; } 76% { translate: 1.5px -7px; }
  83% { translate: -2px -8px; } 90% { translate: 2px -8px; } 96% { translate: -1px -8px; }
  100% { translate: 0 -8px; scale: 1.04; }
}
@keyframes rev-liseré {
  from { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 0 0 1px rgba(255, 215, 122, .4), 0 0 0 0 transparent; }
  to { box-shadow: 0 0 0 1px rgba(255, 246, 220, .9) inset, 0 0 0 1.5px #fff6dc, 0 0 36px 4px rgba(255, 215, 122, .8); }
}
@keyframes rev-liseré-mythique {
  0% { box-shadow: 0 0 0 1px rgba(212, 178, 106, .5) inset, 0 0 0 1px rgba(255, 138, 222, .4), 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 1px rgba(201, 166, 255, .8) inset, 0 0 0 1.5px #c9a6ff, 0 0 24px 2px rgba(155, 233, 240, .6); }
  to { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset, 0 0 0 1.5px #ffffff, 0 0 40px 6px rgba(255, 138, 222, .85); }
}
/* La carte révélée : elle grandit doucement, et un reflet balaie sa surface une fois */
.tirage.pile .emplacement.apotheose { animation: rev-carte 1.1s cubic-bezier(.2, .8, .2, 1) both; z-index: 10 !important; }
@keyframes rev-carte { 0% { translate: 0 -8px; scale: 1.04; } 35% { scale: 1.12; } 100% { translate: 0 -4px; scale: 1.08; } }
.tirage.pile .emplacement.apotheose .face-avant::after {
  content: ""; position: absolute; inset: 0; border-radius: 4.5cqw; pointer-events: none; overflow: hidden;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 54%, transparent 62%) -120% 0 / 250% 100% no-repeat;
  animation: rev-balayage 1.2s .35s ease-in-out both;
}
@keyframes rev-balayage { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* Fin : la scène s'efface doucement */
.revelation.fin { animation: rev-sortie .5s ease-in forwards; }
@keyframes rev-sortie { to { opacity: 0; } }

/* ---------- Émeraude / Diamant : une comète de lumière fait le tour de la carte à la révélation ----------
   Un liseré en dégradé conique (tête brillante + traînée qui s'estompe) dont l'angle tourne
   (--angle animé grâce à @property). Le masque ne garde que le bord : le centre de la carte reste net.
   Ajoutée par app.js (reveler) sur l'emplacement, au-dessus de la carte, puis retirée. */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.serpent-lumiere {
  --angle: 0deg; --epaisseur: 4px;
  /* Juste à l'extérieur du bord de la carte, sur le fond sombre : bien visible sans couvrir la carte */
  position: absolute; inset: calc(var(--epaisseur) * -1 + .5px); z-index: 3; pointer-events: none;
  border-radius: calc(4.5cqw + var(--epaisseur)); padding: var(--epaisseur);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  animation: serpent-tour 1.25s .55s cubic-bezier(.45, .05, .4, 1) forwards, serpent-fin .9s 1.8s ease-out forwards;
}
.serpent-lumiere.emeraude {
  background: conic-gradient(from var(--angle), transparent 0deg 230deg, rgba(40, 210, 130, .2) 265deg,
    rgba(63, 227, 154, .85) 320deg, #b9ffdc 348deg, #ffffff 356deg, transparent 360deg);
  filter: drop-shadow(0 0 3px #7dffc0) drop-shadow(0 0 10px rgba(63, 227, 154, .9)) drop-shadow(0 0 22px rgba(63, 227, 154, .5));
}
.serpent-lumiere.diamant {
  background: conic-gradient(from var(--angle), transparent 0deg 225deg, rgba(150, 200, 255, .2) 260deg,
    rgba(200, 170, 255, .7) 300deg, rgba(160, 225, 255, .95) 332deg, #ffffff 355deg, transparent 360deg);
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(170, 220, 255, .95)) drop-shadow(0 0 24px rgba(160, 200, 255, .55));
}
/* Un tour complet, puis tout le contour s'allume un instant avant de s'éteindre */
@keyframes serpent-tour {
  0% { --angle: 0deg; opacity: 0; }
  8% { opacity: 1; }
  100% { --angle: 360deg; opacity: 1; }
}
@keyframes serpent-fin {
  0% { opacity: 1; background: var(--contour); }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
.serpent-lumiere.emeraude { --contour: linear-gradient(rgba(140, 255, 200, .85), rgba(63, 227, 154, .85)); }
.serpent-lumiere.diamant { --contour: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(170, 220, 255, .85), rgba(210, 190, 255, .85)); }

/* ---------- Inviter un ami ---------- */
.bouton-inviter { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 10px 14px; font-size: 13px; }
.panneau-reglages .bouton-installer { margin-top: 8px; }
.dialogue-inviter { width: min(100%, 420px); text-align: center; }
.inviter-message {
  margin: 12px 0 18px; padding: 12px 14px; border-radius: 12px; text-align: start;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(212, 178, 106, .2);
  color: var(--texte); line-height: 1.45; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}
.inviter-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bouton-whatsapp { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: #25d366; border-color: #25d366; color: #06301a; }
.bouton-whatsapp svg { width: 18px; height: 18px; fill: currentColor; }
.inviter-image { display: block; width: 100%; height: auto; margin: 12px 0 0; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }

/* ---------- Roue des boosters (à la Pokémon TCG Pocket ; app.js : construireRoue, animerRoue) ----------
   Un manège 3D : chaque paquet est tourné de 360/8 = 45° autour du centre, puis reculé de --r.
   La scène entière tourne (rotateY) ; elle est reculée de --r pour que le paquet de devant ait sa taille normale. */
.zone-booster:not(.mode-roue) .roue, .zone-booster.mode-roue #booster,
.zone-booster.mode-roue .retour-roue { display: none; }
.roue {
  --lp: min(50vw, 210px);   /* largeur d'un paquet de la roue */
  position: relative; width: calc(100% + 32px); max-width: 900px; margin: -6px -16px 0;
  height: calc(var(--lp) * 98 / 63 + 100px);
  overflow: hidden; perspective: 620px; perspective-origin: 50% 32%;
  /* Le doigt fait tourner la roue ou penche un paquet : la page ne doit pas défiler à la place. */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.roue:active { cursor: grabbing; }
/* Pas de surbrillance bleue d'Android quand le doigt touche ou penche un paquet (le contour clavier reste) */
.roue-scene {
  position: absolute; left: 50%; top: 18px; width: var(--lp); aspect-ratio: 63 / 98; margin-left: calc(var(--lp) / -2);
  transform-style: preserve-3d;
}
.roue-place {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r, 320px));
}
.roue-tourne { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .3, 1.15); }
/* Paquet penché au doigt (app.js : entrerPenche) : il suit le doigt sans retard */
.roue-place.penche .roue-tourne { transition: transform .12s ease-out; }
.roue-tourne.pivote { animation: pivoter 1.4s cubic-bezier(.45, 0, .2, 1); }
@keyframes pivoter { to { transform: rotateY(360deg); } }
/* Paquet de la roue : le même dessin que le grand booster, sans ses animations ni son inclinaison */
.booster.paquet-roue {
  position: absolute; inset: 0; width: 100%;
  animation: none; transform: none; filter: none; transition: none; touch-action: none;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-box-reflect: below 12px linear-gradient(transparent 60%, rgba(255, 255, 255, .2));
}
.booster.paquet-roue:hover { scale: 1; filter: none; }
.booster.paquet-roue .booster-info { font-size: 9px; letter-spacing: .22em; }
.booster.paquet-roue.dore::after { display: none; }
/* Dos du paquet (visible quand il pivote, ou pour les paquets du fond) : le dos d'un vrai sachet,
   même forme et même couleur que la face, avec la languette de fermeture verticale au milieu. */
.booster.paquet-dos {
  position: absolute; inset: 0; width: 100%;
  animation: none; filter: none; transition: none;
  transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-box-reflect: below 12px linear-gradient(transparent 60%, rgba(255, 255, 255, .15));
}
.booster.paquet-dos.dore::after { display: none; }
/* Languette : bande soudée qui descend au milieu, légèrement rabattue (ombre d'un côté, reflet de l'autre) */
.dos-languette {
  position: absolute; top: 6.5%; bottom: 6.5%; left: 50%; width: 15%; translate: -40% 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 240, 200, .1) 0 1px, rgba(0, 0, 0, .14) 1px 3px),
    linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .18));
  box-shadow: -3px 0 6px -2px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 240, 200, .28), inset -1px 0 0 rgba(0, 0, 0, .35);
}
/* Mentions imprimées en petit et code-barres, en bas à gauche de la languette */
.dos-mentions {
  position: absolute; left: 9%; bottom: 10%; width: 30%;
  display: flex; flex-direction: column; gap: .8cqw;
  font-family: var(--serif-titre); font-size: 3.1cqw; letter-spacing: .04em; line-height: 1.15; text-transform: uppercase;
  color: rgba(241, 220, 159, .55);
}
.dos-mentions b { font-weight: 700; color: rgba(241, 220, 159, .75); }
.dos-code {
  display: block; height: 9cqw; margin-top: 1.5cqw; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #1a1a1a 0 1px, #fff 1px 2px, #1a1a1a 2px 4px, #fff 4px 5px, #1a1a1a 5px 6px, #fff 6px 8px) #fff;
  box-shadow: 0 0 0 1.5cqw #f4efe2; opacity: .85;
}
/* Assombrissement selon la profondeur (--ombre, réglé par app.js : placerRoue) */
.paquet-ombre { position: absolute; inset: 0; border-radius: inherit; background: #05060d; opacity: var(--ombre, 0); pointer-events: none; }
/* Sol : une lueur douce sous le manège */
.roue-sol {
  position: absolute; left: 50%; bottom: 18px; width: min(110%, 820px); height: 120px; translate: -50% 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(212, 178, 106, .16), transparent 65%);
  pointer-events: none;
}
/* Pas de booster disponible : les paquets sont grisés, mais la roue tourne toujours (seul l'appui pour ouvrir est refusé).
   Le gris va sur chaque paquet, jamais sur .roue-scene : un filtre sur la scène écrase la 3D (paquets à plat sur Android). */
.roue.inactive .paquet-roue, .roue.inactive .paquet-dos { filter: grayscale(.85) brightness(.55); }
/* Revenir à la roue sans ouvrir le paquet */
.retour-roue {
  align-self: center; margin-bottom: -10px; padding: 6px 10px; border: 0; background: none; cursor: pointer;
  font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--texte-doux);
}
.retour-roue:hover { color: var(--or-clair); }

/* ---------- Mon compte (compte.js) ---------- */
.bloc-compte { display: flex; flex-direction: column; gap: 6px; }
.bloc-compte[hidden], .reglages-rubrique[hidden] { display: none; }
.compte-etat { margin: 0; font-size: 13px; line-height: 1.4; color: var(--texte-doux); }
.compte-connecte { display: flex; flex-direction: column; gap: 2px; }
.compte-connecte b { font-family: var(--serif-titre); font-size: 15px; letter-spacing: .04em; color: var(--or-clair); }
.compte-connecte span { font-size: 12px; overflow-wrap: anywhere; }
.bouton-compte { width: 100%; margin-top: 4px; padding: 10px 14px; font-size: 13px; }
.form-compte { display: flex; flex-direction: column; gap: 10px; }
.form-compte p { margin: 0; line-height: 1.45; color: var(--texte-doux); }
.form-compte small { margin-top: -6px; font-size: 12px; color: var(--texte-doux); opacity: .8; }
.champ-compte { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--texte-doux); }
.champ-compte input {
  width: 100%; padding: 11px 12px; border-radius: 10px; font: inherit; font-size: 16px; color: var(--texte);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(212, 178, 106, .3);
}
.champ-compte input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(212, 178, 106, .18); }
.champ-compte .champ-code { font-family: var(--serif-titre); font-size: 26px; letter-spacing: .4em; text-align: center; }
.form-compte .bouton-or { margin-top: 4px; }
.form-compte .lien-reglages { align-self: center; width: auto; margin-top: 0; padding: 4px 0; border-top: 0; text-align: center; font-size: 14px; }
.erreur-compte { min-height: 1em; color: #f1b3ab !important; font-size: 13px; }
.erreur-compte:empty { display: none; }
.avertissement-compte { padding: 8px 10px; border-radius: 8px; background: rgba(220, 150, 60, .12); border: 1px solid rgba(220, 150, 60, .35); font-size: 13px; }

/* ---------- Onglet Quêtes (quetes.js) ---------- */
/* Pièce de Chronos : disque d'or frappé de l'étoile-boussole du logo (le logo sert de masque). */
.piece-chronos {
  position: relative; display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%;
  vertical-align: -.18em; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff4c8, #f0cd6e 38%, #c8962e 70%, #8f6519 100%);
  box-shadow: inset 0 0 0 .07em #9b7022, inset 0 0 0 .13em rgba(255, 236, 170, .7), 0 .05em .15em rgba(0, 0, 0, .4);
}
.piece-chronos::after {
  content: ""; position: absolute; inset: 16%;
  background: linear-gradient(160deg, #7a5214, #a87828);
  -webkit-mask: url(images/logo-etoile.webp) center / contain no-repeat; mask: url(images/logo-etoile.webp) center / contain no-repeat;
}
.piece-chronos.grande { width: 34px; height: 34px; }
#vue-quetes { max-width: 560px; margin: 0 auto; padding-bottom: 30px; }
.solde {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 18px;
  font-family: var(--serif-titre); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--or-clair);
}
.solde b { font-size: 30px; letter-spacing: .02em; color: #fff3cf; }
.solde.gagne .piece-chronos { animation: piece-saute .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes piece-saute { 40% { transform: translateY(-8px) rotateY(180deg) scale(1.15); } to { transform: none; } }
.quetes-indispo { text-align: center; color: var(--texte-doux); font-style: italic; }
.bloc-quetes {
  margin: 0 0 18px; padding: 14px 16px 16px; border-radius: 16px;
  background: var(--encre-2); border: 1px solid rgba(212, 178, 106, .18);
}
.bloc-quetes h2 { margin: 0; font-family: var(--serif-titre); font-weight: 600; font-size: 17px; letter-spacing: .12em; color: var(--or-clair); }
.quetes-sous-titre { margin: 2px 0 12px; font-size: 14px; font-style: italic; color: var(--texte-doux); }
.liste-quetes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.quete {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--encre-3); border: 1px solid rgba(212, 178, 106, .12);
}
.quete.finie:not(.recuperee) { border-color: var(--or); box-shadow: 0 0 14px -6px rgba(241, 200, 110, .7); }
.quete.recuperee, .succes.recupere { opacity: .55; }
.quete-texte { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.quete-nom { grid-column: 1 / -1; font-size: 15px; line-height: 1.25; }
.quete-barre { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.quete-barre > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b18d45, #f0d590); transition: width .4s; }
.quete-progres { font-size: 12px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.quete-gain { flex: none; font-weight: 600; color: #f6dc97; font-size: 14px; white-space: nowrap; }
.quete .bouton, .succes .bouton { flex: none; padding: 7px 12px; font-size: 12px; }
.quete-changer { flex: none; font-size: 12px; }
.quete-faite { flex: none; font-size: 12px; color: var(--texte-doux); }
.bonus-quetes { margin: 12px 0 0; font-size: 14px; color: var(--texte); }
.quetes-aide { margin: 6px 0 0; font-size: 13px; color: var(--texte-doux); font-style: italic; }
.quetes-aide:empty { display: none; }
.succes-medaille { flex: none; font-size: 20px; color: rgba(212, 178, 106, .45); }
.succes.obtenu .succes-medaille { color: #f6d27a; text-shadow: 0 0 10px rgba(246, 210, 122, .6); }
/* Quiz */
.quiz-question { font-family: var(--serif); font-size: 18px; line-height: 1.35; margin: 0 0 12px; }
.quiz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.quiz-reponse { white-space: normal; line-height: 1.2; min-height: 48px; }
.quiz-reponse.juste { background: linear-gradient(180deg, #3f8f5a, #2b6b42); border-color: #8fd19e; color: #fff; }
.quiz-reponse.faux { background: linear-gradient(180deg, #8f3f3f, #6b2b2b); border-color: #f1b3ab; color: #fff; }
.quiz-resultat { min-height: 1.3em; margin: 0 0 10px; font-weight: 600; }
.quiz-resultat.juste { color: #8fd19e; }
.quiz-resultat.faux { color: #f1b3ab; font-weight: 500; }
/* Boutique */
.article-boutique { display: flex; align-items: center; gap: 12px; }
.article-nom { flex: 1; font-size: 15px; }
.article-prix { font-weight: 600; color: #f6dc97; white-space: nowrap; }
/* « +15 » qui s'envole quand on récupère des Chronos */
.envol-chronos {
  position: fixed; z-index: 60; translate: -50% 0; pointer-events: none;
  font-family: var(--serif-titre); font-weight: 700; font-size: 20px; color: #ffe9a8; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  animation: envol-chronos 1s ease-out forwards;
}
@keyframes envol-chronos { from { transform: translateY(0) scale(.8); opacity: 0; } 20% { opacity: 1; transform: translateY(-10px) scale(1.15); } to { transform: translateY(-70px) scale(1); opacity: 0; } }
@media (max-width: 420px) { .quiz-choix { grid-template-columns: 1fr; } }

/* ---------- Tutoriel (app.js : ECRANS_TUTORIEL) ---------- */
.tutoriel { text-align: center; padding: 26px 24px 18px; }
.tutoriel h2 { min-height: 2.6em; display: flex; align-items: center; justify-content: center; margin: 6px 0 10px; font-family: var(--serif-titre); font-weight: 600; letter-spacing: .1em; font-size: 20px; color: var(--or-clair); }
.tuto-texte { margin: 0 0 18px; font-size: 16px; line-height: 1.5; min-height: 7.5em; }
.tuto-visuel { height: 120px; display: grid; place-items: center; }
.tuto-logo { width: 104px; height: auto; filter: drop-shadow(0 0 18px rgba(241, 200, 110, .45)); animation: tuto-tourne 14s linear infinite; }
@keyframes tuto-tourne { to { rotate: 360deg; } }
/* Un petit paquet que l'on découpe : un point lumineux trace la coupe, encore et encore. */
.tuto-paquet {
  position: relative; width: 72px; height: 104px; border-radius: 6px;
  background: linear-gradient(160deg, #26305a, #141a36); box-shadow: inset 0 0 0 2px #b18d45, 0 8px 20px rgba(0, 0, 0, .5);
}
.tuto-coupe { position: absolute; left: 0; top: 14%; height: 2px; width: 100%; background: linear-gradient(90deg, #fff6d8, #f0c96a); box-shadow: 0 0 8px #f6d27a;
  transform-origin: left; animation: tuto-coupe 2.2s ease-in-out infinite; }
.tuto-pointe { position: absolute; top: calc(14% - 5px); left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #f6d27a 50%, transparent 70%); animation: tuto-pointe 2.2s ease-in-out infinite; }
@keyframes tuto-coupe { 0%, 10% { transform: scaleX(0); opacity: 1; } 65% { transform: scaleX(1); opacity: 1; } 85%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tuto-pointe { 0%, 10% { left: 0; opacity: 1; } 65% { left: 100%; opacity: 1; } 85%, 100% { left: 100%; opacity: 0; } }
.tuto-globe { width: 100px; height: 100px; fill: none; stroke: rgba(212, 178, 106, .7); stroke-width: 1.6; }
.tuto-globe .tuto-repere { fill: #f6d27a; stroke: none; filter: drop-shadow(0 0 6px rgba(246, 210, 122, .8)); animation: tuto-repere 1.6s ease-in-out infinite; }
@keyframes tuto-repere { 50% { translate: 0 -3px; } }
.tuto-piece { width: 84px; height: 84px; animation: tuto-piece 3s ease-in-out infinite; }
@keyframes tuto-piece { 50% { transform: rotateY(180deg); } }
.tuto-points { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.tuto-points span { width: 8px; height: 8px; border-radius: 50%; background: rgba(212, 178, 106, .3); transition: background .2s, transform .2s; }
.tuto-points span.actif { background: var(--or-clair); transform: scale(1.25); }
.tuto-boutons { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tuto-boutons .bouton { margin-inline-start: auto; }

/* ---------- Suppression du compte (app.js) ---------- */
.panneau-reglages a.lien-reglages { color: var(--or-clair); }
.panneau-reglages .lien-reglages.lien-danger { color: #f1b3ab; }
.dialogue-suppression { text-align: center; }
.dialogue-suppression h2 { color: #f1b3ab; }
.bouton-danger { background: linear-gradient(180deg, #a5483f, #7e2f2a); color: #fff; border-color: transparent; }
.bouton-danger:disabled { opacity: .6; }

/* ---------- Amis et vitrine (amis.js) ---------- */
#vue-amis { max-width: 560px; margin: 0 auto; padding-bottom: 30px; }
.amis-sans-compte { text-align: center; }
.amis-sans-compte p { margin: 8px 0 14px; }
.mon-profil h2, .dialogue-profil h2 { font-size: 22px; letter-spacing: .06em; text-transform: none; }
.profil-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 12px; font-size: 14px; color: var(--texte-doux); }
.dialogue-profil .profil-stats { justify-content: center; }
.profil-depuis { margin: 2px 0 0; font-style: italic; color: var(--texte-doux); font-size: 14px; }
/* Vitrine : 5 cartes côte à côte (une carte = son propre conteneur, comme dans la collection) */
.vitrine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.case-vitrine, .case-choix { position: relative; padding: 0; border: 0; background: none; cursor: pointer; container-type: inline-size; }
.vitrine-vide { grid-column: 1 / -1; margin: 6px 0; color: var(--texte-doux); font-style: italic; text-align: center; }
.recherche-joueur { width: 100%; margin: 8px 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(212, 178, 106, .35);
  background: var(--encre); color: var(--texte); font: inherit; }
.liste-amis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ligne-ami { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: var(--encre-3); }
.ami-ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; font: inherit; }
.ami-miniature { flex: none; width: 34px; container-type: inline-size; }
.ami-miniature:empty { height: 47px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.ami-texte { display: flex; flex-direction: column; min-width: 0; }
.ami-texte b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.ami-texte small { color: var(--texte-doux); font-size: 13px; }
.ami-actions { display: flex; gap: 6px; flex: none; }
.bouton.petit { padding: 6px 12px; font-size: 12px; }
.amis-vide { color: var(--texte-doux); font-style: italic; font-size: 14px; background: none; }
.dialogue-profil { text-align: center; }
.profil-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; }
.profil-etat { color: #8fd19e; font-weight: 600; }
.profil-bloquer { display: block; margin: 14px auto 0; color: #f1b3ab; }
/* Choix de la vitrine */
.dialogue-vitrine { width: min(100%, 560px); }
.grille-choix-vitrine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 55vh; overflow-y: auto; padding: 4px; margin-bottom: 14px; }
.case-choix { border-radius: 8px; opacity: .55; transition: opacity .15s, transform .15s; }
.case-choix[aria-pressed="true"] { opacity: 1; transform: scale(.96); outline: 2px solid var(--or-clair); outline-offset: 2px; }
.choix-numero { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--or-clair); color: var(--encre); font-weight: 700; font-size: 13px; }
.choix-numero:empty { display: none; }

/* ---------- Échanges (amis.js) ---------- */
.sous-titre-echanges { margin: 14px 0 8px; font-family: var(--serif-titre); font-weight: 600; font-size: 14px; letter-spacing: .08em; color: var(--texte-doux); }
.ligne-echange { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--encre-3); }
.echange-cartes { display: grid; grid-template-columns: auto 52px auto 52px auto; align-items: center; justify-content: center; gap: 8px; }
.echange-sens { font-size: 12px; color: var(--texte-doux); text-align: center; }
.mini-carte { display: block; width: 52px; container-type: inline-size; }
.echange-fleche { font-size: 20px; color: var(--or-clair); }
.echange-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.echange-attente { font-size: 13px; color: var(--texte-doux); font-style: italic; }
.echange-empeche { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(220, 150, 60, .12); border: 1px solid rgba(220, 150, 60, .35); }
#dialogue-echange .case-choix { opacity: .7; }
#dialogue-echange .case-choix[aria-pressed="true"] { opacity: 1; }
/* Valeur d'échange : petit losange en bas à gauche de chaque version */
.choix-valeur { position: absolute; left: -5px; bottom: -5px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px;
  display: grid; place-items: center; background: var(--encre); color: var(--or-clair); border: 1px solid var(--or); font-weight: 700; font-size: 12px; }
.echange-explication { margin: -4px 0 6px; font-size: 13px; color: var(--texte-doux); }

/* ---------- Photo de profil (amis.js) : l'illustration d'une carte, en rond ---------- */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--encre) center 25% / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(212, 178, 106, .55); display: grid; place-items: center; }
.avatar.grand { width: 72px; height: 72px; box-shadow: 0 0 0 3px var(--or), 0 6px 16px rgba(0, 0, 0, .5); }
.avatar.sans-image { background: linear-gradient(160deg, #26305a, #141a36); color: var(--or-clair); font-family: var(--serif-titre); font-weight: 700; font-size: 18px; }
.avatar.grand.sans-image { font-size: 30px; }
.entete-profil { display: flex; align-items: center; gap: 14px; }
.bouton-avatar { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.aide-avatar { color: var(--texte-doux); font-style: italic; font-size: 12px; }
.profil-avatar { display: flex; justify-content: center; margin: 4px 0 8px; }
.grille-choix-avatar { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px; max-height: 55vh; overflow-y: auto; padding: 6px; margin-bottom: 12px; }
.choix-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--texte); cursor: pointer; font: inherit; }
.choix-avatar small { font-size: 11px; line-height: 1.2; text-align: center; color: var(--texte-doux); }
.choix-avatar[aria-pressed="true"] .avatar { box-shadow: 0 0 0 3px #8fd19e, 0 0 14px rgba(143, 209, 158, .7); }