/* =====================================================================
   COULEURS DU LOGO BERRY GAMES (07/11) — chargé en dernier
   Violet #943ca6 · Corail #d95763 · Bleu #5b6ee1 · Orange #df7126 · Vert #60b37e
   Boutons façon logo : blocs arrondis avec une ombre pixel décalée plus foncée.
   ===================================================================== */
:root {
  --c-violet: #943ca6;  --c-violet-d: #4f2e6b;
  --c-corail: #d95763;  --c-corail-d: #862121;
  --c-bleu: #5b6ee1;    --c-bleu-d: #306082;
  --c-orange: #df7126;  --c-orange-d: #8f563b;
  --c-vert: #60b37e;    --c-vert-d: #3d6e52;

  --bg: #0d0914;
  --bg-2: #140e1e;
  --surface: #1b1328;
  --surface-2: #251a36;
  --border: #3b2a52;
  --text: #f6f1fb;
  --muted: #a99bbd;
  --berry: var(--c-corail);
  --berry-2: var(--c-violet);
  --sea: #8193f0;          /* bleu du logo éclairci pour rester lisible sur fond sombre */
  --sea-strong: var(--c-bleu);
  --gold: #f08a3c;         /* orange du logo éclairci */
  --ok: var(--c-vert);
  --danger: #ff6f7b;
  --grad: linear-gradient(100deg, var(--c-violet) 0%, var(--c-corail) 55%, var(--c-orange) 100%);
  --glow-berry: 0 0 22px rgba(217, 87, 99, 0.35);
}
body {
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(148, 60, 166, 0.22), transparent 60%),
    radial-gradient(800px 500px at 0% 35%, rgba(91, 110, 225, 0.12), transparent 60%),
    radial-gradient(700px 400px at 60% 110%, rgba(223, 113, 38, 0.1), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 100% 48px,
    var(--bg);
  background-color: var(--bg);
}

/* ---------- Boutons façon logo ---------- */
.btn {
  clip-path: none; border-radius: 10px; border: none;
  background: var(--surface-2); color: var(--text);
  box-shadow: 4px 4px 0 #0a0710;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.12); background: var(--surface-2); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #0a0710; }
.btn-primary { background: var(--c-violet); color: #fff; box-shadow: 4px 4px 0 var(--c-violet-d); }
.btn-primary:hover { background: var(--c-violet); }
.btn-primary:active { box-shadow: 1px 1px 0 var(--c-violet-d); }
.btn-gold { background: var(--c-orange); color: #fff; box-shadow: 4px 4px 0 var(--c-orange-d); }
.btn-gold:hover { background: var(--c-orange); }
.btn-gold:active { box-shadow: 1px 1px 0 var(--c-orange-d); }
.btn-patreon { background: var(--c-corail); color: #fff; box-shadow: 4px 4px 0 var(--c-corail-d); }
.btn-patreon:hover { background: var(--c-corail); }
.btn-ghost-neon { background: transparent; color: var(--sea); box-shadow: inset 0 0 0 2px var(--c-bleu), 4px 4px 0 var(--c-bleu-d); }
.btn-ghost, .btn-ghost:active { background: transparent; box-shadow: none; transform: none; }
.btn:disabled { filter: grayscale(0.6) brightness(0.8); transform: none; }
.dl-locked { box-shadow: inset 0 0 0 1px var(--border); }
.dl-locked:active { transform: none; }

/* ---------- Barre latérale : une couleur du logo par bouton ---------- */
.side-nav .side-pill {
  clip-path: none; border-radius: 14px; min-height: 58px;
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--pill), 5px 5px 0 var(--pill-d);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.side-nav .side-pill:nth-child(1) { --pill: var(--c-bleu); --pill-d: var(--c-bleu-d); }
.side-nav .side-pill:nth-child(2) { --pill: var(--c-violet); --pill-d: var(--c-violet-d); }
.side-nav .side-pill:nth-child(3) { --pill: var(--c-corail); --pill-d: var(--c-corail-d); }
.side-nav .side-pill:nth-child(4) { --pill: var(--c-orange); --pill-d: var(--c-orange-d); }
.side-nav .side-pill:nth-child(5) { --pill: var(--c-vert); --pill-d: var(--c-vert-d); }
.side-nav .side-pill:hover { background: color-mix(in srgb, var(--pill) 22%, var(--surface)); box-shadow: inset 0 0 0 2px var(--pill), 5px 5px 0 var(--pill-d); }
.side-nav .side-pill.active { background: var(--pill); color: #fff; box-shadow: 5px 5px 0 var(--pill-d); }
.side-nav .side-pill:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px var(--pill), 2px 2px 0 var(--pill-d); }
.side-lang { color: var(--text); }
.gems-chip { clip-path: none; border-radius: 10px; background: rgba(91, 110, 225, 0.14); border: 2px solid var(--c-bleu); box-shadow: 3px 3px 0 var(--c-bleu-d); }

/* ---------- Onglets de la page d'accueil ---------- */
.home-head .tab {
  clip-path: none; border-radius: 12px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--border), 4px 4px 0 #0a0710;
}
.home-head .tab:nth-child(1) { --tab: var(--c-corail); --tab-d: var(--c-corail-d); }
.home-head .tab:nth-child(2) { --tab: var(--c-bleu); --tab-d: var(--c-bleu-d); }
.home-head .tab[aria-selected="true"] { background: var(--tab); color: #fff; box-shadow: 4px 4px 0 var(--tab-d); }

/* ---------- Titres, filets, bandeau ---------- */
.hero-copy .home-title span { background: linear-gradient(100deg, var(--c-corail), var(--c-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card::before { background: linear-gradient(90deg, var(--c-violet), var(--c-bleu), var(--c-corail), var(--c-orange)); width: 120px; }
.eyebrow { color: var(--sea); }
.ticker { background: linear-gradient(90deg, var(--c-violet), var(--c-bleu), var(--c-corail), var(--c-orange), var(--c-violet)); }

/* ---------- Badges ---------- */
.tier-badge.sailor { color: #a7b3ff; background: rgba(91, 110, 225, 0.16); border-color: var(--c-bleu); }
.tier-badge.captain { color: #ffb37a; background: rgba(223, 113, 38, 0.16); border-color: var(--c-orange); }
.version-pill { background: var(--c-corail); }
.r-C { color: #cfc6dd; border-color: #6a5a80; background: rgba(207, 198, 221, 0.08); }
.r-R { color: #a7b3ff; border-color: var(--c-bleu); background: rgba(91, 110, 225, 0.16); }
.r-UR { color: #ffb37a; border-color: var(--c-orange); background: rgba(223, 113, 38, 0.16); }
.r-skin { color: #ff9aa3; border-color: var(--c-corail); background: rgba(217, 87, 99, 0.14); }
.r-accessory { color: #8fe0ad; border-color: var(--c-vert); background: rgba(96, 179, 126, 0.14); }

/* ---------- Cartes à collectionner ---------- */
.tcard.C .tcard-art { border-color: #6a5a80; }
.tcard.R .tcard-art { border-color: var(--c-bleu); box-shadow: 0 0 18px rgba(91, 110, 225, 0.3); }
.tcard.UR .tcard-art { border-color: var(--c-orange); box-shadow: 0 0 22px rgba(223, 113, 38, 0.4); }
.tcard.skin .tcard-art { border-color: var(--c-corail); }
.tcard.accessory .tcard-art { border-color: var(--c-vert); }
.tcard.showcased .tcard-art { outline-color: var(--c-orange); }
.booster-pack { border-color: var(--c-orange); }
.booster-pack .pack-label small { color: #ffb37a; }
.flip-back { background: linear-gradient(135deg, var(--c-violet), var(--c-corail)); border-color: var(--c-orange); }
.pity { color: #ffb37a; }

/* ---------- Divers ---------- */
.progress > span { background: linear-gradient(90deg, var(--c-bleu), var(--c-violet), var(--c-corail), var(--c-orange)); }
.like-btn.liked { background: var(--c-corail); color: #fff; }
.chip[aria-pressed="true"] { border-color: var(--c-violet); background: rgba(148, 60, 166, 0.22); color: #fff; }
.roster-card { background: radial-gradient(circle at 50% 30%, rgba(148, 60, 166, 0.4), transparent 65%), var(--surface); }
.roster-card:hover { border-color: var(--c-orange); }
.p-top .avatar { border-color: var(--c-violet); box-shadow: 0 0 22px rgba(148, 60, 166, 0.45); }
.hero-logo { filter: drop-shadow(0 8px 22px rgba(148, 60, 166, 0.45)); }
input:focus, select:focus, textarea:focus { outline-color: var(--c-violet); }
.toast { border-color: var(--c-violet); }
a { color: var(--sea); }
.new-tag { color: var(--c-vert); }
/* ---------- Fenêtre de confirmation (achat, déliaison) ---------- */
.confirm-back { background: rgba(8, 5, 14, 0.78); backdrop-filter: blur(6px); animation: cd-fade 0.16s ease both; }
.confirm-back.closing { animation: cd-fade 0.14s ease reverse both; }
.confirm-modal {
  display: flex; gap: 24px; align-items: stretch; text-align: left;
  max-width: 600px; width: 100%; padding: 26px;
  border: 2px solid var(--c-violet); box-shadow: 8px 8px 0 var(--c-violet-d);
  clip-path: none; border-radius: 16px;
  animation: cd-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.confirm-modal::before { width: 100%; height: 4px; }
.confirm-media { flex: 0 0 170px; }
.confirm-media .tcard-name { display: none; }
.confirm-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.confirm-modal h2 { font-size: 24px; margin-bottom: 10px; }
.confirm-body { color: var(--muted); }
.confirm-item { color: var(--text); font: 700 18px var(--font-display); margin-bottom: 14px; }
.confirm-sums { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 12px 14px; background: var(--bg-2); border-radius: 10px; border: 1px solid var(--border); }
.confirm-sums dt { color: var(--muted); }
.confirm-sums dd { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.confirm-actions { margin-top: auto; padding-top: 20px; justify-content: flex-end; flex-wrap: nowrap; gap: 12px; }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .confirm-modal { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
  .confirm-media { flex-basis: auto; width: 140px; }
  .confirm-actions { justify-content: center; }
  .confirm-actions .btn { flex: 1; }
}

/* ---------- Reflet des cartes UR : déplacé en transform (avant : redessin complet à chaque image) ---------- */
.tcard.UR .tcard-art::after {
  background: linear-gradient(115deg, transparent 0%, rgba(255, 220, 170, 0.32) 50%, transparent 100%);
  background-size: auto; width: 45%; left: 0; right: auto;
  transform: translate3d(-120%, 0, 0); will-change: transform;
  animation: ur-shine 4.5s ease-in-out infinite;
}
@keyframes ur-shine { 0% { transform: translate3d(-120%, 0, 0); } 55%, 100% { transform: translate3d(330%, 0, 0); } }
/* Visionneuse ouverte : les animations de la page en dessous s'arrêtent */
body.viewer-open .tcard.UR .tcard-art::after, body.viewer-open .ticker-track { animation-play-state: paused; }

/* ---------- Sélecteur de langue (en haut à droite) ---------- */
.lang-switch {
  display: inline-flex; padding: 3px; gap: 2px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; font: 700 12px var(--font-display); letter-spacing: 0.08em;
}
.lang-switch span { padding: 4px 8px; border-radius: 6px; color: var(--muted); }
.lang-switch span.on { background: var(--c-orange); color: #fff; }
.lang-switch:hover span:not(.on) { color: var(--text); }

/* ---------- Page Tuto ---------- */
.tuto-need { color: var(--muted); margin: -6px 0 22px; }
.tuto-steps { list-style: none; display: grid; gap: 18px; padding: 0; }
.tuto-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 24px; }
.tuto-step::before { background: var(--step); width: 100%; }
.tuto-step.c-bleu { --step: var(--c-bleu); --step-d: var(--c-bleu-d); }
.tuto-step.c-violet { --step: var(--c-violet); --step-d: var(--c-violet-d); }
.tuto-step.c-corail { --step: var(--c-corail); --step-d: var(--c-corail-d); }
.tuto-step.c-orange { --step: var(--c-orange); --step-d: var(--c-orange-d); }
.tuto-step.c-vert { --step: var(--c-vert); --step-d: var(--c-vert-d); }
.tuto-num {
  display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; margin-bottom: 12px;
  border-radius: 12px; background: var(--step); color: #fff; box-shadow: 4px 4px 0 var(--step-d);
  font: 700 26px/1 var(--font-display);
}
.tuto-num small { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.tuto-step h2 { font-size: 22px; margin-bottom: 6px; }
.tuto-step p { color: #d8cfe6; max-width: 560px; }
.tuto-step p + p { margin-top: 14px; }
.tuto-shot { width: 190px; height: auto; border-radius: 14px; border: 2px solid var(--step); box-shadow: 5px 5px 0 var(--step-d); background: #0d0d0d; }
.tuto-wardrobe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px; align-items: center; margin-top: 18px; }
.tuto-wardrobe img { width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--c-vert); box-shadow: 5px 5px 0 var(--c-vert-d); }
.tuto-wardrobe h2 { font-size: 22px; margin-bottom: 6px; }
.tuto-faq { margin-top: 28px; display: grid; gap: 10px; }
.tuto-faq h2 { font-size: 24px; margin-bottom: 6px; }
.tuto-faq details { padding: 14px 18px; }
.tuto-faq summary { cursor: pointer; font: 700 16px var(--font-display); }
.tuto-faq details p { color: var(--muted); margin-top: 8px; }
@container (max-width: 640px) {
  .tuto-step, .tuto-wardrobe { grid-template-columns: 1fr; }
  .tuto-shot { width: min(220px, 70%); justify-self: center; }
}

/* ---------- Ouverture de booster : allégée ---------- */
.reveal-back { backdrop-filter: none; background: rgba(8, 5, 14, 0.96); }
/* Retournement 3D : couche GPU dédiée, et rien de coûteux à redessiner pendant la rotation */
.flip-inner { will-change: transform; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.3, 1); }
.flip .tcard .tcard-art { clip-path: none; border-radius: 10px; box-shadow: none; }
.flip .tcard.UR .tcard-art::after { animation: none; display: none; }
/* Dos de carte Berry Games (image fournie : Site/design/dos-de-carte-source.webp) */
.flip-back {
  border: none; font-size: 0;
  border-radius: 6% / 4.5%; /* suit les coins arrondis du cadre de l'image */
  background: #0d0914 url("/img/card-back.webp") center / cover no-repeat;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}
.flip:not(.open):hover .flip-back { filter: brightness(1.1); }
.flip.open .tcard.UR .tcard-art { box-shadow: 0 0 0 2px var(--c-orange); }

/* ---------- Distribution des cartes du booster ---------- */
/* Arrivée : chaque carte glisse depuis la gauche, l'une après l'autre (transform uniquement) */
.flip.deal { pointer-events: none; animation: deal-in 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.05) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes deal-in {
  from { transform: translate3d(-110vw, 0, 0) rotate(-10deg); }
  70% { transform: translate3d(8px, 0, 0) rotate(1deg); }
  to { transform: none; }
}
/* Départ (« Rouvrir un booster ») : les cartes actuelles filent vers la droite */
.flip.leave { pointer-events: none; animation: deal-out 0.32s cubic-bezier(0.5, 0, 0.8, 0.4) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes deal-out { to { transform: translate3d(110vw, -20px, 0) rotate(12deg); } }
.reveal-grid { overflow: visible; }
.reveal-back { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { .flip.deal, .flip.leave { animation: none; } }

/* ---------- Carte UR révélée : feu d'artifice (toile) + lueur dorée autour de la carte ---------- */
.reveal { padding-top: 8px; }
.fw-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }
.flip.ur-burst .tcard-art { animation: ur-glow 1.6s ease-out 1 both; }
@keyframes ur-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 201, 77, 0); }
  25% { box-shadow: 0 0 0 4px #ffc94d, 0 0 46px 14px rgba(255, 179, 77, 0.75); }
  100% { box-shadow: 0 0 0 2px var(--c-orange), 0 0 26px 4px rgba(223, 113, 38, 0.45); }
}

/* ---------- Bordures de rareté posées devant les images (public/img/frames/*.png) ---------- */
/* La bordure occupe toute la carte ; l'image est un peu rentrée (--inset) pour que ses bords
   passent SOUS la bande dorée au lieu de dépasser. Le halo de la bordure brille par-dessus le site. */
.tcard.framed { --inset: 2.8%; --pic-r: 6.5% / 4.9%; } /* arrondi mesuré sur les coins des bordures */
.tcard.framed .tcard-art {
  border: none; clip-path: none; border-radius: 0; box-shadow: none;
  background: transparent; overflow: hidden;
}
/* L'image et ses effets (holo, reflet) sont dans .tcard-pic, rentrée et arrondie comme la bordure :
   rien ne dépasse dans les coins */
.tcard.framed .tcard-pic {
  position: absolute; inset: var(--inset); z-index: 1;
  border-radius: var(--pic-r); overflow: hidden; isolation: isolate;
  /* clip-path coupe AUSSI les couches animées (l'effet holo est sur sa propre couche GPU :
     overflow + border-radius seuls ne suffisent pas dans Chrome) */
  clip-path: inset(0 round 6.5% / 4.9%);
}
.tcard.framed .tcard-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcard-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4;
  pointer-events: none; user-select: none;
}
.tcard.framed .badge-corner { top: 6.5%; left: 8%; z-index: 5; }
.tcard.framed .owned-mark { top: 6.5%; right: 8%; z-index: 5; }
/* Cartes manquantes / privées : le fond rayé reste à l'intérieur du cadre */
.tcard.missing.framed .tcard-art, .tcard.owned-private.framed .tcard-art {
  border: none; padding: var(--inset); background-clip: content-box; background-origin: content-box;
}
.tcard.missing.framed .tcard-frame { opacity: 0.4; filter: grayscale(0.4); }
.tcard.owned-private.framed .tcard-frame { opacity: 0.75; }
.flip .tcard.framed .tcard-art { border-radius: 0; }
/* Effet holographique Ghost limité à l'image */
.tcard.framed.GHOST .tcard-art::before, .tcard.framed.GHOST .tcard-art::after,
.tcard.framed.UR .tcard-art::after { content: none; } /* avec bordure, les effets sont portés par .tcard-pic */
/* Visionneuse du livre : l'image garde sa taille, la bordure DÉBORDE autour d'elle.
   L'image occupe 94,4 % de la bordure (2,8 % de chaque côté) -> la bordure dépasse de 2,97 % de l'image. */
.framed-big { position: relative; display: inline-block; line-height: 0; padding: 0; overflow: visible; border-radius: 6.5% / 4.9%; }
.framed-big .vimg { border: none !important; border-radius: 6.5% / 4.9% !important; box-shadow: none !important; max-height: calc(100vh - 200px) !important; }
.framed-big .vframe {
  position: absolute; left: -2.97%; top: -2.97%; width: 105.94%; height: 105.94%; max-width: none; max-height: none; z-index: 4; pointer-events: none;
  /* annule le style des images de la visionneuse (fond sombre, bordure) qui masquait la carte */
  background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.viewer-slide .framed-big { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.framed-big .holo-wrap { display: block; border-radius: 6.5% / 4.9%; overflow: hidden; isolation: isolate; clip-path: inset(0 round 6.5% / 4.9%); }
.framed-big .holo-wrap .vimg { display: block; }

/* ---------- Rareté GHOST : carte holographique ---------- */
.r-GHOST {
  color: #fff; border-color: rgba(200, 246, 255, 0.8);
  background: linear-gradient(90deg, #ff6ad5, #ffd36a, #6affc4, #6ac8ff, #c56aff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.tcard.GHOST .tcard-art {
  border-color: #c8f6ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 22px rgba(160, 235, 255, 0.55);
  isolation: isolate;
}
/* Film holographique : bande arc-en-ciel qui balaie la carte (transform uniquement, sur GPU) */
.tcard.GHOST .tcard-art::before,
.tcard.GHOST .tcard-pic::before,
.holo-wrap::before {
  content: ""; position: absolute; inset: -60% -60%; z-index: 2; pointer-events: none;
  /* « multiply » : visible aussi sur les cartes à fond blanc (le blanc prend les reflets irisés) */
  background: linear-gradient(115deg,
    transparent 26%, rgba(255, 110, 215, 0.55) 34%, rgba(255, 215, 110, 0.55) 41%,
    rgba(110, 255, 195, 0.55) 48%, rgba(110, 195, 255, 0.55) 55%, rgba(195, 120, 255, 0.55) 62%, transparent 70%);
  mix-blend-mode: multiply;
  transform: translate3d(-30%, -12%, 0); will-change: transform;
  animation: holo-sweep 3.6s ease-in-out infinite alternate;
}
/* Paillettes + voile irisé fixe */
.tcard.GHOST .tcard-art::after,
.tcard.GHOST .tcard-pic::after,
.holo-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; display: block;
  width: auto; left: 0; right: 0; transform: none;
  /* paillettes colorées + voile irisé permanent sur toute la carte */
  background:
    radial-gradient(circle at 20% 30%, rgba(120, 200, 255, 0.95) 0 1.2px, transparent 2.2px) 0 0 / 30px 30px,
    radial-gradient(circle at 70% 60%, rgba(255, 130, 225, 0.9) 0 1.2px, transparent 2.2px) 0 0 / 43px 43px,
    radial-gradient(circle at 45% 80%, rgba(255, 215, 110, 0.9) 0 1px, transparent 2px) 0 0 / 37px 37px,
    linear-gradient(160deg, rgba(150, 225, 255, 0.28), rgba(255, 150, 235, 0.24) 45%, rgba(255, 230, 150, 0.24) 75%, rgba(170, 255, 215, 0.26));
  mix-blend-mode: multiply;
  animation: holo-twinkle 2.4s ease-in-out infinite;
}
@keyframes holo-sweep { from { transform: translate3d(-30%, -12%, 0); } to { transform: translate3d(30%, 12%, 0); } }
@keyframes holo-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.tcard.GHOST .tcard-art img { filter: saturate(1.15) contrast(1.05); }
/* Économie : pas d'animation pendant le retournement, ni sous une fenêtre ouverte */
.flip:not(.open) .tcard.GHOST .tcard-art::before, .flip:not(.open) .tcard.GHOST .tcard-art::after { animation: none; }
body.viewer-open #book .tcard.GHOST .tcard-art::before, body.viewer-open #book .tcard.GHOST .tcard-art::after,
body.viewer-open .shop-section .tcard.GHOST .tcard-art::before, body.viewer-open .shop-section .tcard.GHOST .tcard-art::after { animation-play-state: paused; }
.tcard.missing.GHOST .tcard-art::before, .tcard.missing.GHOST .tcard-art::after,
.tcard.owned-private.GHOST .tcard-art::before { animation: none; opacity: 0.35; }
/* Visionneuse du livre : le même effet sur l'image en grand */
.holo-wrap { position: relative; display: inline-block; overflow: hidden; border-radius: 12px; line-height: 0; isolation: isolate; }
.holo-wrap img { border-color: #c8f6ff !important; box-shadow: 0 0 30px rgba(160, 235, 255, 0.5) !important; }
@media (prefers-reduced-motion: reduce) {
  .tcard.GHOST .tcard-art::before, .holo-wrap::before { animation: none; transform: translate3d(0, 0, 0); }
  .tcard.GHOST .tcard-art::after, .holo-wrap::after { animation: none; }
}

/* ---------- Effets holographiques coupés (bouton ✨, classe fx-off sur <html>) ---------- */
html.fx-off .tcard.GHOST .tcard-art::before, html.fx-off .tcard.GHOST .tcard-art::after,
html.fx-off .tcard.UR .tcard-art::after,
html.fx-off .holo-wrap::before, html.fx-off .holo-wrap::after { display: none !important; animation: none !important; }
html.fx-off .tcard.GHOST .tcard-art img { filter: none; }
.chip-fx { margin-left: 0; }
.chip-fx[aria-pressed="true"] { border-color: var(--c-violet); background: rgba(148, 60, 166, 0.22); }
.chip-fx[aria-pressed="true"] .toggle-box { background: var(--c-violet); border-color: var(--c-violet); }
.chip-fx .toggle-box { border-color: var(--c-violet); }
.viewer-tools { display: flex; gap: 10px; align-items: center; }
.viewer-fx {
  width: 44px; height: 44px; border: none; border-radius: 10px; cursor: pointer; font-size: 20px;
  background: var(--surface-2); color: #fff; box-shadow: 3px 3px 0 #0a0710;
}
.viewer-fx[aria-pressed="true"] { background: var(--c-violet); box-shadow: 3px 3px 0 var(--c-violet-d); }
.viewer-fx[aria-pressed="false"] { opacity: 0.6; }

/* ---------- Carte possédée par un autre joueur, image privée ---------- */
.tcard.owned-private .tcard-art {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(148, 60, 166, 0.35), transparent 70%),
    repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--bg-2) 12px 24px);
}
.private-mark { display: grid; justify-items: center; gap: 8px; font: 700 13px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.private-mark svg { width: 34px; height: 34px; color: var(--c-orange); }

/* ---------- Filtre « Uniquement possédées » du livre ---------- */
.chip-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.chip-toggle .toggle-box {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--c-vert); display: grid; place-items: center; flex: none;
}
.chip-toggle[aria-pressed="true"] { border-color: var(--c-vert); background: rgba(96, 179, 126, 0.18); color: #fff; }
.chip-toggle[aria-pressed="true"] .toggle-box { background: var(--c-vert); }
.chip-toggle[aria-pressed="true"] .toggle-box::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
@media (max-width: 640px) { .chip-toggle { margin-left: 0; } }

/* ---------- Visionneuse plein écran du livre ---------- */
#book .tcard:not(.missing):not(.owned-private) .tcard-art { cursor: zoom-in; }
#book .tcard:not(.missing):not(.owned-private) .tcard-art:hover { filter: brightness(1.08); }
.viewer {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: rgba(8, 5, 14, 0.96); /* pas de flou : re-flouter la page à chaque image faisait ramer le défilement */
  touch-action: pan-y;
}
.viewer-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.viewer-count { font: 700 15px var(--font-display); letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.viewer-close {
  width: 44px; height: 44px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--c-corail); color: #fff; font-size: 20px; box-shadow: 3px 3px 0 var(--c-corail-d);
}
.viewer-stage { flex: 1; overflow: hidden; position: relative; cursor: grab; touch-action: pan-y; user-select: none; }
.viewer-stage:active { cursor: grabbing; }
/* Seules les images défilent (transform sur une couche GPU dédiée) */
.viewer-track { display: flex; height: 100%; transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.3, 1); will-change: transform; backface-visibility: hidden; }
.viewer-slide { contain: layout paint; }
.viewer-slide { flex: 0 0 100%; display: grid; place-items: center; padding: 8px 70px; }
.viewer-slide img {
  max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain;
  border-radius: 12px; border: 3px solid var(--c-violet); box-shadow: 8px 8px 0 var(--c-violet-d);
  background: var(--bg-2); pointer-events: none;
}
/* Position (left/top) calculée en JS : les flèches sont collées aux bords de l'image */
.viewer-nav {
  position: fixed; z-index: 2; left: 0; top: 50%;
  width: 52px; height: 72px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--c-violet); color: #fff; font: 700 38px/1 var(--font-display); box-shadow: 4px 4px 0 var(--c-violet-d);
  transition: none; /* aucune animation sur les flèches */
}
.viewer-nav:hover:not(:disabled) { background: #a74bba; }
.viewer-nav:disabled { opacity: 0.25; cursor: default; }
.viewer-caption { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 12px 16px 20px; font: 700 18px var(--font-display); text-align: center; }
@media (max-width: 640px) {
  .viewer-slide { padding: 8px 12px; }
  .viewer-nav { width: 40px; height: 56px; font-size: 30px; opacity: 0.92; }
  .viewer-slide img { max-height: calc(100vh - 190px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .side-nav .side-pill:active { transform: none; }
  .confirm-back, .confirm-modal, .viewer { animation: none; }
  .viewer-track { transition: none; }
}

/* Reflet UR dans l'image arrondie (cartes avec bordure) */
.tcard.framed.UR .tcard-pic::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 220, 170, 0.32) 50%, transparent 100%);
  transform: translate3d(-120%, 0, 0); will-change: transform;
  animation: ur-shine 4.5s ease-in-out infinite;
}
/* Pauses / désactivation, comme pour les autres effets */
.flip:not(.open) .tcard.GHOST .tcard-pic::before, .flip:not(.open) .tcard.GHOST .tcard-pic::after,
.flip:not(.open) .tcard.UR .tcard-pic::after { animation: none; }
body.viewer-open .tcard-pic::before, body.viewer-open .tcard-pic::after { animation-play-state: paused; }
html.fx-off .tcard-pic::before, html.fx-off .tcard-pic::after { display: none !important; animation: none !important; }
html.fx-off .tcard.GHOST .tcard-pic img { filter: none; }
.tcard.GHOST .tcard-pic img { filter: saturate(1.15) contrast(1.05); }

/* Cartes avec bordure : aucun halo / contour rectangulaire hérité des anciennes règles de rareté
   (leurs coins carrés dépassaient des coins arrondis de la bordure). Spécificité plus forte exprès. */
.tcard.framed.C .tcard-art, .tcard.framed.R .tcard-art, .tcard.framed.UR .tcard-art,
.tcard.framed.GHOST .tcard-art, .tcard.framed.skin .tcard-art, .tcard.framed.accessory .tcard-art,
.flip.open .tcard.framed.UR .tcard-art, .tcard.framed.showcased .tcard-art {
  box-shadow: none; border: none; outline: none;
}
.tcard.framed.showcased .tcard-pic { box-shadow: inset 0 0 0 3px var(--c-orange); }
.flip.ur-burst .tcard.framed .tcard-art { animation: none; }
.flip.ur-burst .tcard.framed .tcard-pic { animation: ur-glow-pic 1.6s ease-out 1 both; }
@keyframes ur-glow-pic {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.35) drop-shadow(0 0 18px rgba(255, 190, 80, 0.9)); }
  100% { filter: brightness(1); }
}

/* Pastilles de rareté (C bronze, R bleu, UR or, Ghost violet) à la place des lettres */
.tcard .badge-corner.rarity-pin {
  width: 15%; max-width: 42px; min-width: 18px; height: auto; aspect-ratio: 1;
  top: 4%; left: 4%; z-index: 6; pointer-events: auto;
  border: none; background: none; padding: 0; border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.tcard.framed .badge-corner.rarity-pin { top: 4.5%; left: 5%; }

/* Feux d'artifice : le canevas « behind » passe sous les cartes (les gerbes sortent de derrière la carte) */
.reveal { position: relative; z-index: 1; }
.fw-canvas.fw-behind { z-index: 0; }