:root {
  --fond: #3fb6ff;
  --carte: rgba(255, 255, 255, 0.92);
  --texte: #183247;
  --doux: #5f7a8c;
  --accent: #ff7a3d;
  --accent-fonce: #e35d1f;
  --vert: #2ecc71;
  --ombre: 0 10px 30px rgba(10, 60, 90, 0.25);
  --rayon: 22px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--texte);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fond); touch-action: none; -webkit-user-select: none; user-select: none; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud-minijeu, #calque { position: fixed; inset: 0; pointer-events: none; }
.carte, button, input, select, details { pointer-events: auto; }
.cache { display: none !important; }

.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; pointer-events: none; }
#ecran-accueil, #ecran-salle { justify-content: flex-end; align-items: flex-start; flex-direction: row; }
#ecran-accueil { flex-direction: column; justify-content: center; }
.titre { margin: 0; font-size: clamp(36px, 7vw, 64px); font-weight: 900; color: #fff; letter-spacing: -1px; text-shadow: 0 4px 0 #1f86c4, 0 8px 24px rgba(0, 0, 0, 0.25); pointer-events: none; }
.titre span { color: #ffd23f; }

.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; width: min(380px, 100%); backdrop-filter: blur(6px); }
#carte-accueil, #carte-salle, #carte-perso { max-height: calc(100vh - 32px); overflow-y: auto; }
#ecran-accueil .carte { margin-left: 0; }
@media (min-width: 800px) {
  #ecran-accueil { align-items: flex-start; padding-left: 6vw; }
  #ecran-salle { justify-content: flex-start; padding-left: 4vw; align-items: center; }
}
@media (max-width: 799px) {
  #ecran-accueil, #ecran-salle { justify-content: flex-end; align-items: center; flex-direction: column; }
  #ecran-accueil .titre { margin-top: auto; }
  .carte { max-height: 60vh; }
}

button { font: inherit; border: 0; border-radius: 14px; padding: 10px 14px; background: #e7f2f8; color: var(--texte); cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(0.96); }
button:active { transform: translateY(1px); }
button.gros { width: 100%; padding: 14px; font-size: 18px; background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-fonce); }
button.discret { background: transparent; color: var(--doux); text-decoration: underline; padding: 6px; }
button:disabled { opacity: 0.5; cursor: default; }
input, select { font: inherit; border: 2px solid #d6e6ef; border-radius: 12px; padding: 9px 12px; background: #fff; color: var(--texte); min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--fond); }
kbd { font: 12px/1 inherit; background: rgba(255, 255, 255, 0.3); border-radius: 6px; padding: 3px 6px; margin-left: 6px; vertical-align: middle; }

.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.code-salle { display: flex; gap: 8px; }
.code-salle input { flex: 1; text-transform: uppercase; letter-spacing: 3px; }
.message { color: var(--doux); margin: 10px 0 0; min-height: 1em; font-size: 14px; }
.message.erreur { color: #c0392b; }
.petit { font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: 1px; }
.grand { font-size: 30px; font-weight: 900; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-weight: 600; }

/* Éditeur de personnage */
.editeur { display: grid; gap: 10px; }
.editeur .rangee { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.choix { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #eef6fa; border-radius: 12px; padding: 2px; }
.choix button { background: transparent; padding: 6px 12px; }
.choix span { flex: 1; text-align: center; font-weight: 600; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles button { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 3px solid transparent; }
.pastilles button.choisi { border-color: var(--texte); }
input[type="range"] { width: 100%; accent-color: var(--accent); border: 0; padding: 0; }

.rangee-titre { font-size: 14px; font-weight: 600; margin-top: 4px; }
.dessin { display: flex; gap: 10px; align-items: flex-start; }
.dessin canvas { border-radius: 50%; border: 3px solid #d6e6ef; touch-action: none; cursor: crosshair; flex: none; }
.outils { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tailles { display: flex; gap: 6px; }
.tailles button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 2px solid transparent; }
.tailles button.choisi { border-color: var(--texte); }
.tailles i { display: block; border-radius: 50%; background: var(--texte); }

/* Salle */
.entete-salle { display: flex; justify-content: space-between; align-items: center; }
.code { font-size: 34px; font-weight: 900; letter-spacing: 4px; }
#liste-joueurs { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
#liste-joueurs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #f3f8fb; font-weight: 600; }
#liste-joueurs .pastille { width: 14px; height: 14px; border-radius: 50%; flex: none; }
#liste-joueurs .etat { margin-left: auto; font-size: 12px; color: var(--doux); font-weight: 500; }
#liste-joueurs li.moi { outline: 2px solid var(--fond); }
#liste-joueurs li.robot { opacity: 0.75; }
#liste-minijeux { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
#liste-minijeux button { width: 100%; text-align: left; display: flex; justify-content: space-between; }
#liste-minijeux .etiquette-etat { font-size: 12px; color: var(--doux); font-weight: 500; }
details summary { cursor: pointer; color: var(--doux); margin-top: 12px; font-weight: 600; }

/* Partie */
#ecran-partie { justify-content: center; }
#barre-partie { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
#barre-partie > * { pointer-events: auto; }
#manche, #pratique { background: var(--carte); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; box-shadow: var(--ombre); }
#pratique { background: #ffd23f; position: absolute; left: 50%; top: 52px; transform: translateX(-50%); }
#minuteur { position: absolute; left: 50%; transform: translateX(-50%); font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
#minuteur.urgent { color: #ffd23f; }
#bouton-arreter { background: var(--carte); text-decoration: none; }
#annonce .carte, #resultats .carte { text-align: center; width: min(420px, 100%); }
#resultats { position: absolute; right: 4vw; top: 50%; transform: translateY(-50%); width: min(420px, calc(100% - 32px)); }
@media (max-width: 799px) { #resultats { right: 16px; top: auto; bottom: 16px; transform: none; } #liste-resultats li { padding: 6px 10px; } }
#annonce-nom { animation: rebond 0.25s ease-out; }
#regles { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: center; }
#regles .carte { width: min(520px, 100%); text-align: center; }
.regle { font-size: 20px; font-weight: 600; margin: 10px 0; }
.commandes { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.commandes span { background: #eef6fa; border-radius: 10px; padding: 5px 10px; }
.commandes b { background: var(--texte); color: #fff; border-radius: 6px; padding: 1px 6px; margin-right: 4px; }
.prets { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.prets { flex-wrap: wrap; }
.prets span { border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 14px; border: 2px solid var(--c); color: var(--texte); background: #fff; }
.prets span.pret { background: var(--c); color: #fff; }
#compte { font-size: clamp(90px, 22vw, 200px); font-weight: 900; color: #fff; text-shadow: 0 8px 0 var(--accent-fonce), 0 12px 30px rgba(0, 0, 0, 0.3); animation: rebond 0.3s ease-out; pointer-events: none; }
#liste-resultats { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; text-align: left; }
#liste-resultats li { display: grid; grid-template-columns: 34px 14px 1fr auto auto; gap: 10px; align-items: center; background: #f3f8fb; border-radius: 14px; padding: 8px 12px; font-weight: 600; }
#liste-resultats .rang { font-size: 20px; font-weight: 900; }
#liste-resultats .gain { color: #d39b00; font-weight: 900; }
#liste-resultats .total { color: var(--doux); font-size: 13px; }
#liste-resultats .pastille { width: 14px; height: 14px; border-radius: 50%; }
@keyframes rebond { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Téléphone : règles en haut, le bas de l'écran est aux boutons tactiles. */
@media (max-width: 799px), (pointer: coarse) {
  #regles { top: 96px; bottom: auto; }
  #regles .carte { padding: 12px; }
  #regles .grand { font-size: 22px; }
  .regle { font-size: 16px; margin: 6px 0; }
  #regles button.gros { padding: 10px; font-size: 16px; }
}

#connexion { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #c0392b; color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; }

/* HUD des mini-jeux */
.hud-etiquette { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); pointer-events: none; text-align: center; }
.hud-bulle { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); animation: monte 0.8s ease-out forwards; pointer-events: none; }
@keyframes monte { to { transform: translate(-50%, -150%); opacity: 0; } }

/* Commandes tactiles */
.tactile { position: fixed; inset: 0; display: none; pointer-events: none; z-index: 5; }
.tactile.visible { display: block; }
.tactile-joystick { position: absolute; left: 0; bottom: 0; width: 50%; height: 60%; pointer-events: auto; touch-action: none; }
.tactile-base { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: 3px solid rgba(255, 255, 255, 0.6); display: none; }
.tactile-base.visible { display: block; }
.tactile-manche { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.tactile-boutons { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 14px; pointer-events: auto; }
.tactile-boutons button { width: 86px; height: 86px; border-radius: 50%; font-size: 30px; font-weight: 900; color: #fff; background: rgba(255, 122, 61, 0.9); box-shadow: 0 5px 0 var(--accent-fonce); touch-action: none; }
.tactile-boutons .tactile-b { width: 64px; height: 64px; font-size: 22px; background: rgba(52, 152, 219, 0.9); box-shadow: 0 5px 0 #1f6fa3; margin-bottom: 40px; }
.tactile-boutons button.appuye { transform: translateY(4px); box-shadow: none; }

/* ==========================================================================
   Direction artistique : Frutiger Aero (docs/direction-artistique.md).
   Panneaux de verre teinté, boutons brillants (vert : action principale, bleu : le reste),
   texte blanc. Composants repris de blindtoss (.glass, .btn-aero, .btn-aero-green, .input-aero).
   ========================================================================== */
:root {
  --fond: #1a85ee; --texte: #fff; --doux: rgba(255, 255, 255, 0.78);
  --verre: linear-gradient(135deg, rgba(0, 40, 90, 0.52), rgba(0, 40, 90, 0.34) 50%, rgba(0, 30, 70, 0.26));
  --reflet: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
  --creux: rgba(0, 0, 0, 0.22);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
.titre { font-weight: 600; letter-spacing: 0; text-shadow: 0 0 14px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 40, 90, 0.5); }
.titre span { color: #ffe14a; }
.carte { background: var(--verre); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
button { color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background: var(--reflet), linear-gradient(180deg, #4a90d9, #2563eb); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: box-shadow 0.2s, filter 0.2s; }
button:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(74, 144, 217, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
button.gros { background: var(--reflet), linear-gradient(180deg, #7fba00, #5a8400); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
button.gros:hover { box-shadow: 0 4px 12px rgba(127, 186, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
button.discret, .choix button { background: none; border: 0; box-shadow: none; color: rgba(255, 255, 255, 0.85); }
button.discret:hover, .choix button:hover { box-shadow: none; color: #fff; }
input, select { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1); }
input::placeholder { color: rgba(255, 255, 255, 0.55); }
input:focus, select:focus { border-color: rgba(126, 200, 227, 0.9); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(74, 144, 217, 0.6); }
select option { color: #123; }
input[type="range"] { background: none; box-shadow: none; border: 0; accent-color: #7fba00; }
.choix, #liste-joueurs li, #liste-resultats li, .commandes span, #liste-minijeux button { background: var(--creux); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none; }
.choix { border-radius: 10px; }
.pastilles button { border: 3px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 4px rgba(0, 0, 0, 0.25); }
.pastilles button.choisi { border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.5); }
.tailles button { background: rgba(255, 255, 255, 0.9); box-shadow: none; }
.tailles button.choisi { border-color: #7fba00; box-shadow: 0 0 8px rgba(127, 186, 0, 0.8); }
.tailles i { background: #123; }
.dessin canvas { border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 12px rgba(255, 255, 255, 0.35); }
#liste-joueurs li.moi { outline: 2px solid rgba(255, 255, 255, 0.85); }
#liste-joueurs .pastille, #liste-resultats .pastille { box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.4); }
.message.erreur { color: #ffc2b8; }
#manche, #bouton-arreter { background: var(--verre); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
#pratique { background: var(--reflet), linear-gradient(180deg, #ffd84a, #f0a800); color: #4a3200; border: 1px solid rgba(255, 255, 255, 0.5); }
#minuteur, #compte { text-shadow: 0 0 18px rgba(255, 255, 255, 0.7), 0 3px 6px rgba(0, 40, 90, 0.6); }
#minuteur.urgent { color: #ffe14a; }
.commandes kbd { display: inline-block; min-width: 22px; margin: 0 2px 0 0; padding: 3px 6px; border-radius: 6px; font: 700 13px/1 inherit; text-align: center; color: #0b3a6e; text-shadow: none;
  background: linear-gradient(#ffffff, #dfeaf2); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 2px 0 rgba(0, 30, 70, 0.35); }
.commandes span { display: inline-flex; align-items: center; gap: 4px; }
.prets span { background: var(--creux); color: #fff; }
.prets span.pret { box-shadow: 0 0 10px var(--c); }
#liste-resultats .gain { color: #ffe14a; }
#liste-resultats .total { color: rgba(255, 255, 255, 0.75); }
kbd { background: rgba(255, 255, 255, 0.25); }
.hud-etiquette { text-shadow: 0 0 8px rgba(0, 40, 90, 0.8), 0 2px 3px rgba(0, 0, 0, 0.5); }

/* Plateau : scores, dé, messages */
#plateau { position: absolute; inset: 0; pointer-events: none; }
#scores { position: absolute; left: 12px; top: 60px; margin: 0; padding: 8px; list-style: none; display: grid; gap: 6px; width: 250px;
  background: var(--verre); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
#scores li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--creux); font-weight: 600; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
#scores li.actif { background: var(--reflet), linear-gradient(180deg, #4a90d9, #2563eb); box-shadow: 0 0 14px rgba(74, 144, 217, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
#scores .pastille { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6); }
#scores .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scores .diamants { color: #9fefff; } #scores .golds { color: #ffe14a; min-width: 44px; text-align: right; }
#invite { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(340px, calc(100% - 32px)); text-align: center; }
#attente-de { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--verre); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.28); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
#de { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 26px; display: grid; place-items: center; font-size: 60px; font-weight: 800; color: #0b3a6e;
  background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 48%, #cfe6f7 52%, #f2faff 100%); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 26px rgba(0, 40, 90, 0.4), inset 0 2px 0 #fff; opacity: 0.9; }
#de.pose { opacity: 1; animation: rebond 0.3s ease-out; box-shadow: 0 0 28px rgba(255, 255, 255, 0.9), 0 10px 26px rgba(0, 40, 90, 0.4), inset 0 2px 0 #fff; }
#toast { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); padding: 10px 22px; border-radius: 999px; font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); animation: rebond 0.25s ease-out; }
#toast.gain { background: var(--reflet), linear-gradient(180deg, #7fba00, #5a8400); }
#toast.perte { background: var(--reflet), linear-gradient(180deg, #e74c3c, #a93226); }
#toast.diamant { background: var(--reflet), linear-gradient(180deg, #35c6f0, #0a86c8); }
#final { position: absolute; right: 4vw; top: 50%; transform: translateY(-50%); width: min(420px, calc(100% - 32px)); }
#final .carte { width: 100%; text-align: center; }
#liste-final { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; text-align: left; }
#liste-final li { display: grid; grid-template-columns: 34px 14px 1fr auto auto; gap: 10px; align-items: center; background: var(--creux); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 8px 12px; font-weight: 600; }
#liste-final .rang { font-size: 20px; font-weight: 900; } #liste-final .gain { color: #9fefff; font-weight: 800; } #liste-final .total { color: #ffe14a; font-size: 13px; }
#liste-final .pastille { width: 14px; height: 14px; border-radius: 50%; }
#liste-final li:first-child { box-shadow: 0 0 16px rgba(255, 225, 74, 0.7); border-color: rgba(255, 225, 74, 0.8); }
@media (max-width: 799px) { #scores { width: 200px; font-size: 12px; } #final { right: 16px; top: auto; bottom: 16px; transform: none; } }

.boutons-barre { display: flex; gap: 8px; }
.credit-musique { position: absolute; right: 12px; bottom: 10px; left: auto; top: auto; font-size: 11px; font-weight: 500; opacity: 0.75; }

/* Jalon 3 : objets, embranchements, boutique, duel, annonces de tour, bonus de fin */
#scores li { grid-template-columns: 14px 1fr auto auto; }
#scores .objets { grid-column: 2 / -1; display: flex; gap: 4px; min-height: 0; }
#scores .objets:empty { display: none; }
#scores .objets i { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.35); }
#etat-tour { position: absolute; left: 136px; top: 12px; display: flex; gap: 8px; }
#etat-tour span { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
#etat-tour .relance { background: var(--reflet), linear-gradient(180deg, #ff9a3d, #e0532a); }
#etat-tour .maree { background: var(--reflet), linear-gradient(180deg, #35c6f0, #0a86c8); }
#decision { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 16px; text-align: center; pointer-events: auto; display: grid; gap: 10px; animation: rebond 0.25s ease-out; }
#decision.annonce-tour { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
#decision.annonce-tour p { margin: 4px 0 8px; font-size: 18px; }
#decision .grand { font-size: 26px; }
#decision .rangee-objets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#decision .rangee-objets button { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 700; }
#decision .rangee-objets button.choisi { outline: 3px solid #fff; box-shadow: 0 0 16px rgba(255, 255, 255, 0.8); }
#decision .rangee-objets .gros-mise { background: var(--reflet), linear-gradient(180deg, #7fba00, #5a8400); }
#decision .pastille { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
#decision .offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#decision .offres button { display: grid; gap: 4px; padding: 12px; text-align: left; }
#decision .offres button span { font-size: 13px; font-weight: 500; opacity: 0.9; }
#decision .offres button em { font-style: normal; color: #ffe14a; font-weight: 800; }
#decision .offres button:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
#invite { bottom: 24px; }
#bouton-de:not(.cache) ~ #attente-de { display: none; }
#de { width: auto; min-width: 110px; padding: 0 14px; display: flex; gap: 14px; align-items: center; justify-content: center; }
#de b { font-size: 34px; color: #0b3a6e; }
#de.double span { font-size: 52px; }
#toast { max-width: min(620px, calc(100% - 32px)); text-align: center; }
#toast.chance { background: var(--reflet), linear-gradient(180deg, #a463ff, #6a2fd1); font-size: 20px; border-radius: 18px; }
#toast.objet { background: var(--reflet), linear-gradient(180deg, #ffc93a, #d39b00); font-size: 20px; }
#toast.duel { background: var(--reflet), linear-gradient(180deg, #ff8a3d, #d9531e); }
#annonce-duel { margin-top: 8px; font-size: 16px; }
#spectateur, #bonus { position: absolute; left: 4vw; top: 50%; transform: translateY(-50%); width: min(420px, calc(100% - 32px)); }
#spectateur .carte, #bonus .carte { width: 100%; text-align: center; }
#liste-bonus { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; text-align: left; }
#liste-bonus li { display: grid; gap: 2px; background: var(--creux); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 10px 14px; animation: rebond 0.3s ease-out; }
#liste-bonus span { font-size: 13px; opacity: 0.85; }
#liste-bonus em { font-style: normal; color: #9fefff; font-weight: 800; }
#liste-resultats .gain.negatif { color: #ff8a7a; }
@media (max-width: 799px) {
  #etat-tour { left: auto; right: 12px; top: 56px; flex-direction: column; align-items: flex-end; }
  #spectateur, #bonus { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; transform: none; }
}

/* Son : bouton haut-parleur en haut à droite, fenêtre modale à deux curseurs */
#bouton-son { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 20; width: 42px; height: 42px; padding: 8px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verre); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
#bouton-son svg { width: 24px; height: 24px; }
#bouton-son:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#barre-partie { right: 64px; }
#modal-son { border: 0; padding: 0; background: transparent; width: min(380px, calc(100% - 32px)); color: #fff; overflow: visible; }
#modal-son::backdrop { background: rgba(0, 30, 60, 0.45); backdrop-filter: blur(3px); }
#modal-son[open] .carte { animation: rebond 0.2s ease-out; }
#modal-son .carte { display: grid; gap: 16px; padding: 18px 20px; }
#modal-son .entete-son { display: flex; justify-content: space-between; align-items: center; }
#modal-son .fermer { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
#modal-son .reglage { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 10px; font-weight: 700; }
#modal-son output { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; opacity: 0.85; }
#modal-son .petit { margin: 0; }
#modal-son .credit-son { margin: 0; font-size: 13px; line-height: 1.4; opacity: 0.85; }
.credit-accueil { margin: 8px 0 0; font-size: 11px; opacity: 0.6; text-align: center; }