/* ═══════════════════════════════════════════════════════════════
   VOID STUDIO — DA REFONTE COMPLÈTE
   Fichier à linker après style.css dans index.html
   Ne touche pas au JS. Ne casse pas la logique hidden/visible.
   Surcharge proprement la DA V79 vers une esthétique TCG premium.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Barlow+Condensed:ital,wght@0,300;0,400;0,700;0,900;1,700;1,900&family=Inter:wght@300;400;500;600&display=swap');

/* ─── TOKENS VOID ─────────────────────────────────────────── */
:root {
  /* Couleurs primaires */
  --void-ink:      #05030C;
  --void-deep:     #0A0616;
  --void-surface:  #100C20;
  --void-panel:    rgba(16, 12, 32, 0.82);
  --void-glass:    rgba(255,255,255,0.042);
  --void-glass2:   rgba(255,255,255,0.075);

  /* Accents */
  --void-red:      #C23B2E;
  --void-red2:     #E05840;
  --void-red-dim:  rgba(194,59,46,0.22);
  --void-red-glow: rgba(194,59,46,0.38);

  --void-gold:     #D4A84B;
  --void-gold2:    #F2C96B;
  --void-gold-dim: rgba(212,168,75,0.18);

  --void-silver:   rgba(255,255,255,0.72);
  --void-muted:    rgba(255,255,255,0.36);
  --void-faint:    rgba(255,255,255,0.12);

  /* Lignes */
  --void-line:     rgba(255,255,255,0.08);
  --void-line2:    rgba(255,255,255,0.14);

  /* Typo */
  --font-display:  'Barlow Condensed', 'Rajdhani', sans-serif;
  --font-ui:       'Rajdhani', 'Inter', sans-serif;
  --font-body:     'Inter', sans-serif;
}

/* ─── RESET TYPO GLOBAL ───────────────────────────────────── */
body {
  font-family: var(--font-body) !important;
  background: var(--void-ink) !important;
}

/* ─── BACKDROP ATMOSPHÈRE ─────────────────────────────────── */
.backdrop {
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%,  rgba(180,50,40,0.22),   transparent 55%),
    radial-gradient(ellipse 40% 35% at 92% 8%,   rgba(100,30,80,0.16),   transparent 48%),
    radial-gradient(ellipse 35% 45% at 6% 85%,   rgba(40,20,100,0.14),   transparent 50%),
    radial-gradient(ellipse 55% 40% at 50% 105%,  rgba(15,8,40,0.60),    transparent 60%),
    linear-gradient(180deg, #0D0718 0%, #060310 55%, #040210 100%) !important;
}

/* Grain cosmique */
.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at  8% 12%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 7%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 55%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 20%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 72%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 42%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 65%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 82%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 90%, rgba(255,255,255,0.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 18%, rgba(255,255,255,0.48) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 95%, rgba(255,255,255,0.32) 0%, transparent 100%);
  animation: voidStarfield 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes voidStarfield {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Scanlines ultra-subtiles */
.backdrop::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.06) 3px,
      rgba(0,0,0,0.06) 4px
    ) !important;
  animation: none !important;
  pointer-events: none !important;
}

/* ─── SHELL ───────────────────────────────────────────────── */
.shell {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)) !important;
  box-shadow:
    0 40px 140px rgba(0,0,0,0.80),
    0 0 0 1px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

/* ─── LOGO VOID ───────────────────────────────────────────── */
.void-brand-logo {
  top: 20px !important;
  filter: drop-shadow(0 0 28px rgba(200,60,40,0.35)) !important;
}

/* ─── USER PROFILE BAR ────────────────────────────────────── */
.user-profile-bar {
  border: 1px solid rgba(255,255,255,0.08) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.020)) !important;
  backdrop-filter: blur(24px) !important;
  border-radius: 16px !important;
  box-shadow:
    0 16px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.user-name {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.user-sub {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

/* ─── PANELS ──────────────────────────────────────────────── */
.panel {
  border: 1px solid rgba(255,255,255,0.09) !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(180,50,40,0.10), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)) !important;
  border-radius: 20px !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(24px) !important;
}

/* Ligne décorative en haut du panel */
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,59,46,0.5), transparent);
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}
.panel { position: relative; overflow: hidden; }

/* ─── TYPO PANELS ─────────────────────────────────────────── */
.panel h1 {
  font-family: var(--font-display) !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  line-height: 0.90 !important;
  background: linear-gradient(135deg, #FFFFFF 30%, rgba(255,255,255,0.55)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.brand-kicker {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5em !important;
  text-transform: uppercase !important;
  color: rgba(212,168,75,0.70) !important;
  margin-bottom: 6px !important;
}

.panel p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.44) !important;
  font-weight: 400 !important;
}

/* ─── INPUTS ──────────────────────────────────────────────── */
.field label {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  color: rgba(255,255,255,0.24) !important;
  font-weight: 600 !important;
}

.field input,
.field textarea,
.field select {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(194,59,46,0.55) !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: 0 0 0 3px rgba(194,59,46,0.10) !important;
  outline: none !important;
}

/* Input code: style "portail dimensionnel" */
#redeemCode {
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-color: rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(194,59,46,0.04)) !important;
}

#redeemCode:focus {
  border-color: rgba(194,59,46,0.60) !important;
  box-shadow:
    0 0 0 3px rgba(194,59,46,0.10),
    0 0 24px rgba(194,59,46,0.14) !important;
}

/* ─── BOUTONS ─────────────────────────────────────────────── */
.primary-btn {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  border: 1px solid rgba(194,59,46,0.40) !important;
  background:
    linear-gradient(135deg,
      rgba(160,40,30,0.85) 0%,
      rgba(194,59,46,0.70) 50%,
      rgba(140,32,24,0.90) 100%) !important;
  box-shadow:
    0 8px 28px rgba(194,59,46,0.28),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  color: #fff !important;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s !important;
  position: relative !important;
  overflow: hidden !important;
}

.primary-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 40px rgba(194,59,46,0.40),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
  filter: brightness(1.08) !important;
}

.primary-btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.96) !important;
}

.secondary-btn {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: background 0.18s, border-color 0.18s, transform 0.18s !important;
}

.secondary-btn:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

/* Bouton "Ouvrir boosters" — accent rouge discret */
#topOpenBoostersBtn {
  border-color: rgba(194,59,46,0.35) !important;
  background:
    linear-gradient(135deg, rgba(120,30,22,0.60), rgba(194,59,46,0.28)) !important;
  color: rgba(255,200,190,0.90) !important;
}

/* ─── BOOSTER PACK ────────────────────────────────────────── */
.booster-pack {
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(155deg, #3A0F15, #B03030 50%, #6A1818) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 50px 130px rgba(0,0,0,0.75),
    0 0 60px rgba(180,48,40,0.22),
    0 0 120px rgba(180,48,40,0.08),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.booster-pack:hover {
  box-shadow:
    0 70px 170px rgba(0,0,0,0.80),
    0 0 80px rgba(180,48,40,0.35),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.pack-kicker {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0.5em !important;
  color: rgba(255,255,255,0.35) !important;
}

.pack-title {
  font-family: var(--font-display) !important;
  font-size: 66px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  text-shadow:
    0 0 50px rgba(255,255,255,0.20),
    0 4px 8px rgba(0,0,0,0.60) !important;
}

.pack-sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.28) !important;
}

.pack-content {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 18px !important;
}

/* ─── PROGRESS LABEL ──────────────────────────────────────── */
.progress-label {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.50em !important;
  color: rgba(255,255,255,0.28) !important;
  text-transform: uppercase !important;
}

/* ─── CARD BACK ───────────────────────────────────────────── */
.card-back {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255,255,255,0.12), transparent 40%),
    repeating-linear-gradient(
      130deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      transparent 1px,
      transparent 11px
    ),
    linear-gradient(155deg, #3C0F18, #B83232 52%, #6E1A1A) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.card-back-kicker {
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  letter-spacing: 0.45em !important;
  color: rgba(255,255,255,0.28) !important;
}

.card-back-title {
  font-family: var(--font-display) !important;
  font-size: 50px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 40px rgba(255,255,255,0.20) !important;
}

.card-back-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.28) !important;
}

/* ─── CARD FACE — TYPOGRAPHIE ─────────────────────────────── */
.card-name,
#singleName, #inspectName, #cardPreviewName {
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 4.4vw, 54px) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  line-height: 0.88 !important;
  text-transform: uppercase !important;
}

.card-desc,
#singleDesc, #inspectDesc, #cardPreviewDesc {
  font-family: var(--font-body) !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.40 !important;
  color: rgba(245,240,235,0.78) !important;
}

.card-role,
#singleRole, #inspectRole, #cardPreviewRole {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.card-rarity,
#singleRarity, #inspectRarity, #cardPreviewRarity {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  font-size: 9px !important;
}

.card-number,
#singleNumber, #inspectNumber, #cardPreviewNumber {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* ─── SUMMARY ─────────────────────────────────────────────── */
.summary-title {
  font-family: var(--font-display) !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #fff 40%, rgba(255,255,255,0.50)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.summary-head .brand-kicker {
  margin-bottom: 8px !important;
}

/* Mini cards summary */
.mini-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.mini-name {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

.mini-rarity {
  font-family: var(--font-ui) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
}

/* ─── COLLECTION ──────────────────────────────────────────── */
.collection-toolbar {
  gap: 6px !important;
}

.filter-pill {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.36) !important;
  transition: all 0.18s !important;
}

.filter-pill.active {
  border-color: rgba(212,168,75,0.45) !important;
  background: rgba(212,168,75,0.10) !important;
  color: rgba(212,168,75,0.95) !important;
  box-shadow: 0 0 18px rgba(212,168,75,0.10) !important;
}

.filter-pill:hover:not(.active) {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.60) !important;
}

.collection-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(255,255,255,0.04) !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.collection-card:hover {
  transform: translateY(-5px) scale(1.016) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.48), 0 0 24px rgba(194,59,46,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

.collection-name {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

.collection-role {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.collection-date {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
}

/* Stats collection */
.collection-stats > div {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  transition: border-color 0.2s !important;
}

.collection-stats strong {
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.collection-stats span {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.34) !important;
}

/* ─── PROFILE HERO ────────────────────────────────────────── */
.profile-name-v49 {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

.profile-kicker-v49 {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.40em !important;
  text-transform: uppercase !important;
  color: var(--void-gold) !important;
}

.profile-hero-v49,
.profile-top-v49 {
  border: 1px solid rgba(255,255,255,0.09) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(180,50,40,0.12), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.022)) !important;
}

.profile-progress-v49 i {
  background: linear-gradient(90deg, var(--void-red2), var(--void-gold)) !important;
  box-shadow: 0 0 18px rgba(212,168,75,0.30) !important;
}

/* ─── INSPECT MODAL ───────────────────────────────────────── */
.card-inspect-backdrop {
  background: rgba(4,2,12,0.82) !important;
  backdrop-filter: blur(18px) !important;
}

#inspectCloseBtn {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  min-width: 0 !important;
  padding: 12px 24px !important;
}

/* ─── ADMIN ───────────────────────────────────────────────── */
.admin-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 18px !important;
}

.admin-card h2,
.admin-card h3 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

.admin-card h2 { font-size: 26px !important; font-weight: 900 !important; }
.admin-card h3 {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.30em !important;
  color: rgba(255,255,255,0.25) !important;
  font-style: normal !important;
}

.data-table th {
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.25) !important;
  background: rgba(10,6,20,0.95) !important;
}

.data-table td {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}

.code-pill {
  font-family: 'Courier New', monospace !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* ─── MODAL ADMIN ─────────────────────────────────────────── */
.admin-modal-panel-v9,
.admin-cards-modal-panel {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(180,50,40,0.14), transparent 55%),
    linear-gradient(160deg, rgba(28,16,36,0.97), rgba(8,5,16,0.99)) !important;
}

/* ─── STATUS LINE ─────────────────────────────────────────── */
.status-line {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: rgba(255,150,130,0.90) !important;
  letter-spacing: 0.02em !important;
}

.inline-note {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.22) !important;
}

/* ─── SUSPENSE TEXT ───────────────────────────────────────── */
.suspense-text {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ─── COLLECTION MODAL V63 ────────────────────────────────── */
.collection-card-modal-panel-v63 {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)) !important;
}

.collection-card-modal-rarity-v63 {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
}

.collection-card-modal-info-v63 h2 {
  font-family: var(--font-display) !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  line-height: 0.90 !important;
}

.collection-card-modal-role-v63 {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.collection-card-modal-quote-v63 {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.62) !important;
}

/* ─── BODY BACKGROUND OVERRIDE (V62 patch) ────────────────── */
body {
  background:
    radial-gradient(ellipse 65% 45% at 50% -5%, rgba(160,40,30,0.20), transparent 55%),
    radial-gradient(ellipse 35% 40% at 8% 18%,  rgba(80,20,60,0.12),  transparent 48%),
    linear-gradient(180deg, #0D0618 0%, #060210 60%, #030108 100%) !important;
}

body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 75%) !important;
  opacity: 0.24 !important;
}

/* ─── USER PROFILE STICKY ─────────────────────────────────── */
.user-profile-bar {
  position: sticky !important;
  top: 12px !important;
  z-index: 80 !important;
}

/* ─── FORM GRIDS ADMIN ────────────────────────────────────── */
.card-manager-form .field input,
.card-manager-form .field textarea,
.card-manager-form .field select,
.admin-login-card-v9 input,
.quick-edit-grid-v9 input,
.quick-edit-grid-v9 textarea,
.quick-edit-grid-v9 select {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  font-family: var(--font-body) !important;
}

/* ─── BOOSTER PACK — has-pack-image (overrides défensifs) ─── */
.booster-pack.has-pack-image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ─── ENSURE HIDDEN STAYS HIDDEN ──────────────────────────── */
.hidden,
.view.hidden,
.player-root.hidden,
.admin-root.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─── SMALL RESPONSIVE TWEAKS ─────────────────────────────── */
@media (max-width: 700px) {
  .panel h1 {
    font-size: 38px !important;
  }
  .summary-title {
    font-size: 36px !important;
  }
  .collection-card-modal-info-v63 h2 {
    font-size: 34px !important;
  }
}

/* ─── MICRO-DÉTAILS PREMIUM ───────────────────────────────── */

/* Coins angulaires sur le shell (effet cadre TCG) */
.shell::before,
.shell::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-style: solid;
  border-color: rgba(212,168,75,0.25);
  z-index: 100;
  pointer-events: none;
}
.shell::before {
  top: 12px; left: 12px;
  border-width: 1px 0 0 1px;
  border-radius: 4px 0 0 0;
}
.shell::after {
  bottom: 12px; right: 12px;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 4px 0;
}

/* Coins sur les panels principaux */
.panel.narrow::before {
  background: none !important;
}

/* Ligne d'accent verticale sur user bar */
.user-avatar {
  border: 1px solid rgba(212,168,75,0.22) !important;
  box-shadow: 0 0 20px rgba(180,50,40,0.18) !important;
}