/* Hoshi TCG — scène d'ouverture Afterglow : pack fermé + pile (stack) avant révélation.
   Extrait de pack.css (retour Noé 2026-07-29 : fichier au plafond de 300 lignes). */

/* ── Pack fermé ── */
.ag-pack { position: relative; width: 220px; aspect-ratio: 220/320; transform-style: preserve-3d; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.7)); }
/* Relief (retour Noé 2026-07-29 : « les packs sont juste plats sans relief ») : ombres internes
   simulant une pochette foil bombée (plus sombre sur les bords, catch-light en haut) + un reflet
   diagonal fixe suggérant une surface courbe — distinct du .ag-sweep qui suit la souris au survol. */
.ag-pack-body {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4px;
  background: linear-gradient(170deg, #10182a, #0a0f1c 60%, #070b14); border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -14px 26px rgba(0,0,0,0.4),
    inset 12px 0 20px rgba(0,0,0,0.22), inset -12px 0 20px rgba(0,0,0,0.22);
}
.ag-pack-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0.08) 0%, transparent 24%, transparent 76%, rgba(0,0,0,0.28) 100%);
}
.ag-pack-body.gone { transition: opacity .3s ease; opacity: 0; }
.ag-perf { position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, #0e1524 0 5px, #1a2438 5px 10px); }
.ag-perf.top { top: 0; border-bottom: 1px solid rgba(188,215,255,0.2); box-shadow: 0 3px 6px rgba(0,0,0,0.35); }
.ag-perf.bot { bottom: 0; height: 13px; border-top: 1px solid rgba(188,215,255,0.2); box-shadow: 0 -3px 6px rgba(0,0,0,0.35); }
.ag-pack-art {
  position: absolute; top: 30px; left: 20px; right: 20px; height: 150px; border: 1px solid rgba(188,215,255,0.22);
  background: repeating-linear-gradient(45deg, rgba(188,215,255,.06) 0 8px, rgba(188,215,255,.02) 8px 16px);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.06);
}
.ag-pack-name { position: absolute; bottom: 56px; left: 0; right: 0; text-align: center; font-size: 1.05rem; font-weight: 500; color: var(--ink); letter-spacing: 0.34em; }
.ag-pack-sub { position: absolute; bottom: 32px; left: 0; right: 0; text-align: center; font-size: 0.6rem; color: var(--ink-dim); letter-spacing: 0.2em; }
.ag-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 34%, rgba(220,235,255,0.3) 48%, transparent 64%); background-size: 240% 240%; background-position: 50% 50%; }
.ag-pack.premium .ag-pack-body { background: linear-gradient(170deg, #1c1330, #140a24 60%, #0c0618); border-color: rgba(179,148,224,0.4); }
.ag-pack.premium .ag-pack-name { color: var(--tier-b); }

/* ── Pile (stack) ── */
.ag-stack { position: relative; width: 244px; aspect-ratio: 244/350; transform-style: preserve-3d; animation: popIn 0.3s ease-out; cursor: grab; touch-action: none; }
.ag-stack:active { cursor: grabbing; }
/* Au repos : contour neutre, aucun indice de rareté visible. Au tilt (.ag-stack.tilting),
   CHAQUE tier prend la couleur de son contour (E D C B A S — pas seulement Épique+, sinon on
   ne distingue pas un commun d'un rare) ; seule la LUEUR (box-shadow) reste réservée à Épique+,
   pour garder un signal fort sur les bonnes surprises sans pour autant rendre les tiers bas
   méconnaissables. Couleurs lues directement depuis les tokens partagés (--tier-*), jamais
   dupliquées en JS (retour Noé 2026-07-28 : bug corrigé, seul B/A/S changeaient de couleur avant). */
.ag-stack-card {
  position: absolute; inset: 0; transform: translateZ(var(--z, 0)); border-radius: 6px; cursor: pointer; overflow: hidden;
  background: linear-gradient(165deg, #121b30, #080c16); box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: box-shadow 0.2s ease;
}
/* Cadre dégradé par tier (même technique que .tcg::after, tokens --frame-*) : un ::after masqué
   ne garde que l'anneau de bordure du dégradé. AUCUNE bordure réelle sur .ag-stack-card lui-même
   (bug corrigé 2026-07-28 : une vraie bordure sur le parent décale la boîte de contenant du ::after
   d'une largeur de bordure — le ::after inset:0 se calant sur le bord PADDING, pas BORDER, donnait
   deux anneaux visibles empilés). Couleur neutre par défaut, dégradé au tilt via `background`. */
.ag-stack-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2.5px solid transparent; background: rgba(188,215,255,0.25) border-box; transition: background 0.2s ease;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ag-stack.tilting .ag-stack-card.t-e::after { background: var(--frame-e) border-box; }
.ag-stack.tilting .ag-stack-card.t-d::after { background: var(--frame-d) border-box; }
.ag-stack.tilting .ag-stack-card.t-c::after { background: var(--frame-c) border-box; }
.ag-stack.tilting .ag-stack-card.t-b::after { background: var(--frame-b) border-box; }
.ag-stack.tilting .ag-stack-card.t-a::after { background: var(--frame-a) border-box; }
.ag-stack.tilting .ag-stack-card.t-s::after { background: var(--frame-s) border-box; }
.ag-stack.tilting .ag-stack-card.t-b { box-shadow: 0 0 18px color-mix(in srgb, var(--tier-b) 45%, transparent), 0 3px 12px rgba(0,0,0,.5); }
.ag-stack.tilting .ag-stack-card.t-a { box-shadow: 0 0 18px color-mix(in srgb, var(--tier-a) 45%, transparent), 0 3px 12px rgba(0,0,0,.5); }
/* Lueur mythique : mêmes valeurs exactes que .tcg.t-s (cards.css), un seul design partout. */
.ag-stack.tilting .ag-stack-card.t-s {
  box-shadow: rgba(255, 61, 110, 0.55) 0px -7.5px 17.5px, rgba(255, 179, 64, 0.5) 7px -4px 17.5px,
    rgba(255, 228, 94, 0.5) 7px 4px 17.5px, rgba(94, 230, 168, 0.5) 0px 8px 17.5px,
    rgba(77, 168, 255, 0.5) -7px 4px 17.5px, rgba(179, 86, 255, 0.5) -7px -4px 17.5px, 0 3px 12px rgba(0,0,0,.5);
}
.ag-stack-inner { position: absolute; inset: 10px; border: 1px solid rgba(188,215,255,0.14); display: flex; align-items: center; justify-content: center; }
.ag-stack-inner span { font-size: 0.66rem; color: rgba(125,147,184,0.55); letter-spacing: 0.32em; }
/* Dos de carte personnalisé (retour Noé 2026-07-29 : « ça marche pas ») — le dos choisi en
   Paramètres n'était jamais lu pendant l'ouverture de pack, toujours le même "AFTERGLOW" neutre
   quel que soit le dos équipé. Mêmes motifs que l'aperçu boutique/paramètres (cards.css
   .card-back.sleeve-*), appliqués ici sur la vraie pile de cartes. */
.ag-stack.sleeve-sakura .ag-stack-card {
  background: radial-gradient(circle at 22% 18%, rgba(255, 122, 156, 0.28) 3px, transparent 4px),
    radial-gradient(circle at 78% 32%, rgba(255, 122, 156, 0.2) 2px, transparent 3px),
    radial-gradient(circle at 38% 74%, rgba(255, 122, 156, 0.24) 3px, transparent 4px),
    radial-gradient(circle at 84% 82%, rgba(255, 122, 156, 0.18) 2px, transparent 3px),
    linear-gradient(160deg, #2A1626, #140A18);
}
.ag-stack.sleeve-sakura .ag-stack-inner span { color: var(--tier-s1); }
.ag-stack.sleeve-night .ag-stack-card {
  background: radial-gradient(1px 1px at 24% 22%, rgba(237, 239, 247, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 14%, rgba(237, 239, 247, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 60%, rgba(176, 140, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, rgba(237, 239, 247, 0.5) 50%, transparent 51%),
    linear-gradient(160deg, #0F1733, #070B1A);
}
.ag-stack.sleeve-night .ag-stack-inner span { color: var(--tier-b); }
.ag-stack.sleeve-gold .ag-stack-card {
  background: repeating-linear-gradient(135deg, rgba(245, 198, 79, 0.08) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2B2110, #17110A);
}
.ag-stack.sleeve-gold .ag-stack-inner { border-color: rgba(245, 198, 79, 0.5); }
.ag-stack.sleeve-gold .ag-stack-inner span { color: var(--gold); }