/*
 * game.css — Styles du jeu, chargés APRÈS glld.css (feuille du site www.glld.zip,
 * copiée sans modification). Ce fichier contient :
 *   1. les adaptations de glld.css pour le mobile ;
 *   2. les composants communs (boutons, champs, avatars) ;
 *   3. la page joueur (téléphone).
 *
 * Couleurs principales (modifiables ici) :
 */
:root {
  --rouge-site: #8c0000;      /* rouge du dégradé de fond */
  --rouge-fonce: #300000;
  --texte: #222;
  --gris: #6b6b6b;
  --gris-clair: #eee;
  --vert: #2e7d32;            /* bonne réponse */
  --orange: #ef6c00;          /* réponse partielle */
  --rouge-erreur: #c62828;    /* mauvaise réponse (distinct du fond) */
  --ombre: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------------------------
 * 1. Adaptations de glld.css
 * ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100dvh;          /* hauteur réelle sur mobile (barre d'adresse) */
  height: auto;
  color: var(--texte);
  -webkit-text-size-adjust: 100%;
}

/* .wrapper fait 600 px fixes dans glld.css : trop large pour un téléphone */
.wrapper {
  width: 100%;
  max-width: 600px;
  padding: 0 16px 16px;
}

.menu-box {
  padding: 16px;
  gap: 12px;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Nom du site en haut de page */
.site-title {
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin: 18px 0 14px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
 * 2. Composants communs
 * ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--rouge-site);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: #b9b9b9; color: #f4f4f4; cursor: not-allowed; box-shadow: none; filter: none; }
.btn-secondary { background: #fff; color: var(--rouge-site); border: 2px solid var(--rouge-site); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--gris); box-shadow: none; text-decoration: underline; min-height: 40px; }
.btn-small { min-height: 34px; padding: 4px 10px; font-size: 14px; border-radius: 8px; }
.btn-danger { background: var(--rouge-erreur); }
.btn-ok { background: var(--vert); }
.btn-block { width: 100%; }

.input, textarea.input, select.input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid #ccc;
  border-radius: 10px;
  font: inherit;
  font-size: 17px;           /* >= 16 px : évite le zoom automatique d'iOS */
  background: #fff;
  color: var(--texte);
}
.input:focus { outline: none; border-color: var(--rouge-site); }
textarea.input { min-height: 110px; resize: vertical; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background: #ddd;
}

.muted { color: var(--gris); }
.small { font-size: 14px; }
.error { color: var(--rouge-erreur); font-weight: bold; min-height: 1.2em; }
.hidden { display: none !important; }
.big { font-size: 22px; font-weight: bold; }
.stack { display: grid; gap: 12px; }

.countdown {
  display: inline-block;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gris-clair);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.countdown.urgent { background: var(--rouge-erreur); color: #fff; }

.banner {
  position: fixed;
  left: 0; right: 0; top: 0;
  padding: 8px;
  background: #ffcc00;
  color: #222;
  text-align: center;
  font-weight: bold;
  z-index: 10;
}

/* ---------------------------------------------------------------------------
 * 3. Page joueur (téléphone)
 * ------------------------------------------------------------------------- */
.player .menu-box { min-height: 180px; align-content: center; }
.player .menu-box:empty { display: none; }

.player h2 { margin: 4px 0; font-size: 22px; }
.player p { margin: 4px 0; line-height: 1.4; }

.q-header { display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: var(--gris); }

/* Tuiles de choix (radio / cases à cocher) */
.choices { display: grid; gap: 10px; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 2px solid #ccc;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .letter {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--gris-clair);
  font-weight: bold;
}
.choice.selected { border-color: var(--rouge-site); background: #fff3f3; }
.choice.selected .letter { background: var(--rouge-site); color: #fff; }

.saved { color: var(--vert); font-weight: bold; }

/* États de la boîte après clôture : la couleur n'est jamais la seule information */
.menu-box.state-correct { background: var(--vert); color: #fff; }
.menu-box.state-partial { background: var(--orange); color: #fff; }
.menu-box.state-wrong { background: var(--rouge-erreur); color: #fff; }
.menu-box.state-correct .muted,
.menu-box.state-partial .muted,
.menu-box.state-wrong .muted { color: rgba(255, 255, 255, 0.85); }
.result-icon { font-size: 54px; line-height: 1; }
.result-answer { background: rgba(255, 255, 255, 0.18); border-radius: 10px; padding: 10px; }

.end-emoji { font-size: 64px; line-height: 1; }

.photo-preview { margin: 0 auto; }
/* Bouton secondaire désactivé */
.btn-secondary:disabled { background: #f2f2f2; color: #aaa; border-color: #d0d0d0; }