/* 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-e); }

/* ── 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 (C U R E L M — 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 E/L/M 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-c::after { background: var(--frame-c) border-box; }
.ag-stack.tilting .ag-stack-card.t-u::after { background: var(--frame-u) border-box; }
.ag-stack.tilting .ag-stack-card.t-r::after { background: var(--frame-r) border-box; }
.ag-stack.tilting .ag-stack-card.t-e::after { background: var(--frame-e) border-box; }
.ag-stack.tilting .ag-stack-card.t-l::after { background: var(--frame-l) border-box; }
.ag-stack.tilting .ag-stack-card.t-m::after { background: var(--frame-m) border-box; }
.ag-stack.tilting .ag-stack-card.t-e { box-shadow: 0 0 18px color-mix(in srgb, var(--tier-e) 45%, transparent), 0 3px 12px rgba(0,0,0,.5); }
.ag-stack.tilting .ag-stack-card.t-l { box-shadow: 0 0 18px color-mix(in srgb, var(--tier-l) 45%, transparent), 0 3px 12px rgba(0,0,0,.5); }
/* Lueur mythique : mêmes valeurs exactes que .tcg.t-m (cards.css), un seul design partout. */
.ag-stack.tilting .ag-stack-card.t-m {
  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-m1); }
.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-e); }
.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); }

/* Dos de carte à base d'image (cosmétique admin, voir migrations/025) — générique, contrairement
   aux 3 dos ci-dessus qui restent en CSS pur : --sleeve-img est posée en inline par pack.js. */
.ag-stack.has-sleeve-img .ag-stack-card {
  background-image: var(--sleeve-img);
  background-size: cover;
  background-position: center;
}
.ag-stack.has-sleeve-img .ag-stack-inner span { color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }

/* ── Epaisseurs de la pile de packs (packwheel.js::packStackHTML) ─────────────────────────
   Depuis le retrait de la rotation (2026-08-17), la scene ne montre plus qu'un pack. Avec une
   reserve de plusieurs packs, ca "faisait bizarre" (retour Noe) : rien ne disait qu'il y en
   avait d'autres. On dessine donc quelques epaisseurs derriere, decalees de 3px vers le haut et
   la droite par niveau (--d), assombries et legerement reduites pour donner la profondeur.
   Purement decoratives : aria-hidden cote HTML, pointer-events:none ici — seul le pack de devant
   se clique, c'est de toute facon la meme carte a ouvrir. */
/* Mêmes règles de placement que .ag-wheel-item (pack.css) : absolute + inset:0, aucun centrage —
   sinon le .ag-pack interne ne se poserait pas au même endroit que celui du pack de devant.
   Le transform (translateZ) est posé par layoutWheelItems : même plan 3D que le pack de devant. */
.ag-stack-layer {
  position: absolute; inset: 0; pointer-events: none; backface-visibility: hidden;
}
/* Le decalage vit sur le .ag-pack interne, pas sur la couche : il se compose ainsi avec le
   translateZ applique au parent, au lieu de l'ecraser. La lueur portee est retiree — empilee
   plusieurs fois, elle formait un halo sombre bien plus large que la pile elle-meme. */
.ag-stack-layer .ag-pack {
  transform: translate(calc(var(--d) * 3px), calc(var(--d) * -3px));
  filter: brightness(calc(1 - var(--d) * 0.13));
  opacity: calc(1 - var(--d) * 0.06);
}