/* Téléphone : manette de jeu + panneau de l'animateur. */
body.tel {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 520px 420px at 50% -80px, rgba(255, 170, 51, 0.16), transparent 70%),
    var(--nuit);
  font-size: 18px;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
.ecran {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
body.avec-onglets .ecran, body.avec-onglets .panneau { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

.bandeau { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 10px 16px; text-align: center; background: var(--rouge); color: #fff; font-weight: 700; }

/* ---------- Haut : prénom, score, jokers ---------- */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entete .qui { font-family: var(--titre); font-weight: 700; font-size: 20px; }
.entete .score { font-size: 16px; color: var(--texte-2); text-align: right; }
.entete .score b { display: block; font-family: var(--titre); font-size: 22px; color: var(--texte); font-variant-numeric: tabular-nums; }

.jokers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.joker {
  border: 2px solid var(--ambre); background: transparent; color: var(--ambre);
  border-radius: 14px; height: 48px; font-weight: 700; font-size: 17px;
}
.joker:disabled { border-color: var(--ligne); color: var(--texte-2); opacity: 0.45; }
.joker.actif { background: var(--ambre); color: #2A1700; opacity: 1; }

.minuteur { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.minuteur span { display: block; height: 100%; background: var(--ambre); transform-origin: 0 50%; }

.contexte { margin: 0; font-size: 15px; font-weight: 700; color: var(--ambre); text-align: center; }
.consigne { font-size: 17px; color: var(--texte-2); text-align: center; margin: 0; text-wrap: balance; }

/* ---------- Boutons de réponse ---------- */
.grille { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; min-height: 340px; }
.grille.deux { grid-template-columns: 1fr; }
.choix {
  position: relative; border: 0; border-radius: 22px;
  background: var(--c); color: var(--c-texte);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; text-align: left;
  transition: transform 0.12s ease, opacity 0.2s ease;
}
.choix:active { transform: scale(0.96); }
.choix .l { font-family: var(--titre); font-weight: 800; font-size: 34px; line-height: 1; }
.choix .t { font-size: 20px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.grille.deux .choix { align-items: center; justify-content: center; }
.grille.deux .choix .t { font-family: var(--titre); font-size: 34px; }
.choix.masque { opacity: 0.12; pointer-events: none; }
.grille.verrouillee .choix { opacity: 0.25; }
.grille.verrouillee .choix.choisi { opacity: 1; transform: scale(1.02); }
.grille.verrouillee .choix.choisi::after {
  content: "Envoyé"; position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 14px; font-weight: 700;
}

/* Ordre : touche les éléments dans l'ordre */
.liste-ordre { flex: 1; display: grid; gap: 10px; }
.element {
  display: flex; align-items: center; gap: 14px; border: 0; border-radius: 18px; min-height: 72px; padding: 10px 16px;
  background: var(--nuit-3); text-align: left; font-size: 19px; font-weight: 700;
}
.element .rang-choisi {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  border: 2px dashed var(--ligne); font-family: var(--titre); font-size: 20px;
}
.element.pris .rang-choisi { border: 0; background: var(--ambre); color: #2A1700; }
.element .pastille { flex: none; width: 14px; height: 44px; border-radius: 7px; background: var(--c); }
.actions-ordre { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }

/* ---------- Messages plein écran ---------- */
.message { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 20px 8px; }
.message h1 { font-family: var(--titre); font-weight: 800; font-size: 30px; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.message p { margin: 0; font-size: 19px; color: var(--texte-2); line-height: 1.4; }
.message .gros { font-family: var(--titre); font-weight: 800; font-size: 56px; color: var(--texte); }
.message.juste { background: radial-gradient(circle at 50% 40%, rgba(60, 214, 138, 0.35), transparent 65%); }
.message.faux { background: radial-gradient(circle at 50% 40%, rgba(232, 70, 78, 0.30), transparent 65%); }
.message.juste h1 { color: var(--succes); }
.message.faux h1 { color: #FF8A8F; }
.message .detail-points { font-size: 16px; color: var(--texte-2); }
.logo-tel { font-size: 40px; }

/* ---------- Formulaires ---------- */
.formulaire { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; }
.champ {
  width: 100%; height: 60px; border-radius: 16px; border: 2px solid var(--ligne); background: var(--nuit-2);
  color: var(--texte); padding: 0 18px; font: inherit; font-size: 22px; user-select: text; -webkit-user-select: text;
}
.champ:focus { outline: none; border-color: var(--ambre); }
.bouton {
  height: 58px; border: 0; border-radius: 16px; background: var(--ambre); color: #2A1700;
  font-weight: 700; font-size: 19px; padding: 0 16px; white-space: nowrap;
}
button:focus:not(:focus-visible) { outline: none; }
.bouton:disabled { opacity: 0.5; }
.bouton.second { background: var(--nuit-3); color: var(--texte); }
.bouton.danger { background: transparent; color: #FF8A8F; border: 2px solid rgba(232, 70, 78, 0.6); }
.erreur { color: #FF8A8F; font-weight: 700; min-height: 1.4em; margin: 0; }

.liste-tel { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.liste-tel span { padding: 8px 14px; border-radius: 12px; background: var(--nuit-2); font-weight: 700; }
.liste-tel span.moi { background: var(--ambre); color: #2A1700; }

/* ---------- Panneau animateur ---------- */
.panneau {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.carte { background: var(--nuit-2); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.carte h2 { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--ambre); }
.carte p { margin: 0; color: var(--texte-2); line-height: 1.4; }
.choix-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.puce-choix {
  flex: 1 1 auto; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--ligne);
  background: transparent; color: var(--texte); font-weight: 700;
}
.puce-choix[aria-pressed="true"] { background: var(--ambre); border-color: var(--ambre); color: #2A1700; }
.puce-choix:disabled { opacity: 0.35; }
.deux-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ligne-joueur { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ligne-joueur .nom { flex: 1; font-weight: 700; }
.ligne-joueur .etat { font-size: 14px; color: var(--texte-2); }
.ligne-joueur button { border: 0; background: transparent; color: #FF8A8F; font-weight: 700; min-height: 44px; padding: 0 12px; }
.score-anim { display: flex; justify-content: space-between; padding: 4px 0; }
.score-anim b { font-variant-numeric: tabular-nums; }

/* ---------- Onglets Jouer / Animer ---------- */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 15, 44, 0.96); border-top: 1px solid var(--ligne);
}
.onglets button { height: 50px; border: 0; border-radius: 14px; background: transparent; color: var(--texte-2); font-weight: 700; font-size: 17px; }
.onglets button[aria-current="true"] { background: var(--nuit-3); color: var(--texte); }

button, a { touch-action: manipulation; }

/* Bilan : questions ratées par ce joueur */
.bilan-tel { flex: none; padding-top: 28px; }
.a-revoir { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; user-select: text; -webkit-user-select: text; }
.a-revoir h2 { margin: 6px 0 0; font-family: var(--titre); font-size: 18px; color: var(--ambre); }
.a-revoir article { background: var(--nuit-2); border-radius: 16px; padding: 14px 16px; }
.a-revoir .q { margin: 0; font-weight: 700; line-height: 1.35; }
.a-revoir .r { margin: 6px 0 0; color: var(--succes); font-weight: 700; }
.a-revoir .e { margin: 6px 0 0; color: var(--texte-2); line-height: 1.4; }