/**
 * Grouvel — Styles partagés des mini-jeux Pokémon (games/pokemon/).
 *
 * Tokens sémantiques --pk-* : valeurs claires dans :root, surcharge sombre
 * via prefers-color-scheme. Une page qui personnalise un token en clair
 * doit le faire DANS `@media (prefers-color-scheme: light)` pour ne pas
 * écraser le thème sombre (son <style> inline vient après ce fichier).
 * L'accent de page (--pk-accent) est sûr dans les deux modes.
 */

:root {
  --pk-bg: radial-gradient(circle at 30% 20%, #dfe9f3 0%, #ffffff 100%);
  --pk-card: #ffffff;
  --pk-card-2: #f5f7fa;
  --pk-text: #333333;
  --pk-text-2: #666666;
  --pk-border: rgba(0, 0, 0, 0.12);
  --pk-shadow: rgba(0, 0, 0, 0.15);
  --pk-accent: #e3350d; /* rouge Pokéball, surchargé par page */
  --pk-input-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pk-bg: radial-gradient(circle at 30% 20%, #1a1a2e 0%, #16213e 100%);
    --pk-card: #1e1e2e;
    --pk-card-2: #26263a;
    --pk-text: #e8e8f0;
    --pk-text-2: #b0b0b8;
    --pk-border: rgba(255, 255, 255, 0.12);
    --pk-shadow: rgba(0, 0, 0, 0.5);
    --pk-input-bg: #26263a;
  }
}

/* === Couleurs des 18 types (palette officielle) === */
.type-normal { background: #a8a878; }
.type-fire { background: #f08030; }
.type-water { background: #6890f0; }
.type-electric { background: #f8d030; color: #333; }
.type-grass { background: #78c850; }
.type-ice { background: #98d8d8; color: #333; }
.type-fighting { background: #c03028; }
.type-poison { background: #a040a0; }
.type-ground { background: #e0c068; color: #333; }
.type-flying { background: #a890f0; }
.type-psychic { background: #f85888; }
.type-bug { background: #a8b820; }
.type-rock { background: #b8a038; }
.type-ghost { background: #705898; }
.type-dragon { background: #7038f8; }
.type-dark { background: #705848; }
.type-steel { background: #b8b8d0; color: #333; }
.type-fairy { background: #ee99ac; color: #333; }

/* === Spinner Pokéball (chargement) === */
.pokeball-spin {
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  background: linear-gradient(180deg, #e3350d 0%, #e3350d 45%, #1a1a1a 45%, #1a1a1a 55%, #fff 55%, #fff 100%);
  border-radius: 50%;
  border: 3px solid #1a1a1a;
  animation: pk-spin 1s linear infinite;
  position: relative;
}

.pokeball-spin::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
}

@keyframes pk-spin {
  to { transform: rotate(360deg); }
}

/* === Lien retour commun === */
.back-link {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 25px;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  color: var(--pk-text);
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  transition: background 0.2s, transform 0.2s;
}

.back-link:hover {
  background: var(--pk-card-2);
  transform: translateY(-1px);
}

/* === Sélecteur de génération (PokemonCommon.buildGenSelector) === */
.pk-gen-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px auto;
}

.pk-gen-selector label {
  font-weight: bold;
  color: var(--pk-text);
}

.pk-gen-selector select {
  font-size: 16px; /* évite le zoom automatique iOS */
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid var(--pk-border);
  background: var(--pk-input-bg);
  color: var(--pk-text);
  font-weight: bold;
  cursor: pointer;
}

.pk-gen-selector select:focus-visible {
  outline: 3px solid var(--pk-accent);
  outline-offset: 2px;
}

/* === Utilitaires === */
.pk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* === Mouvement réduit : neutralise les animations décoratives
       (flottement, rebond, flip, spinner) des pages Pokémon === */
@media (prefers-reduced-motion: reduce) {
  .pk-motion *,
  .pk-motion *::before,
  .pk-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}