:root {
  --bs-body-bg: #1B1032;
  --bs-body-color: #F5F1FF;
  --bs-primary: #FF4D6D;
  --bs-primary-rgb: 255, 77, 109;
  --bs-secondary: #B8A9DC;
  --bs-success: #3DDC97;
  --bs-warning: #FFC857;

  --ng-surface: #2A1B4A;
  --ng-surface-haute: #382458;

  /* Couleurs d'accent par type de jeu — front et back-office */
  --ng-type-blindtest: #FF4D6D;
  --ng-type-quizz: #4DA8FF;
  --ng-type-pendu: #3DDC97;
  --ng-type-dessin: #FFC857;
  --ng-type-bouchetrou: #B983FF;
  --ng-type-autre: #B8A9DC;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ng-navbar {
  background: var(--ng-surface);
  border-bottom: 1px solid var(--ng-surface-haute);
  flex-shrink: 0;
}

.ng-footer {
  background: var(--ng-surface);
  border-top: 1px solid var(--ng-surface-haute);
  flex-shrink: 0;
}
.ng-footer a {
  color: var(--bs-secondary);
  text-decoration: none;
}
.ng-footer a:hover {
  color: var(--bs-body-color);
  text-decoration: underline;
}

/* --------------------------------------------------------------------
   Bootstrap 5.3 fige les couleurs de chaque composant dans des variables
   locales (--bs-btn-bg, etc.) calculées à la compilation, indépendamment
   de --bs-primary/--bs-warning/... redéfinis ci-dessus dans :root. Sans
   ces overrides explicites, boutons/champs/badges restent bleu Bootstrap
   par défaut malgré le thème.
   -------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #1B1032;
  --bs-btn-hover-bg: #ff2e53;
  --bs-btn-hover-border-color: #ff2e53;
  --bs-btn-hover-color: #1B1032;
  --bs-btn-active-bg: #e6294b;
  --bs-btn-active-border-color: #e6294b;
  --bs-btn-active-color: #1B1032;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-danger {
  --bs-btn-bg: #E5484D;
  --bs-btn-border-color: #E5484D;
  --bs-btn-hover-bg: #cc3438;
  --bs-btn-hover-border-color: #cc3438;
}

.btn-outline-light:hover {
  color: #1B1032;
}

.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-control::placeholder {
  color: var(--bs-secondary);
  opacity: 0.65;
}

/* Les <option> d'une <select> transparente sont rendues par l'OS, pas par la
   page : sans couleurs explicites, certains navigateurs (Chrome Android en
   particulier) affichent un menu géant et illisible. On leur donne un fond
   et un texte fixes, indépendamment du thème transparent du champ fermé. */
select.form-select,
select.form-control {
  color-scheme: dark;
}
select.form-select option,
select.form-control option {
  background-color: #1B1032;
  color: #F5F1FF;
}

.alert-danger {
  --bs-alert-bg: rgba(255, 77, 109, 0.12);
  --bs-alert-border-color: var(--bs-primary);
  --bs-alert-color: #ff8fa3;
}

.badge.bg-secondary {
  background-color: var(--ng-surface-haute) !important;
  color: var(--bs-body-color);
}

.spinner-border {
  --bs-spinner-border-width: 0.18em;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.ng-ecran {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.25rem;
  text-align: center;
  gap: 1.25rem;
  transition: background-color 0.4s ease;
  overflow-y: auto;
  justify-content: safe center; /* contenu long (classement général en attente) : défile au lieu d'être coupé */
}

.ng-ecran[data-ambiance="attente"]    { background: radial-gradient(circle at 50% 20%, var(--ng-surface), var(--bs-body-bg)); }
.ng-ecran[data-ambiance="question"]   { background: radial-gradient(circle at 50% 15%, #4a1b3a, var(--bs-body-bg)); }
.ng-ecran[data-ambiance="succes"]     { background: radial-gradient(circle at 50% 15%, #1b4a3a, var(--bs-body-bg)); }
.ng-ecran[data-ambiance="echec"]      { background: radial-gradient(circle at 50% 15%, #3a1b2a, var(--bs-body-bg)); }
.ng-ecran[data-ambiance="classement"] { background: radial-gradient(circle at 50% 15%, #4a3a1b, var(--bs-body-bg)); }

.ng-pseudo-tag {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-size: 0.8rem;
  color: var(--bs-secondary);
  font-family: 'IBM Plex Mono', monospace;
}

.ng-carte {
  background: var(--ng-surface);
  border: none;
  border-radius: 1.25rem;
  width: 100%;
  max-width: 420px;
}

.ng-minuteur {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--bs-warning);
  font-variant-numeric: tabular-nums;
}

.ng-minuteur-zone {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--bs-warning);
  font-variant-numeric: tabular-nums;
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ng-minuteur-zone .material-symbols-outlined {
  font-size: 2.5rem;
}

.ng-zone-annonce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Equalizer animé : remplace le bouton "appuyer pour lancer" — la lecture
   démarre automatiquement, ces barres donnent juste un retour visuel. */
.ng-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
}
.ng-equalizer span {
  width: 4px;
  background: #1B1032;
  border-radius: 2px;
  height: 8px;
  animation: ng-eq-bounce 1s ease-in-out infinite;
}
#zone-equalizer-audio.ng-lecture-active .ng-equalizer span,
#cache-youtube .ng-equalizer span {
  animation-play-state: running;
}
.ng-equalizer span:nth-child(1) { animation-delay: 0s; }
.ng-equalizer span:nth-child(2) { animation-delay: 0.15s; }
.ng-equalizer span:nth-child(3) { animation-delay: 0.3s; }
.ng-equalizer span:nth-child(4) { animation-delay: 0.45s; }
@keyframes ng-eq-bounce {
  0%, 100% { height: 6px; }
  50% { height: 26px; }
}
#cache-youtube .ng-equalizer span { background: var(--bs-primary); }

/* Masque le bandeau titre/chaîne de YouTube (bande-annonce visible) sans
   bloquer les contrôles natifs en dessous (pause, barre de progression). */
.ng-cache-titre-youtube {
  height: 20%;
  background: #000; /* bande noire pleine : masque le titre YouTube */
  z-index: 2;
  pointer-events: none;
}

.ng-pastille-attente {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bs-warning);
  animation: ng-pulse 1.4s ease-in-out infinite;
}

@keyframes ng-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

.btn-ng-option {
  background: var(--ng-surface);
  border: 2px solid var(--ng-surface-haute);
  color: var(--bs-body-color);
  border-radius: 1rem;
  padding: 1.1rem 1rem;
  font-weight: 500;
}
.btn-ng-option:hover,
.btn-ng-option:focus { color: var(--bs-body-color); border-color: var(--bs-primary); background: var(--ng-surface-haute); }
.btn-ng-option.active,
.btn-ng-option.selectionne { border-color: var(--bs-primary); background: var(--ng-surface-haute); color: var(--bs-body-color); }
.btn-ng-option:disabled { opacity: 0.5; }

/* Option de vote : pleine largeur, texte centré, nombre de votes centré
   en dessous (plutôt que côte à côte) — utilisé par tous les écrans de
   vote (mode, jeu, rythme, retour à l'accueil...), joueur et écran principal. */
.ng-option-vote {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}
.ng-option-vote .ng-option-vote-compteur {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bs-warning); /* visible aussi quand le compteur vaut 0 */
}
.ng-option-vote.selectionne .ng-option-vote-compteur { color: inherit; }

/* Zone de vote : conteneur pleine largeur pour les options ci-dessus (plus
   large que les cartes classiques, pour vraiment occuper l'écran). */
.ng-zone-vote { width: 100%; max-width: 600px; }

/* Petit badge "VOTE" + icône urne, affiché au-dessus de chaque vote à la
   place d'un texte explicatif plus long. */
.ng-badge-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-warning) 18%, var(--ng-surface));
  color: var(--bs-warning);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.ng-badge-vote .material-symbols-outlined { font-size: 1.1em; }

.modal-content {
  background: var(--ng-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--ng-surface-haute);
}
.form-check-input { background-color: var(--ng-surface-haute); border-color: var(--ng-surface-haute); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(255, 200, 87, 0.25); }

.ng-points-gagnes {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.5rem;
  font-weight: 600;
}

.ng-icone-resultat {
  font-size: 3.5rem;
}

.ng-ligne-classement {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--ng-surface);
  text-align: left;
}
.ng-ligne-classement.moi { border: 2px solid var(--bs-warning); }
.ng-ligne-classement.ng-cliquable { cursor: pointer; }

.ng-detail-classement {
  background: var(--ng-surface-haute);
  border-radius: 0 0 0.75rem 0.75rem;
  margin-top: -0.4rem;
  padding: 0.5rem 1rem 0.6rem;
  font-size: 0.85rem;
  color: var(--bs-secondary);
}
.ng-detail-classement > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.ng-detail-classement > div > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ng-detail-classement > div > span:last-child { flex-shrink: 0; color: var(--bs-body-color); font-weight: 600; }

.ng-rang {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--bs-secondary);
  width: 22px;
  flex-shrink: 0;
}

.ng-score {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--bs-warning);
  font-weight: 600;
}

/* Podium général permanent : icône flottante + panneau coulissant,
   accessibles à tout moment sans changer de page (voir app.js/ecran-principal.js). */
.ng-podium-flottant {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 1050;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--bs-warning);
  color: #1B1032;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.ng-podium-flottant .material-symbols-outlined { font-size: 1.7rem; }
.ng-podium-flottant .ng-podium-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bs-primary);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ng-panel-podium {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: 1050;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--ng-surface);
  border: 1px solid var(--ng-surface-haute);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.ng-panel-podium-entete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ng-surface-haute);
  flex-shrink: 0;
}
.ng-panel-podium-corps {
  padding: 0.75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Version compacte pour l'écran principal (grand écran, coin haut-droit). */
.ep-podium-flottant { top: 1rem; right: 1rem; bottom: auto; }
.ep-panel-podium { top: 5rem; bottom: auto; right: 1rem; }

/* Convention de couleur valable sur toute la plateforme : vert = correct,
   rouge = incorrect (pendu, QCM révélés, résultats de question). */
.ng-correct {
  border-color: var(--bs-success) !important;
  color: var(--bs-success) !important;
  background: rgba(61, 220, 151, 0.12) !important;
}
.ng-incorrect {
  border-color: #E5484D !important;
  color: #E5484D !important;
  background: rgba(229, 72, 77, 0.12) !important;
}

/* Version "texte seul" (sans fond ni bordure) pour les lettres du mot du
   pendu — la couleur suffit, un fond par lettre serait trop lourd visuellement. */
.ng-texte-correct { color: var(--bs-success); }
.ng-texte-incorrect { color: #E5484D; }

/* Mot du pendu affiché : taille de police calculée à partir du nombre de
   lettres (--ng-nb-lettres, posée en inline-style par ecran-principal.js et
   app.js) pour que même le mot le plus long de la banque tienne toujours
   sur une seule ligne, sans jamais passer à la ligne ni déborder. */
.ng-mot-pendu-affiche {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2em;
  max-width: 94vw;
}
.ng-mot-pendu-affiche.ng-mot-pendu-grand {
  font-size: clamp(1.6rem, calc(78vw / var(--ng-nb-lettres, 8)), 4rem);
}
.ng-mot-pendu-affiche.ng-mot-pendu-joueur {
  font-size: clamp(1.1rem, calc(78vw / var(--ng-nb-lettres, 8)), 2rem);
}

/* Avatar joueur : le logo sert de pochoir (masque CSS), rempli avec la
   couleur attribuée à chaque joueur — une seule image, coloration illimitée. */
.ng-avatar {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  flex-shrink: 0;
  -webkit-mask-image: url('../img/avatar.svg');
  mask-image: url('../img/avatar.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Logo de marque (navbar, écrans d'accueil...) — même pochoir, couleur or fixe. */
.ng-logo {
  display: inline-block;
  background-color: var(--bs-warning);
  vertical-align: middle;
  -webkit-mask-image: url('../img/avatar.svg');
  mask-image: url('../img/avatar.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.ng-logo-nav { width: 1.5rem; height: 1.5rem; }
.ng-logo-grand { width: 3rem; height: 3rem; }

/* ---------------------------------------------------------------------
   Différenciation visuelle par type de jeu (front + back-office).
   Le fond entier de la carte est teinté de la couleur du type (mélangé
   avec le fond de carte habituel pour rester lisible en thème sombre),
   plus une bordure d'accent à gauche, une pastille icône colorée et un
   badge texte assorti, tous dérivés du même type de jeu.
   --------------------------------------------------------------------- */
.carte-jeu, .ng-carte.carte-jeu-type {
  background: color-mix(in srgb, var(--ng-type-autre) 22%, var(--ng-surface));
  border-left: 4px solid var(--ng-type-autre);
}
.carte-jeu[data-type="blindtest"], .ng-carte.carte-jeu-type[data-type="blindtest"] {
  background: color-mix(in srgb, var(--ng-type-blindtest) 22%, var(--ng-surface));
  border-left-color: var(--ng-type-blindtest);
}
.carte-jeu[data-type="quizz"], .ng-carte.carte-jeu-type[data-type="quizz"] {
  background: color-mix(in srgb, var(--ng-type-quizz) 22%, var(--ng-surface));
  border-left-color: var(--ng-type-quizz);
}
.carte-jeu[data-type="pendu"], .ng-carte.carte-jeu-type[data-type="pendu"] {
  background: color-mix(in srgb, var(--ng-type-pendu) 22%, var(--ng-surface));
  border-left-color: var(--ng-type-pendu);
}
.carte-jeu[data-type="dessin"], .ng-carte.carte-jeu-type[data-type="dessin"] {
  background: color-mix(in srgb, var(--ng-type-dessin) 22%, var(--ng-surface));
  border-left-color: var(--ng-type-dessin);
}
.carte-jeu[data-type="bouchetrou"], .ng-carte.carte-jeu-type[data-type="bouchetrou"] {
  background: color-mix(in srgb, var(--ng-type-bouchetrou) 22%, var(--ng-surface));
  border-left-color: var(--ng-type-bouchetrou);
}

.ng-icone-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ng-type-autre) 20%, transparent);
  color: var(--ng-type-autre);
}
.ng-icone-type[data-type="blindtest"] { background: color-mix(in srgb, var(--ng-type-blindtest) 20%, transparent); color: var(--ng-type-blindtest); }
.ng-icone-type[data-type="quizz"]     { background: color-mix(in srgb, var(--ng-type-quizz) 20%, transparent);     color: var(--ng-type-quizz); }
.ng-icone-type[data-type="pendu"]     { background: color-mix(in srgb, var(--ng-type-pendu) 20%, transparent);     color: var(--ng-type-pendu); }
.ng-icone-type[data-type="dessin"]    { background: color-mix(in srgb, var(--ng-type-dessin) 20%, transparent);    color: var(--ng-type-dessin); }
.ng-icone-type[data-type="bouchetrou"]{ background: color-mix(in srgb, var(--ng-type-bouchetrou) 20%, transparent);color: var(--ng-type-bouchetrou); }

.badge-type-jeu {
  font-size: 0.7rem;
  font-weight: 600;
  color: #1B1032;
  background: var(--ng-type-autre);
}
.badge-type-jeu[data-type="blindtest"] { background: var(--ng-type-blindtest); }
.badge-type-jeu[data-type="quizz"]     { background: var(--ng-type-quizz); }
.badge-type-jeu[data-type="pendu"]     { background: var(--ng-type-pendu); }
.badge-type-jeu[data-type="dessin"]    { background: var(--ng-type-dessin); }
.badge-type-jeu[data-type="bouchetrou"]{ background: var(--ng-type-bouchetrou); }

/* Boutons de filtre par catégorie (accueil) : même logique de fond teinté
   que les cartes de jeu ci-dessus. Spécificité volontairement plus élevée
   que .btn-filtre-categorie.actif (défini dans le <style> inline de
   index.html, chargé après ce fichier) pour que la couleur de catégorie
   l'emporte même sur le bouton actif — juste avec un mélange plus marqué
   pour le distinguer des boutons inactifs. Le bouton "Tous les jeux"
   (data-categorie="tous") n'est pas concerné, il garde le style neutre. */
.btn-filtre-categorie[data-categorie="blindtest"]  { background: color-mix(in srgb, var(--ng-type-blindtest) 20%, var(--ng-surface));  border-color: color-mix(in srgb, var(--ng-type-blindtest) 55%, var(--ng-surface-haute)); }
.btn-filtre-categorie[data-categorie="quizz"]      { background: color-mix(in srgb, var(--ng-type-quizz) 20%, var(--ng-surface));      border-color: color-mix(in srgb, var(--ng-type-quizz) 55%, var(--ng-surface-haute)); }
.btn-filtre-categorie[data-categorie="pendu"]      { background: color-mix(in srgb, var(--ng-type-pendu) 20%, var(--ng-surface));      border-color: color-mix(in srgb, var(--ng-type-pendu) 55%, var(--ng-surface-haute)); }
.btn-filtre-categorie[data-categorie="dessin"]     { background: color-mix(in srgb, var(--ng-type-dessin) 20%, var(--ng-surface));     border-color: color-mix(in srgb, var(--ng-type-dessin) 55%, var(--ng-surface-haute)); }
.btn-filtre-categorie[data-categorie="bouchetrou"] { background: color-mix(in srgb, var(--ng-type-bouchetrou) 20%, var(--ng-surface)); border-color: color-mix(in srgb, var(--ng-type-bouchetrou) 55%, var(--ng-surface-haute)); }
.btn-filtre-categorie[data-categorie="autre"]      { background: color-mix(in srgb, var(--ng-type-autre) 20%, var(--ng-surface));      border-color: color-mix(in srgb, var(--ng-type-autre) 55%, var(--ng-surface-haute)); }

.btn-filtre-categorie[data-categorie="blindtest"].actif  { background: color-mix(in srgb, var(--ng-type-blindtest) 42%, var(--ng-surface));  border-color: var(--ng-type-blindtest); }
.btn-filtre-categorie[data-categorie="quizz"].actif      { background: color-mix(in srgb, var(--ng-type-quizz) 42%, var(--ng-surface));      border-color: var(--ng-type-quizz); }
.btn-filtre-categorie[data-categorie="pendu"].actif      { background: color-mix(in srgb, var(--ng-type-pendu) 42%, var(--ng-surface));      border-color: var(--ng-type-pendu); }
.btn-filtre-categorie[data-categorie="dessin"].actif     { background: color-mix(in srgb, var(--ng-type-dessin) 42%, var(--ng-surface));     border-color: var(--ng-type-dessin); }
.btn-filtre-categorie[data-categorie="bouchetrou"].actif { background: color-mix(in srgb, var(--ng-type-bouchetrou) 42%, var(--ng-surface)); border-color: var(--ng-type-bouchetrou); }
.btn-filtre-categorie[data-categorie="autre"].actif      { background: color-mix(in srgb, var(--ng-type-autre) 42%, var(--ng-surface));      border-color: var(--ng-type-autre); }

/* ---------- Shuriken Dojo (téléphone) ---------- */
.sh-joueur { width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; gap: 0.75rem; user-select: none; -webkit-user-select: none; touch-action: none; position: relative; }
.sh-entete { display: flex; justify-content: space-between; align-items: flex-end; }
.sh-score-bloc, .sh-temps-bloc { display: flex; flex-direction: column; align-items: flex-start; }
.sh-temps-bloc { align-items: flex-end; }
.sh-etiquette { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary); }
.sh-score { font-family: 'IBM Plex Mono', monospace; font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--bs-warning); }
.sh-centre { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; }
.sh-icone-grande { filter: drop-shadow(0 0 18px rgba(255,255,255,0.15)); }
.sh-zone { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; }
.sh-pave { flex: 3 1 0; position: relative; border: 2px dashed rgba(255,255,255,0.25); border-radius: 1rem; display: flex; align-items: center; justify-content: center; touch-action: none; }
.sh-reticule { display: none; position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid var(--bs-warning); border-radius: 50%; pointer-events: none; }
.sh-lancer { flex: 2 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 1rem; background: rgba(255,255,255,0.05); touch-action: none; }
.sh-zone:not(.sh-zone-tactile) .sh-lancer { flex: 1 1 auto; }
.sh-icone svg { animation: sh-tourne 6s linear infinite; }
.sh-icone.sh-lance { animation: sh-envol 0.45s ease-out; }
.sh-consigne { color: #d9cff5; display: flex; align-items: center; gap: 0.35rem; }
.sh-recharge { width: 60%; height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; }
.sh-recharge > div { height: 100%; width: 100%; background: var(--bs-warning); }
.sh-btn-recentrer { align-self: center; }
.sh-flash { position: absolute; left: 0; right: 0; top: 28%; text-align: center; font-size: 3.5rem; font-weight: 700; pointer-events: none; opacity: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.sh-flash-anim { animation: sh-flash 0.9s ease-out; }
@keyframes sh-tourne { to { transform: rotate(360deg); } }
@keyframes sh-envol { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-160px) scale(0.4); opacity: 0; } }
@keyframes sh-flash { 0% { opacity: 1; transform: translateY(10px) scale(0.8); } 100% { opacity: 0; transform: translateY(-50px) scale(1.2); } }

/* ---------- Shuriken Dojo (écran principal) : classement latéral masquable ---------- */
.sh-classement { position: fixed; top: 0; right: 0; bottom: 9.5rem; width: 17rem; z-index: 1030; padding: 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; background: rgba(15, 8, 30, 0.72); backdrop-filter: blur(6px); border-left: 1px solid rgba(255,255,255,0.12); border-bottom-left-radius: 1rem; transition: transform 0.3s ease; overflow: hidden; }
.sh-classement-ferme { transform: translateX(100%); }
.sh-classement-entete { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem; }
.sh-classement-liste { display: flex; flex-direction: column; gap: 0.35rem; overflow-y: auto; }
.sh-classement-ligne { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.05rem; }
.sh-classement-rang { width: 1.2rem; text-align: center; color: var(--bs-secondary); font-family: 'IBM Plex Mono', monospace; }
.sh-classement-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-classement-pts { font-family: 'IBM Plex Mono', monospace; color: var(--bs-warning); }
.sh-classement-bouton { position: fixed; top: 0.75rem; right: 17.3rem; z-index: 1031; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(15,8,30,0.8); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: right 0.3s ease; padding: 0; }
.sh-classement-bouton-ferme { right: 0.75rem; }

/* ---------- Modale générique (mentions légales) ---------- */
.ng-modale-fond { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 4, 18, 0.78); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ng-modale { position: relative; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; background: var(--ng-surface, #261647); border: 1px solid rgba(255,255,255,0.15); border-radius: 1rem; padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: left; }
.ng-modale-fermer { position: absolute; top: 1rem; right: 1rem; }
.ng-modale-legale-corps h1 { font-size: 1.4rem; margin: 0 2rem 1rem 0; }
.ng-modale-legale-corps h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.ng-modale-legale-corps p, .ng-modale-legale-corps li { color: var(--bs-secondary); }
body.ng-modale-ouverte { overflow: hidden; }

/* Bouton son (Shuriken Dojo, écran principal) */
.sh-son-bouton { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1031; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(15,8,30,0.8); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }

/* ---------- Classements : gagnant mis en valeur, détail par jeu ---------- */
.ng-ligne-classement.ng-gagnant { background: linear-gradient(90deg, rgba(255,200,87,0.22), var(--ng-surface)); border: 1px solid rgba(255,200,87,0.55); box-shadow: 0 0 18px rgba(255,200,87,0.25); }
.ng-couronne { color: var(--bs-warning); font-size: 1.25rem; vertical-align: -0.25em; font-variation-settings: 'FILL' 1, 'wght' 500; }
.ng-bandeau-gagnant { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 0.75rem 1.25rem; border-radius: 1rem; background: rgba(255,200,87,0.12); border: 1px solid rgba(255,200,87,0.45); text-align: left; animation: ng-pulse-or 2.2s ease-in-out infinite; }
.ng-bandeau-gagnant > .material-symbols-outlined { font-size: 2.6rem; color: var(--bs-warning); font-variation-settings: 'FILL' 1, 'wght' 500; }
.ng-bandeau-gagnant-final { padding: 1rem 1.75rem; background: rgba(255,200,87,0.2); }
.ng-bandeau-gagnant-final > .material-symbols-outlined { font-size: 3.4rem; }
@keyframes ng-pulse-or { 0%, 100% { box-shadow: 0 0 0 rgba(255,200,87,0); } 50% { box-shadow: 0 0 28px rgba(255,200,87,0.45); } }
.ep-bandeau-gagnant { padding: 1.1rem 2.2rem; gap: 1.3rem; }
.ep-bandeau-gagnant > .material-symbols-outlined { font-size: 4.5rem; }
.ep-bandeau-gagnant .ep-nom-gagnant { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.1; }
.ep-puce-detail { font-size: 0.85rem; color: var(--bs-secondary); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 0.1rem 0.7rem; }
.ep-puce-detail strong { color: var(--bs-warning); font-family: 'IBM Plex Mono', monospace; }
.ep-detail-ligne { margin-top: -0.2rem; padding-left: 3rem; }
.ep-classement-attente { position: fixed; right: 1.5rem; top: 5rem; width: clamp(14rem, 21vw, 22rem); max-height: calc(100vh - 17rem); overflow-y: auto; z-index: 1030; padding: 1.1rem 1rem; background: rgba(15, 8, 30, 0.7); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem; text-align: left; }
.ep-classement-attente.ep-masque { display: none; }
.ep-classement-bouton { position: fixed; right: 1.5rem; top: 1rem; z-index: 1031; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: var(--bs-warning); color: #1b1b1b; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ep-classement-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* Shuriken Dojo (téléphone) : le shuriken à lancer occupe toute la largeur */
.sh-joueur { max-width: none; width: 100%; }
.sh-entete { padding: 0 1.25rem; }
.sh-lancer { width: 100%; }
.sh-icone { width: 100%; display: flex; justify-content: center; }
.sh-icone svg { width: min(100vw, 56vh); height: auto; }
.sh-consigne, .sh-recharge { padding: 0 1rem; }
.sh-btn-recentrer { margin: 0 1rem; }

/* Modale « Nouvelle version disponible » */
.ng-modale-maj { max-width: 340px; text-align: center; padding: 1.75rem 1.5rem 1rem; }
.ng-modale-maj-icone { font-size: 3rem; color: var(--bs-warning); }

/* --- Partie de démonstration --- */
.ng-badge-demo {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1085;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .75rem; border-radius: 999px;
  background: var(--bs-warning); color: #1b1b1b; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ng-badge-demo .material-symbols-outlined { font-size: 1.1rem; }

/* Écran principal, révélation d'un QCM : bonne réponse en vert, autres estompées */
.ep-option-juste { border: 2px solid var(--bs-success) !important; background: rgba(25, 135, 84, 0.35) !important; color: #fff; }
.ep-option-fausse { opacity: 0.45; }

/* Bouton « Autre jeu » (téléphone, pendant une partie) */
.ng-btn-autre-jeu {
  position: fixed; top: 8px; left: 8px; z-index: 1080;
  display: inline-flex; align-items: center; gap: .25rem;
  min-width: 2.25rem; height: 2.25rem; padding: 0 .55rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(15,8,30,.65); color: #fff;
  font-size: .8rem; opacity: .75;
}
.ng-btn-autre-jeu .material-symbols-outlined { font-size: 1.2rem; }
.ng-btn-autre-jeu:disabled { opacity: .9; color: var(--bs-warning); }

/* --- Blocs de vote : chaque vote (titre + options) dans sa propre boîte --- */
.ng-bloc-vote {
  width: 100%;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bs-warning) 45%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--bs-warning) 6%, var(--ng-surface));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.ng-bloc-vote + .ng-bloc-vote { margin-top: 1rem; }
.ng-bloc-vote-entete {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  width: 100%;
  padding-bottom: 0.6rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ng-bloc-vote-titre { font-size: 1rem; font-weight: 600; margin: 0; }