/* =============================================================
   classique.css — Styles exclusifs au Mode Classique
   Page : classiqueMode/classique.html
   Contient : boîte d'en-tête, grille de devinettes, cellules
   colorées, indice (quote), mode daltonien, autocomplete ul,
   dark mode spécifique classique, animations de grille.
   Dépend de : global.css (reset, layout, .textbar-container…)
   ============================================================= */

/* =====================================================
   1. BOÎTE D'EN-TÊTE DU MODE CLASSIQUE
   Encadré bleu avec le titre et l'instruction.
   (Remplace emoji-hint-zone dans ce mode)
   ===================================================== */

.personadle-box {
  /* Fond bleu semi-transparent */
  background: rgba(0, 102, 204, 0.87);
  color: white;
  padding: 30px 40px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  max-width: 400px;
  margin: auto;
  /* Nécessaire pour positionner le bouton Rules en absolu */
  position: relative;
}

.personadle-box h1 {
  margin: 0 0 15px;
  font-size: 26px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.personadle-box p {
  font-size: 16px;
  color: #e0e0e0;
}

/* =====================================================
   2. INDICE (QUOTE HINT)
   Texte d'indice débloqué après 3 tentatives.
   Rendu visible par le JS en retirant display:none
   lorsque le seuil de mauvaises réponses est atteint.
   ===================================================== */

#quoteHint {
  font-size: 17px;
  font-style: italic;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  padding: 12px 20px;
  border-radius: 10px;
  max-width: 500px;
  margin: 20px auto 0;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  /* Caché par défaut, affiché par le JS */
  display: none;
}

/* =====================================================
   3. GRILLE DES DEVINETTES
   Affichée dans #output — chaque tentative crée
   une .guess-row avec une image et des .guess-cell.
   La grille utilise CSS Grid avec 1 colonne image (100px)
   + 7 colonnes de propriétés (140px chacune).
   ===================================================== */

/* Conteneur principal des résultats */
#output {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ligne de résultat : image + 7 cellules */
.guess-row {
  display: grid;
  grid-template-columns: 100px repeat(7, 140px);
  gap: 14px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.88);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  width: auto;
  max-width: 1300px;
}

/* Portrait du personnage deviné */
.guess-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background-color: white;
  border-radius: 10px;
  border: 2px solid #ccc;
}

/* Cellule d'un attribut (arcane, opus, etc.)
   Démarre en position rotateX(90deg) et bascule vers 0deg
   via l'animation flipIn pour un effet "retournement de carte". */
.guess-cell {
  width: 140px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  font-size: 15px;
  color: white;
  border-radius: 10px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Animation de révélation en flip */
  animation: flipIn 0.5s ease forwards;
  transform: rotateX(90deg);
  text-align: center;
  padding: 12px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}

/* Délais d'animation pour chaque cellule (effet cascade) :
   les cellules se révèlent une à une de gauche à droite,
   chacune avec 0.1s de délai supplémentaire. */
.guess-cell:nth-child(2) {
  animation-delay: 0.1s;
}
.guess-cell:nth-child(3) {
  animation-delay: 0.2s;
}
.guess-cell:nth-child(4) {
  animation-delay: 0.3s;
}
.guess-cell:nth-child(5) {
  animation-delay: 0.4s;
}
.guess-cell:nth-child(6) {
  animation-delay: 0.5s;
}

/* En-tête des catégories (Nom, Genre, Âge…)
   Toujours visible au-dessus des .guess-row pour rappeler
   à quel attribut correspond chaque colonne. */
.category-row {
  display: grid;
  grid-template-columns: 100px repeat(7, 140px);
  gap: 14px;
  margin: 50px auto 10px auto;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 12px;
  border-radius: 14px;
  max-width: 1300px;
}

/* Texte principal dans une cellule (code name) */
.codename {
  font-weight: 700;
  font-size: 16px;
  color: black;
}

/* Texte secondaire dans une cellule (real name) */
.realname {
  font-size: 14px;
  color: #555;
  font-style: italic;
  line-height: 1.1;
}

/* =====================================================
   4. COULEURS DES CELLULES (feedback)
   Vert = correct, Jaune = partiel, Rouge = faux.
   Ces classes sont appliquées dynamiquement par le JS
   sur chaque .guess-cell en fonction de la comparaison
   avec la réponse attendue.
   ===================================================== */

/* Réponse correcte */
.correct {
  background-color: #2ecc71;
}

/* Correspondance partielle */
.misplaced {
  background-color: #f1c40f;
  color: black;
}

/* Mauvaise réponse */
.wrong {
  background-color: #e74c3c;
}

/* =====================================================
   5. AUTOCOMPLÉTION (liste ul du mode classique)
   Positionnée sous le .textbar-container.
   Le z-index élevé assure qu'elle passe par-dessus
   les éléments suivants dans le DOM.
   ===================================================== */

#autocompleteList {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 600; /* au-dessus de .bottom-nav (z-index 500) */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =====================================================
   6. TOOLTIP (info-bulles sur les cellules)
   Affichées au survol des cellules de la grille.
   Technique CSS pure : .tooltip-text est invisible
   par défaut (opacity:0, visibility:hidden) et devient
   visible uniquement quand le parent .tooltip est survolé.
   ===================================================== */

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

/* Bulle de texte cachée par défaut */
.tooltip .tooltip-text {
  visibility: hidden;
  width: max-content;
  max-width: 280px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  text-align: left;
  font-size: 13px;
  font-family: Arial, sans-serif;
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  z-index: 100;
  /* Positionnée au-dessus de l'élément */
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Affiche la tooltip au survol */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Flèche pointant vers le bas (triangle CSS via border trick) */
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

/* =====================================================
   7. MODE DALTONIEN
   Remplace les couleurs vert/jaune/rouge par des formes
   neutres avec bordure grise, afin d'assurer l'accessibilité
   pour les joueurs daltoniens. Les symboles data-label
   fournissent alors le seul retour visuel de feedback.
   ===================================================== */

/* Le mode Classique est le seul à empiler DEUX badges fixes en haut à
   droite (dark mode + daltonien, cf. #daltonianToggle ci-dessous), alors
   que #imgHomePage (logo, partagé par toutes les pages via global.css)
   n'était dimensionné que pour laisser de la place à un seul badge.
   Résultat mesuré : le badge daltonien (bas réel ≈108px) chevauche le
   logo/illustration "Take Your Heart" sur toute la plage ~360px–1570px,
   quelle que soit la largeur d'écran (vérifié par capture d'écran à 10+
   largeurs). On réserve donc ici un padding-top de page suffisant pour
   que le contenu démarre toujours sous les deux badges empilés, quelle
   que soit la largeur — ne dépend que de la hauteur des badges (fixe),
   jamais de la largeur du logo (variable). Page Classique uniquement :
   ne touche pas global.css ni les 5 autres modes qui n'ont qu'un badge.

   MàJ (retour Hamza « logo trop bas vs les autres modes ») : sur desktop le
   logo (max 460px, centré) n'atteint jamais les badges en haut à droite → on
   remet un padding minime, comme les 5 autres modes. Le chevauchement ne
   survient qu'en dessous de ~900px, où le logo (80vw) rejoint les badges :
   on ne réserve la place que là, via media query.

   MàJ 2 (retour Hamza du 2026-09-25, « la page Classique n'a pas la taille
   adaptée, obligé de scroller ») : ce correctif n'avait réglé que le desktop.
   Sur mobile, réserver la hauteur de DEUX badges empilés coûtait 96px, quand
   les cinq autres modes se contentent de 50px — le logo démarrait à 106px au
   lieu de 60px, et tout le reste de la page descendait d'autant.

   Mesuré à 390px : dark mode 10→50, daltonien 60→108. Les empiler était le
   problème, pas leur taille. La bascule daltonien rejoint donc la RANGÉE du
   dark mode au lieu de se placer dessous : la bande réservée retombe à une
   seule hauteur de badge.

   Elle garde ses 48px de haut (cible tactile, cf. CLAUDE.md §7) — d'où 60px
   et non 50 : c'est la hauteur du bouton qui commande, et la rogner pour
   gagner 10px se paierait au doigt. */
body {
  padding-top: 8px;
}
@media (max-width: 900px) {
  body {
    padding-top: 60px;
  }
}

/* Bouton de bascule daltonien (fixe, sous le dark mode toggle) */
#daltonianToggle {
  position: fixed;
  top: 60px;
  right: 12px;
  background-color: #1f1f1f;
  color: #f0f0f0;
  border: 2px solid #4caf50;
  padding: 6px 20px;
  font-weight: bold;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}

/* Survol : légèrement plus clair, bordure plus vive */
#daltonianToggle:hover {
  background-color: #2e2e2e;
  border-color: #81c784;
}

/* Clic : légère compression pour retour tactile */
#daltonianToggle:active {
  transform: scale(0.98);
  background-color: #3d3d3d;
}

/* En mode daltonien : cellules transparentes avec bordure + symboles
   Le !important est nécessaire pour surcharger les classes .correct /
   .misplaced / .wrong qui définissent aussi background-color. */
body.daltonian-mode .guess-cell.correct,
body.daltonian-mode .guess-cell.misplaced,
body.daltonian-mode .guess-cell.wrong {
  background-color: transparent !important;
  color: rgb(76, 67, 67) !important;
  border: 2px solid gray;
}

/* =====================================================
   8. DARK MODE — SPÉCIFIQUE CLASSIQUE
   Grille, cellules, catégories et feedback en thème sombre.
   Ces règles surchargent les valeurs claires définies
   dans global.css et dans les sections 3–4 ci-dessus.
   ===================================================== */

/* Ligne de résultat */
body.darkmode .guess-row {
  background-color: rgba(30, 30, 30, 0.9);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15);
}

/* Cellule générique */
body.darkmode .guess-cell {
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #555;
}

/* Image du personnage */
body.darkmode .guess-image {
  background-color: #000;
  border: 2px solid #666;
}

/* En-tête catégories */
body.darkmode .category-row {
  background-color: rgba(60, 60, 60, 0.7);
  color: #fff;
  border: 1px solid #444;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Les couleurs de feedback restent identiques en dark mode */
body.darkmode .correct {
  background-color: #2ecc71;
}
body.darkmode .misplaced {
  background-color: #f1c40f;
  color: black;
}
body.darkmode .wrong {
  background-color: #e74c3c;
  color: white;
}

/* Compteur activé en dark mode */
body.darkmode .counter.activated {
  background-color: #fdd835;
  color: #000;
  border-color: #888;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* =====================================================
   9. ANIMATION DE RÉVÉLATION (flip des cellules)
   Chaque .guess-cell commence en rotateX(90deg) (de dos)
   et pivote vers 0deg (face visible) avec un fondu,
   donnant l'illusion d'une carte qui se retourne.
   ===================================================== */

@keyframes flipIn {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

/* =====================================================
   10. RESPONSIVE — SPÉCIFIQUE CLASSIQUE
   ===================================================== */

/* -----------------------------------------------
   ÉCRANS INTERMÉDIAIRES (901px – 1024px)
   La grille est légèrement compactée (7×120px = 840px
   + 90px image = 930px total, tient dans 95vw).
   Scroll horizontal activé si besoin.
----------------------------------------------- */
@media (min-width: 901px) and (max-width: 1024px) {
  #output {
    overflow-x: auto;
    align-items: flex-start;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
  }

  .category-row,
  .guess-row {
    grid-template-columns: 90px repeat(7, 120px);
    gap: 12px;
    min-width: max-content;
  }

  .guess-image {
    width: 90px;
    height: 90px;
  }

  .guess-cell {
    width: 120px;
    height: 90px;
    font-size: 14px;
    padding: 10px;
  }
}

/* -----------------------------------------------
   TABLETTE (481px – 900px)
   La grille reste horizontale mais devient scrollable.
   Meilleure lisibilité que le collapse vertical.
----------------------------------------------- */
@media (min-width: 481px) and (max-width: 900px) {
  /* Le conteneur #output autorise le scroll horizontal */
  #output {
    overflow-x: auto;
    align-items: flex-start;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
  }

  /* Grille compactée mais encore horizontale */
  .category-row,
  .guess-row {
    grid-template-columns: 80px repeat(7, 110px);
    gap: 10px;
    min-width: max-content; /* Empêche la compression des colonnes */
  }

  /* Image légèrement réduite */
  .guess-image {
    width: 80px;
    height: 80px;
  }

  /* Cellules compactées */
  .guess-cell {
    width: 110px;
    height: 80px;
    font-size: 13px;
    padding: 8px;
  }

  /* Indice */
  #quoteHint {
    max-width: 95%;
    margin: 15px auto;
    font-size: 15px;
  }

  /* Bouton daltonien À CÔTÉ du toggle dark mode, plus dessous : empilés, les
     deux badges réservaient 96px de haut de page contre 50px pour les cinq
     autres modes, et toute la page descendait d'autant. */
  #daltonianToggle {
    top: 10px;
    /* 225px = largeur maximale mesurée de la bascule dark mode dans cette plage
       (201px à 768px) + sa marge droite + un espace. En dessous, les deux
       badges se chevauchaient. */
    right: 225px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* -----------------------------------------------
   MOBILE (≤ 480px)
   Layout carte 2 colonnes : image à gauche (toute la
   hauteur), propriétés empilées à droite.
   Vraie adaptation, pas juste un rétrécissement.

   Structure obtenue :
   ┌──────────┬─────────────────────┐
   │          │ ■ Name              │
   │  [img]   │ ■ Gender            │
   │          │ ■ Age               │
   │          │ ■ Persona User      │
   │          │ ■ Persona           │
   │          │ ■ Arcana            │
   │          │ ■ Opus              │
   └──────────┴─────────────────────┘
----------------------------------------------- */
@media (max-width: 480px) {
  /* Cache l'en-tête de catégories (labels affichés via ::before) */
  .category-row {
    display: none;
  }

  /* Conteneur de scroll horizontal désactivé sur mobile */
  #output {
    overflow-x: visible;
    padding: 0 5px;
  }

  /* ---- Grille 2 colonnes : image | cellules ---- */
  .guess-row {
    display: grid;
    grid-template-columns: 80px 1fr; /* Colonne image fixe, reste fluide */
    grid-template-rows: repeat(7, auto);
    gap: 5px 8px;
    padding: 12px 10px;
    width: min(360px, 96vw);
    max-width: 100%;
    margin: 0 auto 14px auto;
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
  }

  /* Image : colonne de gauche, s'étend sur toutes les rangées */
  .guess-image {
    grid-column: 1;
    grid-row: 1 / 8; /* Span des 7 cellules de propriétés */
    width: 72px;
    height: auto;
    min-height: 72px;
    align-self: center;
    border-radius: 8px;
    border: 1px solid #ccc;
    object-fit: contain;
    background-color: white;
  }

  /* Cellules : colonne de droite, une par ligne */
  .guess-cell {
    grid-column: 2;
    width: auto;
    height: auto;
    min-height: 36px;
    font-size: 11px;
    padding: 5px 8px 5px 32px; /* Padding gauche pour le label ::before */
    border-radius: 6px;
    text-align: left;
    position: relative;
    line-height: 1.3;
    word-break: break-word;
    box-sizing: border-box;
  }

  /* Label de catégorie via data-attribute (positionné en absolu à gauche)
     Remplace visuellement la .category-row masquée sur mobile. */
  .guess-cell::before {
    content: attr(data-label);
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    opacity: 0.75;
    font-weight: normal;
    white-space: nowrap;
    max-width: 28px;
    overflow: hidden;
    line-height: 1.1;
  }

  /* Dark mode : row adaptée */
  body.darkmode .guess-row {
    background-color: rgba(30, 30, 30, 0.92);
  }

  /* Indice textuel */
  #quoteHint {
    max-width: 96%;
    margin: 12px auto;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Bouton daltonien — même rangée que le dark mode (cf. ≤900px ci-dessus). */
  #daltonianToggle {
    top: 10px;
    /* La bascule dark mode se réduit à ~93px sous 480px : 112px suffisent. */
    right: 112px;
    font-size: 11px;
    padding: 5px 10px;
    z-index: 1000;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   MODE EXPERT — citation seule
   Le bouton de bascule et le halo de page vivent dans css/global.css (partagés
   par les 4 modes). Ici : la grille réduite à deux colonnes et la citation
   promue au rang d'indice principal.
   ═════════════════════════════════════════════════════════════════════════════ */

/* La citation devient l'indice, pas une récompense : encadrée, centrée, lisible. */
body.expert-mode #quoteHint {
  display: block;
  box-sizing: border-box;
  width: min(560px, 92vw);
  margin: 18px auto;
  padding: 18px 22px;
  background: rgba(12, 12, 14, 0.92);
  border-left: 4px solid #e63946;
  border-radius: 4px;
  color: #f2f2f2;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 480px) {
  body.expert-mode #quoteHint {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
}

/* =====================================================================
   INDICE + ABANDON CÔTE À CÔTE SUR MOBILE
   =====================================================================
   `.hint-giveup-row` (global.css §8) est une rangée `flex` avec
   `flex-wrap: wrap`. Classique est le SEUL mode à y mettre deux blocs —
   les cinq autres n'ont que le bloc Abandon, d'où l'absence du problème
   ailleurs. Le sélecteur n'existe que dans `classiqueMode.html`, donc ce
   qui suit ne peut rien casser ailleurs.

   Mesuré en production le 2026-09-26 à 390px : chaque bloc fait 229px de
   large, soit 478px avec le gap pour 380px disponibles → la rangée passe à
   la ligne et occupe 292px de haut au lieu de 136. Le champ de réponse
   démarrait à 894px, contre 748px en Émoji : Classique était le mode où il
   fallait scroller le plus loin pour répondre, alors que le correctif de la
   2.3.1 (padding-top 96→60) était censé l'aligner sur les autres. Ce
   correctif-là n'avait réglé que 46px ; les 154px restants venaient d'ici.

   Ce n'est pas la taille des images qui déborde (173px) mais le
   `padding: 12px 20px` de `.link-wrapper` (global.css:165), qui ajoute 40px
   de large à chaque bloc. On le rogne et on descend l'image de 70 à 60px :
   bloc à 176px, deux blocs + gap = 364px, ça tient jusqu'à 375px de large.

   ⚠️ `height` porte `!important` parce que global.css l'impose déjà à 70px
   sous 768px — à specificité égale, c'est l'ordre de chargement qui tranche
   et `classique.css` se charge après (cf. classiqueMode.html).

   La cible tactile reste largement au-dessus des 48px de CLAUDE.md §7 :
   le bouton mesure 160×80px après correction (contre 213×94 avant).

   Gain mesuré : 170px. Le champ de réponse passe de 894 à 724px à 390px de
   large — Classique devient le mode où il est le plus haut, devant Émoji.
   Il reste 129px de scroll à 390×844 : ils viennent de `.personadle-box`
   (313px) et du logo, partagés par les six modes — les toucher serait une
   refonte, pas un correctif.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hint-giveup-row {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .hint-giveup-row .link-wrapper {
    min-width: 0;
    padding: 10px 6px;
  }

  .hint-giveup-row .img-wrapper img {
    height: 60px !important;
  }
}