/* La villa : une scene 3D plein ecran et une interface par-dessus. Aucune dependance. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/polices/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/polices/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bleu: #2D9CF6; --bleu-fonce: #0978D3; --encre: #0D2240; --nuit: #071427; --ciel: #8FCBFF;
  --verre: rgba(7, 20, 39, 0.72); --verre-fort: rgba(7, 20, 39, 0.9); --trait: rgba(143, 203, 255, 0.28);
  --texte: #EAF3FC; --texte-2: #B7CBE2; --ok: #34D399; --alerte: #FBBF24; --erreur: #F87171;
  --affichage: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; --mono: "JetBrains Mono", Consolas, monospace;
  --marge: max(14px, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #CFE3F2; color: var(--texte); font: 500 15px/1.4 var(--affichage); -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; }
#scene { position: fixed; inset: 0; touch-action: none; }
#scene canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
[hidden] { display: none !important; }

/* ---------- la porte (chargement, connexion) ---------- */
.porte { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: radial-gradient(120% 90% at 50% 40%, #13325F 0%, #0B1D38 50%, #050E1C 100%); transition: opacity 0.6s ease; }
.porte.partie { opacity: 0; pointer-events: none; }
.porte-carte { width: min(460px, 100%); text-align: center; }
.porte-logo { font: 800 44px var(--mono); margin: 0 0 8px; color: #fff; }
.porte-logo span { color: var(--bleu); }
.porte-logo small { font: 600 16px var(--mono); color: var(--ciel); letter-spacing: 0.2em; text-transform: uppercase; vertical-align: middle; }
.porte h1 { font-size: clamp(26px, 6vw, 36px); margin: 6px 0 8px; letter-spacing: -0.02em; }
.porte p { color: var(--texte-2); margin: 0 0 18px; }
.jauge { height: 6px; border-radius: 99px; background: rgba(143, 203, 255, 0.18); overflow: hidden; }
.jauge span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bleu), var(--ciel)); transition: width 0.3s ease; }
.porte-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- boutons ---------- */
.b { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait); background: var(--verre); color: var(--texte); display: inline-flex; align-items: center; gap: 8px; justify-content: center; text-decoration: none; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.b:hover { background: rgba(45, 156, 246, 0.25); }
.b-plein { background: var(--bleu-fonce); border-color: transparent; color: #fff; }
.b-plein:hover { background: var(--bleu); }
.b-rond { width: 44px; padding: 0; }
.b-danger { border-color: rgba(248, 113, 113, 0.5); }
.b:disabled { opacity: 0.5; cursor: default; }

/* ---------- interface de jeu ---------- */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.hud > * { pointer-events: auto; }
.hud-haut { position: absolute; top: max(12px, env(safe-area-inset-top)); left: var(--marge); right: var(--marge); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.hud-haut > * { pointer-events: auto; }
.marque { display: flex; flex-direction: column; gap: 4px; }
.marque a { font: 800 18px var(--mono); white-space: nowrap; color: #fff; text-decoration: none; background: var(--verre); padding: 8px 14px; border-radius: 12px; border: 1px solid var(--trait); }
.marque a span { color: var(--bleu); }
.piece { font-weight: 700; font-size: 14px; background: var(--verre); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--trait); align-self: flex-start; }
.piece i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--c, var(--bleu)); }
.outils { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.etat-ligne { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--verre); border: 1px solid var(--trait); }
.etat-ligne.ko { color: var(--alerte); }

.carte { position: absolute; top: 118px; right: var(--marge); width: 210px; border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); background: var(--verre-fort); }
.carte canvas { display: block; width: 100%; height: auto; }

.bas-gauche { position: absolute; left: var(--marge); bottom: max(14px, env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 8px; }
.fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: hidden; pointer-events: none; }
.fil li { background: var(--verre); border-radius: 12px; padding: 6px 10px; font-size: 14px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; animation: apparait 0.25s ease; }
.fil li b { color: var(--c, var(--ciel)); margin-right: 6px; }
.fil li.systeme { color: var(--texte-2); font-style: italic; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.parler { display: flex; gap: 8px; }
.parler input { flex: 1; min-width: 0; min-height: 44px; border-radius: 999px; border: 1px solid var(--trait); background: var(--verre-fort); padding: 0 16px; font-size: 16px; }
.gestes { display: flex; gap: 6px; }
.gestes .b { font-size: 20px; }

.action { position: absolute; left: 50%; bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)); transform: translateX(-50%); font-size: 16px; padding: 0 22px; min-height: 50px; box-shadow: 0 10px 30px rgba(7, 20, 39, 0.35); }
.action kbd { font: 700 13px var(--mono); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 6px; padding: 1px 6px; }

/* le joystick : toute la zone bas-gauche le declenche ; la base se pose sous le pouce, puis revient, pale */
.joystick { position: absolute; left: 0; bottom: 0; width: min(50vw, 340px); height: 46vh; height: min(46svh, 400px); display: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.joy-base { position: absolute; left: calc(var(--marge) + 62px); top: calc(100% - 80px - env(safe-area-inset-bottom, 0px)); width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; background: rgba(7, 20, 39, 0.35); border: 1px solid var(--trait); display: grid; place-items: center; opacity: 0.5; transition: opacity 0.15s ease; pointer-events: none; }
.joy-base.actif { opacity: 1; background: rgba(7, 20, 39, 0.45); }
.joy-base span { width: 52px; height: 52px; border-radius: 50%; background: rgba(234, 243, 252, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
/* interface de jeu : pas de selection de texte ni de loupe quand on garde le doigt appuye ; pas de zoom au double toucher */
.hud { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hud input, .hud textarea, .panneau .enonce, .chat-ouvert .fil li { -webkit-user-select: text; user-select: text; }
.hud button, .hud .b { touch-action: manipulation; }

.toast { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 18px; font-weight: 700; text-align: center; max-width: calc(100vw - 28px); animation: apparait 0.3s ease; }
.toast { pointer-events: none; z-index: 25; } /* un message ne doit jamais arreter un geste */
.toast small { display: block; font-weight: 500; color: var(--texte-2); }

/* ---------- panneaux (defis, tables, avatar, aide) ---------- */
.panneau { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 24px)); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: rgba(7, 20, 39, 0.94); border: 1px solid var(--trait); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); z-index: 20; }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--trait); }
.panneau-tete h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.panneau-corps { padding: 14px 18px 18px; overflow: auto; }
.panneau-corps p { margin: 0 0 12px; color: var(--texte-2); }
.panneau-corps h3 { margin: 14px 0 8px; font-size: 16px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.defi { border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; background: rgba(143, 203, 255, 0.05); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.defi:hover { border-color: var(--c, var(--bleu)); }
.defi b { font-size: 16px; }
.defi small { color: var(--texte-2); }
.defi .pts { font: 700 14px var(--mono); color: var(--c, var(--bleu)); }
.defi.resolu { border-color: rgba(52, 211, 153, 0.55); }
.defi.resolu .pts::after { content: " ✓"; color: var(--ok); }
.enonce { white-space: pre-wrap; font-family: var(--mono); font-size: 14px; background: rgba(143, 203, 255, 0.07); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; color: var(--texte); overflow-wrap: anywhere; }
.reponse { display: flex; gap: 8px; margin-top: 12px; }
.reponse input { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: rgba(255, 255, 255, 0.06); padding: 0 14px; font-size: 16px; }
.retour { margin-top: 10px; font-weight: 700; min-height: 1.4em; }
.retour.ok { color: var(--ok); }
.retour.ko { color: var(--erreur); }
.classement { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.classement li { counter-increment: rang; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(143, 203, 255, 0.12); }
.classement li::before { content: counter(rang) "."; font: 700 13px var(--mono); color: var(--ciel); width: 26px; }
.classement li span:first-of-type { flex: 1; }
.rangee { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.editeur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.editeur fieldset { border: 0; padding: 0; margin: 0; }
.editeur legend { font-weight: 700; margin-bottom: 6px; }
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.pastilles button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: var(--p); }
.pastilles button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--bleu); }
.choix-mots { display: flex; gap: 6px; flex-wrap: wrap; }
.choix-mots button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--trait); background: transparent; font-weight: 600; }
.choix-mots button[aria-pressed="true"] { background: var(--bleu-fonce); border-color: transparent; }

/* HUD de partie (echecs, dames) et du Rubik's cube */
.partie { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(560px, calc(100vw - 24px)); }
.partie-joueurs { display: flex; gap: 8px; width: 100%; }
.partie-joueurs div { flex: 1; background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 14px; padding: 8px 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.partie-joueurs div.trait { border-color: var(--bleu); box-shadow: 0 0 0 2px rgba(45, 156, 246, 0.35); }
.partie-joueurs i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); flex: none; }
.partie-joueurs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partie-info { background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 12px; padding: 6px 14px; font-weight: 700; text-align: center; }
.partie-bas { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); }
/* Pendant une partie : le plateau d'abord. La discussion reste, en petit ; les gestes s'effacent. */
.en-partie .partie { top: max(66px, calc(env(safe-area-inset-top) + 58px)); }
/* Rubik : le chrono et la consigne sont par-dessus le cube ; ils laissent passer les gestes. */
.mode-rubik .partie { pointer-events: none; }
.partie-bas { pointer-events: none; }
.partie-bas > * { pointer-events: auto; }
.en-partie .gestes, .en-partie .fil, .en-partie .carte, .en-partie .joystick, .en-partie .action, .en-partie .proche { display: none !important; }
.en-partie .bas-gauche { width: min(300px, calc(100vw - 28px)); }
.en-partie .partie-bas { left: auto; right: var(--marge); transform: none; width: auto; justify-content: flex-end; }
@media (max-width: 720px) { .en-partie .bas-gauche { display: none; } .en-partie .partie-bas { left: 50%; right: auto; transform: translateX(-50%); } }
.chrono { font: 800 40px var(--mono); letter-spacing: 0.02em; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }

/* Telephone : un seul rang en haut (le reste dans ☰), le joystick sous le pouce gauche ; sauter, gestes (😊) et
   discussion (💬) sous le pouce droit. Repliee, la discussion ne montre que ses deux derniers messages, un instant. */
.tel-seul, .tel-boutons { display: none !important; }
@media (hover: none), (max-width: 720px) {
  :root { --sous-haut: max(64px, calc(env(safe-area-inset-top) + 58px)); }
  .joystick { display: block; }
  .pc-seul { display: none !important; }
  .tel-seul { display: inline-flex !important; }
  .hud-haut { align-items: center; }
  .marque { flex: 1 1 auto; flex-direction: row; align-items: center; min-width: 0; gap: 6px; }
  .marque a { padding: 7px 10px; }
  .marque a .mot { display: none; }
  .piece { align-self: center; min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .outils { flex: none; flex-wrap: nowrap; }
  .etat-ligne { font-size: 12px; padding: 5px 9px; white-space: nowrap; }
  .hud-haut:has(.etat-ligne:not([hidden])) .piece { display: none; }   /* « Reconnexion… » prend sa place */
  .carte { width: 150px; top: var(--sous-haut); }
  .aide-clavier { display: none; }
  .tel-boutons { display: flex !important; flex-direction: column; gap: 10px; position: absolute; right: calc(var(--marge) + 9px); bottom: max(92px, calc(env(safe-area-inset-bottom) + 84px)); }
  .tel-boutons .b { position: relative; font-size: 21px; }
  .tel-boutons .pastille { position: absolute; top: -5px; right: -5px; }
  .action { bottom: max(152px, calc(env(safe-area-inset-bottom) + 144px)); max-width: calc(100vw - 150px); }
  /* rangee : rien a l'ecran (le compteur est sur 💬) ; ouverte : un tiroir en bas, qu'un toucher sur la scene referme */
  .chat-ferme .bas-gauche { display: none; }
  .bas-gauche { left: 0; right: 0; bottom: 0; width: auto; z-index: 23; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); background: var(--verre-fort); border-top: 1px solid var(--trait); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); }
  .bas-gauche .gestes { display: none; }
  .bas-gauche .fil { max-height: 34vh; }
  .bas-gauche .fil li { background: var(--verre); }
  .chat-ouvert .joystick, .chat-ouvert .tel-boutons, .chat-ouvert .saut, .chat-ouvert .action, .chat-ouvert .proche { display: none !important; }
  /* un match (boutons de frappe a droite) ou une partie de table : ni gestes ni discussion par-dessus */
  .hud:has(.foot-actions) .tel-boutons, .hud:has(.foot-actions) .saut, .hud:has(.foot-actions) .bas-gauche, .en-partie .tel-boutons { display: none !important; }
  /* un panneau ouvert (avatar, defis, jeux…) : les commandes du bas s'effacent, rien ne passe devant */
  .avec-panneau .joystick, .avec-panneau .tel-boutons, .avec-panneau .saut, .avec-panneau .bas-gauche, .avec-panneau .action, .avec-panneau .proche { display: none !important; }
}
/* le joueur proche : une carte qu'on range ; repliee, une simple pastille « Nom · Interagir » */
.proche-tete { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.proche-tete b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proche-invite { margin-left: auto; flex: none; font-size: 13px; font-weight: 700; color: var(--ciel); }
.proche.replie { width: auto; max-width: calc(100vw - 24px); padding: 5px 14px; border-radius: 999px; }
.proche.replie .proche-actions { display: none; }
/* editeur d'avatar sur telephone : « Voir » replie le tiroir, l'avatar se voit en entier */
.panneau.cote.replie .panneau-corps { display: none; }
.voir-avatar { min-height: 38px; padding: 0 12px; font-size: 14px; margin-left: auto; }
.panneau-tete .voir-avatar + .b-rond { margin-left: 0; }
@media (max-width: 480px) {
  .marque a { font-size: 15px; padding: 6px 10px; }
  .piece { font-size: 12px; }
  .outils .b:not(.b-rond) { padding: 0 12px; }
  .parler input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =====================================================================
   Villa v2 : discussion a deux onglets, fiche du joueur proche, bannieres, voiles (pause, pleine,
   banni), menus de gestes, jeux de table, ring, basket, mimes, arcade, TP reseau, VIP, admin.
   ===================================================================== */
.b-or { background: linear-gradient(180deg, #F6D365, #D4A017); color: #2A1B00; border-color: transparent; }
.b-or:hover { background: linear-gradient(180deg, #FFE08A, #E0B028); }
.b.rouge, .carte-jeu.rouge { color: #E53E3E; }

/* discussion */
.onglets { display: flex; gap: 6px; }
.onglet { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); background: var(--verre); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.onglet.actif { background: var(--bleu-fonce); border-color: transparent; }
.pastille { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #E53E3E; color: #fff; font: 700 12px var(--mono); }
.fil { pointer-events: auto; overflow-y: auto; scrollbar-width: thin; }
.fil li.admin b { color: #FFD24A; }
.prive { display: flex; flex-direction: column; gap: 6px; }
.prive-choix { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.prive-choix .b { min-height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.fil-prive li { background: var(--verre-fort); }
.fil-prive li.moi { align-self: flex-end; background: rgba(9, 120, 211, 0.85); }
/* discussion fermee (comme WhatsApp : on voit combien de messages attendent, on ouvre quand on veut) */
.pastille.douce { background: var(--bleu-fonce); }
.fermer-chat { margin-left: auto; width: 36px; min-height: 36px; }
.ouvrir-chat { display: none; align-self: flex-start; }
.chat-ferme .ouvrir-chat { display: inline-flex; }
.chat-ferme .bas-gauche .onglets, .chat-ferme .bas-gauche .fil, .chat-ferme .bas-gauche .prive, .chat-ferme .bas-gauche .parler { display: none; }
/* un message prive recu : une notification qui reste (Repondre / Plus tard) */
.notif { position: absolute; top: max(70px, calc(env(safe-area-inset-top) + 64px)); right: var(--marge); width: min(380px, calc(100vw - 24px)); z-index: 26; display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--verre-fort); border: 1px solid var(--bleu); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); animation: apparait 0.25s ease; }
.notif-texte { display: grid; gap: 3px; }
.notif-texte b { font-size: 15px; }
.notif-texte > span { color: var(--texte-2); font-size: 14px; overflow-wrap: anywhere; }
.notif-actions { display: flex; gap: 8px; justify-content: flex-end; }
.notif-actions .b { min-height: 40px; }
@media (hover: none), (max-width: 720px) { .notif { top: var(--sous-haut); left: 12px; right: 12px; width: auto; } }

/* le joueur proche et les demandes */
.proche { position: absolute; left: 50%; bottom: max(160px, calc(env(safe-area-inset-bottom) + 160px)); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.proche > b { font-size: 15px; }
.proche-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.proche-actions .b { min-height: 38px; padding: 0 12px; font-size: 14px; }
.demande { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); z-index: 30; width: min(420px, calc(100vw - 24px)); background: var(--verre-fort); border: 1px solid var(--ciel); border-radius: 18px; padding: 14px 16px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); animation: apparait 0.25s ease; }
.demande p { margin: 0 0 10px; font-weight: 700; }
.demande > div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* bannieres (annonces, arrivee de l'admin, buts) */
.banniere { position: absolute; top: max(70px, calc(env(safe-area-inset-top) + 64px)); left: 50%; transform: translateX(-50%); width: min(680px, calc(100vw - 24px)); padding: 14px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(9, 120, 211, 0.95), rgba(13, 34, 64, 0.95)); border: 1px solid var(--ciel); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); animation: tombe 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); pointer-events: none; z-index: 25; }
.banniere b { display: block; font-size: clamp(17px, 3.4vw, 24px); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.banniere span { display: block; color: var(--texte-2); margin-top: 4px; font-size: 14px; }
.banniere.doree { background: linear-gradient(135deg, rgba(212, 160, 23, 0.97), rgba(90, 60, 0, 0.95)); border-color: #FFE08A; color: #FFF8E1; }
.banniere.doree span { color: #FFE9B0; }
@keyframes tombe { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* voile : pause, villa pleine, banni */
.voile { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5, 14, 28, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; }
.voile h1 { font-size: clamp(24px, 6vw, 32px); margin: 8px 0; }
.voile p { color: var(--texte-2); margin: 0 0 16px; }
.porte-marque { font: 800 40px var(--mono); color: #fff; }
.porte-marque span { color: var(--bleu); }
.porte-marque small { font: 600 15px var(--mono); color: var(--ciel); letter-spacing: 0.2em; margin-left: 8px; vertical-align: middle; }

/* menus (grimaces, danses, poses) */
.menu-gestes { position: absolute; left: var(--marge); bottom: max(250px, calc(env(safe-area-inset-bottom) + 250px)); width: min(360px, calc(100vw - 28px)); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 10px; z-index: 22; }
.menu-gestes b { display: block; margin-bottom: 8px; }
.menu-gestes .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.menu-gestes .grille .b { font-size: 15px; padding: 0 10px; }
.grille-lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.grille-lieux .b { border-radius: 14px; justify-content: flex-start; text-align: left; min-height: 48px; }
.saut { position: absolute; left: calc(var(--marge) + 136px); bottom: max(30px, calc(env(safe-area-inset-bottom) + 30px)); display: none; font-size: 22px; }

/* panneau large (jeux) */
.panneau.large { width: min(920px, calc(100vw - 16px)); max-height: min(92vh, 900px); }

/* ---------- jeux de table ---------- */
.salon .places { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.salon .places li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--trait); border-radius: 12px; padding: 6px 10px; min-height: 48px; }
.salon .places li i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.salon .places li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon .places .vide { color: var(--texte-2); font-style: italic; }
.salon .places .b { min-height: 36px; padding: 0 12px; }
.statut { font-weight: 700; color: var(--texte) !important; }
.statut.a-vous { color: var(--ok) !important; }
.salon-erreur { color: var(--erreur) !important; min-height: 1em; margin: 0 0 6px !important; }
.regles { line-height: 1.5; }
.jeu { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: center; }
/* Puissance 4 */
.p4 { display: flex; gap: 6px; padding: 10px; background: #1E4FB0; border-radius: 16px; }
.p4-col { display: flex; flex-direction: column; gap: 6px; padding: 4px; border: 0; border-radius: 10px; background: transparent; }
.p4-col:not(:disabled):hover { background: rgba(255, 255, 255, 0.15); }
.p4-col i { width: clamp(30px, 8.5vw, 52px); height: clamp(30px, 8.5vw, 52px); border-radius: 50%; background: #0B1D38; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5); }
.p4-col i.rouge { background: radial-gradient(circle at 35% 35%, #FF7A7A, #D11F1F); }
.p4-col i.jaune { background: radial-gradient(circle at 35% 35%, #FFF08A, #E0B000); }
.p4-col i.gagne { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; }
.p4-col i.dernier { outline: 2px dashed rgba(255, 255, 255, 0.7); outline-offset: 2px; }
/* Ludo */
.ludo { width: min(520px, 100%); height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.ludo .pion.jouable { cursor: pointer; animation: brille 0.8s ease-in-out infinite alternate; }
@keyframes brille { from { opacity: 1; } to { opacity: 0.45; } }
.de { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 160px; }
.de b { font-size: 64px; line-height: 1; }
.de small { color: var(--texte-2); text-align: center; }
/* cartes */
.autres { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; justify-content: center; }
.autres span { border: 1px solid var(--trait); border-radius: 99px; padding: 4px 12px; }
.autres span.tour { border-color: var(--ok); }
.table-cartes { display: flex; gap: 24px; justify-content: center; width: 100%; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile small { color: var(--texte-2); }
.main { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.carte-jeu { width: 58px; height: 84px; border-radius: 9px; background: #FFFFFF; color: #1A202C; border: 1px solid #CBD5E0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); padding: 0; }
.carte-jeu b { font-size: 20px; }
.carte-jeu span { font-size: 24px; }
.carte-jeu.jouable { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--ok), 0 8px 16px rgba(0, 0, 0, 0.3); }
.carte-jeu:disabled { opacity: 1; }
.main .carte-jeu:disabled { filter: grayscale(0.35) brightness(0.85); }
.carte-jeu.dos { background: repeating-linear-gradient(45deg, #1E4FB0, #1E4FB0 6px, #2D9CF6 6px, #2D9CF6 12px); border-color: #fff; }
.aide-cartes { margin: 4px 0 0 !important; text-align: center; font-weight: 700; color: var(--ok) !important; }
/* Quartiers d'Abidjan */
.quartiers { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(52px, auto)); gap: 3px; width: min(760px, 100%); }
.case-q { position: relative; border-radius: 6px; background: #F7F2E6; color: #1A202C; padding: 14px 3px 3px; font-size: 10px; line-height: 1.15; overflow: hidden; border-top: 10px solid var(--g); box-shadow: inset 0 0 0 3px var(--p); }
.case-q.speciale { background: #E6EEF7; border-top-color: #9FB3C8; }
.case-q b { display: block; font-size: 10px; overflow-wrap: anywhere; }
.case-q small { display: block; color: #4A5568; }
.case-q .pions { position: absolute; right: 2px; bottom: 2px; display: flex; gap: 2px; }
.pion-q { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #fff; }
.centre-q { grid-row: 2 / 8; grid-column: 2 / 8; background: rgba(13, 34, 64, 0.65); border-radius: 12px; padding: 10px 14px; overflow: auto; }
.centre-q h3 { margin: 0 0 6px !important; }
.fortunes p { margin: 0 0 4px !important; }
.fortunes .sorti { opacity: 0.45; text-decoration: line-through; }
.des, .carte-chance { color: var(--texte) !important; font-weight: 700; }
.journal { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--texte-2); display: grid; gap: 2px; }

/* ring et basket */
.hud-ring { position: absolute; top: max(150px, calc(env(safe-area-inset-top) + 144px)); left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 10px 14px; text-align: center; }
.hud-ring p { margin: 6px 0; color: var(--texte-2); }
.pvs { display: flex; align-items: center; gap: 10px; }
.pv { flex: 1; min-width: 0; text-align: left; }
.pv.bleu { text-align: right; }
.pv b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 4px 0; }
.barre i { display: block; height: 100%; transition: width 0.25s ease; }
.pv.rouge .barre i { background: linear-gradient(90deg, #E53E3E, #FC8181); }
.pv.bleu .barre i { background: linear-gradient(90deg, #3182CE, #90CDF4); margin-left: auto; }
.vs { font: 800 20px var(--mono); color: #FFD24A; }
.hud-basket { position: absolute; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)); transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 10px 14px; display: grid; gap: 8px; text-align: center; z-index: 21; }
.hud-basket .chrono { font-size: 28px; }
.hud-basket .score { font-weight: 800; font-size: 18px; }
.hud-basket small { color: var(--texte-2); }

/* mimes */
.mime .manche { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; }
.mime .secret { font-size: 22px; font-weight: 800; color: #FFD24A !important; text-align: center; }

/* arcade */
.arcade-boite { display: grid; justify-items: center; gap: 10px; }
.arcade-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.arcade-choix .b { min-height: 40px; padding: 0 12px; }
.arcade-choix .b.actif { background: var(--bleu); color: #fff; border-color: transparent; }
/* la grille ne prend que la hauteur qui reste : le choix du jeu, l'aide et les boutons restent visibles sans defiler */
.arcade { width: min(480px, 100%, max(240px, calc(86vh - 270px))); height: auto; border-radius: 12px; border: 2px solid var(--trait); image-rendering: pixelated; touch-action: none; background: #081527; }

/* TP reseau */
.tp .objectifs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.tp .objectifs li.fait { color: var(--ok); }
.console { margin: 8px 0 0; height: min(30vh, 280px); overflow: auto; background: #04101F; color: #9AE6B4; border: 1px solid var(--trait); border-radius: 12px 12px 0 0; padding: 10px 12px; font: 500 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ligne-console { display: flex; align-items: center; gap: 6px; background: #04101F; border: 1px solid var(--trait); border-top: 0; border-radius: 0 0 12px 12px; padding: 6px 12px; }
.ligne-console .invite { font: 700 13px var(--mono); color: #68D391; white-space: nowrap; }
.console-saisie { flex: 1; min-width: 0; background: transparent; border: 0; color: #E6FFFA; font: 500 16px var(--mono); min-height: 36px; outline: none; }

/* VIP */
.enigme { border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.enigme.faite { border-color: rgba(52, 211, 153, 0.5); }
.enigme.fermee { opacity: 0.55; }
.enigme.ouverte { border-color: #D4AF37; background: rgba(212, 175, 55, 0.06); }
.enigme p { color: var(--texte) !important; }
.enigme input { flex: 1; min-width: 160px; min-height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: rgba(255, 255, 255, 0.06); padding: 0 14px; font-size: 16px; }
.enigme .indice { color: #F6E05E !important; }
.vip-ok { font-size: 18px; font-weight: 800; color: #FFD24A !important; }

/* admin */
.admin input[type="text"], .admin input[type="search"], .admin select { flex: 1; min-width: 180px; min-height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: rgba(255, 255, 255, 0.06); padding: 0 14px; font-size: 16px; }
.admin-personnes { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; max-height: 40vh; overflow: auto; }
.admin-personnes li { border: 1px solid var(--trait); border-radius: 12px; padding: 8px 10px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.admin-actions .b { min-height: 36px; padding: 0 10px; font-size: 13px; }
.admin h4 { margin: 10px 0 4px; }

/* espace Auriol */
.auriol-titre { color: #FFD24A !important; font-size: 17px; }
.auriol .liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.auriol .liens a { color: var(--ciel); font-weight: 700; }
.auriol textarea { width: 100%; border-radius: 12px; border: 1px solid var(--trait); background: rgba(255, 255, 255, 0.06); padding: 10px 12px; font: 500 16px/1.4 var(--affichage); color: var(--texte); resize: vertical; }

@media (hover: none), (max-width: 720px) {
  /* sauter : sous le pouce droit ; les menus de gestes s'ouvrent a cote des boutons, celui de ☰ sous la barre */
  .saut { display: grid; left: auto; right: var(--marge); bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); width: 62px; min-height: 62px; font-size: 26px; }
  .menu-gestes { left: auto; right: calc(var(--marge) + 64px); bottom: max(92px, calc(env(safe-area-inset-bottom) + 84px)); width: min(300px, calc(100vw - 96px)); }
  .menu-gestes.menu-haut { top: var(--sous-haut); bottom: auto; right: var(--marge); }
  /* telephone : le bas de l'ecran est pris par les pouces -> la carte du voisin passe en haut, sous la barre */
  .proche { top: var(--sous-haut); bottom: auto; }
  .hud-ring { top: var(--sous-haut); }
  .quartiers { grid-template-rows: repeat(8, minmax(44px, auto)); }
  .case-q, .case-q b { font-size: 8px; }
}
.reglage { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.reglage input { width: 20px; height: 20px; accent-color: var(--bleu); }
.reglage-choix { min-height: 40px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--texte); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--trait); border-radius: 10px; }
.reglage-choix option { color: #0B1B31; }
.reglage small { color: var(--texte-2); }

/* seance a un appareil de sport (a droite ; sur telephone : sous les boutons du haut) */
.hud-seance { position: absolute; right: var(--marge); bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)); width: min(320px, calc(100vw - 24px)); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; z-index: 21; text-align: center; }
.hud-seance h4 { margin: 0; font-size: 15px; }
.hud-seance .stat { font: 800 26px var(--mono); }
.hud-seance .sous { color: var(--texte-2); font-size: 13px; min-height: 18px; }
.hud-seance .barre i { background: linear-gradient(90deg, #34D399, #FBBF24, #F87171); }
.hud-seance .rangee { display: flex; gap: 8px; }
.hud-seance .rangee .b-plein { flex: 1; min-height: 48px; font-size: 17px; }
.hud-seance small { color: var(--texte-2); }
.souffle { width: 90px; height: 90px; margin: 4px auto; border-radius: 50%; background: radial-gradient(circle, rgba(143, 203, 255, 0.55), rgba(45, 156, 246, 0.15)); border: 2px solid rgba(143, 203, 255, 0.6); transition: transform 0.1s linear; }
.hud-basket .rangee { display: flex; gap: 8px; }
.hud-basket .rangee .b-plein { flex: 1; }
@media (hover: none), (max-width: 720px) {
  .hud-seance { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: var(--sous-haut); }
}
/* session de skate : en haut au centre (sur telephone : sous les boutons du haut) */
.hud-skate { position: absolute; left: 50%; top: max(140px, calc(env(safe-area-inset-top) + 134px)); transform: translateX(-50%); min-width: min(360px, calc(100vw - 24px)); max-width: calc(100vw - 24px); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 8px 14px; display: grid; gap: 2px; text-align: center; z-index: 19; pointer-events: none; }
.hud-skate .rangee, .hud-skate button { pointer-events: auto; }
.hud-skate .skate-titre { font-size: 12px; color: var(--texte-2); letter-spacing: 0.04em; }
.hud-skate .skate-score { font: 800 26px var(--mono); }
.hud-skate .skate-combo { font-size: 13px; color: #FBBF24; min-height: 17px; }
.hud-skate .skate-figure { font-weight: 800; font-size: 18px; min-height: 22px; }
.hud-skate .skate-figure.gain { color: #34D399; }
.hud-skate .skate-figure.chute { color: #F87171; }
.hud-skate small { color: var(--texte-2); }
.hud-skate .rangee { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.hud-skate .rangee .b { min-height: 46px; padding: 0 16px; }
@media (hover: none), (max-width: 720px) {
  .hud-skate { top: var(--sous-haut); }
}
/* moderation : bouton de retrait d'un message, messages prives */
.fil li .effacer { margin-left: 8px; border: 0; background: transparent; cursor: pointer; font-size: 13px; opacity: 0.55; padding: 0 2px; min-height: 0; }
.fil li .effacer:hover, .fil li .effacer:focus-visible { opacity: 1; }
.admin .note, .panneau .note { font-size: 13px; color: var(--texte-2); }
.conv-privee { border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; }
.conv-privee summary { cursor: pointer; }
.conv-privee ul { margin-top: 8px; }
/* concours de basket : postes, jauge avec zone verte et curseur */
.basket-tete { display: flex; justify-content: space-between; align-items: baseline; }
.basket-postes { display: flex; justify-content: center; gap: 10px; }
.basket-postes .poste { display: inline-flex; gap: 3px; padding: 3px 5px; border-radius: 8px; }
.basket-postes .poste.actif { background: rgba(251, 191, 36, 0.18); }
.basket-postes i { width: 10px; height: 10px; border-radius: 50%; background: #E0782E; display: inline-block; }
.basket-postes i.argent { background: conic-gradient(#C8102E 0 33%, #fff 0 66%, #1D4E9E 0); }
.basket-postes i.tire { opacity: 0.22; }
/* sur ordinateur, le panneau du concours a droite : le tireur et la cloche du tir restent visibles */
@media (min-width: 1000px) and (hover: hover) { .hud-basket { left: auto; right: 24px; transform: none; } }
.jauge-tir { position: relative; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.jauge-tir .vert { position: absolute; top: 0; bottom: 0; background: rgba(52, 211, 153, 0.75); }
.jauge-tir .curseur { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 8px #fff; }

/* ---- mini-foot : tableau, jauge de frappe, roles (gardien, equipe, match) */
.hud-foot { position: absolute; top: max(150px, calc(env(safe-area-inset-top) + 144px)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); background: var(--verre-fort); border: 1px solid var(--trait); border-radius: 16px; padding: 8px 12px; display: grid; gap: 6px; text-align: center; z-index: 20; }
.hud-foot .score-foot { font-size: 17px; font-variant-numeric: tabular-nums; }
.hud-foot small { color: var(--texte-2); }
.jauge-foot { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; opacity: 0.3; transition: opacity 0.15s; }
.hud-foot.charge .jauge-foot { opacity: 1; }
.jauge-foot i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #34D399, #F6AD55 60%, #E53E3E); }
.hud-foot .rangee { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hud-foot .rangee .b-plein { flex: 1; min-height: 48px; }
.roles-foot .b { min-height: 36px; padding: 0 10px; font-size: 13px; }
.roles-foot .b.equipe { border-color: var(--e); }
.roles-foot .b.equipe.actif { background: var(--e); color: #fff; }
.roles-foot .gardiens-foot { flex-basis: 100%; }
/* sur ordinateur : a droite, sous les boutons du haut (les bannieres de but restent lisibles au centre) */
@media (min-width: 1000px) and (hover: hover) { .hud-foot { top: 72px; left: auto; right: 16px; transform: none; width: 380px; } }
@media (hover: none), (max-width: 719px) {
  .hud-foot { top: var(--sous-haut); padding: 6px 10px; }
  .hud-foot > small { display: none; }
}
.foot-actions { position: absolute; right: 10px; top: 46%; display: grid; gap: 12px; z-index: 21; }
.foot-actions .b { width: 78px; height: 78px; border-radius: 50%; padding: 0; font-size: 14px; line-height: 1.15; white-space: normal; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); touch-action: none; user-select: none; -webkit-user-select: none; }

/* ---- editeur d'avatar : onglets */
.onglets-avatar { display: flex; flex-wrap: wrap; gap: 6px; }
.onglets-avatar button { flex: none; min-height: 40px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--trait); background: transparent; color: var(--texte); font: inherit; font-weight: 700; cursor: pointer; }
.onglets-avatar button[aria-selected="true"] { background: var(--accent, #2D9CF6); border-color: transparent; color: #fff; }
.onglet-avatar { display: grid; gap: 10px; }

/* un panneau sur le cote (en bas sur telephone) : ce qu'il modifie reste visible (l'editeur d'avatar) */
.panneau.cote { top: 76px; bottom: 16px; left: auto; right: 16px; transform: none; width: min(460px, calc(100vw - 24px)); max-height: none; }
@media (max-width: 719px), (hover: none) and (max-height: 900px) {
  .panneau.cote { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 56vh; border-radius: 20px 20px 0 0; }
}

/* ---- l'espace jeux (🎮) : les appels a jouer, a accepter ou a lancer */
.jeux-bouton { position: relative; }
.jeux-bouton .pastille { margin-left: 2px; }
.espace-jeux h3 { margin: 16px 0 8px; }
.espace-jeux h3:first-child { margin-top: 0; }
.appel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; background: rgba(143, 203, 255, 0.05); }
.appel.pour-moi { border-color: var(--bleu); background: rgba(45, 156, 246, 0.12); }
.appel-emoji { font-size: 24px; }
.appel-texte { min-width: 0; display: grid; gap: 2px; }
.appel-texte b { overflow-wrap: anywhere; }
.appel-texte small { color: var(--texte-2); }
.appel-boutons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.appel-boutons .b { min-height: 38px; padding: 0 12px; }
.appel-form { display: grid; gap: 8px; }
.appel-form > b { margin-top: 4px; }
@media (max-width: 520px) {
  .appel { grid-template-columns: auto 1fr; }
  .appel-boutons { grid-column: 1 / -1; }
  .appel-boutons .b { flex: 1; }
}
/* ---- le tutoriel rapide (premier passage, puis Aide ou ☰) */
.tuto { display: grid; gap: 6px; text-align: center; }
.tuto-emoji { font-size: 54px; line-height: 1.1; }
.tuto h3 { margin: 4px 0; font-size: 20px; }
.tuto p { margin: 0 auto; max-width: 460px; color: var(--texte); }
.tuto-points { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.tuto-points i { width: 8px; height: 8px; border-radius: 99px; background: rgba(143, 203, 255, 0.3); transition: width 0.2s ease; }
.tuto-points i.actif { width: 22px; background: var(--bleu); }
.tuto .rangee { justify-content: center; }
/* telephone : 🎮 rond, sans le mot */
@media (hover: none), (max-width: 720px) {
  .mot-jeux { display: none; }
  .jeux-bouton { width: 44px; padding: 0; }
  .jeux-bouton .pastille { position: absolute; top: -5px; right: -5px; margin: 0; }
}

/* ---- telephone COUCHE (paysage, peu de hauteur) : les tableaux de jeu en bandeau compact en haut, au centre
   (entre le logo et les boutons) ; la pastille d'action en bas au centre, entre le joystick et les boutons ;
   les boutons de frappe centres verticalement, a droite. Le milieu de l'ecran reste au jeu. */
@media (hover: none) and (orientation: landscape) and (max-height: 520px) {
  .hud:has(.hud-seance, .hud-foot, .hud-basket, .hud-skate, .hud-ring) .piece { display: none; }
  .hud-seance, .hud-foot, .hud-basket, .hud-skate, .hud-ring {
    top: max(6px, env(safe-area-inset-top)) !important; bottom: auto !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important; width: min(460px, calc(100vw - 400px)) !important; min-width: 0 !important;
    max-height: calc(100vh - 110px); overflow: auto; padding: 5px 10px !important; gap: 4px !important; border-radius: 14px;
  }
  .hud-seance h4, .hud-skate .skate-titre { font-size: 12px; }
  .hud-seance .stat, .hud-skate .skate-score { font-size: 18px; }
  .hud-seance .sous, .hud-seance small, .hud-basket small, .hud-skate small, .hud-ring p { display: none; }
  .hud-seance .rangee .b-plein, .hud-basket .rangee .b-plein { min-height: 38px; font-size: 15px; }
  .hud-seance .rangee .b, .hud-basket .rangee .b, .hud-skate .rangee .b { min-height: 38px; }
  .hud-basket .chrono { font-size: 18px; }
  .hud-basket .score { font-size: 15px; }
  .hud-foot .score-foot { font-size: 14px; }
  .roles-foot .b { min-height: 32px; font-size: 12px; padding: 0 8px; }
  .souffle { width: 54px; height: 54px; margin: 0 auto; }
  .action { bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); max-width: calc(100vw - 320px); min-height: 44px; font-size: 15px; }
  .foot-actions { top: 50%; bottom: auto; transform: translateY(-38%); gap: 8px; right: max(10px, env(safe-area-inset-right)); }
  .foot-actions .b { width: 62px; height: 62px; font-size: 12px; }
  /* concours de basket et defi de tirs : on vise le panier / le but, en haut au centre -> le tableau passe a gauche
     (le joystick ne sert pas pendant un tir au poste) */
  .hud-basket { left: max(10px, env(safe-area-inset-left)) !important; transform: none !important; width: min(250px, 30vw) !important; top: 58px !important; }
  .hud-basket .rangee { flex-direction: column; }
  .hud-basket .rangee .b { width: 100%; }
  .hud-basket .basket-postes { flex-wrap: wrap; gap: 4px; }
  .hud:has(.hud-basket) .joystick { display: none !important; }
  /* borne d'arcade : la grille a gauche sur toute la hauteur ; le choix du jeu, l'aide et les boutons a droite
     (panneau plus large : le choix du jeu et les boutons tiennent chacun sur une ligne) */
  .panneau:has(.arcade-boite) { width: min(820px, calc(100vw - 24px)); }
  .arcade-boite { grid-template-columns: auto minmax(0, 1fr); align-items: start; justify-items: stretch; }
  .arcade-boite > .arcade { grid-column: 1; grid-row: 1 / span 3; width: min(480px, calc(86vh - 100px)); }
  .arcade-boite > :not(.arcade) { grid-column: 2; }
  .arcade-choix { justify-content: flex-start; }
  /* les messages ne cachent plus le tableau : sous lui (toast), ou au-dessus de la pastille d'action (banniere) */
  .toast { top: 150px; padding: 6px 14px; font-size: 14px; }
  .banniere { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 60px)); width: min(560px, calc(100vw - 320px)); padding: 8px 14px; }
  .banniere b { font-size: 17px; }
  .banniere span { font-size: 12px; margin-top: 2px; }
}
/* telephone debout : pendant une seance ou un match (tableau en haut), les messages passent au-dessus de la pastille d'action */
@media (hover: none) and (orientation: portrait), (max-width: 720px) and (orientation: portrait) {
  .hud:has(.hud-seance, .hud-foot, .hud-skate, .hud-ring) .toast { top: auto; bottom: max(214px, calc(env(safe-area-inset-bottom) + 206px)); }
}
/* ---- circuit : stand (choix du vehicule), feux de depart, tableau de course */
.stand-course { display: grid; gap: 10px; }
.stand-course h4 { margin: 8px 0 0; }
.choix-vehicule .b.actif { background: var(--bleu); color: #fff; border-color: transparent; }
.feux-course { font: 800 26px var(--mono); letter-spacing: 0.06em; text-align: center; }
.hud-course .score-foot { font-size: 16px; }
.hud-course .sous-course { color: var(--texte-2); font: 700 14px var(--mono); }
/* echecs et dames : le choix du temps par coup, la pendule qui presse */
.delai-coup { min-height: 44px; padding: 0 12px; background: var(--verre-fort); color: var(--texte); border: 1px solid var(--trait); border-radius: 99px; font: inherit; font-weight: 700; }
.partie-info.presse { color: #F87171; }
/* ring : l'endurance sous les points de vie, cinq coups en boutons */
.hud-ring .barre.endurance { height: 5px; margin-top: 3px; }
.hud-ring .barre.endurance i { background: linear-gradient(90deg, #FBBF24, #34D399); }
.hud-ring .coup-boxe { min-height: 44px; padding: 0 12px; }

/* Espace ferme : son onglet de discussion ; la porte de l'espace Baddies (demande d'acces). */
.onglet-espace { border-color: #FF8FC8; }
.onglet-espace.actif { background: #FF5FB4; color: #fff; }
.fil-espace li.systeme { color: #FFB3DA; }
.formulaire-baddies { display: grid; gap: 10px; margin: 10px 0; }
.formulaire-baddies label { display: grid; gap: 4px; font-weight: 600; }
.formulaire-baddies input { min-height: 40px; }
.apercu-photo { max-width: 160px; max-height: 160px; border-radius: 12px; object-fit: cover; }
.baddies .petit { font-size: 0.85em; opacity: 0.8; }