/**
 * Job-EZ - Styles Principaux
 * Styles personnalisés pour l'application de quiz
 */

/* ===== CSS Variables - Theme System ===== */

:root {
  /* Couleurs principales (RGB pour rgba()) */
  --color-primary: 59, 130, 246;        /* Bleu primaire */
  --color-secondary: 99, 102, 241;      /* Indigo */
  --color-accent: 168, 85, 247;         /* Violet */

  /* Couleurs de fond */
  --color-bg-dark: 26, 30, 35;          /* Fond sombre */
  --color-bg-darker: 17, 24, 39;        /* Fond très sombre */

  /* Couleurs de feedback */
  --color-success: 34, 197, 94;         /* Vert */
  --color-error: 239, 68, 68;           /* Rouge */
  --color-warning: 251, 191, 36;        /* Jaune */
  --color-info: 59, 130, 246;           /* Bleu info */

  /* Couleurs grises */
  --color-gray-600: 75, 85, 99;
  --color-gray-700: 55, 65, 81;

  /* Bulles - Configuration */
  --bubble-opacity-base: 0.3;
  --bubble-opacity-hover: 0.5;
  --bubble-size-small: 1vw;
  --bubble-size-medium: 5vw;
  --bubble-size-large: 10vw;
  --bubble-duration-fast: 6s;
  --bubble-duration-medium: 9s;
  --bubble-duration-slow: 12s;

  /* Animations */
  --animation-duration-fast: 0.3s;
  --animation-duration-normal: 0.5s;
  --animation-ease: ease-in-out;

  /* Espacements */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

/* ===== Bubbles Background ===== */

.bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.bubble {
  position: absolute;
  left: var(--bubble-left-offset);
  bottom: -75%;
  display: block;
  width: var(--bubble-radius);
  height: var(--bubble-radius);
  border-radius: 50%;
  animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
}

.bubble::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--color-primary), var(--bubble-opacity-base));
  border-radius: inherit;
  animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) var(--animation-ease) alternate infinite;
}

.bubble:hover::before {
  background: rgba(var(--color-primary), var(--bubble-opacity-hover));
}

/* Configuration de chaque bulle */
.bubble:nth-child(1) { --bubble-left-offset: 1vw; --bubble-radius: 4vw; --bubble-float-duration: 10s; --bubble-sway-duration: 4s; --bubble-float-delay: 4s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(2) { --bubble-left-offset: 83vw; --bubble-radius: 4vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(3) { --bubble-left-offset: 34vw; --bubble-radius: 2vw; --bubble-float-duration: 8s; --bubble-sway-duration: 5s; --bubble-float-delay: 2s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(4) { --bubble-left-offset: 24vw; --bubble-radius: 2vw; --bubble-float-duration: 8s; --bubble-sway-duration: 5s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(5) { --bubble-left-offset: 65vw; --bubble-radius: 10vw; --bubble-float-duration: 8s; --bubble-sway-duration: 5s; --bubble-float-delay: 2s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(6) { --bubble-left-offset: 24vw; --bubble-radius: 6vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 4s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(7) { --bubble-left-offset: 42vw; --bubble-radius: 4vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 4s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(8) { --bubble-left-offset: 18vw; --bubble-radius: 5vw; --bubble-float-duration: 7s; --bubble-sway-duration: 5s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(9) { --bubble-left-offset: 81vw; --bubble-radius: 5vw; --bubble-float-duration: 6s; --bubble-sway-duration: 4s; --bubble-float-delay: 1s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(10) { --bubble-left-offset: 91vw; --bubble-radius: 9vw; --bubble-float-duration: 11s; --bubble-sway-duration: 6s; --bubble-float-delay: 0s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(11) { --bubble-left-offset: 69vw; --bubble-radius: 1vw; --bubble-float-duration: 11s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(12) { --bubble-left-offset: 63vw; --bubble-radius: 6vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(13) { --bubble-left-offset: 63vw; --bubble-radius: 4vw; --bubble-float-duration: 7s; --bubble-sway-duration: 4s; --bubble-float-delay: 3s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(14) { --bubble-left-offset: 16vw; --bubble-radius: 4vw; --bubble-float-duration: 8s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(15) { --bubble-left-offset: 44vw; --bubble-radius: 3vw; --bubble-float-duration: 12s; --bubble-sway-duration: 4s; --bubble-float-delay: 0s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(16) { --bubble-left-offset: 100vw; --bubble-radius: 3vw; --bubble-float-duration: 11s; --bubble-sway-duration: 6s; --bubble-float-delay: 0s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(17) { --bubble-left-offset: 52vw; --bubble-radius: 10vw; --bubble-float-duration: 8s; --bubble-sway-duration: 4s; --bubble-float-delay: 3s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(18) { --bubble-left-offset: 61vw; --bubble-radius: 10vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(19) { --bubble-left-offset: 70vw; --bubble-radius: 10vw; --bubble-float-duration: 10s; --bubble-sway-duration: 5s; --bubble-float-delay: 4s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(20) { --bubble-left-offset: 24vw; --bubble-radius: 4vw; --bubble-float-duration: 10s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(21) { --bubble-left-offset: 35vw; --bubble-radius: 6vw; --bubble-float-duration: 12s; --bubble-sway-duration: 4s; --bubble-float-delay: 4s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(22) { --bubble-left-offset: 28vw; --bubble-radius: 1vw; --bubble-float-duration: 7s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(23) { --bubble-left-offset: 43vw; --bubble-radius: 6vw; --bubble-float-duration: 9s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(24) { --bubble-left-offset: 39vw; --bubble-radius: 7vw; --bubble-float-duration: 12s; --bubble-sway-duration: 5s; --bubble-float-delay: 4s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(25) { --bubble-left-offset: 92vw; --bubble-radius: 2vw; --bubble-float-duration: 11s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(26) { --bubble-left-offset: 89vw; --bubble-radius: 10vw; --bubble-float-duration: 12s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(27) { --bubble-left-offset: 75vw; --bubble-radius: 1vw; --bubble-float-duration: 8s; --bubble-sway-duration: 6s; --bubble-float-delay: 2s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(28) { --bubble-left-offset: 93vw; --bubble-radius: 7vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 0s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(29) { --bubble-left-offset: 62vw; --bubble-radius: 2vw; --bubble-float-duration: 8s; --bubble-sway-duration: 5s; --bubble-float-delay: 1s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(30) { --bubble-left-offset: 10vw; --bubble-radius: 10vw; --bubble-float-duration: 6s; --bubble-sway-duration: 4s; --bubble-float-delay: 0s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(31) { --bubble-left-offset: 79vw; --bubble-radius: 2vw; --bubble-float-duration: 9s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(32) { --bubble-left-offset: 100vw; --bubble-radius: 3vw; --bubble-float-duration: 10s; --bubble-sway-duration: 5s; --bubble-float-delay: 1s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(33) { --bubble-left-offset: 11vw; --bubble-radius: 8vw; --bubble-float-duration: 6s; --bubble-sway-duration: 6s; --bubble-float-delay: 0s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(34) { --bubble-left-offset: 13vw; --bubble-radius: 1vw; --bubble-float-duration: 6s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(35) { --bubble-left-offset: 50vw; --bubble-radius: 1vw; --bubble-float-duration: 6s; --bubble-sway-duration: 5s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(36) { --bubble-left-offset: 10vw; --bubble-radius: 5vw; --bubble-float-duration: 6s; --bubble-sway-duration: 5s; --bubble-float-delay: 4s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(37) { --bubble-left-offset: 99vw; --bubble-radius: 10vw; --bubble-float-duration: 9s; --bubble-sway-duration: 6s; --bubble-float-delay: 2s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(38) { --bubble-left-offset: 58vw; --bubble-radius: 10vw; --bubble-float-duration: 10s; --bubble-sway-duration: 5s; --bubble-float-delay: 1s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(39) { --bubble-left-offset: 56vw; --bubble-radius: 1vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(40) { --bubble-left-offset: 66vw; --bubble-radius: 2vw; --bubble-float-duration: 10s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(41) { --bubble-left-offset: 14vw; --bubble-radius: 8vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(42) { --bubble-left-offset: 17vw; --bubble-radius: 6vw; --bubble-float-duration: 12s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(43) { --bubble-left-offset: 93vw; --bubble-radius: 3vw; --bubble-float-duration: 12s; --bubble-sway-duration: 4s; --bubble-float-delay: 2s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(44) { --bubble-left-offset: 97vw; --bubble-radius: 3vw; --bubble-float-duration: 10s; --bubble-sway-duration: 5s; --bubble-float-delay: 4s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(45) { --bubble-left-offset: 57vw; --bubble-radius: 10vw; --bubble-float-duration: 7s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-left-to-right; }
.bubble:nth-child(46) { --bubble-left-offset: 90vw; --bubble-radius: 10vw; --bubble-float-duration: 8s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(47) { --bubble-left-offset: 44vw; --bubble-radius: 7vw; --bubble-float-duration: 7s; --bubble-sway-duration: 4s; --bubble-float-delay: 0s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(48) { --bubble-left-offset: 61vw; --bubble-radius: 7vw; --bubble-float-duration: 10s; --bubble-sway-duration: 4s; --bubble-float-delay: 3s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(49) { --bubble-left-offset: 5vw; --bubble-radius: 2vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 4s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; }
.bubble:nth-child(50) { --bubble-left-offset: 89vw; --bubble-radius: 4vw; --bubble-float-duration: 10s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; }

/* ===== Animations ===== */

@keyframes float-up {
  to {
    transform: translateY(-175vh);
  }
}

@keyframes sway-left-to-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes sway-right-to-left {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--color-primary), 0.5); }
  50% { box-shadow: 0 0 20px rgba(var(--color-primary), 0.8), 0 0 30px rgba(var(--color-primary), 0.4); }
}

@keyframes fadeInModal {
  to { opacity: 1; }
}

@keyframes scaleInModal {
  to { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Utilitaires Généraux ===== */

.touch-manipulation {
  touch-action: manipulation;
}

.question-container {
  scroll-behavior: smooth;
}

.pulse-glow {
  animation: pulse-glow 2s var(--animation-ease) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ===== Options de Jeu ===== */

.time-option,
.game-mode {
  transition: transform var(--animation-duration-fast) var(--animation-ease);
}

.time-option.selected,
.game-mode.selected {
  background-color: rgb(var(--color-primary)) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.6), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.time-option:hover,
.game-mode:hover {
  transform: scale(1.05);
}

/* ===== Mode Libre ===== */

.free-mode {
  .answer-btn {
    display: none !important;
  }

  .answer-reveal {
    display: block !important;
  }
}

.answer-reveal {
  display: none;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(var(--color-success), 0.1);
  border: 2px solid rgb(var(--color-success));
  border-radius: var(--radius-sm);
  text-align: center;
}

.answer-reveal.correct {
  background: rgba(var(--color-success), 0.1);
  border-color: rgb(var(--color-success));
  color: rgb(var(--color-success));
}

.answer-reveal.incorrect {
  background: rgba(var(--color-error), 0.1);
  border-color: rgb(var(--color-error));
  color: rgb(var(--color-error));
}

/* ===== Modales de Feedback ===== */

.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeInModal var(--animation-duration-fast) ease-out forwards;
}

.feedback-modal-content {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  max-width: 500px;
  min-height: 300px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  animation: scaleInModal var(--animation-duration-fast) ease-out forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== Boutons de Réponse (Mobile) ===== */

.answer-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  transition: all 0.2s var(--animation-ease);
}

/* ===== DÉSACTIVATION COMPLÈTE DES ÉTATS FOCUS/ACTIVE (MOBILE FIX) ===== */

/* Désactiver tous les états de focus et active */
.answer-btn,
.answer-submit-btn {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.answer-btn:focus,
.answer-btn:active,
.answer-btn:focus-visible,
.answer-btn:focus-within,
.answer-submit-btn:focus,
.answer-submit-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Retirer IMMÉDIATEMENT l'apparence active après le clic */
.answer-btn:not(.correct):not(.incorrect):active {
  background-color: rgb(55 65 81) !important; /* Retour à bg-gray-700 */
  transform: none !important;
  border-color: transparent !important;
}

/* Désactiver TOUS les états après désactivation du bouton */
.answer-btn:disabled,
.answer-btn[disabled] {
  background-color: rgb(55 65 81) !important;
  border: 2px solid transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Système de Trophées ===== */

#trophies-screen {
  position: relative;
  z-index: 1;
}

#history-screen {
  position: relative;
  z-index: 1;
}

.trophy-card {
  transition: all var(--animation-duration-fast) var(--animation-ease);
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.trophy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 40px -5px rgba(var(--color-primary), 0.35), 0 10px 15px -3px rgba(var(--color-primary), 0.2);
}

.trophy-card.trophy-unlocked {
  animation: pulse-glow 2.5s var(--animation-ease) infinite;
  position: relative;
}

.trophy-card.trophy-unlocked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

/* Pokemon Style Cards */
.trophy-card-pokemon {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  will-change: transform;
}

.trophy-card-pokemon:hover {
  box-shadow: 0 30px 50px -5px rgba(59, 130, 246, 0.4), 0 15px 25px -3px rgba(59, 130, 246, 0.25);
}

.trophy-card-pokemon.trophy-unlocked {
  animation: card-shine 3s ease-in-out infinite;
}

/* Effet holographique qui suit le mouvement - reflet diffus */
.trophy-card-pokemon.trophy-unlocked::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    ellipse 800px 600px at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.08) 40%,
    transparent 60%
  );
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease;
  mix-blend-mode: overlay;
}

/* Activation progressive : toucher -> estompage -> plein effet */
.trophy-card-pokemon.trophy-unlocked.touch-start::before {
  opacity: 0.3;
  transition: opacity 0.15s ease-in;
}

.trophy-card-pokemon.trophy-unlocked:hover::before,
.trophy-card-pokemon.trophy-unlocked.touch-active::before {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

/* Effet de reflet arc-en-ciel additionnel - plus diffus */
.trophy-card-pokemon.trophy-unlocked::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    var(--shine-angle, 115deg),
    transparent 0%,
    rgba(255, 150, 255, 0.12) 30%,
    rgba(150, 220, 255, 0.12) 50%,
    rgba(255, 255, 150, 0.12) 70%,
    transparent 100%
  );
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 99;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

/* Activation progressive pour l'arc-en-ciel */
.trophy-card-pokemon.trophy-unlocked.touch-start::after {
  opacity: 0.2;
  transition: opacity 0.15s ease-in;
}

.trophy-card-pokemon.trophy-unlocked:hover::after,
.trophy-card-pokemon.trophy-unlocked.touch-active::after {
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
}

@keyframes card-shine {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(59, 130, 246, 0));
  }
  50% {
    filter: brightness(1.05) drop-shadow(0 5px 15px rgba(59, 130, 246, 0.3));
  }
}

/* Niveaux de Rareté */

/* Cartes masquées - toujours grises/neutres avec ombre blanche */
.trophy-card-pokemon:not(.trophy-unlocked) {
  border-color: rgb(75, 85, 99) !important;
  background: rgba(75, 85, 99, 0.15) !important;
  box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.05);
}

/* Commun - Gris */
.rarity-commun.trophy-unlocked {
  border-color: rgb(107, 114, 128);
  background: rgba(107, 114, 128, 0.15);
  box-shadow: 0 4px 6px -1px rgba(107, 114, 128, 0.3), 0 2px 4px -1px rgba(107, 114, 128, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-commun.trophy-unlocked:hover,
.rarity-commun.trophy-unlocked.hover-active,
.rarity-commun.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(107, 114, 128, 0.5), 0 10px 10px -5px rgba(107, 114, 128, 0.4);
}

/* Rare - Bleu */
.rarity-rare.trophy-unlocked {
  border-color: rgb(59, 130, 246);
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-rare.trophy-unlocked:hover,
.rarity-rare.trophy-unlocked.hover-active,
.rarity-rare.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.5), 0 10px 10px -5px rgba(59, 130, 246, 0.4);
}

/* Épique - Violet */
.rarity-épique.trophy-unlocked {
  border-color: rgb(147, 51, 234);
  background: rgba(147, 51, 234, 0.15);
  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.3), 0 2px 4px -1px rgba(147, 51, 234, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-épique.trophy-unlocked:hover,
.rarity-épique.trophy-unlocked.hover-active,
.rarity-épique.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(147, 51, 234, 0.5), 0 10px 10px -5px rgba(147, 51, 234, 0.4);
}

/* Légendaire - Orange */
.rarity-légendaire.trophy-unlocked {
  border-color: rgb(249, 115, 22);
  background: rgba(249, 115, 22, 0.15);
  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3), 0 2px 4px -1px rgba(249, 115, 22, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-légendaire.trophy-unlocked:hover,
.rarity-légendaire.trophy-unlocked.hover-active,
.rarity-légendaire.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.5), 0 10px 10px -5px rgba(249, 115, 22, 0.4);
}

.badge-commun {
  background: rgb(107, 114, 128);
  color: white;
}

.badge-rare {
  background: rgb(59, 130, 246);
  color: white;
}

.badge-épique {
  background: rgb(147, 51, 234);
  color: white;
  font-weight: 600;
}

.badge-légendaire {
  background: rgb(249, 115, 22);
  color: white;
  font-weight: 600;
}

/* Trophy Download Button */
[download] {
  outline: none;
}

[download]:hover {
  transform: scale(1.15) rotate(5deg);
}

[download]:active {
  transform: scale(0.95);
}

/* ===== Unified Button Styles ===== */

.btn-base {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary button style */
.btn-primary {
  background-color: rgb(37, 99, 235);
  color: white;
}

.btn-primary:hover {
  background-color: rgb(29, 78, 216);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary.selected {
  background-color: rgb(29, 78, 216);
  box-shadow: 0 0 0 3px rgb(17, 24, 39), 0 0 0 5px rgb(59, 130, 246);
}

/* Secondary button style */
.btn-secondary {
  background-color: rgb(55, 65, 81);
  color: white;
}

.btn-secondary:hover {
  background-color: rgb(37, 99, 235);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-secondary.selected {
  background-color: rgb(29, 78, 216);
  box-shadow: 0 0 0 3px rgb(17, 24, 39), 0 0 0 5px rgb(59, 130, 246);
}

/* Category filter button with dynamic colors */
.btn-category {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
}

.btn-category.selected {
  box-shadow: 0 0 0 2px rgb(17, 24, 39), 0 0 0 3px currentColor;
}

/* ===== Hero Section Styles ===== */

#latest-quiz-hero-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#latest-quiz-hero-card:hover {
  transform: translateY(-4px);
}

#hero-start-quiz-btn {
  transition: all 0.3s ease-in-out;
}

#hero-start-quiz-btn:hover {
  transform: translateY(-2px);
}

#hero-start-quiz-btn:active {
  transform: translateY(0);
}
}

/* ===== Sélecteur de Temps Modal ===== */

#time-selector-modal {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#time-selector-modal .bg-gray-800 {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.time-option-btn {
  background-color: rgb(55, 65, 81);
  color: rgb(209, 213, 219);
  border: 2px solid rgb(75, 85, 99);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.time-option-btn:hover {
  background-color: rgb(75, 85, 99);
  border-color: rgb(107, 114, 128);
  color: rgb(243, 244, 246);
  transform: scale(1.05);
}

.time-option-btn:active {
  transform: scale(0.98);
}

.time-option-btn.selected,
.time-option-btn.bg-gradient-to-r {
}