/* QLB Cards — la DA vient du logo, celui du dos des cartes.
 *
 * Un fond presque noir semé de « QLB » très pâles (le dos des cartes), du
 * crème pour le texte et les surfaces claires, et les six couleurs de
 * l'anneau du logo — qui sont aussi celles des raretés — pour tout ce qui
 * brille. La typo est géométrique, comme le logo (Jost, une Futura libre).
 * L'esprit : un TCG mobile (Pokémon Pocket, Hearthstone) — un booster en
 * grand, des tuiles, des cartes qui se retournent. Pensé en vertical. */

:root {
  --nuit: #1b1a19;
  --nuit-2: #242220;
  --nuit-3: #2f2c29;
  --trait: rgb(243 239 228 / .1);
  --creme: #f3efe4;
  --creme-doux: #bdb7a8;
  --creme-faible: #87826f;

  /* L'anneau du logo, dans l'ordre. */
  --gris: #a3a8ad;
  --bleu: #4a90d9;
  --mauve: #9b59b6;
  --jaune: #e3a92f;
  --violet: #7a3ce6;
  --or: #b98712;

  --rouge: #e0574b;
  --rayon: 14px;
  --police: "Jost", "Futura", "Avenir Next", "Segoe UI", sans-serif;
  --anneau: conic-gradient(from 2deg, var(--gris) 0 15%, transparent 0 16.6%, var(--bleu) 0 31.6%, transparent 0 33.3%,
    var(--mauve) 0 48.3%, transparent 0 50%, var(--jaune) 0 65%, transparent 0 66.6%,
    var(--violet) 0 81.6%, transparent 0 83.3%, var(--or) 0 98.3%, transparent 0);

  --r-common: var(--gris);
  --r-rare: var(--bleu);
  --r-epic: var(--violet);
  --r-legendary: var(--jaune);
  --r-prism: #57d3dc;
  --r-ultra: #ffd56a;

  /* Les noms d'avant, que des règles plus anciennes lisent encore. */
  --accent: var(--jaune);
  --texte-doux: var(--creme-doux);
  --surface: var(--nuit-2);
  --surface-2: var(--nuit-3);
  --bord: var(--trait);
  --fond: var(--nuit);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 calc(74px + env(safe-area-inset-bottom));
  color: var(--creme);
  font: 500 16px/1.42 var(--police);
  /* Le dos des cartes : des « QLB » semés, à peine visibles. */
  background-color: var(--nuit);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Ctext x='4' y='22' font-family='Jost,Futura,sans-serif' font-weight='800' font-size='17' fill='%23f3efe4' fill-opacity='.035'%3EQLB%3C/text%3E%3Ctext x='64' y='54' font-family='Jost,Futura,sans-serif' font-weight='800' font-size='17' fill='%23f3efe4' fill-opacity='.035'%3EQLB%3C/text%3E%3C/svg%3E");
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-weight: 700; letter-spacing: .01em; }
a { color: var(--jaune); }
.logo { display: block; flex: none; }

/* --- boutons */

button, .bouton {
  font: 600 .95rem/1.2 var(--police);
  color: var(--creme);
  background: var(--nuit-3);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: .65em 1.1em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .08s;
}
button:active, .bouton:active { transform: scale(.97); }
button:disabled { opacity: .5; cursor: default; transform: none; }
button.principal, .bouton.principal {
  color: #1b1a19;
  background: linear-gradient(180deg, #f2c35a, var(--jaune) 55%, #c98d1c);
  border-color: transparent;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 4px 14px rgb(227 169 47 / .25);
}
button.petit { padding: .4em .8em; font-size: .86rem; border-radius: 10px; }
button.discret { background: none; border-color: transparent; color: var(--creme-doux); }

/* --- en-tête et onglets */

.barre {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: .45rem 16px;
  background: rgb(27 26 25 / .9);
  backdrop-filter: blur(10px);
}
.marque {
  display: flex; align-items: center; gap: 8px; margin-right: auto;
  color: var(--creme); text-decoration: none; font-weight: 800; letter-spacing: .14em; font-size: .8rem;
  text-transform: uppercase;
}
.barre .serveur { padding: .25em .7em; font-size: .82rem; }
.barre .joueur { color: var(--creme-doux); font-size: .88rem; }

.onglets {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgb(27 26 25 / .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait);
}
.onglets a {
  flex: 1; max-width: 110px; display: grid; justify-items: center; gap: 3px; padding: .35rem 0;
  color: var(--creme-faible); text-decoration: none; font-size: .7rem; font-weight: 600;
  border-radius: 12px;
}
.onglets svg { width: 24px; height: 24px; }
.onglets a.actif { color: var(--creme); background: var(--nuit-3); }
.onglets a.actif svg { color: var(--jaune); }

/* --- écrans : une colonne de téléphone, même sur un grand écran */

main { padding: 12px 16px 16px; max-width: 520px; margin: 0 auto; }
.charge, .vide { text-align: center; color: var(--creme-doux); padding: 3rem 0; }
.vide button { margin-top: 1rem; }

.connexion { display: grid; justify-items: center; text-align: center; padding: 12vh 0 0; }
.connexion .logo { filter: drop-shadow(0 10px 30px rgb(0 0 0 / .6)); }
.connexion h1 { font-size: 2rem; margin: 1.2rem 0 0; letter-spacing: .14em; text-transform: uppercase; }
.connexion p { color: var(--creme-doux); max-width: 22em; margin: .6rem auto 1.4rem; }
.statut { min-height: 1.5em; }

/* Les blocs sont des intercalaires de classeur : un liseré de couleur en haut
   et, quand le bloc a un titre, un onglet qui dépasse avec ce titre. La
   couleur (--teinte) change selon la section. */
.bloc {
  --teinte: var(--or);
  position: relative;
  background: var(--nuit-2);
  border-top: 3px solid var(--teinte);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  margin: 0 0 16px;
  box-shadow: inset 0 0 0 1px var(--trait), 0 8px 18px rgb(0 0 0 / .3);
}
.bloc:has(> h2:first-child) { border-top-left-radius: 0; margin-top: 44px; }
.bloc > h2:first-child {
  position: absolute; top: -31px; left: 0; margin: 0; padding: .4rem 1rem .35rem;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nuit);
  background: var(--teinte); border-radius: 10px 10px 0 0; white-space: nowrap;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.bloc h2 { margin: 0 0 .5rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.bloc h3 { color: var(--creme); }
.bloc ul { margin: 0; padding-left: 1.1rem; }
.bloc p { margin: .2rem 0; }
.fort { font-size: 1.3rem; font-weight: 700; }
.note { color: var(--creme-doux); font-size: .88rem; font-weight: 400; }
.pastille {
  position: absolute; top: 8px; right: 8px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: var(--rouge); color: #fff; font-size: .75rem; font-weight: 800;
}

/* --- l'accueil : le booster en grand */

.heros { display: grid; justify-items: center; gap: 10px; padding: 8px 0 18px; }
.heros .ouvrir { min-width: 190px; font-size: 1.1rem; padding: .8em 1.4em; border-radius: 16px; }
.prochain { display: grid; justify-items: center; margin: 0; }
.prochain strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* --- le manège des boosters */

.bloc-manege { display: grid; justify-items: center; gap: 8px; width: 100%; }
.manege {
  position: relative; width: 100%;
  height: calc(min(46vw, 236px) * 15 / 9 + 40px);
  /* À plat, pas preserve-3d : chaque paquet garde sa perspective, mais ils
     s'empilent par z-index. En 3D partagée, Safari iOS calcule où les plans se
     coupent, et le paquet de devant tranchait (ou masquait) ses voisins. */
  perspective: 1100px; transform-style: flat;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  -webkit-touch-callout: none;
}
.manege:active { cursor: grabbing; }
.manege:focus { outline: none; }
.manege:focus-visible { outline: 2px solid var(--jaune); outline-offset: 4px; border-radius: 12px; }
.manege .place {
  position: absolute; inset: 0; display: grid; justify-items: center; align-content: start;
  transform-style: preserve-3d; will-change: transform;
}
.manege.anime .place { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.manege .place:not(.devant) .paquet { filter: brightness(.7) drop-shadow(0 14px 18px rgb(0 0 0 / .5)); }
/* Un booster qu'on n'a pas reste gris, devant comme sur les côtés : sans
   cette règle, celle des côtés (plus précise) lui rendait ses couleurs. */
.manege .place .pile.vide .paquet { filter: grayscale(.9) brightness(.5); }
.manege .place:not(.devant) .pile.vide .paquet { filter: grayscale(.9) brightness(.4) drop-shadow(0 14px 18px rgb(0 0 0 / .5)); }
.manege .place.devant .paquet { animation: flotte 4s ease-in-out infinite; }
.manege .place:not(.devant) .quantite { display: none; }
.manege img { pointer-events: none; -webkit-user-drag: none; }
.legende-manege { display: grid; justify-items: center; gap: 8px; min-height: 92px; }
.nom-diapo { margin: 0; }

/* La pile : ce qu'on a en plus se voit derrière, décalé, de plus en plus sombre. */
.pile { position: relative; display: grid; padding: 14px 26px 6px; }
.pile > * { grid-area: 1 / 1; }
.pile .derriere { pointer-events: none; }
.pile .derriere.d1 { transform: translate(14px, -8px) rotate(5deg); filter: brightness(.62); }
.pile .derriere.d2 { transform: translate(26px, -15px) rotate(9deg); filter: brightness(.42); }
.pile.vide .paquet { filter: grayscale(.85) brightness(.55); }
.pile .quantite {
  position: absolute; right: 8px; top: 6px; z-index: 5;
  background: var(--creme); color: var(--nuit); font-weight: 800; font-size: 1rem;
  border-radius: 12px; padding: .1em .55em; box-shadow: 0 4px 12px rgb(0 0 0 / .5);
}

/* --- un booster : un sachet d'alu scellé */

.paquet {
  --largeur: 170px;
  position: relative; display: grid; grid-template-rows: 7% 1fr 7%;
  width: var(--largeur); aspect-ratio: 9 / 15; padding: 0; border: 0; background: none;
  border-radius: 6px; isolation: isolate; color: var(--creme);
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
  filter: drop-shadow(0 18px 22px rgb(0 0 0 / .55));
}
.paquet.grand { --largeur: min(46vw, 236px); }
button.paquet { cursor: pointer; animation: flotte 4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-6px); } }

/* Les soudures, haut et bas : de l'alu strié, cranté au bord. */
.scelle {
  position: relative; z-index: 2;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .18) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #8d8a84, #d8d4cb 45%, #7d7a74);
}
.scelle.haut { -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat; border-radius: 3px 3px 0 0; }
.scelle.bas { -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat; border-radius: 0 0 3px 3px; }
.worlds .scelle { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .2) 0 1px, transparent 1px 4px), linear-gradient(180deg, #9a7420, #f3d27a 45%, #8a6418); }

/* Le corps : l'illustration sur tout le sachet, sous un film métallisé bombé
 * (plus sombre aux bords, un reflet au milieu). Le logo au centre, la série
 * dessous. */
.paquet .corps {
  position: relative; z-index: 1; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--nuit-3), var(--nuit));
}
.paquet .corps .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.worlds .corps { background: linear-gradient(160deg, #6b4410, #c79a2c 45%, #4a1f6e); }
.paquet .corps::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .5), transparent 13%, transparent 87%, rgb(0 0 0 / .5)),
    radial-gradient(ellipse 60% 40% at 36% 28%, rgb(255 255 255 / .18), transparent 70%),
    linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .45));
}
/* Les plis près des soudures. */
.paquet .corps::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgb(255 255 255 / .08) 9px 10px, transparent 10px 18px) top / 100% 6% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 9px, rgb(255 255 255 / .08) 9px 10px, transparent 10px 18px) bottom / 100% 6% no-repeat;
}
.centre {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: .55rem; margin-top: 18%;
}
.centre .logo { filter: drop-shadow(0 6px 14px rgb(0 0 0 / .6)); }
.worlds .centre { align-self: end; margin: 0 0 12%; }
/* La série, dans la police du logo, comme le « CARDS » : capitales espacées. */
.titre-paquet {
  font-weight: 800; letter-spacing: .26em; text-transform: uppercase; font-size: .95rem;
  color: var(--creme); text-shadow: 0 2px 6px rgb(0 0 0 / .85), 0 0 2px rgb(0 0 0 / .9);
}
.paquet.grand .titre-paquet { font-size: 1.2rem; }

/* Le reflet qui passe sur le film. */
.brillance {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 6px;
}
.brillance::after {
  content: ""; position: absolute; inset: -30% -60%;
  background: linear-gradient(110deg, transparent 42%, rgb(255 255 255 / .32) 50%, transparent 58%);
  animation: reflet 4.5s ease-in-out infinite;
}
.fantome .brillance::after { animation: none; display: none; }
@keyframes reflet { 0%, 55% { transform: translateX(-45%); } 100% { transform: translateX(45%); } }

/* L'ouverture : la soudure du haut part, le sachet tombe. */
.paquet.dechire { animation: dechire .7s ease-in forwards; }
.paquet.dechire .scelle.haut { animation: languette .45s ease-in forwards; }
@keyframes dechire { 35% { transform: perspective(900px) rotateY(0) scale(1.04); } 100% { transform: translateY(60px) scale(.9); opacity: 0; } }
@keyframes languette { to { transform: translate(70px, -30px) rotate(-22deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { button.paquet, .brillance::after, .paquet.dechire { animation: none; } }

/* Les menus, en tuiles, comme sous le booster d'un TCG mobile. */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tuile {
  position: relative; display: grid; gap: 2px; padding: .9rem .9rem .85rem;
  border-radius: 18px; text-decoration: none; color: var(--creme);
  background: linear-gradient(160deg, var(--nuit-3), var(--nuit-2));
  border: 1px solid var(--trait);
}
.tuile-icone {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .35rem;
  background: rgb(243 239 228 / .06); color: var(--jaune);
}
.tuile-icone svg { width: 24px; height: 24px; }
.tuile:nth-child(2) .tuile-icone { color: var(--bleu); }
.tuile:nth-child(3) .tuile-icone { color: var(--violet); }
.tuile:nth-child(4) .tuile-icone { color: var(--gris); }
.tuile strong { font-size: 1.02rem; }

/* --- résumé d'écran, onglets de série */

.resume h1 { font-size: 1.45rem; margin: .2rem 0 .2rem; }
.resume p { margin: .15rem 0; }
.resume .poussiere {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: .6rem;
  padding: .55rem .7rem; border-radius: 14px; background: var(--nuit-2); border: 1px solid var(--trait);
}
.jauge-poussiere strong { color: var(--jaune); font-size: 1.1rem; }
.actions-poussiere { margin-left: auto; display: flex; gap: 6px; }
.resume button.petit { margin-top: .4rem; }

.pastilles { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; }
.pastilles::-webkit-scrollbar { display: none; }
.pastilles button {
  white-space: nowrap; padding: .4em .85em; font-size: .85rem; border-radius: 999px;
  background: var(--nuit-2); color: var(--creme-doux);
}
.pastilles button.actif { background: var(--creme); color: var(--nuit); border-color: var(--creme); }
.pastilles button.gemme::before {
  content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .4em; border-radius: 50%;
  background: var(--rarete);
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 1rem; }
.actions.gauche { justify-content: flex-start; }
.poussieres { list-style: none; padding: 0 !important; }
.poussieres li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: .2rem 0; }

/* --- les cartes */

.r-common { --rarete: var(--r-common); }
.r-rare { --rarete: var(--r-rare); }
.r-epic { --rarete: var(--r-epic); }
.r-legendary { --rarete: var(--r-legendary); }
.r-prism { --rarete: var(--r-prism); }
.r-ultra { --rarete: var(--r-ultra); }
.r-secret { --rarete: #111; }
.worlds-main { --rarete: var(--r-ultra); }
.worlds-maudite { --rarete: var(--mauve); }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; margin-top: 12px; }
.grille.petite { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.case {
  position: relative; aspect-ratio: 5 / 7; padding: 0; overflow: hidden;
  border-radius: 9px; border: 0; background: var(--nuit-2);
  box-shadow: 0 0 0 2px var(--rarete, var(--trait)), 0 4px 10px rgb(0 0 0 / .4);
}
.case img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pas à toi : grisée, même si le serveur vient de la trouver (le new reste). */
.case.manque img { filter: grayscale(1) brightness(.48); }
.case.manque { box-shadow: 0 0 0 1px var(--trait); }
/* Les grosses raretés qu'on possède brillent. */
.case.r-legendary:not(.manque)::after, .case.r-prism:not(.manque)::after, .case.r-ultra:not(.manque)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .35) 45%, rgb(255 220 150 / .25) 52%, transparent 65%);
  background-size: 250% 100%; animation: holo 3.5s linear infinite;
}
@keyframes holo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.case.dos { display: grid; place-items: center; background: var(--nuit-2); box-shadow: 0 0 0 1px var(--trait); }
.case.dos::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%; opacity: .16;
  background: var(--anneau); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.case .num { position: relative; font-weight: 700; color: var(--creme-faible); font-variant-numeric: tabular-nums; font-size: .9rem; }
.case .compte {
  position: absolute; right: 4px; top: 4px; z-index: 1;
  background: var(--jaune); color: var(--nuit); border-radius: 7px; padding: .05em .4em;
  font-size: .82rem; font-weight: 800; box-shadow: 0 2px 6px rgb(0 0 0 / .5);
}
.case .nouveau {
  position: absolute; left: 4px; top: 4px; z-index: 1;
  background: var(--rouge); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  border-radius: 6px; padding: .08em .45em; text-transform: uppercase;
}
.qui-worlds { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--creme-doux); }

/* --- fenêtres */

dialog {
  background: var(--nuit-2); color: var(--creme);
  border: 1px solid var(--trait); border-radius: 22px;
  padding: 16px; width: min(92vw, 480px); max-height: 92dvh;
  box-shadow: 0 24px 60px rgb(0 0 0 / .6);
  /* Le défilement reste dans la fiche, pas la page derrière (Doudou). */
  overflow-y: auto; overscroll-behavior: contain;
}
html:has(dialog[open]) { overflow: hidden; }
dialog::backdrop { background: rgb(10 9 9 / .82); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }

.carte-ouverte img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 8px 22px rgb(0 0 0 / .5); }
.carte-ouverte img.visuel-carte { aspect-ratio: 5 / 7; object-fit: cover; background: var(--nuit-3); }
.carte-ouverte .actions-carte { margin-top: .7rem; justify-content: center; flex-wrap: wrap; }
.sommaire { position: sticky; top: 52px; z-index: 2; background: rgb(27 26 25 / .92); backdrop-filter: blur(8px);
  margin: 0 -16px; padding: 8px 16px; }
.bloc.regles { scroll-margin-top: 110px; }
.carte-ouverte h2 { margin: .9rem 0 .3rem; }
.carte-ouverte .texte { font-style: italic; color: var(--creme-doux); }
.carte-ouverte dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; }
.carte-ouverte dt { color: var(--creme-faible); }
.carte-ouverte dd { margin: 0; }

.choix-serveur[open] { display: grid; gap: 8px; }
.choix-serveur button.actif { border-color: var(--jaune); }

/* --- l'ouverture : plein écran, sur fond de nuit */

.ouverture {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
  border: 0; border-radius: 0; padding: 0;
  background: radial-gradient(circle at 50% 40%, #2c2925, var(--nuit) 70%);
}
.scene {
  min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}
.titre-ouverture { margin: 0; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--creme-doux); }
.aide-ouverture { margin: 0; color: var(--creme-doux); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 10px; perspective: 900px; }
.solo { display: grid; justify-items: center; perspective: 900px; }

/* Retourner une carte sans 3D (les dos qui transparaissent, sur iPhone
 * surtout) : elle s'aplatit, la face prend la place du dos à mi-course,
 * puis elle se déplie. */
.revele {
  position: relative; aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; border-radius: 14px;
}
.grande-carte { width: min(74vw, 330px); animation: arrive .35s ease-out; }
@keyframes arrive { from { transform: translateY(30px) scale(.92); opacity: 0; } }
.revele > div { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; }
.revele .face { visibility: hidden; box-shadow: 0 0 0 3px var(--rarete, var(--trait)); }
.revele.retournee { animation: retourne .5s ease-in-out; }
.revele.retournee .face { visibility: visible; transition: visibility 0s .25s; }
.revele.retournee .dos-carte { visibility: hidden; transition: visibility 0s .25s; }
@keyframes retourne { 50% { transform: scaleX(.02); } }
.dos-carte {
  display: grid; place-items: center;
  background-color: var(--nuit);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32'%3E%3Ctext x='2' y='14' font-family='Jost,Futura,sans-serif' font-weight='800' font-size='10' fill='%23f3efe4' fill-opacity='.07'%3EQLB%3C/text%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 7px var(--nuit), inset 0 0 0 9px var(--creme), inset 0 0 0 12px var(--nuit), inset 0 0 0 13px var(--creme);
}
.revele .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.revele.eclat.retournee { filter: drop-shadow(0 0 24px var(--rarete)); }
.legende-carte { display: grid; justify-items: center; gap: 4px; margin: 0; min-height: 3em; text-align: center; }
.legende-carte strong { font-size: 1.15rem; }
.etiquette { background: var(--rouge); color: #fff; border-radius: 8px; padding: .1em .55em; font-size: .78rem; font-weight: 700; }
.badge {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  background: var(--jaune); color: var(--nuit); font-size: .72rem; font-weight: 800;
  border-radius: 8px; padding: .12em .55em; white-space: nowrap;
}
.badge.doux { background: rgb(27 26 25 / .85); color: var(--creme); }
.bilan { display: grid; gap: .25rem; max-width: 340px; text-align: center; }
.bilan p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .revele, .grande-carte { transition: none; animation: none; } }

/* Le bandeau des messages (« +4 poussières »…) : en haut, sur toute la
   largeur de la colonne, bien contrasté — en bas, il se perdait sur les cartes. */
.toast {
  position: fixed; left: 50%; top: calc(58px + env(safe-area-inset-top)); transform: translateX(-50%);
  z-index: 10; width: min(calc(100vw - 24px), 496px); text-align: center;
  background: var(--jaune); color: var(--nuit); border-radius: 12px; padding: .7rem 1rem;
  font-weight: 700; font-size: 1rem; line-height: 1.3;
  box-shadow: 0 10px 30px rgb(0 0 0 / .55); animation: bandeau .22s ease-out;
}
@keyframes bandeau { from { transform: translate(-50%, -14px); opacity: 0; } }

/* --- joueurs */

.avatar {
  position: relative; display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; overflow: hidden; background: var(--nuit-3); color: var(--creme-doux);
}
.avatar .dedans-avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar img.photo-carte { object-position: 50% 28%; transform: scale(1.6); }
.avatar .initiale { font-weight: 800; }
.avatar .generique { line-height: 1; }
.generique.g-coeur, .generique.g-carreau { color: var(--rouge); }
.generique.g-pique, .generique.g-trefle { color: var(--creme); }
.generique.g-etoile, .generique.g-couronne { color: var(--jaune); }
.generique.g-eclair { color: var(--r-prism); }
.generique.g-lune { color: var(--violet); }
.avatar[class*="orn-"] { overflow: visible; }
.avatar[class*="orn-"] > * { border-radius: 50%; overflow: hidden; width: 100%; height: 100%; display: grid; place-items: center; }
.orn-bronze { box-shadow: 0 0 0 2px #b0793f; }
.orn-argent { box-shadow: 0 0 0 2px #d9dde3; }
.orn-or { box-shadow: 0 0 0 2px var(--jaune), 0 0 10px rgb(227 169 47 / .4); }
.orn-dore { box-shadow: 0 0 0 3px var(--r-ultra), 0 0 14px 2px rgb(255 213 106 / .5); }
.orn-noir { box-shadow: 0 0 0 3px #000, 0 0 0 4px var(--creme-faible); }
/* L'anneau du logo, en ornement. */
.orn-prisme { background: var(--anneau); padding: 3px; }
.titre-joueur { display: block; font-size: .76rem; color: var(--jaune); font-weight: 600; }

.classement { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.classement a {
  display: flex; align-items: center; gap: 10px; padding: .6rem .8rem;
  background: var(--nuit-2); border: 1px solid var(--trait); border-radius: 16px;
  color: inherit; text-decoration: none;
}
.classement li.moi a { border-color: var(--jaune); }
.classement .rang { width: 1.6em; text-align: center; font-weight: 800; color: var(--creme-faible); }
.classement .podium-1 { color: var(--jaune); font-size: 1.15rem; }
.classement .podium-2 { color: var(--gris); font-size: 1.1rem; }
.classement .podium-3 { color: #c98a52; font-size: 1.05rem; }
.classement .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement .score { color: var(--creme-doux); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.classement .score strong { color: var(--creme); }

.profil { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.profil h1 { margin: 0; font-size: 1.6rem; }
.profil p { margin: .2rem 0 0; }

.series-joueur { list-style: none; padding: 0 !important; margin: 0 0 .8rem; display: grid; gap: 10px; }
.barre-prog { height: 7px; background: var(--nuit); border-radius: 4px; overflow: hidden; margin: .35rem 0; }
.barre-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--bleu), var(--jaune)); }

.groupe-succes h3, .groupe-cosm h3 { font-size: .95rem; margin: 1rem 0 .45rem; }
.succes { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 6px; }
.succes li { display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: 12px; background: var(--nuit-3); opacity: .7; }
.succes li.obtenu { opacity: 1; box-shadow: inset 3px 0 0 var(--jaune); }
.succes li.cache { opacity: .45; }
.succes .gain { font-size: .84rem; color: var(--creme-doux); }

.choix-cosm { display: flex; flex-wrap: wrap; gap: 8px; max-height: 290px; overflow-y: auto; padding: 4px; }
.choix-cosm button { display: grid; justify-items: center; gap: 3px; padding: .4rem .35rem; min-width: 0; width: calc((100% - 32px) / 5); }
.choix-cosm button.actif { border-color: var(--jaune); box-shadow: 0 0 0 1px var(--jaune); }
.choix-cosm button.verrou { opacity: .45; }
.choix-cosm .note { font-size: .64rem; max-width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; }

.prefs { list-style: none; padding: 0 !important; margin: 0 0 .6rem; display: grid; gap: 8px; }
.prefs label { display: flex; gap: 10px; align-items: center; }
.prefs input { width: 20px; height: 20px; accent-color: var(--jaune); }

/* --- échanges */

.echanges { list-style: none; padding: 0 !important; margin: .4rem 0 0; display: grid; gap: 10px; }
.echange { background: var(--nuit-3); border-radius: 14px; padding: .65rem .75rem; display: grid; gap: .5rem; }
.echange .qui { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.echange .qui a { color: var(--creme); font-weight: 700; }
.echange .actions { margin-top: 0; }
.sens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sens > div { display: grid; gap: 2px; }
.sens button.petit { margin-left: auto; }
.fleche { color: var(--jaune); font-size: 1.2rem; }
.mini {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; max-width: 100%;
  border-radius: 8px; background: var(--nuit-2); box-shadow: 0 0 0 1px var(--rarete, var(--trait));
}
.mini img { width: 28px; height: 39px; object-fit: cover; border-radius: 5px; }
.mini-nom { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9.5em; }

/* --- le fil */

.fil { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 10px; }
.fil li { display: flex; gap: 10px; align-items: center; }
.fil li.neuf > div::before { content: "● "; color: var(--rouge); font-size: .7em; vertical-align: middle; }
.fil img { width: 34px; height: 48px; object-fit: cover; border-radius: 5px; flex: none; }
.fil .icone-fil { width: 34px; text-align: center; font-size: 1.3rem; flex: none; }
.fil a { color: var(--creme); text-decoration: none; font-weight: 700; }
.pastille-neuf {
  background: var(--rouge); color: #fff; border-radius: 8px; padding: .05em .5em;
  font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}

/* --- le duel */

.defi { display: grid; gap: .3rem; padding: .4rem 0; }
.defi .actions { margin-top: 0; }
.duel { display: grid; gap: 10px; }
.camp-tete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: .55rem .85rem; border-radius: 14px; background: var(--nuit-2); border: 1px solid var(--trait);
}
.camp-tete .pv { font-weight: 800; color: #ef8a7f; }
.camp-tete .lieu { font-size: .84rem; color: var(--creme-doux); }
.camp-tete.visable { border-color: var(--rouge); box-shadow: 0 0 0 2px rgb(224 87 75 / .4); cursor: pointer; }
.rangee {
  display: grid; grid-template-columns: repeat(4, minmax(0, 110px)); justify-content: center; gap: 8px;
  min-height: 116px; padding: 8px; border-radius: 16px; background: rgb(0 0 0 / .2);
}
.unite, .carte-main {
  position: relative; padding: 0; border-radius: 9px; overflow: hidden; aspect-ratio: 5 / 7; border: 0;
  background: var(--nuit-2); box-shadow: 0 0 0 2px var(--rarete, var(--trait));
}
.unite:disabled, .carte-main:disabled { cursor: default; opacity: 1; }
.unite img, .carte-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unite.prete { box-shadow: 0 0 0 2px var(--jaune), 0 0 12px rgb(227 169 47 / .5); }
.unite.choisie { box-shadow: 0 0 0 3px var(--creme); transform: translateY(-4px); }
.unite.visable { box-shadow: 0 0 0 3px var(--rouge), 0 0 12px rgb(224 87 75 / .6); }
.unite .stats, .carte-main .stats {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between;
  padding: 2px 5px; background: rgb(27 26 25 / .88); font-size: .76rem; font-weight: 700;
}
.unite .mots {
  position: absolute; left: 0; right: 0; top: 0; padding: 1px 4px; font-size: .62rem;
  background: rgb(27 26 25 / .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jeton { display: grid; place-items: center; height: 100%; padding: 6px; font-size: .8rem; text-align: center; }
.milieu { display: grid; gap: 6px; text-align: center; }
.aide { margin: 0; color: var(--creme-doux); font-size: .9rem; }
.chrono { font-variant-numeric: tabular-nums; color: var(--jaune); }
.journal { list-style: none; margin: 0; padding: 0; font-size: .8rem; color: var(--creme-faible); }
.resultat h2 { margin: .2rem 0; font-size: 1.9rem; }
.main-duel { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.carte-main { flex: none; width: 82px; opacity: .5; }
.carte-main.jouable { opacity: 1; box-shadow: 0 0 0 2px var(--jaune); }
.carte-main { touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.carte-main.partie { opacity: .25; }
/* La carte qui suit le doigt. */
.carte-main.fantome {
  position: fixed; z-index: 6; width: 96px; margin: 0; pointer-events: none; opacity: .95; cursor: grabbing;
  transform: translate(-50%, -60%) rotate(-4deg); box-shadow: 0 0 0 2px var(--jaune), 0 18px 30px rgb(0 0 0 / .6);
}
/* Où lâcher : le plateau s'éclaire, ou ses persos pour un objet. */
.duel.depot .rangee-moi { box-shadow: inset 0 0 0 2px var(--jaune), 0 0 18px rgb(227 169 47 / .35); }
.duel.depot-objet .rangee-moi .unite { box-shadow: 0 0 0 2px var(--jaune); }
.duel.depot-objet .rangee-moi .unite.survolee { box-shadow: 0 0 0 3px var(--creme), 0 0 14px rgb(243 239 228 / .5); transform: translateY(-4px); }
/* La carte en grand. */
.apercu-carte {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); border-radius: 16px; overflow: hidden; pointer-events: none;
  background: var(--nuit-2); box-shadow: 0 0 0 3px var(--rarete, var(--trait)), 0 24px 60px rgb(0 0 0 / .7);
  animation: apercu .14s ease-out;
}
@keyframes apercu { from { transform: translate(-50%, 16px) scale(.9); opacity: 0; } }
.apercu-image { aspect-ratio: 5 / 7; }
.apercu-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu-effets { display: grid; gap: 4px; padding: .55rem .7rem .7rem; font-size: .84rem; line-height: 1.3; background: var(--nuit-2); }
.apercu-effets p { margin: 0; color: var(--creme-doux); }
.apercu-effets p strong { color: var(--creme); }
.apercu-ligne { display: flex; align-items: center; gap: 8px; }
.apercu-ligne strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cout-grand { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bleu); color: #fff; font-weight: 800; font-size: .85rem; }
.stats-grand { font-weight: 800; white-space: nowrap; }
.apercu-effets .capacite { color: var(--creme); }
.unite { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* Le résumé des règles sous Duel, et les règles complètes en feuille. */
.resume-duel { margin: 0; padding-left: 1.1rem !important; display: grid; gap: 6px; color: var(--creme-doux); }
.resume-duel strong { color: var(--creme); }
button.lien-suite { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.lexique { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
.lexique dt { font-weight: 700; }
.lexique dd { margin: 0; color: var(--creme-doux); }
.feuille {
  width: min(100vw, 520px); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto;
  /* En haut, rien : c'est la tête collante qui porte la marge de l'encoche. */
  padding: 0 16px calc(24px + env(safe-area-inset-bottom)); border: 0; background: var(--nuit); color: var(--creme); overflow-y: auto;
}
.feuille::backdrop { background: rgb(0 0 0 / .6); }
.feuille-tete { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  /* Sous l'heure et l'encoche de l'iPhone (app plein écran), jamais dessous :
     Doudou est resté coincé dans le menu, la croix était cachée là. */
  margin: 0 -16px 8px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgb(27 26 25 / .94); backdrop-filter: blur(8px); }
.feuille-tete .croix-fermer { position: static; flex: none; }
.feuille-tete h1 { margin: 0; font-size: 1.2rem; }
.jeton-grand { display: grid; align-content: center; gap: .6rem; height: 100%; padding: 1.2rem; text-align: center; }
.jeton-grand strong { font-size: 1.4rem; }
.carte-main .cout {
  position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: var(--bleu); color: #fff;
}

.liste-deck { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.liste-deck li {
  display: flex; align-items: center; gap: 10px; padding: .45rem .6rem;
  background: var(--nuit-2); border: 1px solid var(--trait); border-radius: 14px;
}
.liste-deck li.dans { border-color: var(--jaune); }
.liste-deck img { width: 36px; height: 50px; object-fit: cover; border-radius: 5px; flex: none; }
.infos-deck { flex: 1; min-width: 0; display: grid; }
.infos-deck .note { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.compteur { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }

/* L'illustration court sur tout le sachet, soudures comprises : le corps
 * occupe les trois rangées, ses bords sont crantés, et les soudures se posent
 * dessus en bandes d'alu striées, à moitié transparentes. */
.paquet .corps {
  grid-row: 1 / 4; grid-column: 1; border-radius: 4px;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 10px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 10px repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 10px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 10px repeat-x;
}
.paquet .scelle { grid-column: 1; z-index: 2; -webkit-mask: none; mask: none; border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .35) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgb(255 255 255 / .38), rgb(220 214 200 / .18) 50%, rgb(0 0 0 / .25));
}
.paquet .scelle.haut { grid-row: 1; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .35); }
.paquet .scelle.bas { grid-row: 3; box-shadow: inset 0 1px 0 rgb(0 0 0 / .35); }
/* Seuls les paquets attrapent les touchers, pas leur place invisible (qui
 * couvre toute la largeur) : sinon le paquet de devant prend le toucher
 * destiné à un paquet de côté. */
.manege .place { pointer-events: none; }
.manege .place .pile { pointer-events: auto; }

/* --- du relief : un sachet bombé, pas une image à plat */

/* L'éclairage du film : un reflet qui suit le doigt (--mx, --my), un trait
 * de lumière, des bords qui s'assombrissent comme une surface bombée, et des
 * extrémités pincées près des soudures. */
.paquet .corps {
  box-shadow: inset 2px 0 0 rgb(255 255 255 / .16), inset -3px 0 0 rgb(0 0 0 / .4);
}
.paquet .corps::after {
  background:
    radial-gradient(ellipse 40% 30% at var(--mx, 32%) var(--my, 26%), rgb(255 255 255 / .34), transparent 70%),
    linear-gradient(104deg, transparent 16%, rgb(255 255 255 / .16) 21%, transparent 27%, transparent 62%, rgb(255 255 255 / .08) 66%, transparent 70%),
    linear-gradient(90deg, rgb(0 0 0 / .62), rgb(0 0 0 / .12) 10%, transparent 22%, transparent 74%, rgb(0 0 0 / .18) 88%, rgb(0 0 0 / .7)),
    linear-gradient(180deg, rgb(0 0 0 / .42), transparent 13%, transparent 84%, rgb(0 0 0 / .5)),
    linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .32));
}
/* Le froissé près des soudures : de fines plis en biais. */
.paquet .corps::before {
  background:
    repeating-linear-gradient(72deg, transparent 0 7px, rgb(255 255 255 / .1) 7px 8px, transparent 8px 15px) top / 100% 9% no-repeat,
    repeating-linear-gradient(-72deg, transparent 0 7px, rgb(255 255 255 / .1) 7px 8px, transparent 8px 15px) bottom / 100% 9% no-repeat;
}
/* Les soudures : plates et brillantes, éclairées par le haut, avec le pli
 * qu'elles font en rejoignant le sachet. */
.paquet .scelle {
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .4) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgb(255 255 255 / .55), rgb(230 224 210 / .25) 45%, rgb(0 0 0 / .3));
}
.paquet .scelle.haut { box-shadow: 0 3px 4px -1px rgb(0 0 0 / .55); }
.paquet .scelle.bas { box-shadow: 0 -3px 4px -1px rgb(0 0 0 / .55); }
/* Une ombre au sol, sous le paquet de devant. */
.pile::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -14px; height: 22px; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .65), transparent);
}
.manege .place:not(.devant) .pile::after { opacity: .4; }
/* Le paquet de devant s'incline sous le doigt. */
.manege .pile { transition: transform .25s ease-out; transform-style: preserve-3d; }
/* La pile se dessine à plat, par couches : en 3D, le paquet de devant
 * (incliné) et ceux de derrière se coupaient en biais. */
.manege .pile { transform-style: flat; }
.pile .derriere { z-index: 0; }
.pile > .paquet { z-index: 1; }


/* --- la matière : un sachet imprimé, pas une image

 * Ce qui fait « .png », c'est un dégradé trop lisse. Un vrai booster a un film
 * froissé qui accroche la lumière, le grain de l'encre sur l'alu, un reflet
 * irisé qui change avec l'angle, et des soudures plissées. Les textures sont
 * générées (app/textures/*.svg : feTurbulence + éclairage), rien de lourd. */
.paquet .art { filter: saturate(1.08) contrast(1.06); }
.froisse, .grain, .irise { position: absolute; inset: 0; pointer-events: none; }
/* Le film froissé : un relief éclairé de biais, fondu en lumière douce sur
 * l'image (le gris moyen ne change rien, les creux foncent, les bosses brillent). */
.froisse {
  background: url("textures/froisse.svg") center / cover;
  mix-blend-mode: overlay; opacity: .55;
}
/* Le grain de l'impression. */
.grain {
  background: url("textures/grain.svg");
  background-size: 160px 160px;
  mix-blend-mode: soft-light; opacity: .35;
}
/* Le reflet irisé de l'alu : un arc-en-ciel discret qui glisse avec le doigt. */
.irise {
  background: linear-gradient(115deg,
      transparent 20%, rgb(255 120 180 / .22) 32%, rgb(255 230 120 / .22) 40%,
      rgb(120 255 200 / .2) 48%, rgb(110 170 255 / .22) 56%, transparent 68%);
  background-size: 260% 260%;
  background-position: calc(var(--mx, 30%) * 1.2) calc(var(--my, 30%) * 1.2);
  mix-blend-mode: color-dodge; opacity: .5;
  transition: background-position .25s ease-out;
}
.fantome .irise, .manege .place:not(.devant) .irise { opacity: .25; }
/* Les bords du sachet accrochent un filet de lumière. */
.paquet .corps {
  box-shadow:
    inset 1.5px 0 0 rgb(255 255 255 / .35), inset 3px 0 6px rgb(255 255 255 / .12),
    inset -2px 0 0 rgb(0 0 0 / .45), inset -6px 0 10px rgb(0 0 0 / .35);
}
/* Les soudures : de l'alu plissé, avec la même lumière. */
.paquet .scelle {
  background:
    url("textures/pli.svg") center / 100% 100%,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .35) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgb(255 255 255 / .5), rgb(225 219 205 / .22) 45%, rgb(0 0 0 / .32));
  background-blend-mode: overlay, normal, normal;
}
.centre, .titre-paquet { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .irise { transition: none; } }
.froisse { opacity: .7; }
/* Les soudures : alu plus sombre sous le pli, pour qu'il se lise en relief. */
.paquet .scelle {
  background:
    url("textures/pli.svg") center / 100% 100%,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #d6d2c8, #9c978e 50%, #6b675f);
  background-blend-mode: overlay, normal, normal;
}


/* --- Discord, version app */

.texte-discord { line-height: 1.5; overflow-wrap: anywhere; }
.texte-discord small { color: var(--creme-faible); font-size: .82rem; }
.texte-discord code { background: var(--nuit); border-radius: 5px; padding: 0 .3em; font-size: .88em; }
.texte-discord .mention { color: #c9cdfb; background: rgb(88 101 242 / .25); border-radius: 4px; padding: 0 .2em; font-weight: 600; }
.emoji { width: 1.2em; height: 1.2em; vertical-align: -.25em; object-fit: contain; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .55rem; }
.reaction {
  display: inline-flex; align-items: center; gap: 5px; padding: .15em .55em; border-radius: 999px;
  background: var(--nuit-3); border: 1px solid var(--trait); font-size: .85rem; font-weight: 600;
}
.faits { --teinte: var(--jaune); }
.fil-bloc { --teinte: var(--bleu); }
.une-news { --teinte: var(--mauve); }
.regles { --teinte: var(--gris); }
.trouve { --teinte: var(--r-prism); }
.titre-news { font-size: 1.15rem; margin: .1rem 0 .4rem; }
.lien-suite { display: inline-block; margin-top: .7rem; color: var(--creme-doux); font-weight: 600; text-decoration: none; }

.ouvertures { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 14px; }
.ouverture-ligne { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.ouverture-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.ouverture-ligne .qui { display: flex; align-items: center; gap: 8px; }
.ouverture-ligne .qui a { color: var(--creme); font-weight: 700; text-decoration: none; }
.trio-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trio-mini .case img { height: 100%; }

.redaction { display: grid; gap: 8px; }
.redaction input, .redaction textarea {
  font: inherit; color: var(--creme); background: var(--nuit); border: 1px solid var(--trait);
  border-radius: 10px; padding: .6em .7em; resize: vertical;
}
.une-news > h2:not(:first-child) { font-size: 1.15rem; margin: .1rem 0 .4rem; }
.onglets a { max-width: 92px; }

.ticket-dore {
  display: inline-block; margin-left: .5rem; vertical-align: middle;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; color: #3a2a05;
  padding: .3em .7em; border-radius: 4px;
  background: linear-gradient(115deg, #b98712, #ffe08a 35%, #e3a92f 55%, #fff3c4 70%, #b98712);
  box-shadow: 0 0 0 1px #8a6510, 0 2px 8px rgb(227 169 47 / .45);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 98%, #000) left, radial-gradient(circle 4px at 100% 50%, #0000 98%, #000) right;
  -webkit-mask-size: 51% 100%; -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle 4px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
dialog.large { width: min(96vw, 900px); }
.carte-ouverte img.diptyque { border-radius: 10px; }

/* --- succès et stats */

.stats-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
/* Les stats : des pochettes de classeur, chacune avec son petit onglet. */
.stats-grille { row-gap: 16px; }
.stat {
  position: relative; display: grid; gap: 2px; padding: .75rem .85rem; margin-top: 6px;
  border-radius: 3px 10px 10px 10px; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--trait);
}
.stat::before {
  content: ""; position: absolute; top: -6px; left: 0; width: 38%; height: 6px;
  border-radius: 5px 5px 0 0; background: inherit;
}
.stat.premier, .stat.premier::before { background: color-mix(in srgb, var(--jaune) 22%, var(--nuit-2)); }
.stat strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat .rang-stat { font-size: .82rem; font-weight: 700; color: var(--bleu); }
.stat.premier .rang-stat { color: var(--jaune); }
.record { display: grid; gap: 6px; margin-bottom: .6rem; }

/* --- règles */

.regles p { margin: .35rem 0; color: var(--creme-doux); }
.regles p strong { color: var(--creme); }
.taux { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.taux th { text-align: left; font-weight: 600; color: var(--creme-faible); font-size: .74rem; padding: .3rem .2rem; }
.taux td { padding: .4rem .2rem; border-top: 1px solid var(--trait); }
.taux td:first-child { white-space: nowrap; }
.gemme-pt { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .4em; background: var(--rarete); }

/* --- réagir et commenter */

.interactions { display: grid; gap: 8px; }
button.reaction { cursor: pointer; padding: .15em .55em; font: inherit; font-size: .85rem; font-weight: 600; border-radius: 999px; }
.reaction.moi { border-color: var(--jaune); background: rgb(227 169 47 / .16); }
.reaction.ajout, .reaction.bulle { color: var(--creme-doux); }
.palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 14px; background: var(--nuit-3); }
.palette button { font-size: 1.25rem; padding: .2em .35em; background: none; border: 0; box-shadow: none; }
.fil-commentaires { display: grid; gap: 10px; padding: 10px; border-radius: 14px; background: var(--nuit); }
.commentaire { display: flex; gap: 8px; align-items: flex-start; }
.commentaire p { margin: .1rem 0 0; }
.ecrire { display: flex; gap: 6px; }
.ecrire input {
  flex: 1; min-width: 0; font: inherit; color: var(--creme); background: var(--nuit-2);
  border: 1px solid var(--trait); border-radius: 10px; padding: .5em .7em;
}

/* --- le cardle */

.grille-cardle { display: grid; gap: 6px; margin-top: 12px; font-size: .82rem; }
.entete-cardle, .ligne-cardle { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 6px; }
.entete-cardle span { color: var(--creme-faible); font-size: .72rem; text-align: center; }
.entete-cardle span:first-child { text-align: left; }
.nom-cardle { font-weight: 700; align-self: center; }
.case-cardle { display: grid; place-items: center; text-align: center; min-height: 44px; padding: 4px; border-radius: 10px; font-weight: 600; }
.case-cardle.vert { background: #2f7d4f; }
.case-cardle.rouge { background: #7d2f33; }
.propositions { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.propositions button { width: 100%; text-align: left; padding: .55em .7em; border-radius: 10px; }
.bloc input[type="search"] {
  width: 100%; font: inherit; color: var(--creme); background: var(--nuit); border: 1px solid var(--trait);
  border-radius: 12px; padding: .65em .8em; margin-top: .5rem;
}
.cible-cardle { width: 140px; margin: .6rem auto; display: block; }
.trouve { text-align: center; }

/* --- les bulles : un onglet de groupe (Jouer, Social, Moi) les fait sortir */

.onglets a { position: relative; }
.onglets a .pastille { top: 0; right: calc(50% - 26px); min-width: 18px; height: 18px; font-size: .68rem; }
.onglets a.ouvert { color: var(--creme); }
.onglets a.ouvert svg { color: var(--jaune); }
.menu-bulles {
  position: fixed; inset: 0; z-index: 2;
  background: rgb(10 10 10 / .45); backdrop-filter: blur(2px);
  animation: voile .15s ease-out;
}
@keyframes voile { from { opacity: 0; } }
.menu-bulle {
  position: absolute; bottom: calc(84px + env(safe-area-inset-bottom) + var(--haut));
  display: grid; justify-items: center; gap: 6px; width: 72px; margin-left: -36px;
  color: var(--creme); text-decoration: none;
  animation: menu-bulle .26s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(var(--i) * 45ms);
}
@keyframes menu-bulle { from { transform: translateY(40px) scale(.3); opacity: 0; } }
.menu-bulle .rond {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: var(--teinte); background: radial-gradient(circle at 35% 30%, var(--nuit-3), var(--nuit) 75%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teinte) 60%, transparent), 0 8px 18px rgb(0 0 0 / .55),
    inset 0 1px 0 rgb(255 255 255 / .08);
  transition: transform .12s;
}
.menu-bulle:active .rond { transform: scale(.92); }
.menu-bulle .rond svg { width: 27px; height: 27px; }
.nom-menu-bulle { font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 4px rgb(0 0 0 / .8); }
.menu-bulle .pastille { top: -4px; right: 2px; }

/* --- les règles derrière un « ? » dans l'en-tête */
.bouton-aide { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--creme-doux);
  box-shadow: inset 0 0 0 1px var(--trait); }
.bouton-aide { font-weight: 800; font-size: .95rem; text-decoration: none; }
.image-news { width: 100%; border-radius: 12px; margin-top: .6rem; display: block; }
.depuis-discord {
  margin-left: .4rem; font-size: .66rem; font-weight: 700; padding: .05em .45em; border-radius: 5px;
  background: rgb(88 101 242 / .3); color: #c9cdfb; vertical-align: 1px;
}


/* --- duel v2 : le leader */
.puce-leader {
  font: inherit; font-size: .8rem; font-weight: 700; padding: .15em .6em; border-radius: 999px; cursor: pointer;
  color: var(--creme); background: color-mix(in srgb, var(--rarete, var(--or)) 22%, var(--nuit-3));
  border: 1px solid color-mix(in srgb, var(--rarete, var(--or)) 60%, transparent);
}
button.pouvoir { border-color: var(--trait); }
button.pouvoir.pret { background: color-mix(in srgb, var(--jaune) 25%, var(--nuit-3)); border-color: var(--jaune); }
.types-carte { flex: none; font-size: .9rem; }
.leaders { display: grid; gap: 8px; }
.leader-choix {
  display: grid; grid-template-columns: 48px 1fr; gap: 4px 10px; align-items: center; text-align: left;
  padding: .45rem .6rem; border-radius: 12px; font: inherit; color: var(--creme); cursor: pointer;
  background: var(--nuit-3); border: 1px solid var(--trait);
}
.leader-choix img { grid-row: span 2; width: 48px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 6px;
  box-shadow: 0 0 0 2px var(--rarete, var(--trait)); }
.leader-choix.actif { border-color: var(--jaune); box-shadow: 0 0 0 2px rgb(227 169 47 / .35); }
.leader-nom { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.leader-texte { font-size: .8rem; color: var(--creme-doux); }
.liste-deck .masquees { justify-content: center; border-style: dashed; }

/* --- le pseudo, en tête de Personnaliser */
.ligne-pseudo { display: flex; gap: 8px; }
.ligne-pseudo input { flex: 1; min-width: 0; font: inherit; padding: .5rem .7rem; border-radius: 10px;
  color: var(--creme); background: var(--nuit-3); border: 1px solid var(--trait); }
.pseudo .lien-suite { margin-top: .4rem; }

/* Au doigt : un carrousel à plat (voir TACTILE dans app.js). */
.tactile .manege { perspective: none; }
.tactile .manege .place { transform-style: flat; will-change: transform; }
.tactile .manege .pile { transform: none !important; }

/* --- retours de Doudou (09/11) */
.grille.serree { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.grille.serree .case .compte { font-size: .7rem; }
.ligne-series { display: flex; align-items: flex-end; gap: 8px; }
.ligne-series .pastilles { flex: 1; min-width: 0; }
.bouton-vue {
  flex: none; margin-left: auto; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  padding: .45em .8em; border-radius: 10px; color: var(--creme);
  background: var(--nuit-3); border: 1px solid color-mix(in srgb, var(--jaune) 45%, transparent);
}
.role-duel { font-size: .68rem; font-weight: 800; padding: .08em .5em; border-radius: 999px; vertical-align: 1px; white-space: nowrap; }
.role-attaque { background: rgb(224 87 75 / .22); color: #f29a90; }
.role-defense { background: rgb(74 144 217 / .22); color: #9cc6f2; }
.role-soutien { background: rgb(123 211 137 / .2); color: #9fe0aa; }
.role-polyvalent { background: rgb(243 239 228 / .1); color: var(--creme-doux); }
.role-objet, .role-lieu { background: rgb(227 169 47 / .18); color: #f0c770; }
.aide-roles { margin: .4rem 0 0; font-size: .78rem; }
.pseudo h3 { display: flex; align-items: center; gap: 8px; }
.pseudo-ok { font-size: .74rem; font-weight: 700; color: var(--nuit); background: #7bd389; border-radius: 999px; padding: .1em .55em; }
.echange.en-attente { opacity: .75; }
.echange .sens > a { color: var(--creme); font-weight: 600; text-decoration: none; }

/* Les stats, plus sobres : un libellé, un gros chiffre, le rang en pastille. */
.stats-grille { gap: 10px; row-gap: 10px; }
.stat { margin-top: 0; border-radius: 14px; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--trait); padding: .8rem .9rem; }
.stat::before { display: none; }
.stat > .note:first-child { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--creme-faible); }
.stat strong { font-size: 1.75rem; line-height: 1.1; }
.stat .rang-stat { justify-self: start; font-size: .74rem; padding: .1em .55em; border-radius: 999px; background: rgb(74 144 217 / .18); }
.stat.premier, .stat.premier::before { background: var(--nuit-2); }
.stat.premier { box-shadow: inset 0 0 0 2px var(--jaune); }
.stat.premier .rang-stat { background: rgb(227 169 47 / .22); }

/* --- l'ouverture : la découpe au doigt, et la carte qu'on fait tourner */
.boite-dechirure { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.boite-dechirure .paquet { transform: none; }
.trait-dechirure {
  position: absolute; left: 0; width: 0; height: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .2), #fff); border-radius: 2px;
  box-shadow: 0 0 10px 2px rgb(255 240 200 / .8);
}
.trait-dechirure.auto { transition: width .3s ease-in; }
.languette-dechiree { position: absolute !important; inset: 0; margin: 0; pointer-events: none; }
.boite-dechirure.ouvert .languette-dechiree {
  transition: transform .6s cubic-bezier(.3, .1, .4, 1), opacity .6s ease-in;
  transform: translate(70px, -110px) rotate(-18deg); opacity: 0;
}
.boite-dechirure.ouvert > .paquet:not(.languette-dechiree) {
  transition: transform .5s ease-in .15s, opacity .5s ease-in .15s;
  transform: translateY(50px) scale(.94); opacity: 0;
}
.grande-carte { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.reflet-carte {
  position: absolute; inset: 0; z-index: 3; border-radius: 14px; pointer-events: none; opacity: 0;
  transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgb(255 255 255 / .75), transparent 55%);
}

/* --- l'écran Stats, sur le modèle de Doudou (09/11) */
.stats-tete .tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gros-points { font-size: 1rem; color: var(--creme-doux); }
.gros-points strong { font-size: 2.6rem; line-height: 1; color: var(--creme); }
.ligne-rangs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: .35rem 0; }
.tendance { margin: .2rem 0 0; font-size: .86rem; }
.tendance.monte strong { color: #7bd389; }
.tendance.baisse strong { color: #f29a90; }
.anneau { position: relative; width: 92px; height: 92px; flex: none; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 7; }
.anneau .fond { stroke: var(--nuit-3); }
.anneau .plein { stroke: var(--jaune); stroke-linecap: round; }
.anneau-texte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.anneau-texte strong { font-size: 1.3rem; }
.anneau-texte small { font-size: .72rem; color: var(--creme-doux); }
.anneau-texte em { font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--creme-faible); }
.ligne-stat { display: grid; gap: 5px; padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.ligne-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.ligne-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ligne-stat .gemme-pt { margin-right: 6px; }
.valeur-rang { display: flex; align-items: center; gap: 8px; }
.barre-prog.fine { height: 5px; }
.pastille-rang { font-size: .74rem; font-weight: 800; padding: .12em .55em; border-radius: 999px;
  background: var(--nuit-3); color: var(--creme-doux); white-space: nowrap; }
.pastille-rang.podium { background: rgb(227 169 47 / .25); color: #f0c770; }
strong.gros { font-size: 1.5rem; }
.grille-worlds { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: .6rem; }
.grille-worlds span { aspect-ratio: 1; border-radius: 6px; border: 1.5px dashed var(--trait); }
.grille-worlds span.plein { border: 0; background: var(--jaune); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); }
.duo-records { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: .8rem; }
.duo-records > div { display: grid; gap: 2px; padding: .7rem; border-radius: 12px; background: var(--nuit-3); }

/* --- fiche de carte : la croix, le bandeau Fabriquer ; la cloche */
.carte-ouverte { position: relative; }
.croix-fermer {
  position: absolute; top: 8px; right: 8px; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; font-size: 1.1rem; font-weight: 800; cursor: pointer;
  color: var(--nuit); background: var(--creme); border: 0; box-shadow: 0 4px 12px rgb(0 0 0 / .5);
}
.bandeau-fabriquer { flex: 1 1 100%; width: 100%; }
#cloche { border: 0; background: none; cursor: pointer; padding: 0; }
#cloche svg { width: 18px; height: 18px; }
.feuille .bloc { margin-top: 44px; }

/* --- le menu et la boîte à idées */
.form-idee { display: grid; gap: 8px; }
.form-idee textarea { font: inherit; color: var(--creme); background: var(--nuit-3); border: 1px solid var(--trait);
  border-radius: 10px; padding: .6rem .7rem; resize: vertical; }
.idees { list-style: none; padding: 0 !important; margin: .8rem 0 0; display: grid; gap: 8px; }
.idees li { display: flex; align-items: center; gap: 10px; padding: .55rem .7rem; border-radius: 10px; background: var(--nuit-3); }
.idees li > div { flex: 1; min-width: 0; }
.idees li p { margin: 0; }
.idees .vote { flex: none; font: inherit; font-weight: 800; padding: .3em .7em; border-radius: 999px; cursor: pointer;
  color: var(--creme); background: var(--nuit-2); border: 1px solid var(--trait); }
.idees .vote.actif { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.deconnexion { display: block; margin: 20px auto 0; }
.podium-cardle { margin: .4rem auto; padding-left: 1.4rem; max-width: 18rem; text-align: left; }
.podium-cardle li { padding: .1rem 0; }
.podium-cardle li.moi strong { color: var(--accent, inherit); }
.fermer-bas { display: block; width: 100%; margin-top: 1.2rem; }