/* ============================================================================
   COLOR QUEST — Feuille de styles
   
   Styles dédiés au mini-jeu Color Quest intégré au Contrast Color Tool.
   Utilise les variables CSS du thème parent pour une intégration harmonieuse.
   
   Sections :
     1. MENU PRINCIPAL      — Écran d'accueil du jeu
     2. HUD                 — Barre d'état en jeu (vies, score, combo)
     3. ZONE DE JEU         — Conteneur principal des modes
     4. COLOR MATCH         — Mode 1
     5. CONTRAST DUEL       — Mode 2
     6. COLOR MEMORY        — Mode 3
     7. PALETTE BUILDER     — Mode 4
     8. DALTON CHALLENGE    — Mode 5
     9. POWER-UPS           — Boutons de power-up
     10. RÉSULTATS          — Écran de fin de partie
     11. ANIMATIONS         — Keyframes et transitions
     12. RESPONSIVE         — Adaptations mobile
   
   Auteur : Émile SNYERS
   Version : 1.1 (débogage CSS)
   Licence : © Tous droits réservés 
   Utilisation à but non commercial autorisé .
   Non-commercial use permitted.
// 🌍 Vous êtes autorisé à utiliser ce code, modifié ou non modifié, gratuitement et sans demande préalable, sous les conditions suivantes :  
//  
// 🇫🇷 Français :  
// - Pour les entreprises ou associations opérant dans le secteur du nucléaire, l'utilisation est libre et sans aucune restriction.  
// - Pour les entreprises ou associations exerçant en dehors du secteur du nucléaire, l'utilisation est permise uniquement dans un cadre non lucratif.  
//  
// 🇬🇧 English:  
// - You are allowed to use this code, modified or unmodified, for free and without prior request, under the following conditions:  
// - For companies or organizations operating in the nuclear sector, usage is free and without any restrictions.  
// - For companies or organizations outside the nuclear sector, usage is allowed only in a non-profit context.  
//  
// 🇪🇸 Español:  
// - Se le permite utilizar este código, modificado o no modificado, de forma gratuita y sin solicitud previa, bajo las siguientes condiciones:  
// - Para empresas u organizaciones que operan en el sector nuclear, el uso es libre y sin restricciones.  
// - Para empresas u organizaciones fuera del sector nuclear, el uso está permitido solo en un contexto sin fines de lucro.  
//  
// 🇩🇪 Deutsch:  
// - Sie dürfen diesen Code, verändert oder unverändert, kostenlos und ohne vorherige Anfrage unter den folgenden Bedingungen verwenden:  
// - Für Unternehmen oder Organisationen im Nuklearsektor ist die Nutzung kostenlos und uneingeschränkt.  
// - Für Unternehmen oder Organisationen außerhalb des Nuklearsektors ist die Nutzung nur im gemeinnützigen Rahmen erlaubt.  
//  
// 🇮🇹 Italiano:  
// - È consentito utilizzare questo codice, modificato o non modificato, gratuitamente e senza previa richiesta, alle seguenti condizioni:  
// - Per le aziende o associazioni che operano nel settore nucleare, l'uso è gratuito e senza restrizioni.  
// - Per le aziende o associazioni al di fuori del settore nucleare, l'uso è consentito solo in un contesto non profit.  
//  
// 🇷🇺 Русский:  
// - Вам разрешено использовать этот код, измененный или неизмененный, бесплатно и без предварительного запроса на следующих условиях:  
// - Для компаний или организаций, работающих в ядерной отрасли, использование бесплатно и без ограничений.  
// - Для компаний или организаций за пределами ядерной отрасли использование разрешено только в некоммерческом контексте.  
//  
// 🇨🇳 中文:  
// - 您可以在以下条件下免费使用此代码，无论是否经过修改，无需事先请求：  
// - 对于在核能领域运营的企业或组织，可免费且无限制地使用。  
// - 对于非核能领域的企业或组织，仅允许在非营利背景下使用。  
//  
// 🇯🇵 日本語:  
// - 本コードを修正済みまたは未修正の状態で、以下の条件に基づき、事前の要請なしに無料で使用することが許可されています：  
// - 原子力分野で活動する企業や団体は、自由かつ無制限に使用できます。  
// - 原子力分野以外の企業や団体は、非営利目的の場合のみ使用が許可されます。  
//  
// 🇰🇷 한국어:  
// - 이 코드를 수정하거나 수정하지 않은 상태로 다음 조건에 따라 사전 요청 없이 무료로 사용할 수 있습니다:  
// - 핵 분야에서 활동하는 기업이나 단체는 무료로 제한 없이 사용할 수 있습니다.  
// - 핵 분야 이외의 기업이나 단체는 비영리 목적으로만 사용이 허용됩니다.  
//  
// 🇧🇷 Português:  
// - Você está autorizado a usar este código, modificado ou não modificado, gratuitamente e sem solicitação prévia, sob as seguintes condições:  
// - Para empresas ou organizações que operam no setor nuclear, o uso é gratuito e sem restrições.  
// - Para empresas ou organizações fora do setor nuclear, o uso é permitido apenas em um contexto sem fins lucrativos.  
//  
// 🇦🇪 العربية:  
// - يُسمح لك باستخدام هذا الرمز، سواء كان معدلاً أو غير معدل، مجانًا وبدون طلب مسبق، بموجب الشروط التالية:  
// - يُسمح للشركات أو الجمعيات العاملة في قطاع الطاقة النووية بالاستخدام مجانًا وبدون أي قيود.  
// - يُسمح للشركات أو الجمعيات خارج قطاع الطاقة النووية بالاستخدام فقط في إطار غير


   CORRECTIONS v1.1 (débogage) :
     - BUG FIX 1 : Ajout de .cq-builder-slot-active (était totalement absent)
       → le slot sélectionné dans Palette Builder n'avait aucun retour visuel
     - BUG FIX 2 : Ajout de .cq-btn-success (était totalement absent)
       → le bouton "Valider ma palette" s'affichait sans couleur
     - BUG FIX 3 : .cq-dalton-answers grid corrigée : repeat(3) → repeat(2)
       → 4 boutons de réponse créaient une grille asymétrique (3+1)
       → maintenant affichés en 2×2 de façon équilibrée
     - Complément : .cq-btn-success:disabled pour cohérence avec :hover
============================================================================ */

/* ==================== 1. MENU PRINCIPAL ==================== */

.cq-main-menu {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* --- Hero / En-tête --- */
.cq-hero {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover, #0b5ed7));
  border-radius: 16px;
  color: white;
  margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.cq-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: cqShimmer 8s ease-in-out infinite;
}

.cq-hero-icon {
  font-size: 60pt;
  margin-bottom: 12px;
  animation: cqBounce 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.cq-hero-title {
  font-size: 32pt;
  font-weight: 800;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.cq-hero-subtitle {
  font-size: 16pt;
  font-weight: 300;
  opacity: 0.9;
  margin-bottom: 12px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.cq-hero-desc {
  font-size: 11pt;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* --- Statistiques rapides --- */
.cq-quick-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.cq-quick-stat {
  flex: 1;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: all 0.3s;
}

.cq-quick-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.cq-quick-stat-value {
  display: block;
  font-size: 24pt;
  font-weight: 700;
  color: var(--accent);
}

.cq-quick-stat-label {
  display: block;
  font-size: 9pt;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* --- Grille des modes de jeu --- */
.cq-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cq-mode-card {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.cq-mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--mode-color, var(--accent));
  transition: width 0.3s;
}

.cq-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mode-color, var(--accent));
}

.cq-mode-card:hover::before {
  width: 8px;
}

.cq-mode-card:active {
  transform: translateY(-1px);
}

.cq-mode-icon {
  font-size: 36pt;
  flex-shrink: 0;
  padding-left: 8px;
}

.cq-mode-content {
  flex: 1;
  min-width: 0;
}

.cq-mode-title {
  font-size: 14pt;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.cq-mode-subtitle {
  font-size: 10pt;
  color: var(--mode-color, var(--accent));
  font-weight: 600;
  margin-bottom: 8px;
  font-style: italic;
}

.cq-mode-desc {
  font-size: 9pt;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.cq-mode-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9pt;
}

.cq-mode-difficulty {
  letter-spacing: 2px;
}

.cq-mode-best {
  color: var(--text-muted);
  font-weight: 600;
}

/* --- Règles --- */
.cq-rules-box {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.cq-rules-box h3 {
  font-size: 12pt;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
}

.cq-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.cq-rule {
  background: var(--bg-secondary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 10pt;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent);
}

/* ==================== 2. HUD (HEADS-UP DISPLAY) ==================== */

.cq-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
  gap: 12px;
}

.cq-hud-left,
.cq-hud-center,
.cq-hud-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cq-back-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 10pt;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-primary);
  font-weight: 500;
}

.cq-back-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

.cq-hud-lives {
  font-size: 16pt;
  letter-spacing: 4px;
}

.cq-hud-timer {
  font-size: 14pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Courier New', monospace;
  padding: 4px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  transition: all 0.3s;
}

.cq-hud-timer.cq-timer-danger {
  color: var(--danger);
  animation: cqPulse 0.5s ease-in-out infinite;
  background: #fee2e2;
}

.cq-hud-round {
  font-size: 10pt;
  color: var(--text-secondary);
  font-weight: 600;
}

.cq-hud-combo {
  font-size: 12pt;
  font-weight: 700;
  color: var(--warning);
  min-width: 60px;
  text-align: center;
  transition: all 0.3s;
}

.cq-hud-combo.cq-combo-fire {
  animation: cqFireCombo 0.4s ease-in-out;
  font-size: 14pt;
  color: #ff4500;
  text-shadow: 0 0 8px rgba(255, 69, 0, 0.5);
}

.cq-hud-score {
  font-size: 14pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Courier New', monospace;
}

/* ==================== 3. ZONE DE JEU ==================== */

.cq-game-area {
  max-width: 800px;
  margin: 0 auto;
}

.cq-instruction {
  text-align: center;
  font-size: 16pt;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cq-instruction-sub {
  text-align: center;
  font-size: 10pt;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ==================== 4. COLOR MATCH ==================== */

.cq-match-container {
  text-align: center;
}

.cq-target-display {
  margin-bottom: 24px;
}

.cq-target-color {
  width: 200px;
  height: 200px;
  border-radius: 16px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--border);
  transition: all 0.3s;
  animation: cqFadeIn 0.5s ease;
}

.cq-target-label {
  font-size: 12pt;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.cq-target-info {
  font-size: 10pt;
  color: var(--text-muted);
}

.cq-target-hint {
  font-family: 'Courier New', monospace;
}

.cq-magnifier-hint {
  color: var(--warning);
  font-weight: 600;
  animation: cqFadeIn 0.3s ease;
}

.cq-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 500px;
  margin: 0 auto 20px;
}

.cq-option-btn {
  height: 100px;
  border-radius: 12px;
  border: 3px solid var(--border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  animation: cqFadeInUp 0.4s ease;
}

.cq-option-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

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

.cq-option-label {
  font-size: 9pt;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.cq-option-btn.cq-option-correct {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.3) !important;
  animation: cqCorrectPulse 0.6s ease;
}

.cq-option-btn.cq-option-wrong {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.3) !important;
  animation: cqShake 0.5s ease;
}

.cq-option-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

/* ==================== 5. CONTRAST DUEL ==================== */

.cq-duel-container {
  text-align: center;
}

.cq-duel-preview {
  padding: 30px;
  border-radius: 16px;
  border: 3px solid;
  margin: 0 auto 24px;
  max-width: 600px;
  box-shadow: var(--shadow-lg);
  animation: cqFadeIn 0.5s ease;
  text-align: left;
}

.cq-duel-colors {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 9pt;
  font-family: 'Courier New', monospace;
  opacity: 0.8;
  padding-top: 12px;
  border-top: 1px solid currentColor;
}

.cq-duel-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
}

.cq-duel-btn {
  padding: 16px 32px;
  font-size: 14pt;
  font-weight: 700;
  border-radius: 12px;
  border: 3px solid;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  min-width: 180px;
}

.cq-duel-pass {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.cq-duel-pass:hover {
  background: #a7f3d0;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.cq-duel-fail {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.cq-duel-fail:hover {
  background: #fecaca;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

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

.cq-duel-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none !important;
}

/* ==================== 6. COLOR MEMORY ==================== */

.cq-memory-container {
  text-align: center;
}

.cq-memory-sequence {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
  min-height: 80px;
  align-items: center;
}

.cq-memory-seq-item {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18pt;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cq-memory-player {
  margin-bottom: 20px;
}

.cq-memory-status {
  font-size: 12pt;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}

.cq-memory-player-seq {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 40px;
  align-items: center;
}

.cq-memory-player-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--border);
  animation: cqPopIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cq-memory-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  animation: cqFadeInUp 0.5s ease;
}

.cq-memory-color-btn {
  padding: 14px 10px;
  border-radius: 10px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 9pt;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.cq-memory-color-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.cq-memory-color-btn:active {
  transform: scale(0.95);
}

/* ==================== 7. PALETTE BUILDER ==================== */

.cq-builder-container {
  text-align: center;
}

.cq-builder-theme {
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

.cq-builder-theme-name {
  font-size: 18pt;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cq-builder-theme-desc {
  font-size: 10pt;
  color: var(--text-muted);
  font-style: italic;
}

.cq-builder-slots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cq-builder-slot {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18pt;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--border);
  transition: all 0.3s;
}

.cq-builder-slot-empty {
  background: var(--bg-tertiary);
  border-style: dashed;
  color: var(--text-muted);
}

/*
 * BUG FIX 1 : .cq-builder-slot-active était totalement absent du CSS.
 * Le slot actif n'avait aucun retour visuel — l'utilisateur ne savait pas
 * quel emplacement serait rempli au prochain clic.
 */
.cq-builder-slot-active {
  border-color: var(--accent) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 13, 110, 253), 0.25), var(--shadow-md) !important;
  transform: scale(1.08);
}

.cq-builder-slot:not(.cq-builder-slot-empty) {
  animation: cqPopIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cq-builder-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}

.cq-builder-subtitle {
  font-size: 11pt;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.cq-builder-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  max-width: 600px;
  margin: 0 auto 20px;
}

.cq-builder-color {
  height: 60px;
  border-radius: 8px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7pt;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.cq-builder-color:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  z-index: 2;
}

.cq-builder-color:active {
  transform: scale(0.95);
}

.cq-builder-color-used {
  opacity: 0.3;
  cursor: default;
  transform: scale(0.9) !important;
  filter: grayscale(0.5);
}

.cq-builder-score-detail {
  margin-top: 12px;
}

.cq-builder-score-stars {
  font-size: 24pt;
  letter-spacing: 6px;
  margin-bottom: 12px;
}

.cq-builder-score-breakdown {
  text-align: left;
  display: inline-block;
  font-size: 10pt;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ==================== 8. DALTON CHALLENGE ==================== */

.cq-dalton-container {
  text-align: center;
}

.cq-ishihara-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.cq-ishihara-canvas {
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--border);
  animation: cqFadeIn 0.5s ease;
}

.cq-dalton-answers {
  display: grid;
  /* BUG FIX 3 : était repeat(3, 1fr) → 4 boutons créaient un layout 3+1 asymétrique
     Correction : repeat(2, 1fr) pour une grille 2×2 équilibrée */
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 0 auto 20px;
}

.cq-dalton-answer-btn {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 3px solid var(--border);
  background: var(--bg-primary);
  font-size: 24pt;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-md);
  margin: 0 auto;
}

.cq-dalton-answer-btn:hover {
  transform: scale(1.1);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  background: var(--accent-light);
}

.cq-dalton-answer-btn:active {
  transform: scale(0.95);
}

.cq-dalton-answer-btn.cq-dalton-correct {
  border-color: var(--success) !important;
  background: #d1fae5 !important;
  box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.3) !important;
  animation: cqCorrectPulse 0.6s ease;
}

.cq-dalton-answer-btn.cq-dalton-wrong {
  border-color: var(--danger) !important;
  background: #fee2e2 !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.3) !important;
  animation: cqShake 0.5s ease;
}

.cq-dalton-answer-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ==================== 9. POWER-UPS ==================== */

.cq-powerups {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.cq-powerup-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid var(--warning);
  background: #fef3c7;
  color: #92400e;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.cq-powerup-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: #fde68a;
}

.cq-powerup-btn:active:not(:disabled) {
  transform: translateY(0);
}

.cq-powerup-empty {
  opacity: 0.4;
  cursor: default !important;
  border-color: var(--border) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
}

/* ==================== 10. FEEDBACK ==================== */

.cq-feedback {
  min-height: 60px;
  margin-top: 16px;
}

.cq-feedback-correct,
.cq-feedback-wrong,
.cq-feedback-shield {
  padding: 16px 20px;
  border-radius: 12px;
  animation: cqFadeInUp 0.4s ease;
  text-align: center;
}

.cq-feedback-correct {
  background: #d1fae5;
  border: 2px solid #a7f3d0;
  color: #065f46;
}

.cq-feedback-wrong {
  background: #fee2e2;
  border: 2px solid #fecaca;
  color: #991b1b;
}

.cq-feedback-shield {
  background: #fef3c7;
  border: 2px solid #fde68a;
  color: #92400e;
}

.cq-feedback-icon {
  font-size: 28pt;
  margin-bottom: 8px;
}

.cq-feedback-text {
  font-size: 11pt;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6px;
}

.cq-feedback-points {
  font-size: 14pt;
  font-weight: 700;
  margin-top: 8px;
}

.cq-feedback-correct .cq-feedback-points {
  color: #047857;
}

.cq-feedback-detail {
  font-size: 9pt;
  margin-top: 8px;
  opacity: 0.8;
}

/* ==================== 11. RÉSULTATS (FIN DE PARTIE) ==================== */

.cq-results-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  animation: cqFadeInUp 0.6s ease;
}

.cq-results-header {
  margin-bottom: 24px;
}

.cq-results-icon {
  font-size: 64pt;
  margin-bottom: 12px;
  animation: cqBounce 1.5s ease-in-out infinite;
}

.cq-results-title {
  font-size: 28pt;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cq-results-mode {
  font-size: 14pt;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.cq-results-message {
  font-size: 11pt;
  color: var(--text-secondary);
  font-style: italic;
}

.cq-new-record {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #7c2d12;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16pt;
  font-weight: 800;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  animation: cqPulse 1s ease-in-out infinite;
  display: inline-block;
}

.cq-results-stars {
  font-size: 40pt;
  letter-spacing: 8px;
  margin-bottom: 24px;
  animation: cqFadeIn 1s ease;
}

.cq-results-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.cq-result-stat {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s;
}

.cq-result-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cq-result-stat-value {
  font-size: 28pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Courier New', monospace;
}

.cq-result-stat-label {
  font-size: 9pt;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.cq-results-thresholds {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.cq-results-thresholds p {
  font-size: 10pt;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.cq-threshold {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 10pt;
  margin-bottom: 6px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  transition: all 0.3s;
}

.cq-threshold:last-child {
  margin-bottom: 0;
}

.cq-threshold-reached {
  background: #d1fae5;
  color: #065f46;
  font-weight: 600;
  border-left: 4px solid var(--success);
}

.cq-results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==================== BOUTONS GÉNÉRIQUES DU JEU ==================== */

.cq-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cq-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

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

.cq-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.cq-btn-primary:hover {
  background: var(--accent-hover, #0b5ed7);
  border-color: var(--accent-hover, #0b5ed7);
}

.cq-btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none !important;
}

.cq-btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border);
}

.cq-btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-dark);
}

.cq-btn-large {
  padding: 14px 28px;
  font-size: 12pt;
  border-radius: 10px;
}

/*
 * BUG FIX 2 : .cq-btn-success était totalement absent du CSS.
 * Le bouton "Valider ma palette" s'affichait sans couleur de fond
 * et sans bordure verte, rendant son état disabled difficile à percevoir.
 */
.cq-btn-success {
  background: var(--success, #198754);
  color: white;
  border-color: var(--success, #198754);
}

.cq-btn-success:hover:not(:disabled) {
  background: #146c43;
  border-color: #146c43;
}

.cq-btn-success:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none !important;
}

/* ==================== 12. ANIMATIONS ==================== */

@keyframes cqBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

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

@keyframes cqPopIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes cqShake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(6px); }
}

@keyframes cqCorrectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes cqPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes cqFireCombo {
  0% { transform: scale(1); }
  30% { transform: scale(1.3) rotate(-5deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes cqShimmer {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, -50%) rotate(180deg); }
}

/* ==================== 13. RESPONSIVE ==================== */

/* --- Tablettes (max 1024px) --- */
@media screen and (max-width: 1024px) {
  .cq-modes-grid {
    grid-template-columns: 1fr;
  }

  .cq-hero-title {
    font-size: 24pt;
  }

  .cq-hero-icon {
    font-size: 48pt;
  }
}

/* --- Mobile (max 768px) --- */
@media screen and (max-width: 768px) {
  .cq-main-menu {
    padding: 12px;
  }

  .cq-hero {
    padding: 24px 16px;
    border-radius: 12px;
  }

  .cq-hero-title {
    font-size: 20pt;
  }

  .cq-hero-subtitle {
    font-size: 12pt;
  }

  .cq-hero-icon {
    font-size: 40pt;
  }

  .cq-quick-stats {
    flex-direction: column;
    gap: 10px;
  }

  .cq-quick-stat {
    padding: 12px;
  }

  .cq-quick-stat-value {
    font-size: 20pt;
  }

  .cq-mode-card {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }

  .cq-mode-card::before {
    width: 100%;
    height: 4px;
    top: 0;
    left: 0;
  }

  .cq-mode-card:hover::before {
    width: 100%;
    height: 6px;
  }

  .cq-mode-icon {
    padding-left: 0;
    font-size: 30pt;
  }

  .cq-rules-grid {
    grid-template-columns: 1fr;
  }

  /* HUD mobile */
  .cq-hud {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 8px;
  }

  .cq-hud-left,
  .cq-hud-center,
  .cq-hud-right {
    gap: 8px;
  }

  .cq-hud-score {
    font-size: 12pt;
  }

  .cq-hud-timer {
    font-size: 12pt;
  }

  /* Color Match mobile */
  .cq-target-color {
    width: 150px;
    height: 150px;
    border-radius: 12px;
  }

  .cq-options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cq-option-btn {
    height: 80px;
    border-radius: 10px;
  }

  /* Contrast Duel mobile */
  .cq-duel-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cq-duel-btn {
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
    font-size: 12pt;
  }

  .cq-duel-preview {
    padding: 20px;
  }

  /* Memory mobile */
  .cq-memory-seq-item {
    width: 55px;
    height: 55px;
    font-size: 14pt;
  }

  .cq-memory-palette {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* Builder mobile */
  .cq-builder-slots {
    gap: 8px;
  }

  .cq-builder-slot {
    width: 60px;
    height: 60px;
    font-size: 14pt;
  }

  .cq-builder-pool {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
  }

  .cq-builder-color {
    height: 50px;
  }

  /* Dalton mobile */
  .cq-ishihara-canvas {
    width: 240px !important;
    height: 240px !important;
  }

  .cq-dalton-answer-btn {
    width: 65px;
    height: 65px;
    font-size: 20pt;
  }

  .cq-dalton-answers {
    max-width: 240px;
    gap: 8px;
  }

  /* Résultats mobile */
  .cq-results-title {
    font-size: 22pt;
  }

  .cq-results-icon {
    font-size: 48pt;
  }

  .cq-results-stars {
    font-size: 30pt;
  }

  .cq-results-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cq-result-stat-value {
    font-size: 22pt;
  }

  .cq-results-actions {
    flex-direction: column;
    align-items: center;
  }

  .cq-btn-large {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* Power-ups mobile */
  .cq-powerups {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .cq-powerup-btn {
    width: 100%;
    max-width: 250px;
  }

  /* Feedback mobile */
  .cq-feedback-icon {
    font-size: 24pt;
  }

  .cq-feedback-text {
    font-size: 10pt;
  }

  .cq-feedback-points {
    font-size: 12pt;
  }
}

/* --- Petits mobiles (max 480px) --- */
@media screen and (max-width: 480px) {
  .cq-hero-title {
    font-size: 16pt;
  }

  .cq-hero-subtitle {
    font-size: 10pt;
  }

  .cq-hero-desc {
    font-size: 9pt;
  }

  .cq-instruction {
    font-size: 13pt;
  }

  .cq-target-color {
    width: 120px;
    height: 120px;
  }

  .cq-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cq-option-btn {
    height: 65px;
  }

  .cq-memory-seq-item {
    width: 45px;
    height: 45px;
    font-size: 12pt;
  }

  .cq-builder-slot {
    width: 50px;
    height: 50px;
    font-size: 12pt;
  }

  .cq-ishihara-canvas {
    width: 200px !important;
    height: 200px !important;
  }

  .cq-dalton-answer-btn {
    width: 55px;
    height: 55px;
    font-size: 16pt;
  }

  .cq-results-stats {
    grid-template-columns: 1fr;
  }

  .cq-new-record {
    font-size: 12pt;
    padding: 10px 16px;
  }
}

/* --- Mode paysage mobile --- */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .cq-hero {
    padding: 16px;
  }

  .cq-hero-icon {
    font-size: 30pt;
    margin-bottom: 4px;
  }

  .cq-hero-title {
    font-size: 16pt;
  }

  .cq-target-color {
    width: 120px;
    height: 120px;
  }

  .cq-options-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cq-results-icon {
    font-size: 36pt;
  }
}

/* --- Améliorations tactiles --- */
@media (hover: none) and (pointer: coarse) {
  .cq-option-btn,
  .cq-duel-btn,
  .cq-memory-color-btn,
  .cq-builder-color,
  .cq-dalton-answer-btn,
  .cq-powerup-btn,
  .cq-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .cq-option-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s;
  }

  .cq-duel-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s;
  }
}

/* --- Impression --- */
@media print {
  .cq-hud,
  .cq-powerups,
  .cq-back-btn,
  .cq-results-actions,
  .cq-duel-buttons,
  .cq-dalton-answers,
  .cq-memory-palette,
  .cq-builder-pool,
  .cq-builder-actions {
    display: none !important;
  }

  .cq-main-menu,
  .cq-game-area,
  .cq-results-container {
    max-width: 100%;
  }
}

/* ==================== UTILITAIRE HIDDEN ==================== */
.cq-main-menu .hidden,
.cq-game-area .hidden {
  display: none !important;
}