/* ==========================================================================
   Styles complémentaires à Tailwind
   ========================================================================== */

:root {
  --mint: #4eebb8;
  --azure: #4aa8ff;
  --ink-950: #0b0d12;
  --ink-900: #10131a;
  --ink-800: #1b202b;

  /* Couleurs de rareté */
  --r-commune: #94a3b8;
  --r-peu_commune: #4aa8ff;
  --r-rare: #a78bfa;
  --r-epique: #ec4899;
  --r-legendaire: #f5c542;
  --r-mythique: #c6ff4d;
  --shiny: #8fd0ff;
}

/* Halo de fond ------------------------------------------------------------ */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(74, 168, 255, 0.14), transparent 60%),
    radial-gradient(700px 450px at 95% 10%, rgba(78, 235, 184, 0.10), transparent 60%),
    linear-gradient(var(--ink-950), var(--ink-950));
}
.bg-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
}

/* Navbar ------------------------------------------------------------------ */
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: -0.6rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azure), var(--mint));
  box-shadow: 0 0 12px rgba(78, 235, 184, 0.6);
}

/* Boutons ----------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #04120d;
  background: linear-gradient(135deg, var(--mint), #2dd4a0);
  box-shadow: 0 0 0 1px rgba(78, 235, 184, 0.4), 0 8px 24px -8px rgba(78, 235, 184, 0.6);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(78, 235, 184, 0.6), 0 12px 32px -8px rgba(78, 235, 184, 0.75);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(74, 168, 255, 0.1);
  border-color: rgba(74, 168, 255, 0.4);
}

.text-gradient {
  background: linear-gradient(90deg, var(--azure), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pokéballs en CSS -------------------------------------------------------- */
.pokeball {
  --size: 260px;
  --band: 7%;
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: calc(var(--size) * 0.03) solid var(--ink-950);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.45), transparent 22%),
    linear-gradient(
      to bottom,
      transparent 0 calc(50% - var(--band) / 2),
      var(--ink-950) calc(50% - var(--band) / 2) calc(50% + var(--band) / 2),
      transparent calc(50% + var(--band) / 2)
    ),
    linear-gradient(to bottom, #4aa8ff 0%, #2dd4a0 50%, #e8edf5 50%, #b9c3d3 100%);
  box-shadow:
    inset -18px -22px 40px rgba(0, 0, 0, 0.35),
    0 30px 80px -20px rgba(74, 168, 255, 0.45),
    0 0 120px -30px rgba(78, 235, 184, 0.6);
  animation: float 5s ease-in-out infinite;
}
.pokeball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 38%, #dfe6f0 39% 52%, var(--ink-950) 53%);
  box-shadow: 0 0 24px rgba(78, 235, 184, 0.9);
  animation: pulse-btn 2.4s ease-in-out infinite;
}

.pokeball-ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px dashed rgba(78, 235, 184, 0.35);
  animation: spin 30s linear infinite;
}
.pokeball-ring::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 16px var(--mint);
}

.mini-ball {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink-950);
  outline: 1px solid rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(circle, #fff 0 18%, var(--ink-950) 19% 30%, transparent 31%),
    linear-gradient(to bottom, var(--azure) 0 44%, var(--ink-950) 44% 56%, #e8edf5 56%);
  transition: transform 0.4s ease;
}
a:hover > .mini-ball {
  transform: rotate(-25deg);
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 14px rgba(78, 235, 184, 0.6); }
  50% { box-shadow: 0 0 34px rgba(78, 235, 184, 1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Roulette (aperçu de l'ouverture) --------------------------------------- */
.roulette {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 0;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(27, 32, 43, 0.8), rgba(16, 19, 26, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.06);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.roulette-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 3px;
  transform: translateX(-50%);
  background: var(--mint);
  box-shadow: 0 0 18px 2px rgba(78, 235, 184, 0.8);
}
.roulette-marker::before,
.roulette-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
}
.roulette-marker::before { top: 0; border-top-color: var(--mint); }
.roulette-marker::after { bottom: 0; border-bottom-color: var(--mint); }

.roulette-track {
  display: flex;
  gap: 8px;
  padding-left: 50%;
  will-change: transform;
}

/* Couleur par défaut sans spécificité : les classes .rarity-* la remplacent toujours */
:where(.r-card, .result-card) { --c: var(--r-commune); }

.r-card {
  position: relative;
  flex: 0 0 132px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 0.75rem;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
    var(--ink-800);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 3px solid var(--c);
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}
.r-card img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
.r-card > span:not(.shiny-stars) {
  font-size: 0.75rem;
  font-weight: 600;
  color: #cbd5e1;
}
.r-card .r-value {
  margin-top: -0.2rem;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  color: var(--mint);
}

/* Cartes dans une grille cliquable (collection, amélioration) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.75rem;
}
.card-grid .r-card {
  width: 100%;
  height: 180px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-grid .r-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
}
.card-grid .r-card:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}
.card-grid .r-card.is-selected {
  box-shadow: 0 0 0 2px var(--mint), 0 0 24px -6px var(--mint);
}
.card-grid .r-card.is-selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ink-950);
  background: var(--mint);
}
.card-grid .r-card:disabled { cursor: not-allowed; opacity: 0.4; }

/* Barre de filtres */
.chip {
  --c: var(--azure);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chip:hover { color: #fff; }
.chip.is-active {
  color: #fff;
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.select {
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  color: #e2e8f0;
  background: rgba(11, 13, 18, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  appearance: none;
}
.select:focus { outline: none; border-color: rgba(74, 168, 255, 0.7); }

/* Objets (page Amélioration) --------------------------------------------- */
.item-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.item-card:hover { transform: translateY(-4px); border-color: rgba(78, 235, 184, 0.3); }
.item-sprite {
  position: relative;
  display: grid;
  place-items: center;
  height: 140px;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 55%, rgba(74, 168, 255, 0.22), transparent 65%),
    rgba(11, 13, 18, 0.5);
}
.item-sprite img {
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s ease;
}
.item-card:hover .item-sprite img { transform: scale(1.08) rotate(-6deg); }
.level-pips { display: flex; gap: 4px; }
.level-pips i {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.level-pips i.is-on {
  background: linear-gradient(90deg, var(--azure), var(--mint));
  box-shadow: 0 0 8px rgba(78, 235, 184, 0.5);
}

/* Options d'ouverture (nombre de balls, vitesse, auto) */
.seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 0.75rem;
  background: rgba(11, 13, 18, 0.7);
}
.seg button {
  flex: 1;
  padding: 0.4rem 0;
  border-radius: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg button:hover { color: #fff; }
.seg button.is-active { color: var(--ink-950); background: var(--mint); }
.seg button:disabled { cursor: not-allowed; opacity: 0.5; }

.roulette-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.roulette.is-compact { padding: 0.5rem 0; }
.roulette.is-compact .r-card { flex-basis: 92px; height: 104px; gap: 0.15rem; }
.roulette.is-compact .r-card img { width: 60px; height: 60px; }
.roulette.is-compact .r-card > span:not(.shiny-stars) { font-size: 0.65rem; }
.roulette.is-compact .shiny-stars { top: 4px; right: 4px; transform: scale(0.75); }

.result-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.result-grid > div { width: 128px; }
.result-grid .r-card { width: 100%; height: 170px; }
.result-grid .r-card.is-sold { opacity: 0.4; }
.modal-panel.is-wide { max-width: 760px; }

/* Évolution -------------------------------------------------------------- */
.slot {
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: 0.75rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: #475569;
  font-size: 1.5rem;
}
.slot .r-card { width: 100%; height: 100%; }
.slot .r-card img { width: 64px; height: 64px; }
.slot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  color: #e2e8f0;
  background: rgba(11, 13, 18, 0.8);
}
.slot-remove:hover { background: #f43f5e; }

.wheel {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.wheel svg { width: 100%; height: 100%; }
.wheel-track { fill: none; stroke: rgba(244, 63, 94, 0.55); stroke-width: 16; }
.wheel-win {
  fill: none;
  stroke: var(--mint);
  stroke-width: 16;
  filter: drop-shadow(0 0 6px rgba(78, 235, 184, 0.6));
  transition: stroke-dasharray 0.4s ease;
}
.wheel-needle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wheel-needle::before {
  content: "";
  position: absolute;
  top: 2%;
  left: 50%;
  width: 4px;
  height: 18%;
  border-radius: 4px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}
.wheel-center {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle, rgba(27, 32, 43, 0.95), rgba(16, 19, 26, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wheel.is-won > .wheel-center { box-shadow: 0 0 40px -6px var(--mint); }
.wheel.is-lost > .wheel-center { box-shadow: 0 0 40px -6px #f43f5e; }

.mult-slider {
  width: 100%;
  accent-color: var(--mint);
  cursor: pointer;
}
.mult-ticks {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  font-size: 0.7rem;
  color: #64748b;
  text-align: center;
}
.mult-ticks span.is-active { color: var(--mint); font-weight: 700; }

.roulette.is-done .r-card:not(.is-winner) { opacity: 0.35; }
.r-card.is-winner {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--c), 0 0 40px -4px var(--c);
}

/* Raretés ----------------------------------------------------------------- */
.rarity-commune { --c: var(--r-commune); }
.rarity-peu_commune { --c: var(--r-peu_commune); }
.rarity-rare { --c: var(--r-rare); }
.rarity-epique { --c: var(--r-epique); }
.rarity-legendaire { --c: var(--r-legendaire); }
.rarity-mythique { --c: var(--r-mythique); }
.rarity-shiny { --c: var(--shiny); }

/* Shiny : deux petites étoiles à 4 branches, bleues et discrètes */
.shiny-stars {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  color: var(--shiny);
  opacity: 0.6;
  filter: drop-shadow(0 0 5px rgba(96, 180, 255, 0.75));
}
.shiny-stars svg {
  position: absolute;
  animation: twinkle 2.6s ease-in-out infinite;
}
.shiny-stars svg:first-child { top: 0; right: 0; width: 15px; height: 15px; }
.shiny-stars svg:last-child { bottom: 0; left: 0; width: 9px; height: 9px; animation-delay: 1.3s; }
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.rarity-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1.25rem;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.rarity-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c);
  box-shadow: 0 0 18px var(--c);
}
.rarity-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}
.rarity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.rarity-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.rarity-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c);
}
.text-rarity { color: var(--c); }

.result-pill {
  --c: var(--mint);
  color: var(--c);
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}

/* Cartes génériques ------------------------------------------------------- */
.panel {
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(27, 32, 43, 0.65), rgba(16, 19, 26, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-card {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(78, 235, 184, 0.35);
}

/* Formulaires ------------------------------------------------------------- */
.input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  color: #f1f5f9;
  background: rgba(11, 13, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: #64748b; }
.input:focus {
  outline: none;
  border-color: rgba(74, 168, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.2);
}
.input.is-invalid {
  border-color: rgba(244, 63, 94, 0.7);
}
.input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
}

/* Notifications (messages flash) ----------------------------------------- */
.toast {
  --c: var(--azure);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem 0.8rem 1rem;
  border-radius: 0.85rem;
  font-size: 0.9rem;
  color: #e2e8f0;
  background: rgba(21, 25, 34, 0.95);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  animation: toast-in 0.3s ease-out;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.is-leaving {
  opacity: 0;
  transform: translateX(20px);
}
.toast-success { --c: var(--mint); }
.toast-error { --c: #f43f5e; }
.toast-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.toast-close {
  font-size: 1.25rem;
  line-height: 1;
  color: #64748b;
}
.toast-close:hover { color: #e2e8f0; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
}

/* Magasin ---------------------------------------------------------------- */
.ball-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem 1.25rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ball-card:hover {
  transform: translateY(-4px);
  border-color: rgba(78, 235, 184, 0.35);
}
.ball-card .ball-img {
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s ease;
}
.ball-card:hover .ball-img { transform: rotate(-12deg) scale(1.05); }

.odds-bar {
  display: flex;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.odds-bar > i { display: block; height: 100%; background: var(--c); }

.ball-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem 0.45rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.ball-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.ball-tab.is-active {
  color: #fff;
  background: rgba(78, 235, 184, 0.08);
  border-color: rgba(78, 235, 184, 0.35);
}
.ball-tab img { width: 28px; height: 28px; }

/* Ouverture -------------------------------------------------------------- */
.ball-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ball-stage::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 168, 255, 0.3), transparent 70%);
  filter: blur(10px);
}
.ball-stage img {
  position: relative;
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.6));
  animation: float 5s ease-in-out infinite;
}
.ball-stage.is-shaking img { animation: shake var(--shake-ms, 0.6s) ease-in-out; }
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(6deg); }
}

.roulette-idle {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 19, 26, 0.6);
  color: #64748b;
  font-size: 0.9rem;
}

/* Fenêtre de résultat */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 7, 10, 0.75);
  backdrop-filter: blur(6px);
  animation: fade-in 0.25s ease-out;
}
.modal[hidden] { display: none; }
.modal-panel {
  width: 100%;
  max-width: 380px;
  padding: 1.75rem;
  text-align: center;
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.result-card {
  position: relative;
  margin: 0 auto;
  width: 210px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%),
    var(--ink-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 4px solid var(--c);
  box-shadow: 0 0 60px -10px var(--c);
}
.result-card img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
.result-card .shiny-stars { top: 14px; right: 14px; width: 40px; height: 40px; }
.result-card .shiny-stars svg:first-child { width: 22px; height: 22px; }
.result-card .shiny-stars svg:last-child { width: 13px; height: 13px; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
  .pokeball,
  .pokeball::after,
  .pokeball-ring {
    animation: none;
  }
}

/* Rareté Mythique : liseré qui ondule pour la distinguer --------------------- */
.r-card.rarity-mythique,
.result-card.rarity-mythique {
  border-bottom-color: var(--r-mythique);
  box-shadow: 0 0 22px -6px var(--r-mythique);
}

/* Mutations : cadres gravés vectoriels et lumière de collection. */
:is(.r-card, .result-card):is(.mut-doree, .mut-vide, .mut-rainbow) {
  isolation: isolate;
  border-bottom-color: var(--c);
  background-size: 100% 100%;
}
:is(.r-card, .result-card):is(.mut-doree, .mut-vide, .mut-rainbow) > img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .55));
}
:is(.r-card, .result-card):is(.mut-doree, .mut-vide, .mut-rainbow) > :is(span:not(.shiny-stars), em) {
  position: relative;
  z-index: 1;
  max-width: 96%;
  text-shadow: 0 1px 4px #03050b, 0 0 12px #03050b;
}
:is(.r-card, .result-card) > .shiny-stars { z-index: 3; }
:is(.r-card, .result-card):is(.mut-doree, .mut-vide, .mut-rainbow)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, #fff2 40%, #fff4 46%, transparent 60%);
  background-size: 300% 100%;
  background-position: 100% 0;
  opacity: .45;
  z-index: 0;
}
:is(.r-card, .result-card).mut-doree {
  background-image: url("../sprites/mutations/doree.svg"),
    radial-gradient(ellipse at 30% 10%, #a9782b66, transparent 60%),
    linear-gradient(145deg, #4d3213, #21190e 52%, #5b3917);
  border-color: #d7b66788;
  border-bottom-color: var(--c);
  box-shadow: inset 0 0 22px #dba95115, 0 8px 25px -20px #ffcb70;
}
:is(.r-card, .result-card).mut-vide {
  background-image: url("../sprites/mutations/vide.svg"),
    radial-gradient(ellipse at 90% 15%, #3b307b70, transparent 65%),
    linear-gradient(155deg, #0a1024, #101b39 55%, #050812);
  border-color: #718edb88;
  border-bottom-color: var(--c);
  box-shadow: inset 0 0 24px #6e94ff12, 0 8px 25px -20px #879fff;
}
:is(.r-card, .result-card).mut-rainbow {
  background-image: url("../sprites/mutations/rainbow.svg"),
    linear-gradient(155deg, #ed799a20, #dfb87522 24%, #66d9b52e 43%, #5ca7d833 62%, #9f72d640 82%, #d670ab33),
    linear-gradient(145deg, #292134, #111e29 50%, #271d36);
  border-color: #d7c7ed99;
  border-bottom-color: var(--c);
  box-shadow: inset 0 0 25px #c2a2ff20, 0 8px 25px -20px #bb96ed;
}
.r-card.mut-doree > span:not(.shiny-stars) { color: #ffedbc; }
.r-card.mut-vide > span:not(.shiny-stars) { color: #d5e0ff; }
.r-card.mut-rainbow > span:not(.shiny-stars) { color: #f2e9ff; }
.r-card:is(.mut-doree, .mut-vide, .mut-rainbow) .r-value { color: #effcf7; }
/* Seules les grandes cartes animent le reflet : les roulettes restent légères. */
.showcase-item .r-card:is(.mut-doree, .mut-vide, .mut-rainbow)::before,
.result-card:is(.mut-doree, .mut-vide, .mut-rainbow)::before {
  animation: foil-light 9s ease-in-out infinite;
}
@keyframes foil-light {
  0%, 20% { background-position: 100% 0; opacity: .2; }
  60%, 100% { background-position: 0 0; opacity: .5; }
}

.mut-label-doree { color: #f5c542; }
.mut-label-vide { color: #93a6ff; }
.mut-label-rainbow {
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #6bffb8, #4dd8ff, #b36bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Boutons Son / Images de la page d'ouverture */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.toggle-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }

/* Mode allégé : rond vide à la place du sprite, révélé pour le gagnant */
.r-card .sprite-ph {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
}
.roulette.is-compact .r-card .sprite-ph { width: 60px; height: 60px; }
.roulette.is-tiny .r-card .sprite-ph { width: 46px; height: 46px; }

/* Roulettes très compactes (6 balls et plus) */
.roulette.is-tiny { padding: 0.35rem 0; }
.roulette.is-tiny .r-card { flex-basis: 76px; height: 82px; gap: 0.1rem; border-bottom-width: 2px; }
.roulette.is-tiny .r-card img { width: 46px; height: 46px; }
.roulette.is-tiny .r-card > span:not(.shiny-stars) { font-size: 0.58rem; }
.roulette.is-tiny .shiny-stars { top: 2px; right: 2px; transform: scale(0.6); }

/* Zone « mutation transmise » de la roue d'évolution */
.wheel-mut { fill: none; stroke-width: 16; transition: stroke-dasharray 0.4s ease; }
.wheel-mut.mut-doree, .mut-dot-doree { stroke: #f5c542; background: #f5c542; }
.wheel-mut.mut-vide, .mut-dot-vide { stroke: #7b8cff; background: #7b8cff; }
.wheel-mut.mut-rainbow { stroke: url(#mut-rainbow-grad); }
.mut-dot-rainbow { background: linear-gradient(135deg, #ff5f6d, #ffc371, #6bffb8, #4dd8ff, #b36bff); }

/* Classement */
.rank-badge {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
}
.rank-badge.rank-1 { color: #2a1d00; background: linear-gradient(135deg, #ffe9a3, #f5c542); box-shadow: 0 0 16px -4px #f5c542; }
.rank-badge.rank-2 { color: #1e2330; background: linear-gradient(135deg, #f1f5f9, #a7b1c2); }
/* Vitrine du profil */
.showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent 60%),
    var(--ink-900, rgba(15, 23, 42, 0.6));
}
@media (min-width: 640px) { .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.showcase-item { position: relative; min-width: 0; text-align: center; }
.showcase-item .r-card {
  width: 100%;
  height: 200px;
  box-shadow: 0 18px 30px -18px var(--c);
}
.showcase-item .r-card img {
  width: min(128px, 85%);
  height: 128px;
  image-rendering: auto;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .4));
}
.showcase-item .r-card > span:not(.shiny-stars) { display: none; }
.showcase-item figcaption { margin-top: 0.6rem; }
.showcase-slot {
  display: grid;
  place-items: center;
  height: 200px;
  border-radius: 0.75rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: #475569;
  font-size: 1.75rem;
}
.showcase-item .slot-remove { top: 8px; right: 8px; width: 26px; height: 26px; }

.player-link { color: inherit; transition: color 0.15s ease; }
.player-link:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }

.rank-badge.rank-3 { color: #2b1405; background: linear-gradient(135deg, #f3c08f, #c27a3c); }

@media (prefers-reduced-motion: reduce) {
  .mut-doree, .mut-doree::before, .mut-vide, .mut-vide::before, .mut-rainbow, .mut-rainbow::before { animation: none !important; }
}

/* Sélection multiple dans la collection */
.selection-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.selection-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #4eebb84a;
  border-radius: 1rem;
  background: #101922f2;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 50px #0008;
}
.selection-bar[hidden], .selection-tools[hidden] { display: none; }
.card-grid .r-card.is-selected::after { z-index: 4; }
.selection-bar button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 420px) {
  .selection-bar { flex-direction: column; align-items: stretch; text-align: center; padding: .85rem; }
  .selection-bar button { justify-content: center; }
}

/* Social : annuaire et aperçus des vitrines */
.social-hero { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem); }
.social-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 20%, #4aa8ff1c, transparent 65%),
    linear-gradient(120deg, #4eebb808, transparent);
}
.social-count { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1rem; border: 1px solid #ffffff12; border-radius: 2rem; font-size: .8rem; color: #a8bbcd; }
.social-orbit {
  position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 210px; height: 210px;
  border: 1px solid #4aa8ff25; border-radius: 50%;
  box-shadow: 0 0 0 28px #4aa8ff07, 0 0 0 60px #4aa8ff04;
}
.social-orbit .pokeball { transform: rotate(-18deg); opacity: .7; }
.trainer-card { padding: 1.35rem; transition: border-color .2s, transform .2s; }
.trainer-card:hover { border-color: #4aa8ff40; transform: translateY(-2px); }
.trainer-avatar { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid #4eebb82e; border-radius: 14px; background: linear-gradient(145deg, #4aa8ff20, #4eebb820); color: #b1f6e2; font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; }
.trainer-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.trainer-preview .r-card { width: 100%; height: 128px; min-width: 0; padding: .3rem; }
.trainer-preview .r-card img { width: min(84px, 100%); height: 84px; image-rendering: auto; }
.trainer-preview .r-card > span:not(.shiny-stars) { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6rem; text-align: center; }
.trainer-placeholder { display: grid; place-items: center; height: 128px; border: 1px dashed #ffffff12; border-radius: .75rem; color: #364457; font-size: 1.8rem; background: #ffffff02; }
.trainer-link { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #ffffff0d; color: #92b5cf; font-size: .8rem; font-weight: 600; }
.trainer-link:hover { color: var(--mint); }
@media (max-width: 950px) { .social-orbit { display: none; } }
@media (prefers-reduced-motion: reduce) { .trainer-card:hover { transform: none; } }

/* Inventaire : poches du sac et Capsules Techniques ---------------------------- */
.pocket-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 1rem;
  background: rgba(11, 13, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pocket-tab {
  display: inline-flex;
  flex: 1 1 12rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  transition: background 0.15s ease, color 0.15s ease;
}
.pocket-tab img { width: 30px; height: 30px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.pocket-tab small {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
}
.pocket-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.pocket-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(74, 168, 255, 0.18), rgba(78, 235, 184, 0.14));
  box-shadow: inset 0 0 0 1px rgba(78, 235, 184, 0.35);
}
.pocket-tab.is-active small { color: var(--mint); background: rgba(78, 235, 184, 0.12); }

.type-chip { padding-left: 0.4rem; }

.ct-card {
  display: flex;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ct-card:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.ct-card.is-owned { border-color: rgba(78, 235, 184, 0.25); }
.ct-owned { color: var(--mint); letter-spacing: normal; }
.ct-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.14); }
.ct-disc {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.4s ease;
}
.ct-card:hover .ct-disc { transform: rotate(-25deg); }
.ct-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-class {
  padding: 0 0.4rem;
  border-radius: 0.3rem;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ct-class-physique { color: #fdba74; background: rgba(249, 115, 22, 0.15); }
.ct-class-speciale { color: #93c5fd; background: rgba(59, 130, 246, 0.15); }
.ct-class-statut { color: #cbd5e1; background: rgba(148, 163, 184, 0.15); }

/* Fiche d'une CT */
.ct-modal-disc {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  animation: ct-spin 0.7s cubic-bezier(0.2, 1, 0.4, 1);
}
@keyframes ct-spin { from { transform: rotate(-200deg) scale(0.6); opacity: 0; } }
.ct-stat-label {
  margin-bottom: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.ct-stat {
  padding: 0.6rem 0.4rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ct-stat dd { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.25rem; font-weight: 700; color: #fff; }
/* Type et classe : bandeau pokebip (français) ou pictogramme + nom (anglais) */
.move-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.move-badge img { height: 28px; width: auto; flex-shrink: 0; }
.move-badge span {
  padding: 0 0.6rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Choix de la langue (barre du haut) */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lang-switch a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 0.4rem;
  opacity: 0.45;
  filter: grayscale(0.6);
  transition: opacity 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.lang-switch a:hover { opacity: 0.85; filter: none; }
.lang-switch a.is-active { opacity: 1; filter: none; background: rgba(255, 255, 255, 0.08); }
.lang-switch svg { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }

/* Duels ------------------------------------------------------------------- */
.duel-mode { position: relative; display: block; transition: transform 0.15s ease, border-color 0.15s ease; }
a.duel-mode:hover { transform: translateY(-3px); border-color: rgba(78, 235, 184, 0.4); }
.duel-mode.is-soon { opacity: 0.6; }
.duel-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  color: var(--mint);
  background: linear-gradient(135deg, rgba(74, 168, 255, 0.2), rgba(78, 235, 184, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.duel-mode-icon img { width: 2.2rem; height: 2.2rem; }
.duel-mode-icon img + img { margin-left: -0.8rem; transform: rotate(14deg); }
.duel-mode-icon svg { width: 2rem; height: 2rem; }

.duel-searching img { animation: duel-search 1.4s ease-in-out infinite; }
@keyframes duel-search {
  0%, 100% { transform: translateX(-10px) rotate(-12deg); }
  50% { transform: translateX(10px) rotate(12deg); }
}

.duel-side { position: relative; min-width: 0; text-align: center; transition: box-shadow 0.4s ease, opacity 0.4s ease; }
.duel-side .roulette .r-card { flex-basis: 112px; height: 140px; }
.duel-side .roulette .r-card img { width: 76px; height: 76px; }
.duel-side.is-winner { box-shadow: 0 0 0 2px var(--mint), 0 0 60px -10px var(--mint); }
.duel-side.is-loser { opacity: 0.55; }

.duel-ready {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
}
.duel-ready.is-ready { color: var(--mint); background: rgba(78, 235, 184, 0.12); }

.duel-outcome { min-width: 5.5rem; padding: 0.2rem 0.6rem; border-radius: 0.4rem; font-size: 0.75rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.duel-outcome.is-win { color: var(--mint); background: rgba(78, 235, 184, 0.12); }
.duel-outcome.is-loss { color: #fb7185; background: rgba(244, 63, 94, 0.12); }
.duel-outcome.is-draw { color: #cbd5e1; background: rgba(148, 163, 184, 0.12); }

.jackpot-choice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.jackpot-choice:not(:disabled):hover { border-color: rgba(78, 235, 184, 0.5); background: rgba(78, 235, 184, 0.08); }

/* Jackpot : pot de chaque joueur et cartes déjà tirées */
.duel-pot { margin-top: 1rem; font-family: "Space Grotesk", sans-serif; }
.duel-pot small { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.duel-pot strong { font-size: 1.75rem; color: var(--mint); }
.duel-haul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.4rem;
  margin-top: 1rem;
}
.duel-haul .r-card { flex: none; width: 100%; height: 64px; gap: 0; animation: pop-in 0.3s ease-out; }
.duel-haul .r-card img { width: 40px; height: 40px; }
.duel-haul .r-card > span:not(.shiny-stars) { display: none; }

/* Pension ------------------------------------------------------------------ */
.pension-slot { display: flex; flex-direction: column; min-height: 17rem; }
.pension-free {
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pension-free:hover { border-color: rgba(78, 235, 184, 0.5); background: rgba(78, 235, 184, 0.05); }
.pension-progress { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.pension-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azure), var(--mint)); transition: width 1s linear; }
.pension-egg-ready img { animation: egg-wobble 1.6s ease-in-out infinite; }
@keyframes egg-wobble {
  0%, 60%, 100% { transform: rotate(0); }
  70% { transform: rotate(-10deg); }
  80% { transform: rotate(8deg); }
  90% { transform: rotate(-4deg); }
}

/* Trainer expansion: same dark ink / mint palette, high-resolution artwork. */
[hidden] { display: none !important; }
.eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .18em; color: var(--mint); }
.section-title { font-family: "Space Grotesk", sans-serif; font-size: 1.4rem; font-weight: 700; color: #f8fafc; }
.feature-tabs { display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0; }
.feature-tabs a { flex-shrink:0; padding:.8rem 1.1rem; color:#94a3b8; border:1px solid #ffffff0d; border-radius:.8rem; font-size:.85rem; }
.feature-tabs a:hover,.feature-tabs a.active { color:#7ff5cf; background:#4eebb80b; border-color:#4eebb840; }
.feature-tabs small { margin-left:.3rem; opacity:.6; }
.dex-hero { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.5rem; overflow:hidden; background:radial-gradient(ellipse at 85% 50%,#4eebb815,transparent 60%),#10131a; }
.dex-hero h1 { font:700 clamp(2rem,5vw,3.6rem)/1.1 "Space Grotesk",sans-serif; color:#fff; margin-top:.75rem; letter-spacing:-.045em; }
.dex-counter { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border:1px solid #ffffff12; border-radius:.65rem; color:#94a3b8; font-size:.8rem; background:#0b0d1280; }
.dex-counter b { color:#7ff5cf; }
.dex-scanner { flex-shrink:0; width:210px; height:210px; display:grid; place-items:center; border-radius:50%; border:1px solid #4eebb833; outline:1px solid #4eebb814; outline-offset:20px; position:relative; }
.dex-scanner:before,.dex-scanner:after { content:""; position:absolute; width:270px; height:1px; background:linear-gradient(90deg,transparent,#4eebb838,transparent); }
.dex-scanner:after { transform:rotate(90deg); }
.dex-progress { height:5px; border-radius:9px; background:#ffffff0b; overflow:hidden; }.dex-progress span{display:block;height:100%;background:linear-gradient(90deg,#2b8cff,#4eebb8);}
.dex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:1rem; }
.dex-tile { border:1px solid #ffffff0d; border-radius:1rem; padding:1rem; background:linear-gradient(145deg,#171d28,#10131a); transition:transform .18s,border-color .18s; }
.dex-tile:hover { transform:translateY(-4px); border-color:#4eebb866; }
.dex-tile.is-caught { background:radial-gradient(ellipse at 50% 45%,#4eebb80d,transparent 75%),#10131a; border-color:#4eebb822; }
.dex-tile img { width:128px;height:128px;object-fit:contain;margin:.5rem auto;image-rendering:auto;filter:drop-shadow(0 10px 12px #0008); }
.dex-tile h2 { text-align:center; color:#f8fafc; font-weight:650; font-size:.9rem; }
.type-pill { display:inline-flex;align-items:center;border-radius:5px;padding:3px 7px;font-size:10px;font-weight:700;line-height:1.4;background:#ffffff12;color:#cbd5e1;border:1px solid #ffffff08; }
.type-fire{background:#c54b272b;color:#ffb28c}.type-water{background:#307ac22b;color:#90c7ff}.type-grass{background:#43973b2b;color:#a3e994}.type-electric{background:#bd97272b;color:#ffe179}.type-ice{background:#4ab7b02b;color:#a1eeeb}.type-fighting{background:#bb4b452b;color:#f4a09c}.type-poison{background:#a353b42b;color:#db9be8}.type-ground{background:#bc914d2b;color:#ecd3a3}.type-flying{background:#8076c02b;color:#c6bfff}.type-psychic{background:#ce54832b;color:#ffabd1}.type-bug{background:#819d2b2b;color:#c9e378}.type-rock{background:#a294522b;color:#e2d89f}.type-ghost{background:#6d5c9e2b;color:#bcb0e7}.type-dragon{background:#5b61d62b;color:#afb9ff}.type-dark{background:#8071642b;color:#cbbeb1}.type-steel{background:#7e93aa2b;color:#c1d0e5}.type-fairy{background:#d276aa2b;color:#ffbde0}
.dex-detail-hero { display:grid;grid-template-columns:320px 1fr;overflow:hidden; }
.dex-portrait { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; background:radial-gradient(circle at 50% 45%,#4eebb81a,#4aa8ff06 50%,transparent 70%); border-right:1px solid #ffffff08; }
.dex-portrait>span { align-self:flex-start;color:#475569;font:700 1.5rem "Space Grotesk"; }
.dex-portrait>img { width:256px;height:256px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 15px 20px #0008); }
.dex-detail-hero dt { color:#64748b;font-size:.7rem; }.dex-detail-hero dd{color:#f1f5f9;margin-top:.25rem;font-weight:600}
.stat-row { display:grid;grid-template-columns:85px 35px 1fr;gap:12px;align-items:center;font-size:.8rem; }.stat-row>span{color:#94a3b8}.stat-row>b{color:white}.stat-row>div{height:7px;border-radius:9px;background:#ffffff08;overflow:hidden}.stat-row i{display:block;height:100%;background:linear-gradient(90deg,#2b8cff,#4eebb8);border-radius:9px}
.type-match { display:flex;flex-direction:column;gap:7px;align-items:center;min-width:70px;padding:.6rem;border:1px solid #ffffff0b;border-radius:.6rem;font-size:.8rem; }.type-match.weak b{color:#fda4af}.type-match.resist b{color:#7ff5cf}
.form-tile { flex:0 0 140px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:.8rem;border:1px solid #ffffff0b;border-radius:.8rem;font-size:.75rem;color:#cbd5e1; }.form-tile img{object-fit:contain}.form-tile.active{border-color:#4eebb855;background:#4eebb809}.form-tile small{font-size:.6rem;color:#64748b}
.evo-tile { display:flex;align-items:center;gap:1rem;border:1px solid #ffffff0a;padding:.7rem;border-radius:.8rem; }.evo-tile img{object-fit:contain}.evo-tile:hover{border-color:#4eebb844}
.dex-table { width:100%;border-collapse:collapse;font-size:.8rem; }.dex-table th{text-align:left;color:#64748b;font-weight:600;padding:.8rem .5rem;border-bottom:1px solid #ffffff16;white-space:nowrap}.dex-table td{padding:.85rem .5rem;border-bottom:1px solid #ffffff08;color:#cbd5e1}.dex-table details{margin-top:5px;max-width:400px;font-size:.7rem;color:#64748b}.dex-table summary{cursor:pointer}.dex-table details p{margin-top:.5rem;line-height:1.6}
.team-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:1rem}.team-slot{border:1px solid #4eebb833;border-radius:.6rem;padding:.6rem .8rem;font-size:.75rem;color:#7ff5cf}.team-slot:disabled{border-style:dashed;border-color:#ffffff16;color:#475569}
.move-option {display:flex;align-items:flex-start;gap:.7rem;padding:1rem;border:1px solid #ffffff0b;border-radius:.75rem;cursor:pointer}.move-option:has(input:checked){border-color:#4eebb855;background:#4eebb808}.move-option input{accent-color:#4eebb8;margin-top:4px}.move-option strong{color:#e2e8f0;font-size:.85rem}
.bag-item{display:flex;flex-direction:column}.bag-emblem{display:grid;place-items:center;height:48px;width:48px;border-radius:14px;border:1px solid #4eebb830;background:radial-gradient(circle at 35% 25%,#4eebb81b,transparent);color:#7ff5cf;font-size:1.7rem}.category-mega{color:#d8b4fe;border-color:#c084fc44;background:#c084fc0a}.category-medicine{color:#fda4af;border-color:#fb718544;background:#fb71850a}.category-z{color:#fde68a;border-color:#facc1544;background:#facc150a}
.arena-team-preview {display:flex;flex-direction:column;align-items:center;padding:.7rem;min-width:110px;border:1px solid #ffffff0b;border-radius:.8rem;font-size:.75rem}.arena-team-preview span{margin-top:.3rem;color:#64748b}.arena-team-preview img{object-fit:contain}
.champion-card{position:relative;overflow:hidden;background:radial-gradient(ellipse at 100% 0,#4aa8ff12,transparent 70%),#10131a}.champion-number{font:700 4rem/.9 "Space Grotesk";color:#ffffff09;position:absolute;top:1rem;right:1rem}
.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:1rem}.battle-scene{height:440px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #4eebb82b;border-radius:1.2rem;background:radial-gradient(ellipse at 60% 5%,#28566555,transparent 65%),linear-gradient(180deg,#101c2a,#142421 65%,#111b1d);box-shadow:inset 0 0 80px #0005}
.arena-rings{position:absolute;inset:50% -20% -50%;background:repeating-radial-gradient(ellipse at center,transparent 0 48px,#4eebb80c 49px 50px);transform:rotateX(50deg);z-index:-1}
.battle-platform{position:absolute;border-radius:50%;border:1px solid #4eebb833;box-shadow:0 0 0 10px #4eebb804,0 0 0 20px #4eebb803;background:radial-gradient(ellipse,#4eebb817,transparent);width:230px;height:65px}.platform-foe{right:8%;top:40%}.platform-player{left:5%;bottom:10%}
.battle-pokemon{position:absolute;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 10px 15px #0009);transition:opacity .3s,filter .3s;}.foe-pokemon{width:190px;height:190px;right:10%;top:6%}.player-pokemon{width:230px;height:230px;left:4%;bottom:10%;transform:scaleX(-1)}.battle-pokemon.is-fainted{opacity:.15;filter:grayscale(1)}.battle-pokemon.is-dynamax{filter:drop-shadow(0 0 18px #ff46868c);scale:1.2}
.battle-hud{position:absolute;background:#0b0d12e8;border:1px solid #ffffff1c;border-radius:.8rem;padding:1rem;width:240px;z-index:3;box-shadow:0 8px 24px #0003}.hud-foe{top:7%;left:4%}.hud-player{bottom:8%;right:4%}.battle-hud strong{color:#f1f5f9;font-size:.9rem}.hp-track{height:8px;background:#ffffff0c;margin:.7rem 0 .4rem;border-radius:9px;overflow:hidden}.hp-track i{display:block;height:100%;transition:width .4s;background:#4eebb8}.hp-track i[data-health=medium]{background:#fbbf24}.hp-track i[data-health=low]{background:#fb7185}.status-pill{padding:2px 5px;border-radius:4px;font-size:.6rem;color:#fde68a;background:#f59e0b18}
.battle-banner{position:absolute;inset:40% 0 auto;text-align:center;font:700 3rem "Space Grotesk";color:#fff;padding:1rem;background:#0b0d12c9;backdrop-filter:blur(8px);z-index:5;letter-spacing:.15em}
.battle-journal{display:flex;flex-direction:column;min-height:350px;max-height:910px}.battle-journal>div{overflow-y:auto;max-height:800px;scroll-behavior:smooth}.battle-journal p{font-size:.72rem;line-height:1.6;color:#94a3b8;margin-bottom:.6rem}.battle-journal .log-turn{color:#7ff5cf;border-top:1px solid #ffffff0a;margin-top:1rem;padding-top:.8rem;font-weight:700}
.battle-move{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;text-align:left;border:1px solid #ffffff14;border-left:3px solid #4aa8ff66;border-radius:.7rem;padding:1rem;background:#ffffff03;transition:background .15s}.battle-move strong{font-size:.9rem;color:#f1f5f9}.battle-move:hover:enabled{background:#4eebb80b;border-color:#4eebb855}.battle-move:disabled,.switch-button:disabled{opacity:.35;cursor:not-allowed}
.transform-button{padding:.5rem .8rem;border-radius:.5rem;border:1px solid #c084fc33;font-size:.7rem;color:#d8b4fe}.transform-button.active{background:#c084fc22;border-color:#c084fc99}.switch-button{display:flex;align-items:center;gap:.3rem;padding:.4rem;border:1px solid #ffffff0c;border-radius:.5rem;font-size:.65rem;text-align:left}.switch-button img{width:40px;height:40px;object-fit:contain}
@media(max-width:1000px){.battle-layout{grid-template-columns:1fr}.battle-journal{max-height:340px}.battle-journal>div{max-height:260px}.dex-detail-hero{grid-template-columns:250px 1fr}.dex-portrait>img{width:210px;height:210px}}
@media(max-width:640px){.dex-hero{padding:1.5rem}.dex-scanner{display:none}.dex-detail-hero{grid-template-columns:1fr}.dex-portrait{border-right:0;border-bottom:1px solid #ffffff08}.dex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.dex-tile{padding:.7rem}.dex-tile img{width:110px;height:110px}.battle-scene{height:390px}.battle-hud{width:180px;padding:.7rem}.hud-foe{left:3%;top:4%}.hud-player{right:3%;bottom:4%}.battle-hud strong{font-size:.75rem}.foe-pokemon{width:150px;height:150px;top:18%;right:3%}.player-pokemon{width:170px;height:170px;bottom:17%;left:0}.platform-foe{width:160px;right:0;top:48%}.platform-player{width:180px;left:-5%;bottom:16%}.battle-banner{font-size:2rem}.feature-tabs a{padding:.65rem .8rem;font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.dex-tile,.battle-pokemon,.hp-track i{transition:none}.battle-journal>div{scroll-behavior:auto}}