:root {
  --bg: #11162F;
  --bg-secondary: #1A1B43;
  --indigo: #28255F;
  --gold: #D8B968;
  --gold-light: #F1D998;
  /* Rouge chaleureux "bar/rock" - refonte visuelle : touches d'accent uniquement (bordures,
     traits pinceau, liserés), jamais une couleur de fond ou de texte dominante. Rapproche de
     l'accent brique du site vitrine Copains d'Abord (--accent-deep #a8571f) sans le copier a
     l'identique : ici plus franchement rouge pour rester lisible sur fond indigo fonce. */
  --red: #B3402E;
  --red-light: #E07A63;
  --text: #F7F3E8;
  --text-secondary: #CBC6DC;
  --bar-empty: rgba(255,255,255,0.12);
  --danger: #E37B7B;
  --success: #7BC79E;
  --radius: 14px;
  /* Memes polices que le site vitrine Copains d'Abord (copains-dabord/site/src/_includes/base.njk) :
     Copains Lorcana est une fonctionnalite de Copains d'Abord, pas un projet a part - meme
     identite typographique. Bebas Neue pour les titres (esprit affiche/rock), Work Sans pour
     tout le texte fonctionnel (tres lisible). */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-sans: 'Work Sans', 'Segoe UI', 'Avenir Next', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(160deg, var(--bg) 0%, var(--indigo) 100%);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.03em; line-height: 1.05; }

a { color: var(--gold-light); }

/* --- Header de marque (logo Copains d'Abord + titre), reutilise sur les 3 interfaces --- */
.site-header { display: flex; align-items: center; gap: 14px; }
.site-header .brand-logo { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55)); }
.site-header .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.site-header .eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light);
}
.site-header .title {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--text);
}

/* --- Trait "coup de pinceau" decoratif (SVG genere ici, aucun asset externe) --- */
.brush-underline { position: relative; display: inline-block; }
.brush-underline::after {
  content: '';
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16'%3E%3Cpath d='M2 9 Q20 3,40 8 T80 7 T120 10 T160 6 T198 9' stroke='%23B3402E' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.85;
}

/* --- Plaque : habillage "carte/ardoise" reutilisable (pairings TV, tuiles). position:relative
   ici (pas seulement sur .match-tile) : ::before doit se positionner par rapport a CE
   conteneur ou qu'on applique la classe, jamais par rapport a un ancetre positionne plus
   haut dans la page. Pas d'overflow:hidden : reward-banner (qui porte aussi cette classe)
   contient des elements qui depassent volontairement (badge ✓ des boosters, halo du
   prochain palier) - les clipper serait une regression visuelle. */
.plaque { position: relative; }
.plaque::before {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red) 15%, var(--red-light) 50%, var(--red) 85%, transparent);
  opacity: 0.75;
  border-radius: 999px;
}

.rank-1 { color: var(--gold-light); }
.rank-2 { color: #D7D9E2; }
.rank-3 { color: #E3A971; }

.stars-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(241,217,152,0.5), transparent),
    radial-gradient(1.5px 1.5px at 65% 70%, rgba(241,217,152,0.35), transparent),
    radial-gradient(2px 2px at 85% 20%, rgba(241,217,152,0.4), transparent),
    radial-gradient(1px 1px at 40% 85%, rgba(241,217,152,0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(241,217,152,0.3), transparent);
  background-repeat: no-repeat;
}

.card {
  background: rgba(26, 27, 67, 0.65);
  border: 1px solid rgba(216, 185, 104, 0.25);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(6px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1rem; font-weight: 600;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: #1A1408;
  transition: transform 0.1s ease, opacity 0.15s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.18); }
.btn.danger { background: var(--danger); color: #2b0d0d; }
.btn.small { padding: 8px 14px; font-size: 0.85rem; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

input[type="text"], input[type="password"], input[type="number"], select {
  font-size: 1.1rem;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(216,185,104,0.35);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  width: 100%;
}
input::placeholder { color: var(--text-secondary); }
label { color: var(--text-secondary); font-size: 0.85rem; display: block; margin-bottom: 6px; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.badge.gold { background: rgba(216,185,104,0.2); color: var(--gold-light); }
.badge.success { background: rgba(123,199,158,0.18); color: var(--success); }
.badge.danger { background: rgba(227,123,123,0.18); color: var(--danger); }

.progress-track {
  height: 14px; border-radius: 999px; background: var(--bar-empty); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transition: width 0.6s ease;
}

.text-secondary { color: var(--text-secondary); }
.text-gold { color: var(--gold-light); }
.center { text-align: center; }

/* --- Booster pack (jalon de palier, TV) : représentation originale, non liée à un asset
   Lorcana officiel — un simple pack de cartes stylisé, fermé/sombre puis ouvert/doré. --- */
.booster-pack {
  position: absolute;
  bottom: 0;
  width: 46px;
  height: 64px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(160deg, #2a2c5c 0%, #17183a 100%);
  border: 2px solid rgba(216, 185, 104, 0.3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s ease, box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease, opacity 0.4s ease;
}
.booster-pack::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 1px;
  height: calc(100% - 18px);
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
}
.booster-pack .idx {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.booster-pack.unlocked {
  background: linear-gradient(160deg, #4d3c14 0%, #241a06 100%);
  border-color: var(--gold-light);
  box-shadow: 0 0 20px rgba(241, 217, 152, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.25);
}
.booster-pack.unlocked .idx { color: var(--gold-light); }
.booster-pack.unlocked::after {
  content: '✓';
  position: absolute;
  top: -9px;
  right: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-light);
  color: #1a1408;
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(241, 217, 152, 0.8);
}
.booster-pack.next {
  border-color: var(--gold-light);
  animation: milestonePulse 2s ease-in-out infinite;
}
@keyframes milestonePulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 16px rgba(241, 217, 152, 0.4); }
}
.booster-pack.opening {
  animation: milestonePop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes milestonePop {
  /* translateX(-50%) reprise a chaque etape : le positionnement horizontal (left:X% +
     translateX(-50%) pour centrer le pack sur son seuil) ne doit jamais etre perdu pendant
     l'animation, sans quoi le pack saute a gauche de son point pendant le pop. */
  0% { transform: translateX(-50%) scale(1) rotate(0deg); }
  30% { transform: translateX(-50%) scale(1.4) rotate(-5deg); }
  55% { transform: translateX(-50%) scale(1.18) rotate(4deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}
.booster-pack.closing {
  animation: milestoneDim 0.55s ease;
}
@keyframes milestoneDim {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.45; transform: translateX(-50%) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.booster-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px rgba(241, 217, 152, 0.9);
  pointer-events: none;
  animation: milestoneSpark 0.85s ease-out forwards;
}
@keyframes milestoneSpark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.milestone-hidden-count {
  position: absolute;
  bottom: 4px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.milestone-hidden-count .n { font-size: 1rem; font-weight: 800; color: var(--gold-light); }

/* --- Recherche catalogue (staff) --- */
.catalog-search-wrap { position: relative; max-width: 460px; }
.catalog-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--bg-secondary);
  border: 1px solid rgba(216, 185, 104, 0.35);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-height: 320px;
  overflow-y: auto;
}
.catalog-result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.catalog-result-row:last-child { border-bottom: none; }
.catalog-result-row:hover, .catalog-result-row.active { background: rgba(216, 185, 104, 0.16); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}