/* Hoshi TCG — scène d'ouverture « Afterglow » : déchirure au glissé → pile → révélation → grille. */

/* Centrage vertical (retour Noé 2026-07-28 : « le pack n'est pas centré ») : le header (~60-68px)
   est plus court que la barre du bas (~96-101px) — centrer strictement DANS l'espace entre les
   deux (comme avant, avec 190px) pousse visuellement la scène plus haut que le vrai centre de
   l'écran. 176px est la moyenne des deux compensations mesurées (mobile ≈168, desktop ≈184) pour
   retomber au plus près du centre réel de la fenêtre des deux côtés. */
.ag-scene {
  position: relative; min-height: calc(100svh - 176px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  perspective: 1200px; overflow: hidden;
}
.ag-particles { position: absolute; inset: 0; color: var(--accent); pointer-events: none; z-index: 0; }
.ag-particles i { position: absolute; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: floatY var(--dur, 5s) ease-in-out var(--delay, 0s) infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes crackShake { 0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-3px,1px) rotate(-1.2deg)} 40%{transform:translate(3px,-1px) rotate(1.2deg)} 60%{transform:translate(-2px,-1px) rotate(-.8deg)} 80%{transform:translate(2px,1px) rotate(.8deg)} }
@keyframes topHalfFly { 0%{transform:translate(0,0) rotate(0);opacity:1} 100%{transform:translate(-30px,-190px) rotate(-24deg);opacity:0} }
@keyframes flipIn { 0%{transform:rotateY(90deg) scale(.94);opacity:0} 100%{transform:rotateY(0) scale(1);opacity:1} }
@keyframes popIn { 0%{transform:translateY(18px) scale(.9);opacity:0} 100%{transform:translateY(0) scale(1);opacity:1} }

.ag-stage { position: relative; z-index: 2; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Récap de pack : flux normal comme /collection, pas de centrage vertical dans une hauteur de
   scène fixe (retour Noé 2026-07-29, 2e passe : le padding-top ajouté au tour précédent ne
   suffisait toujours pas — la vraie cause est le centrage lui-même. La grille de résultats est une
   liste, pas une animation cinématique ; elle doit se comporter comme n'importe quelle page,
   espacée uniquement par le padding-top existant de .wrap, jamais derrière le header). */
.ag-scene.is-summary { min-height: 0; }
.ag-scene.is-summary .ag-stage { justify-content: flex-start; }
.ag-hint { font-size: 0.7rem; color: rgba(188, 215, 255, 0.6); letter-spacing: 0.2em; text-transform: uppercase; animation: pulseGlow 3s ease-in-out infinite; text-align: center; }
.ag-sub { font-size: 0.66rem; color: var(--ink-dim); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Révélation ── */
.ag-reveal { position: relative; width: 265px; aspect-ratio: 265/377; transform-style: preserve-3d; }
/* Même cadre en dégradé que .tcg/.ag-stack-card (tokens --frame-*), pour un design de carte
   identique partout — collection, marché, encyclopédie ET la révélation de pack (retour Noé
   2026-07-28 : « un seul design pour les cartes »). Lueur (box-shadow) réservée à Épique+. */
.ag-card {
  position: absolute; inset: 0; border-radius: 7px; overflow: hidden;
  background: linear-gradient(165deg, #0f1727, #070a12);
  animation: flipIn 0.26s ease-out;
}
.ag-card::after, .ag-mini::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ag-card::after { border: 2px solid transparent; }
.ag-mini::after { border: 1px solid transparent; }
.ag-card.t-e::after, .ag-mini.t-e::after { background: var(--frame-e) border-box; }
.ag-card.t-d::after, .ag-mini.t-d::after { background: var(--frame-d) border-box; }
.ag-card.t-c::after, .ag-mini.t-c::after { background: var(--frame-c) border-box; }
.ag-card.t-b::after, .ag-mini.t-b::after { background: var(--frame-b) border-box; }
.ag-card.t-a::after, .ag-mini.t-a::after { background: var(--frame-a) border-box; }
.ag-card.t-s::after, .ag-mini.t-s::after { background: var(--frame-s) border-box; }
.ag-card.t-b, .ag-mini.t-b { box-shadow: 0 0 16px color-mix(in srgb, var(--tier-b) 35%, transparent); }
.ag-card.t-a, .ag-mini.t-a { box-shadow: 0 0 18px color-mix(in srgb, var(--tier-a) 40%, transparent); }
/* Lueur mythique : mêmes valeurs exactes que .tcg.t-s (cards.css), un seul design partout. */
.ag-card.t-s, .ag-mini.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;
}
/* Synchronisé avec .tcg img (cards.css, retour Noé 2026-07-28 : « pourquoi plusieurs designs ? »)
   — deux vraies différences avaient traîné : l'ancien object-position (« top center » au lieu de
   « center 18% ») et l'absence de coins arrondis sur la zone image. Les deux corrigés ici. */
/* Hauteur mesurée pour que l'image touche quasi le bloc nom/série (retour Noé 2026-07-28 :
   « l'image ne descend pas jusqu'au nom » — 56% laissait ~79px de vide au-dessus du nom sur 377px
   de carte ; 74% ramène cet écart à ~11px, la même proportion que la carte classique .tcg). */
.ag-art { position: absolute; top: 12px; left: 12px; right: 12px; height: 74%; border: 1px solid rgba(188,215,255,0.18); border-radius: 8px; overflow: hidden; background: #0a0f1c; }
.ag-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.ag-card .tier-chip { top: 12px; right: 16px; font-size: 0.9rem; }
/* Bloc nom/série/valeur — mêmes classes que le composant carte unifié (.nm, .tcg-divider,
   .tcg-foot, .anime, .price ; cards.css), un peu agrandies pour la présentation « héros » de la
   révélation, mais même hiérarchie et mêmes couleurs par tier (retour Noé 2026-07-28). */
.ag-meta { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.ag-meta .nm { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-meta .tcg-divider { margin: 4px 0 2px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ag-meta .tcg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-meta .anime { font-size: 0.74rem; font-weight: 300; color: var(--ink-dim); letter-spacing: 0.04em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ag-meta .price { font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ag-card.t-e .price, .ag-mini.t-e .price { color: var(--tier-e); }
.ag-card.t-d .price, .ag-mini.t-d .price { color: var(--tier-d); }
.ag-card.t-c .price, .ag-mini.t-c .price { color: var(--tier-c); }
.ag-card.t-b .price, .ag-mini.t-b .price { color: var(--tier-b); }
.ag-card.t-a .price, .ag-mini.t-a .price { color: var(--tier-a); }
.ag-card.t-s .price, .ag-mini.t-s .price {
  color: rgb(255, 242, 246);
  text-shadow: rgb(255, 255, 255) 0px 0px 6px, rgb(255, 61, 110) 1.5px -1px 5px, rgb(255, 179, 64) -1.5px -1px 5px,
    rgb(77, 168, 255) 1.5px 1px 5px, rgb(179, 86, 255) -1.5px 1px 5px, rgba(0, 0, 0, 0.5) 0px 0px 14px;
}
/* Mini-carte du récap : même bloc nom/série/valeur que la carte de révélation, redimensionné. */
.ag-mini .ag-meta { left: 8px; right: 8px; bottom: 8px; gap: 2px; }
.ag-mini .ag-meta .nm { font-size: 0.7rem; }
.ag-mini .ag-meta .tcg-divider { margin: 2px 0 1px; }
.ag-mini .ag-meta .anime, .ag-mini .ag-meta .price { font-size: 0.6rem; }

.ag-dots { display: flex; gap: 8px; }
.ag-dots span { width: 7px; height: 7px; transform: rotate(45deg); background: transparent; border: 1px solid rgba(125,147,184,0.5); transition: background 0.2s, border-color 0.2s; }
.ag-dots span.on { background: var(--accent); border-color: var(--accent); }

/* ── Grille récap ── */
/* Mini-cartes agrandies sur PC (112px → 136px, retour Noé 2026-07-28) et alignées sur le même
   design que partout ailleurs : pastille de tier en haut-DROITE (cards.css, plus en bas-gauche
   comme avant) et bloc nom/série/valeur identique à la carte de révélation (voir .ag-meta ci-dessus). */
.ag-summary-grid { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 1060px; }
.ag-mini {
  position: relative; width: 136px; aspect-ratio: var(--card-ratio); flex: none; border-radius: 5px; overflow: hidden;
  background: linear-gradient(165deg, #0f1727, #070a12);
  animation: popIn 0.28s ease-out var(--delay, 0s) backwards;
  cursor: pointer;
}
/* Même correctif que .ag-art ci-dessus, proportion adaptée à la mini-carte (mesuré : ~20px de
   vide à 60%, ~9px à 66%). */
.ag-mini .ag-art { top: 8px; left: 8px; right: 8px; height: 66%; border-radius: 6px; }
.ag-mini .tier-chip { font-size: 0.62rem; }
.ag-summary-line { font-size: 0.7rem; color: rgba(188,215,255,0.65); letter-spacing: 0.2em; text-transform: uppercase; }

/* Overlay carte en grand (clic depuis le récap) */
.ag-overlay { position: fixed; inset: 0; z-index: 80; background: var(--bg-overlay); backdrop-filter: blur(9px); display: flex; align-items: center; justify-content: center; padding: var(--s5); animation: toast-in 0.2s ease; }
.ag-overlay-inner { display: flex; gap: var(--s7); align-items: center; flex-wrap: wrap; justify-content: center; }
.ag-overlay .ag-reveal { width: 280px; }
.ag-overlay-facts { display: flex; flex-direction: column; gap: var(--s2); min-width: 220px; }
.ag-overlay-facts .fact { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.ag-overlay-facts .k { color: var(--ink-dim); }
.ag-overlay-facts .v { font-weight: 500; font-variant-numeric: tabular-nums; }
.ov-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }

/* ── Full-art (A légendaire / S mythic) : image plein cadre + flou de contour sous le texte ── */
.ag-blur { display: none; }
.ag-card.fullart .ag-art { top: 0; left: 0; right: 0; bottom: 0; height: auto; border: none; border-radius: 0; }
/* Texte lisible sur l'image plein cadre sans avoir besoin d'un flou lourd. */
.ag-card.fullart .ag-meta .nm, .ag-card.fullart .ag-meta .anime { text-shadow: 0 1px 7px rgba(0, 0, 0, 0.92), 0 0 2px rgba(0, 0, 0, 0.85); }
/* Flou retiré (retour Noé 2026-07-28) : simple dégradé, comme la carte classique .tcg.fullart. */
.ag-card.fullart .ag-blur {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 2;
  background: linear-gradient(transparent, rgba(6, 9, 16, 0.62));
  -webkit-mask-image: linear-gradient(transparent, #000 62%); mask-image: linear-gradient(transparent, #000 62%);
}
.ag-mini.fullart .ag-art { top: 0; left: 0; right: 0; bottom: 0; height: auto; border: none; border-radius: 0; }
.ag-mini.fullart .ag-meta .nm, .ag-mini.fullart .ag-meta .anime { text-shadow: 0 1px 7px rgba(0, 0, 0, 0.92), 0 0 2px rgba(0, 0, 0, 0.85); }
.ag-mini.fullart .ag-blur {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 54%; z-index: 2;
  background: linear-gradient(transparent, rgba(6, 9, 16, 0.5));
  -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%);
}

/* ── Couteau : couche qui remplit toute la scène (curseur actif partout), séparation en deux ── */
.ag-cut-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; touch-action: none; }
.ag-cut-layer.knife { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M4 26 L18 9 L23 4 L24 9 L9 23 Z" fill="%23e7eefb" stroke="%235a6b8a" stroke-width="1"/><path d="M4 26 L7 23" stroke="%23dcebff" stroke-width="2"/></svg>') 4 26, crosshair; }
.ag-cut-layer .ag-pack { width: 240px; }
.ag-back { margin-top: 18px; font-size: 0.64rem; color: var(--ink-dim); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.ag-back:hover { color: var(--ink); }
.ag-slash {
  position: absolute; height: 2px; transform-origin: left center; pointer-events: none; z-index: 30; opacity: 0;
  background: linear-gradient(90deg, transparent, #dcebff 20%, #fff 50%, #dcebff 80%, transparent);
  box-shadow: 0 0 14px rgba(220, 235, 255, 0.95);
}
.ag-slash.flash { opacity: 1; }
.ag-half { position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity; }

/* ── Roue de packs (vraie roue : cylindre 3D, glisse au doigt/souris) ── */
.ag-wheel-stage { perspective: 1100px; width: 220px; height: 320px; cursor: grab; touch-action: none; }
.ag-wheel-stage:active { cursor: grabbing; }
.ag-wheel { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s var(--ease-spring); }
.ag-wheel-item { position: absolute; inset: 0; transition: opacity 0.4s ease; backface-visibility: hidden; }
.ag-wheel-count { margin-top: 26px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; color: var(--ink); letter-spacing: 0.16em; text-align: center; font-variant-numeric: tabular-nums; }
.ag-wheel-sub { margin-top: 7px; font-size: 0.62rem; color: var(--ink-dim); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }

/* Mobile (retour Noé 2026-07-27) : tout était dimensionné pour desktop et débordait/paraissait
   « zoomé » sur petit écran — chaque élément de la scène pack (pile, roue, couteau, révélation,
   récap, overlay) est réduit proportionnellement, pas juste la carte de révélation comme avant. */
@media (max-width: 480px) {
  /* Cartes agrandies sur téléphone (retour Noé 2026-07-28 : trop petites) — il y avait largement
     de la marge sur un viewport de 375px+, pas besoin de rester aussi compact qu'avant. */
  .ag-reveal { width: 240px; }
  .ag-wheel-stage, .ag-wheel { width: 210px; height: 305px; }
  .ag-stack { width: 230px; }
  .ag-cut-layer .ag-pack { width: 230px; }
  /* 3 mini-cartes par ligne (retour Noé 2026-07-28) : mesuré, 351px dispo (375px - 2×12px de
     marge de page) — 106px × 3 + 10px × 2 = 338px, tient avec de la marge. */
  .ag-mini { width: 106px; }
  /* Nom coupé par l'image sur la mini-carte du récap (retour Noé 2026-07-29, 3e signalement — pas
     le même bug que le header : ici c'est .ag-art qui déborde sur .ag-meta, mesuré ~5px de
     chevauchement à la largeur mobile réelle). Même correctif que .tcg img sur téléphone : image
     réduite pour laisser la place au nom. */
  .ag-mini .ag-art { height: 58%; }
  .ag-summary-grid { gap: 10px; }
  /* Trait de perforation du bas retiré sur téléphone (retour Noé 2026-07-28) — celui du haut reste. */
  .ag-perf.bot { display: none; }
  /* Texte « prochain pack » descendu (retour Noé 2026-07-28 : « caché sous les packs ») — le
     drop-shadow de .ag-pack déborde ~30-40px sous sa boîte réelle, un margin de 7px l'y plaçait
     en plein dedans (texte peu lisible sur fond sombre du flou). */
  .ag-wheel-sub { margin-top: 26px; }
  .ag-overlay .ag-reveal { width: 240px; }
  .ag-overlay-inner { gap: var(--s5); }
  .ag-overlay-facts { min-width: 0; width: 100%; }
  /* Fermer/Fiche complète centrés sur téléphone (retour Noé 2026-07-28) — alignés à gauche par
     défaut, ce qui détonnait dans une carte de faits par ailleurs centrée. */
  .ov-actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-particles { display: none; }
  .ag-pack.crack, .ag-pack-top.fly, .ag-card, .ag-mini, .ag-stack { animation: none !important; }
  .ag-hint { animation: none; }
}