/* ===== VOID PACK — OPENING MOBILE v16.10 ===== */
/* Chargé EN DERNIER. Une seule règle par composant. */

/* ══════════════════════════════════════════════
   1. CARTE — taille maximale
══════════════════════════════════════════════ */

.void-legacy-opening .single-card-wrap {
  width: min(clamp(220px, 72vw, 380px), calc((100svh - 150px) * 0.715)) !important;
  aspect-ratio: 635 / 889 !important;
  perspective: 1600px !important;
  align-self: center;
  justify-self: center;
}

@media (orientation: landscape) and (max-height: 500px) {
  .void-legacy-opening .single-card-wrap {
    width: min(clamp(140px, 36vw, 240px), calc((100svh - 70px) * 0.715)) !important;
  }
}

/* ══════════════════════════════════════════════
   2. VIEW — vraie hauteur viewport
══════════════════════════════════════════════ */

.void-legacy-opening .view {
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  padding: calc(52px + env(safe-area-inset-top)) 20px calc(72px + env(safe-area-inset-bottom)) !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

@media (orientation: landscape) and (max-height: 500px) {
  .void-legacy-opening .view {
    padding-top: calc(36px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(36px + env(safe-area-inset-bottom)) !important;
  }
}

/* ══════════════════════════════════════════════
   3. PROGRESS LABEL
══════════════════════════════════════════════ */

.void-legacy-opening .progress-label {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════
   4. SUMMARY — plein écran sur body
══════════════════════════════════════════════ */

body > .legacy-summary,
.void-legacy-opening .legacy-summary {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200 !important;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--va, #7b2bff) 20%, transparent), transparent 55%),
    #02010a !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: env(safe-area-inset-top) 0 0 !important;
}

body > .legacy-summary.hidden,
.void-legacy-opening .legacy-summary.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Panel — contient tout, gère l'overflow */
body > .legacy-summary .legacy-summary__panel,
.void-legacy-opening .legacy-summary .legacy-summary__panel {
  /* Écraser min(1180px, 94vw) de style.css */
  width: min(600px, 94vw) !important;
  max-width: 600px !important;
  min-height: 0 !important;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  /* Empêcher tout débordement */
  box-sizing: border-box !important;
}

/* Header */
body > .legacy-summary .legacy-summary__head,
.void-legacy-opening .legacy-summary .legacy-summary__head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  align-items: center !important;
  justify-content: space-between !important;
}

@media (max-width: 480px) {
  body > .legacy-summary .legacy-summary__head,
  .void-legacy-opening .legacy-summary .legacy-summary__head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .vs-add-btn { width: 100% !important; text-align: center !important; }
}

/* Titres */
.vs-head__left { display: flex; flex-direction: column; gap: 4px; }
.vs-head__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.vs-head__title { font-size: clamp(1.4rem, 6vw, 2.4rem) !important; font-weight: 900 !important; letter-spacing: -.02em !important; color: #fff !important; margin: 0 !important; line-height: 1 !important; }

/* Bouton ajouter */
.vs-add-btn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--va, #7b2bff) 70%, white), var(--va, #7b2bff));
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 0 28px color-mix(in srgb, var(--va, #7b2bff) 50%, transparent);
  transition: transform .1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.vs-add-btn:active { transform: scale(.96); }
@supports not (background: color-mix(in srgb, red, blue)) {
  .vs-add-btn { background: linear-gradient(135deg, #b97cff, #7b2bff) !important; }
}

/* Grille — flexbox, 3+2 avec centrage, aucun débordement */
body > .legacy-summary .legacy-summary__grid,
.void-legacy-opening .legacy-summary .legacy-summary__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Toutes les cartes : 1/3 de la largeur moins les gaps */
/* 3 cartes par ligne : (100% - 2*10px) / 3 */
body > .legacy-summary .legacy-summary-card,
.void-legacy-opening .legacy-summary .legacy-summary-card {
  flex: 0 0 calc((100% - 20px) / 3) !important;
  width: calc((100% - 20px) / 3) !important;
  min-width: 0 !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.legacy-summary-card:active {
  opacity: .85;
  transform: scale(.97);
  transition: opacity .08s, transform .08s;
}

/* void-card dans summary : width 100% du flex item, pas de min-width fixe */
body > .legacy-summary .legacy-summary-card .void-card,
.void-legacy-opening .legacy-summary .legacy-summary-card .void-card {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  /* Même fix que l'inspect : clip-path au lieu de overflow:hidden
     pour que les coins soient nets sans couper le glow */
  overflow: visible !important;
  clip-path: inset(0 round 1.2rem) !important;
  isolation: auto !important;
}

/* ══════════════════════════════════════════════
   5. INSPECT OVERLAY — sheet du bas
══════════════════════════════════════════════ */

/* [hidden] DOIT gagner sur tout */
.inspect-overlay[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Ouvert : sheet ancrée en bas */
.inspect-overlay:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  place-items: unset !important;
  /* L'overlay est toujours opaque — c'est .vic qui gère l'animation */
  opacity: 1 !important;
  transition: none !important;
}

/* Pas de clics quand fermé (opacity:0 mais pas encore hidden) */
.inspect-overlay:not(.is-open) {
  pointer-events: none !important;
}

@media (min-width: 640px) {
  .inspect-overlay:not([hidden]) {
    align-items: center !important;
    padding: 24px !important;
  }
}

/* Backdrop */
.inspect-overlay__backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(2,1,8,.82) !important;
  backdrop-filter: blur(8px) !important;
}

/* Panel : sheet qui monte du bas */
.inspect-overlay__panel {
  position: relative !important;
  /* Écraser le min(100%, 920px) de style.css */
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  max-height: 92svh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Pas de padding ici — le sheet gère son propre padding */
  padding: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: none !important;
  background: #090613 !important;
  box-shadow: 0 -8px 60px rgba(0,0,0,.6) !important;
  /* Transform de départ — monte vers 0 */
  transform: translateY(100%) !important;
  transition: transform .38s cubic-bezier(.32,1.2,.6,1) !important;
  will-change: transform !important;
  /* Écraser scale de style.css */
  scale: 1 !important;
}

.inspect-overlay.is-open .inspect-overlay__panel {
  transform: translateY(0) !important;
}

@media (min-width: 640px) {
  .inspect-overlay:not([hidden]) {
    align-items: center !important;
  }
  .inspect-overlay__panel {
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    max-height: 88svh !important;
    transform: scale(.93) translateY(16px) !important;
  }
  .inspect-overlay.is-open .inspect-overlay__panel {
    transform: scale(1) translateY(0) !important;
  }
}

/* Bouton fermer */
.inspect-overlay__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.8) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════════
   6. VIC — CARD INSPECT MODAL PLEIN ÉCRAN
══════════════════════════════════════════════ */

/* Overlay : plein écran, fond opaque */
.inspect-overlay:not([hidden]) .inspect-overlay__panel {
  /* Reset du panel : il devient juste un conteneur plein écran */
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* Bouton fermer */
.inspect-overlay__close {
  position: fixed !important;
  top: calc(16px + env(safe-area-inset-top)) !important;
  right: 16px !important;
  z-index: 600 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(10,6,20,.72) !important;
  backdrop-filter: blur(12px) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* ── VIC layout ── */
.vic {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  /* Fond sombre + lueur rareté */
  background:
    radial-gradient(ellipse at 50% 35%, var(--rg, rgba(107,114,128,.25)), transparent 60%),
    #04020c;
}

/* Fond ambiant animé */
.vic__bg {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 50% 50%, var(--rb, transparent), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  animation: vicBgBreath 4s ease-in-out infinite;
}

@keyframes vicBgBreath {
  0%,100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* Zone carte : prend tout l'espace vertical disponible */
.vic__card-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(60px + env(safe-area-inset-top)) 24px 16px;
  position: relative;
  z-index: 1;
  min-height: 0;
  /* Overflow visible pour que le glow de la carte déborde librement */
  overflow: visible;
}

/* Mount : la carte doit être aussi grande que possible */
.vic__card-mount {
  /* Hauteur = espace dispo - infos (≈140px) - padding */
  height: min(calc(100svh - 200px), 700px);
  /* Largeur calculée depuis le ratio */
  width: calc(min(calc(100svh - 200px), 700px) * 0.714);
  /* Contrainte horizontale */
  max-width: calc(100vw - 48px);
  position: relative;
  /* PAS d'overflow:hidden — le glow doit pouvoir déborder */
  overflow: visible !important;
  /* Le drop-shadow est sur le mount, pas sur la carte
     pour ne pas être clippé par l'overflow:hidden de .void-card */
  filter: drop-shadow(0 0 40px var(--rg, rgba(107,114,128,.28)))
          drop-shadow(0 32px 60px color-mix(in srgb, var(--rg, rgba(107,114,128,.2)) 60%, transparent));
}

.vic__card-mount .void-card {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 635 / 889 !important;
  cursor: default !important;
  filter: none !important;
  pointer-events: auto !important;
  /* Remplacer overflow:hidden par clip-path pour garder les coins arrondis
     SANS créer un stacking context qui coupe le glow externe */
  overflow: visible !important;
  /* Reproduire le border-radius 1.2rem via clip-path */
  clip-path: inset(0 round 1.2rem) !important;
  /* Désactiver isolation pour permettre au glow de déborder */
  isolation: auto !important;
}

/* Les enfants directs qui avaient besoin du overflow:hidden */
.vic__card-mount .void-card .void-card__art,
.vic__card-mount .void-card .void-card__layer-stack {
  overflow: hidden !important;
  border-radius: 0 !important;
}

/* Glow ambiant doux derrière la carte — séparé pour ne pas être clippé */
.vic__card-mount::after {
  content: '';
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, var(--rg, rgba(107,114,128,.22)), transparent 65%);
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
  animation: vicCardGlow 4s ease-in-out infinite;
}

@keyframes vicCardGlow {
  0%,100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}

/* Infos : bandeau bas discret */
.vic__info {
  position: relative;
  z-index: 2;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(4,2,12,.96) 0%, rgba(4,2,12,.82) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vic__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vic__name {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 900;
  color: #fff;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1;
}

.vic__rarity-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.vic__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vic__tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  font-size: .68rem;
  font-weight: 500;
}

.vic__tag--holo {
  border-color: transparent;
}

.vic-banner, .vic-banner--void, .vic-banner--legendary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 600;
}

.vic-banner--void {
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.3);
  color: #c084fc;
}

.vic-banner--legendary {
  background: rgba(250,204,21,.08);
  border: 1px solid rgba(250,204,21,.28);
  color: #fde047;
}

/* Transition d'entrée : la modal scale-in depuis le centre */
.inspect-overlay:not(.is-open) .vic {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .25s ease, transform .25s ease;
}

.inspect-overlay.is-open .vic {
  opacity: 1;
  transform: scale(1);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .vic__bg { animation: none; }
  .inspect-overlay:not(.is-open) .vic,
  .inspect-overlay.is-open .vic { transition: none; }
}

/* ══════════════════════════════════════════════
   7. TAP & REDUCED MOTION
══════════════════════════════════════════════ */

.void-legacy-opening .single-card-wrap.clickable {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .void-legacy-opening__backdrop::after { animation: none !important; opacity: .4; }
  .void-legacy-opening .single-card-wrap.suspense .card-back { animation: none !important; }
  .inspect-overlay__panel { transition: none !important; }
}