* { box-sizing: border-box; }

/* ============================================================
   SEQUENCE DE DEMARRAGE — demande par Jonathan le 05/08/2026 :
   0) GATE "Cliquer pour demarrer" : necessaire pour que les navigateurs
      autorisent le son en autoplay juste apres (regle universelle de
      TOUS les navigateurs, pas contournable en JS sans un premier clic).
   1) SPLASH STUDIO (video "logo intro jeu.mp4", explosion+logo MediaTelecom)
   2) ECRAN D'ACCUEIL : anim d'entree ("accueil logo anim.mp4") puis image
      fixe ("Page d'accueil.png") + bouton START seul (Continuer/Parametres
      viendront avec le systeme de sauvegarde, plus tard)
   3) Sur START : cinematique d'intro complete ("intro entiere.mp4", 50s)
      puis lancement reel du jeu (scene squat).
   Toute la logique d'enchainement est en JS (voir bas de game.js) ; le CSS
   ne fait que positionner/masquer.
   ============================================================ */
/* Bouton de dev/test (06/08/2026) : passe directement a la video "ready to
   fight" -> combat_rue, sans se retaper splash+titre+cinematique d'intro a
   chaque rafraichissement pendant qu'on teste le combat 3D. Toujours visible
   (z-index au-dessus de tout, meme le start-gate) tant qu'on est avant
   combat_rue. */
#skip-intro-btn {
  position: fixed; top: 14px; right: 14px;
  z-index: 999;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(255, 178, 84, 0.6);
  background: rgba(10, 10, 12, 0.75);
  color: #ffd25a;
  cursor: pointer;
}
#skip-intro-btn:hover { background: rgba(255, 178, 84, 0.25); }
#skip-intro-btn.hidden { display: none; }
#menu-continue.hidden { display: none; }

/* Bouton "Passer" sur la video "ready to fight" (06/08/2026) : va direct en
   salle d'entrainement, pour tester sans attendre a chaque fois. */
#skip-ready-btn {
  position: fixed; top: 14px; right: 14px;
  z-index: 999;
  display: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(255, 178, 84, 0.6);
  background: rgba(10, 10, 12, 0.75);
  color: #ffd25a;
  cursor: pointer;
}
#skip-ready-btn:hover { background: rgba(255, 178, 84, 0.25); }
#skip-ready-btn.show { display: block; }

#start-gate {
  position: fixed; inset: 0;
  z-index: 300;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#start-gate.hide { opacity: 0; pointer-events: none; }
#start-gate-text {
  color: #ffd25a;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: title-start-pulse 1.8s ease-in-out infinite;
  padding: 16px 32px;
  border: 2px solid rgba(255, 178, 84, 0.7);
  border-radius: 10px;
}

#studio-splash, #title-screen, #intro-cinematic, #ready-to-fight-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
}
#studio-splash video, #title-screen video, #title-bg, #ready-to-fight-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* "contain" et non "cover" : la video (1620x1080, format 3:2) se faisait
   rogner en haut/bas sur un ecran plus large (16:9), ce qui mangeait le
   haut du cadrage - signale par Jonathan le 05/08/2026. Bandes noires sur
   les cotes acceptees plutot que perdre le haut de l'image (meme logique
   deja appliquee aux decors, voir applyCoverSizing() dans game.js). */
#intro-cinematic {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

#studio-splash {
  z-index: 200;
  background: #000;
  transition: opacity 0.5s ease;
}
#studio-splash.hide { opacity: 0; pointer-events: none; }

#title-screen {
  z-index: 150;
  background: #000;
  opacity: 0;
  display: none;
}
#title-screen.show { display: block; opacity: 1; transition: opacity 0.5s ease; }
/* L'image fixe est deja au-dessus de la video dans le DOM : on la fait
   apparaitre en fondu RAPIDE par-dessus la derniere frame de la video
   (sans jamais la masquer avec display:none, qui coupait net avant que
   l'image soit prete et laissait un flash noir - signale par Jonathan
   le 05/08/2026, "pas de delai, un chevauchement c'est pas grave"). */
#title-bg { opacity: 0; transition: opacity 0.15s ease; }
#title-screen.ready #title-bg { opacity: 1; }
#title-screen.ready #title-content { opacity: 1; }

#title-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 9%;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}
.title-start-btn {
  padding: 16px 48px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 10px;
  border: 2px solid rgba(255, 178, 84, 0.7);
  background: rgba(10, 10, 12, 0.7);
  color: #ffd25a;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  animation: title-start-pulse 1.8s ease-in-out infinite;
}
.title-start-btn:hover { background: rgba(255, 178, 84, 0.25); transform: scale(1.04); }
@keyframes title-start-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 178, 84, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 178, 84, 0.55); }
}

/* ============================================================
   MENU ECRAN TITRE (06/08/2026) : remplace le bouton START une fois
   clique - Nouvelle partie / Charger / Combat simple / Tournoi / Combat
   en ligne. Seule "Nouvelle partie" est fonctionnelle pour l'instant, les
   autres ouvrent une popup "Bientot disponible" (meme pattern que les
   hotspots "a venir"). Le mode en ligne se distingue par un badge rouge
   TOUJOURS visible (pas besoin de cliquer pour savoir), demande par
   Jonathan le 06/08/2026 ("je veux que le mode en ligne ait sa petite
   chose specifique visible depuis le menu").
   ============================================================ */
#title-menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(300px, 78vw);
}
#title-screen.menu-open #title-start { display: none; }
#title-screen.menu-open #title-menu { display: flex; }

.menu-btn {
  position: relative;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 8px;
  border: 2px solid rgba(255, 178, 84, 0.6);
  background: rgba(10, 10, 12, 0.75);
  color: #ffd25a;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.menu-btn:hover, .menu-btn:focus-visible {
  background: rgba(255, 178, 84, 0.22);
  transform: scale(1.03);
  outline: 2px solid #ffd25a;
}
/* Surbrillance manette EXPLICITE (07/08/2026) - :focus-visible ne se
   declenche pas de facon fiable pour un focus() pose par script (verifie
   sur MDN : les navigateurs desactivent l'indicateur pour un focus
   "programmatique", pas du vrai clavier) - classe geree entierement en JS
   a la place (voir setGpFocus() dans game.js), jamais laissee au hasard du
   navigateur. Zoom + halo dore plus marque que le simple hover, demande
   par Jonathan pour bien voir ou on est dans le menu. */
.menu-btn.gp-focus {
  background: rgba(255, 178, 84, 0.3);
  transform: scale(1.07);
  outline: 3px solid #ffd25a;
  box-shadow: 0 0 16px rgba(255, 210, 90, 0.75);
}

.menu-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  background: #c0392b;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   ECRAN DE SELECTION DE PERSONNAGE (10/08/2026) : reutilise pour
   "Combat simple" et le mode Tournoi. Meme habillage sombre/dore que le
   menu titre pour rester coherent visuellement.
   ============================================================ */
#character-select-screen {
  position: fixed; inset: 0;
  z-index: 160;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  /* Fond "dojo" (11/08/2026, cree par Jonathan - "ca parait moins vide") :
     degrade sombre PAR-DESSUS l'image (pas juste un filtre d'opacite sur
     l'image elle-meme) pour garder le texte/la grille de persos lisibles,
     meme principe que les bandes laterales "webtoon" du panneau lateral. */
  background:
    linear-gradient(rgba(6, 5, 4, 0.78), rgba(6, 5, 4, 0.88)),
    url("https://pub-18bc2808070a4811b5e64be27e044dc3.r2.dev/d%C3%A9cors/fonds%20menus/fond%20combat%20simple.jpg") center/cover no-repeat;
  padding: 40px 20px;
}
#character-select-screen.show { display: flex; }
#character-select-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffd25a;
  text-transform: uppercase;
}
#character-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  width: min(900px, 92vw);
  max-height: 65vh;
  overflow-y: auto;
  padding: 4px;
}
.char-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 178, 84, 0.5);
  background: rgba(20, 16, 12, 0.7);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.char-tile:hover, .char-tile.gp-focus {
  background: rgba(255, 178, 84, 0.22);
  transform: scale(1.04);
  outline: 2px solid #ffd25a;
}
.char-tile-portrait {
  width: 96px; height: 96px;
  border-radius: 8px;
  background: #2a221a center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: rgba(255, 210, 90, 0.55);
  border: 1px solid rgba(255, 178, 84, 0.3);
}
.char-tile-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #f1e6d6;
  text-align: center;
}

/* ============================================================
   POPUP "CHARGER UNE PARTIE" (10/08/2026) : emplacements factices, UI
   seule, voir commentaire dans index.html.
   ============================================================ */
#save-slots-screen {
  position: fixed; inset: 0;
  z-index: 160;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(6, 5, 4, 0.94);
}
#save-slots-screen.show { display: flex; }
#save-slots-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffd25a;
  text-transform: uppercase;
}
#save-slots-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(360px, 88vw);
}
.save-slot {
  padding: 14px 18px;
  border-radius: 8px;
  border: 2px dashed rgba(255, 178, 84, 0.5);
  background: rgba(20, 16, 12, 0.7);
  color: #cbb98f;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.save-slot:hover, .save-slot.gp-focus {
  background: rgba(255, 178, 84, 0.18);
  transform: scale(1.02);
  outline: 2px solid #ffd25a;
}
.save-slot-empty { color: #7a7264; font-style: italic; }

/* ============================================================
   ECRAN TOURNOI "J1" (10/08/2026) : bracket 8e/quart/demi/finale, style
   schema de coupe.
   ============================================================ */
#tournament-screen {
  position: fixed; inset: 0;
  z-index: 160;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(6, 5, 4, 0.96);
  padding: 30px 16px;
}
#tournament-screen.show { display: flex; }
#tournament-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffd25a;
  text-transform: uppercase;
}
#tournament-bracket {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  width: min(1100px, 94vw);
  max-height: 58vh;
  overflow: auto;
  padding: 8px;
}
.tbr-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 14px;
  min-width: 150px;
}
.tbr-round-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b89a5e;
  text-align: center;
  margin-bottom: 4px;
}
.tbr-match {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 178, 84, 0.4);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(20, 16, 12, 0.6);
}
.tbr-slot {
  padding: 6px 10px;
  font-size: 12.5px;
  color: #cbb98f;
  border-bottom: 1px solid rgba(255, 178, 84, 0.2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbr-slot:last-child { border-bottom: none; }
.tbr-slot.tbr-winner { color: #ffd25a; font-weight: 700; }
.tbr-slot.tbr-pending { color: #6b6255; font-style: italic; }
.tbr-slot.tbr-next { outline: 2px solid #ffd25a; }
#tournament-next-match { display: none; }
#tournament-next-match.show { display: inline-block; }

#intro-cinematic {
  z-index: 250;
  background: #000;
  display: none;
}
#intro-cinematic.show { display: block; }

/* Vrai cache noir opaque avant l'intro (06/08/2026) - meme piege que
   #post-tuto-black : passer l'OPACITE de #intro-cinematic a 0 rendait
   TOUT l'element invisible (y compris son propre fond noir), ce qui
   laissait voir la texture du body en dessous au lieu d'un vrai noir.
   Signale par Jonathan le 06/08/2026. */
#pre-intro-black {
  display: none;
  position: fixed; inset: 0;
  z-index: 255;
  background: #000;
}
#pre-intro-black.show { display: block; }

/* "Ready to fight" (2,4s) : jouee une fois juste apres l'intro complete au
   tout premier lancement, PUIS rejouee a chaque fois qu'un combat commence
   (ring_combat) - demande par Jonathan le 05/08/2026. */
#ready-to-fight-video {
  z-index: 260;
  background: #000;
  display: none;
}
#ready-to-fight-video.show { display: block; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #eee;
  /* Habillage "webtoon" des bandes laterales (au lieu du noir plat) :
     degrade sombre chaud assorti a l'ambiance du squat + fine trame de
     diagonales (screentone, technique de trame BD/manga) + un liseret
     ambre lumineux a la jointure avec l'image, comme une bordure de case
     de bande dessinee. Demande par Jonathan le 05/08/2026. */
  background-color: #0d0906;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 6px),
    radial-gradient(ellipse at center, #1a120a 0%, #0d0906 70%);
}

#scene-wrap {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden; /* rogne l'image aux bords de l'ecran, comme background-size: cover */
}

/* Vue "PC" (ordinateur du squat) : imite un vrai navigateur internet
   (barre d'adresse, page d'accueil "Woogle" parodique, plusieurs faux
   sites) façon GTA - occupe le meme espace que la scene (a droite de la
   bande de stats, qui reste visible) - position/largeur calees en JS sur
   la largeur du side-panel (voir openPC). Demande par Jonathan le
   05/08/2026. */
#pc-view {
  position: fixed; top: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  background: #e8e8ea; /* fond clair par defaut, "vrai" navigateur - chaque site peut le redefinir */
  color: #202124;
  z-index: 8;
}
#pc-view.open { display: flex; }

/* Chrome du navigateur (barre du haut, toujours visible quel que soit le
   site affiche) */
#browser-chrome {
  display: flex; align-items: center; gap: 12px;
  background: #dee1e6;
  border-bottom: 1px solid #c4c7cc;
  padding: 10px 16px;
  flex-shrink: 0;
}
#browser-home {
  background: #fff; border: 1px solid #c4c7cc; border-radius: 16px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: #444;
  white-space: nowrap;
}
#browser-home:hover { background: #f1f1f1; }
#browser-home:hover { background: #f1f1f1; }
#browser-address {
  flex: 1;
  background: #fff;
  border: 1px solid #c4c7cc;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 13px;
  color: #444;
}
#pc-exit {
  background: #2a2a30; color: #eee;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
#pc-exit:hover { background: #3a3a42; }

#pc-content {
  flex: 1;
  overflow-y: auto;
}

/* Curseur souris virtuel manette (stick droit) - visible seulement dans
   #pc-view (parent display:none par defaut le masque avec). pointer-events
   none pour que document.elementFromPoint() rende l'element EN DESSOUS, pas
   le curseur lui-meme. */
#pc-cursor {
  position: fixed;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 20;
  transform: translate(-2px, -2px);
  border-style: solid;
  border-width: 0 6px 10px 6px;
  border-color: transparent transparent #ffffff transparent;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 2px rgba(0,0,0,.6));
  transform-origin: 0 0;
  transform: translate(-2px, -2px) rotate(-35deg);
}

/* ---------- Page d'accueil "Woogle" (parodie de moteur de recherche) --- */
.woogle-page {
  min-height: 100%;
  background: #fff;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 8vh;
}
.woogle-logo {
  font-family: Arial, sans-serif;
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 22px;
  letter-spacing: -1px;
}
.woogle-logo span:nth-child(1) { color: #d9480f; }
.woogle-logo span:nth-child(2) { color: #f2a900; }
.woogle-logo span:nth-child(3) { color: #d9480f; }
.woogle-logo span:nth-child(4) { color: #7a3b12; }
.woogle-logo span:nth-child(5) { color: #f2a900; }
.woogle-logo span:nth-child(6) { color: #d9480f; }
.woogle-tagline { color: #70757a; font-size: 13px; margin-bottom: 26px; font-style: italic; }
.woogle-search {
  width: min(560px, 80%);
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 15px;
  color: #202124;
  box-shadow: 0 1px 6px rgba(32,33,36,0.15);
  margin-bottom: 34px;
}
.woogle-results {
  width: min(560px, 85%);
  display: flex; flex-direction: column; gap: 18px;
}
.woogle-result {
  cursor: pointer;
  padding: 4px 0;
}
.woogle-result .wr-url { color: #006621; font-size: 13px; }
.woogle-result .wr-title { color: #1a0dab; font-size: 18px; margin: 2px 0; }
.woogle-result:hover .wr-title { text-decoration: underline; }
.woogle-result .wr-desc { color: #4d5156; font-size: 13px; }

/* ---------- Sites individuels ---------- */
.site-page { min-height: 100%; padding-bottom: 40px; }
.site-header {
  padding: 20px 40px;
  color: #fff;
}
.site-logo { font-size: 26px; font-weight: 800; letter-spacing: 0.5px; display: flex; align-items: center; gap: 10px; }
.site-tagline { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }

.site-komart .site-header { background: linear-gradient(120deg, #1f6f3f, #2c9653); }
.site-fightwear .site-header { background: linear-gradient(120deg, #101820, #23303d); }
.site-inlook .site-header { background: linear-gradient(120deg, #0a3d6b, #1668a8); }

/* Badge/logo InLook - parodie du "O" enveloppe d'Outlook, recolore. */
.inlook-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: linear-gradient(140deg, #1f8fd8, #0a3d6b);
  border-radius: 7px;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Boite de reception InLook : 3 colonnes façon Outlook (dossiers / liste /
   lecture), remplit toute la hauteur restante sous l'en-tete du site. */
.inlook-app {
  display: grid;
  grid-template-columns: 190px 320px 1fr;
  min-height: calc(100vh - 90px);
  background: #fff;
}
.inlook-folders {
  background: #f3f2f1;
  border-right: 1px solid #e1dfdd;
  padding: 16px 0;
}
.inlook-folder {
  padding: 9px 20px;
  font-size: 13.5px;
  color: #333;
  cursor: default;
}
.inlook-folder.active {
  background: #d9e6f5;
  color: #0a3d6b;
  font-weight: 600;
  border-left: 3px solid #1668a8;
  padding-left: 17px;
}
.inlook-list {
  border-right: 1px solid #e1dfdd;
}
.inlook-reading {
  padding: 30px;
  display: flex; align-items: center; justify-content: center;
  color: #888;
}

.pc-title {
  font-family: Impact, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: #222;
  margin: 24px 40px 16px 40px;
}

.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  padding: 0 40px;
}
.pc-item {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pc-item h4 { margin: 0 0 6px 0; font-size: 15px; color: #222; }
.pc-item .pc-item-price { color: #b8471f; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.pc-item button {
  width: 100%;
  background: #222; color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px; cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.pc-item button:hover { background: #444; }
.pc-item button:disabled { opacity: 0.35; cursor: not-allowed; }

.pc-empty {
  color: #888;
  font-size: 14px;
  font-style: italic;
  padding: 0 40px;
}

/* Taille/position calculees en JS (voir applyCoverSizing) pour que l'image
   remplisse tout l'ecran sans etre deformee - le debordement est rogne par
   overflow:hidden ci-dessus. Les hotspots restent alignes puisqu'ils se
   basent sur le rectangle REEL de l'image (getBoundingClientRect), meme si
   celle-ci deborde de la fenetre. */
#scene-img {
  position: absolute;
  display: block;
  user-select: none; -webkit-user-drag: none;
  /* Liseret ambre lumineux a la jointure image/bande laterale, comme une
     bordure de case de bande dessinee plutot qu'un bord noir brut. */
  box-shadow: 0 0 0 2px rgba(255, 178, 84, 0.55), 0 0 22px rgba(255, 140, 40, 0.35);
}
/* Scenes "plein ecran" (ex: ring_combat) : pas de bande laterale, l'image
   remplit toute la fenetre. object-fit:cover evite toute deformation quelle
   que soit la proportion reelle de l'image - demande par Jonathan le
   05/08/2026 ("la page de combat en full screen"). */
#scene-img.fullscreen {
  object-fit: cover;
  box-shadow: none;
}

/* Le calque des hotspots est cale exactement sur l'image affichee,
   pas sur toute la fenetre - voir positionnement en JS (getImageRect). */
#hotspot-layer {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
}
/* Halo doux et degrade (pas de rectangle dur) : evite l'effet
   "gros carre jaune" signale par Jonathan le 05/08/2026 - juste une
   lueur centree qui s'estompe vers les bords du hotspot. */
.hotspot::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 210, 90, 0.22), rgba(255, 210, 90, 0) 75%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.hotspot:hover::before, .hotspot:focus-visible::before, .hotspot.gp-focus::before {
  opacity: 1;
}
/* En mode debug (touche D), la zone reelle reste visible en trait
   fin pour pouvoir ajuster les coordonnees - jamais visible en jeu normal. */
body.debug-hotspots .hotspot {
  background: rgba(255, 0, 0, 0.10);
  outline: 1px solid rgba(255, 60, 60, 0.8);
}

/* Limites de deplacement du sol de combat (interieur des cordes), tracees a
   la main par Jonathan le 05/08/2026 sur les images de ring (hexagone, pas
   un simple trapeze - 2 petits segments verticaux pres des coins avant pour
   suivre la diagonale des cordes). Positionnee/dimensionnee en JS exactement
   comme #hotspot-layer (voir layoutHotspots). Invisible en jeu normal,
   visible uniquement en mode debug (touche D) pour validation. */
#floor-limits {
  position: absolute;
  pointer-events: none;
  display: none;
}
body.debug-hotspots #floor-limits { display: block; }
#floor-limits-poly {
  fill: rgba(0, 255, 0, 0.15);
  stroke: rgba(0, 255, 0, 0.9);
  stroke-width: 0.3;
  vector-effect: non-scaling-stroke;
}

.hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: rgba(15, 15, 18, 0.92);
  border: 1px solid rgba(255, 210, 90, 0.4);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.hotspot:hover .hotspot-tooltip, .hotspot:focus-visible .hotspot-tooltip, .hotspot.gp-focus .hotspot-tooltip {
  opacity: 1;
}

/* Panneau de gauche — remplit toute la bande webtoon, pas une petite boite
   flottante. Police "affiche BD" (Impact/Arial Black, dispo nativement sur
   Windows) pour les titres, texte normal pour le detail des lignes. */
#side-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  /* Largeur calee en JS (applyCoverSizing) sur la position reelle du bord
     gauche de l'image, pour remplir TOUTE la largeur de la bande webtoon -
     pas une largeur fixe arbitraire. Demande par Jonathan le 05/08/2026 :
     "plus de place en largeur, pas en hauteur". */
  width: 340px;
  padding: 1.5em 1.9em;
  /* Scroll en secours (11/08/2026, demande par Jonathan : "la barre
     laterale n'est pas responsive, on ne peut pas la scroller") : le fit
     automatique (fitSidePanel(), voir game.js) reduit deja la police pour
     que tout tienne sans scroll sur la plupart des ecrans - mais sur les
     tout petits ecrans (mobile portrait) meme la taille mini (9px) peut ne
     pas suffire. Avant : overflow:hidden, le contenu qui debordait etait
     juste invisible/inaccessible. Overflow-x reste hidden (la largeur est
     deja garantie par applyCoverSizing()/PANEL_MIN_WIDTH, pas de debordement
     horizontal attendu). */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 5;
  /* Base de taille de police du panneau, RECALCULEE EN JS (fitSidePanel) a
     chaque rendu : elle diminue automatiquement si le contenu deborde de la
     fenetre, augmente si de la place est disponible. Tout ce qui suit est
     exprime en "em" (relatif a cette base), donc tout le panneau (texte,
     barres, espacements) grandit/retrecit ensemble et proportionnellement -
     evite de retoucher des valeurs fixes a chaque fois qu'une section est
     ajoutee (categorie combat, coups speciaux, etc. le 05/08/2026). */
  font-size: 16px;
}

.panel-title {
  font-family: Impact, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: 1.65em;
  letter-spacing: 2px;
  color: #ffd25a;
  text-shadow: 0 0 10px rgba(255, 178, 84, 0.5), 2px 2px 0 rgba(0,0,0,0.6);
  -webkit-text-stroke: 1px rgba(0,0,0,0.5);
  margin: 0 0 0.55em 0;
  padding-bottom: 0.35em;
  border-bottom: 2px solid rgba(255, 178, 84, 0.45);
}
/* Espacement ENTRE les sections (Besoins / Categorie de combat /
   Statistiques de combat / Coups speciaux) - plus large que l'espacement
   interne d'une section, demande par Jonathan le 05/08/2026. */
.panel-section + .panel-section { margin-top: 1.3em; }

/* Niveau est maintenant un statRow() standard dans son propre
   .panel-section - meme style que tout le reste par construction, et
   l'espacement avec BESOINS vient automatiquement de la regle
   ".panel-section + .panel-section" ci-dessus. */

.stat-row {
  margin: 0.45em 0;
  padding-left: 0.5em;
}
.stat-row .stat-label-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.95em;
  margin-bottom: 0.2em;
}
.stat-row .stat-name {
  font-weight: 600; letter-spacing: 0.4px;
  color: #f0e4d4;
}
.stat-icon {
  display: inline-block;
  margin-right: 0.4em;
  font-style: normal;
  filter: saturate(1.15);
}
.stat-row .stat-value {
  color: #ffd25a;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}
.stat-bar-track {
  height: 0.6em;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  width: 100%; /* etire toute la largeur disponible de la bande, pas une colonne etroite */
}
.stat-bar-fill {
  height: 100%;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #b8471f, #ffb254);
  /* Rallongee de 0.25s a 0.8s (10/08/2026, demande par Jonathan : "on voit
     la barre augmenter légèrement") - assez lente pour etre visible sur un
     petit gain (+2 a +5%), toujours rapide pour les autres usages. */
  transition: width 0.8s ease;
}

/* Emplacements "vides" empiles (categorie de combat, coups speciaux) - look
   "champ de texte non modifiable" plutot que carre, demande par Jonathan le
   05/08/2026 : ce seront des noms/textes, pas des images, donc des
   rectangles etires en largeur. */
.combat-slots {
  display: flex; flex-direction: column; gap: 0.45em;
  margin-bottom: 4px;
}
.combat-slot {
  width: 100%;
  height: 2.3em;
  border: 1px solid rgba(255, 178, 84, 0.35);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #7a6a55;
  text-align: center;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
}
.combat-slot.filled {
  border-style: solid;
  color: #ffd25a;
  border-color: rgba(255, 178, 84, 0.7);
  background: rgba(255, 178, 84, 0.08);
}
/* Coups speciaux pas encore debloques (10/08/2026) : visibles mais grises,
   pas caches - un se debloque tous les 10 niveaux. */
.combat-slot.locked {
  border-style: dashed;
  color: #4a4438;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0.6;
}
/* Surbrillance manette (10/08/2026, BUG CORRIGE - aucune ne s'affichait,
   voir tabindex="0" ajoute cote game.js) - meme traitement que
   .save-slot/.char-tile.gp-focus, opacity remise a 1 meme si "locked" pour
   bien voir ou on est malgre le grisage. */
.combat-slot.gp-focus {
  outline: 2px solid #ffd25a;
  box-shadow: 0 0 10px rgba(255, 210, 90, 0.6);
  opacity: 1;
}

/* Fenetre modale d'interaction */
#modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  /* z-index releve le 06/08/2026 (etait 20, sous #title-screen a 150) :
     une modale ouverte depuis le menu de l'ecran titre s'affichait
     invisible, DERRIERE l'ecran titre - restait "ouverte" en silence, puis
     reapparaissait par surprise par-dessus le combat des que l'ecran titre
     disparaissait. Signale par Jonathan ("un truc apparait pendant le
     combat"). Place au-dessus de tous les ecrans/videos de la sequence de
     demarrage (max 280), sous les boutons de dev toujours visibles (999). */
  z-index: 500;
}
#modal-backdrop.open { display: flex; }
#modal {
  background: #17171b;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 22px 26px;
  min-width: 300px; max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#modal h2 { margin: 0 0 10px 0; font-size: 18px; color: #ffd25a; }
#modal p { font-size: 14px; color: #ccc; margin: 0 0 14px 0; }
.settings-group-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: #ffb254; margin: 16px 0 6px 0;
}
.settings-group:first-of-type .settings-group-title { margin-top: 4px; }
.modal-btn {
  display: block; width: 100%;
  background: #2a2a30; color: #eee;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 14px; text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-btn:hover { background: #3a3a42; }
.modal-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.modal-close {
  margin-top: 8px;
  background: none; border: none; color: #888;
  cursor: pointer; font-size: 13px;
}
/* Navigation manette dans les modales (07/08/2026) - meme principe que
   .menu-btn.gp-focus, classe geree en JS (setGpFocus() dans game.js). */
.modal-btn.gp-focus, .modal-close.gp-focus {
  outline: 3px solid #ffd25a;
  box-shadow: 0 0 14px rgba(255, 210, 90, 0.7);
}
.modal-btn.gp-focus { background: #3a3a42; }

#scene-label {
  position: absolute; bottom: 26px; left: 68px;
  /* 68px = degage #settings-btn (rond, 42px, colle a gauche) - chevauchait
     "Salle d'entrainement clandestine"/"Squat" avec l'icone parametres,
     signale par Jonathan le 10/08/2026 (capture). Largeur maxi calee sur
     le panneau lateral (340px) moins la marge de gauche, pour ne jamais
     deborder sur l'image. */
  max-width: 260px;
  font-size: 12px; color: #888;
  z-index: 5;
}

/* Bouton "Quitter" visible en permanence (au lieu d'un hotspot invisible
   cache dans un coin) pour sortir d'une scene secondaire (entrainement,
   ring...) - trouve illisible/introuvable par Jonathan le 05/08/2026
   ("j'ai clique sur le truc d'entrainement mais je peux plus sortir"). */
#scene-back-btn {
  position: absolute; top: 18px; left: 18px;
  display: none;
  background: rgba(10, 10, 12, 0.75);
  border: 1px solid rgba(255, 178, 84, 0.5);
  color: #ffd25a;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 6;
}
#scene-back-btn:hover { background: rgba(255, 178, 84, 0.18); }
#scene-back-btn.show { display: block; }

/* Bouton "Passer" (06/08/2026) : visible uniquement sur combat_rue, saute
   directement a la video "scene 2 fin + tuto" -> salle d'entrainement.
   Haut-droite (remis apres essai a gauche - demande par Jonathan). */
#skip-combat-btn {
  position: absolute; top: 18px; right: 18px;
  display: none;
  background: rgba(10, 10, 12, 0.75);
  border: 1px solid rgba(255, 178, 84, 0.5);
  color: #ffd25a;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 6;
}
#skip-combat-btn:hover { background: rgba(255, 178, 84, 0.18); }
#skip-combat-btn.show { display: block; }

#scene2-tuto-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 270;
  background: #000;
  display: none;
  object-fit: contain;
}
#scene2-tuto-video.show { display: block; }

/* Tuto salle d'entrainement (10/08/2026) - meme traitement que
   #scene2-tuto-video juste au-dessus, jouee juste apres. */
#entrainement-tuto-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 270;
  background: #000;
  display: none;
  object-fit: contain;
}
#entrainement-tuto-video.show { display: block; }

/* Ecran VS diagonal (10/08/2026, demande par Jonathan) : masque le
   #combat3d-canvas-wrap pendant le chargement (perso+animations) PUIS
   pendant la video ROUND 1 (z-index 275, mix-blend-mode:screen, se
   compose PAR-DESSUS ce fond opaque sans probleme) - les combattants,
   deja charges/poses en dessous, ne doivent etre reveles qu'a la toute
   fin de cette video, pas des la fin du chargement. z-index 270, sous la
   video de round (275) mais au-dessus du canvas 3D normal. */
#vs-loading-screen {
  display: none;
  position: fixed; inset: 0;
  /* z-index 258 (10/08/2026, corrige) : sous #ready-to-fight-video (260),
     qui joue maintenant EN PARALLELE du chargement (voir playReadyToFight()
     dans game.js) - sinon cet ecran passait AU-DESSUS et cachait la video
     depuis le tout debut. Reste au-dessus du canvas 3D normal, et sous la
     video de round (275) qui doit s'afficher par-dessus lui ensuite. */
  z-index: 258;
  background: #000;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#vs-loading-screen.show { display: block; }
#vs-loading-screen.visible { opacity: 1; }
/* v2 (10/08/2026, capture de Jonathan a l'appui) : le "cover" + clip-path
   etirait chaque vignette sur TOUT l'ecran et les coupait en 2 au niveau
   du visage - moche, illisible. Chaque vignette est maintenant affichee
   ENTIERE (contain, pas de decoupe), en taille fixe, une par coin oppose. */
#vs-portrait-player, #vs-portrait-opponent {
  position: absolute;
  width: 68vh; height: 68vh; /* vignettes carrees - doublees (10/08/2026) */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.6));
}
#vs-portrait-player { top: 6vh; left: 6vh; }
#vs-portrait-opponent { bottom: 6vh; right: 6vh; }

/* .result-video (08/08/2026) : partagee par #you-win-video et
   #you-lose-video, meme traitement (mp4 CapCut fond noir pur -> "screen"
   pour le rendre invisible, meme cadrage centre). */
.result-video {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw; height: 50vh;
  z-index: 275;
  background: transparent;
  display: none;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: screen;
}
.result-video.show { display: block; }

/* Bug corrige (10/08/2026, signale par Jonathan : "carre jaune" visible
   autour de YOU WIN, contrairement a round1-5/draw) - verifie (pas devine,
   comparaison des valeurs de pixel via ffmpeg) : le halo de you-win.mp4/
   you-lose.mp4 a un fond qui degrade vers un gris fonce en carre net
   (pas noir pur jusqu'au bord comme draw.mp4), visible via le blend
   "screen". Fix : contraste augmente SPECIFIQUEMENT sur ces 2 videos
   (ecrase les tons sombres vers le vrai noir, sans affecter le blanc/jaune
   du texte) - teste sur une image extraite, le carre devient un halo qui
   se fond proprement. Round/draw n'en ont pas besoin (deja un fond noir
   pur), pas applique dessus pour ne rien changer inutilement.
*/
#you-win-video, #you-lose-video {
  filter: contrast(1.6) brightness(0.95);
}

/* Vrai cache noir opaque (06/08/2026) pour le temps de pause voulu entre la
   fin de "scene 2 fin + tuto" et la salle d'entrainement - passer l'opacite
   de la video a 0 laissait voir le decor du dessous (le vieux combat_rue),
   ca ne suffisait pas. */
#post-tuto-black {
  display: none;
  position: fixed; inset: 0;
  z-index: 280;
  background: #000;
}
#post-tuto-black.show { display: block; }

/* Ecran "Dormir" (11/08/2026, demande par Jonathan) : fondu au noir 2s
   (corrige de 1s a 2s le 11/08/2026 soir), texte du gain d'energie centre,
   bouton "Passer" en haut a droite (meme style que les autres boutons
   "Passer" du jeu). show=affiche (display), visible=fondu d'entree (meme
   pattern que #vs-loading-screen). Duree ICI DOIT rester synchronisee avec
   SLEEP_VISUAL_FADE_MS dans game.js (setTimeout avant de retirer "show"). */
#sleep-screen {
  display: none;
  position: fixed; inset: 0;
  z-index: 280;
  background: #000;
  opacity: 0;
  transition: opacity 2s ease;
  align-items: center;
  justify-content: center;
}
#sleep-screen.show { display: flex; }
#sleep-screen.visible { opacity: 1; }
#sleep-gain-text {
  color: #ffd25a;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
#sleep-skip-btn {
  position: absolute; top: 18px; right: 18px;
  background: rgba(10, 10, 12, 0.75);
  border: 1px solid rgba(255, 178, 84, 0.6);
  color: #ffd25a;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
#sleep-skip-btn:hover { background: rgba(255, 178, 84, 0.18); }

/* Ecrans manger/boire/soins (12/08/2026) - copie exacte du style de
   #sleep-screen ci-dessus, un bloc dedie par ecran (pas de classe
   partagee), pour rester libre de retoucher un seul des 4 plus tard. */
#manger-screen, #boire-screen, #soins-screen {
  display: none;
  position: fixed; inset: 0;
  z-index: 280;
  background: #000;
  opacity: 0;
  transition: opacity 2s ease;
  align-items: center;
  justify-content: center;
}
#manger-screen.show, #boire-screen.show, #soins-screen.show { display: flex; }
#manger-screen.visible, #boire-screen.visible, #soins-screen.visible { opacity: 1; }
#manger-gain-text, #boire-gain-text, #soins-gain-text {
  color: #ffd25a;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
#manger-skip-btn, #boire-skip-btn, #soins-skip-btn {
  position: absolute; top: 18px; right: 18px;
  background: rgba(10, 10, 12, 0.75);
  border: 1px solid rgba(255, 178, 84, 0.6);
  color: #ffd25a;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
#manger-skip-btn:hover, #boire-skip-btn:hover, #soins-skip-btn:hover { background: rgba(255, 178, 84, 0.18); }

/* ============================================================
   BULLE DE TUTO (06/08/2026) : intro sequentielle salle d'entrainement
   (banc/sac/ring), une bulle a la fois, positionnee au-dessus du hotspot
   concerne (voir positionTutoBubble() dans game.js).
   ============================================================ */
#tuto-bubble {
  display: none;
  position: fixed;
  z-index: 30;
  max-width: 280px;
  background: rgba(10, 10, 12, 0.92);
  border: 1px solid rgba(255, 178, 84, 0.6);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
#tuto-bubble.show { display: block; }
#tuto-bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: rgba(10, 10, 12, 0.92);
  border-bottom: 0;
}
.tuto-text {
  color: #f2e6d0;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}
.tuto-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tuto-actions button {
  background: none;
  border: 1px solid rgba(255, 178, 84, 0.5);
  color: #ffd25a;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.tuto-actions button:hover { background: rgba(255, 178, 84, 0.18); }
#tuto-skip { border-color: rgba(255, 255, 255, 0.25); color: #999; }

/* ============================================================
   BULLE DE TUTO COMBAT (06/08/2026) : etapes bouton-par-bouton sur
   combat_rue (premier combat), pilotee par combat3d.js. Position FIXE en
   haut au centre (contrairement a #tuto-bubble qui suit un hotspot) - pas
   de hotspot a suivre ici, le "point d'interet" c'est le personnage 3D
   au centre de l'ecran.
   ============================================================ */
#combat-tuto-bubble {
  display: none;
  position: fixed;
  z-index: 30;
  left: 50%;
  /* Centre de l'ecran (11/08/2026, demande par Jonathan : "il faudrait
     qu'ils soient au moins le double de taille et au milieu de l'ecran" -
     avant discret en haut, au-dessus du round, pas assez visible pour
     comprendre que c'est le tuto combat). */
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 640px;
  background: rgba(10, 10, 12, 0.92);
  border: 1px solid rgba(255, 178, 84, 0.6);
  border-radius: 16px;
  padding: 28px 32px;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  text-align: center;
}
#combat-tuto-bubble.show { display: block; }
#combat-tuto-bubble .tuto-text { font-size: 28px; line-height: 1.35; margin-bottom: 20px; }
#combat-tuto-bubble .tuto-actions { justify-content: center; gap: 16px; }
#combat-tuto-bubble .tuto-actions button { font-size: 18px; padding: 12px 24px; }

/* ============================================================
   HUD DE COMBAT — maquette (ring_combat), donnees factices pour
   l'instant, rien de fonctionnel (pas de vrai combat code). Demande par
   Jonathan le 05/08/2026 : noms en haut a gauche/droite, barres de vie au
   centre, chrono+round au milieu, stamina sous chaque nom, 3 coups
   speciaux en bas, portrait = carre vide en attendant les vrais visuels.
   ============================================================ */
#combat-hud {
  display: none;
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  font-family: "Segoe UI", Arial, sans-serif;
}
#combat-hud.show { display: block; }

/* HUD entrainement (10/08/2026, demande par Jonathan) : chrono + popup de
   recompense, SEPARE du combat-hud ci-dessus (pas de PV/rounds). */
#training-timer {
  display: none;
  position: absolute; top: 66px; left: 0; right: 0;
  text-align: center;
  z-index: 6;
  pointer-events: none;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
#training-timer.show { display: block; }

/* Barre de progression entrainement (13/08/2026 nuit, demande par
   Jonathan) : se remplit a chaque coup lance sur le sac / chaque traction
   sur le banc - pleine = session terminee en avance, avant le chrono. */
#training-progress {
  display: none;
  position: absolute; top: 118px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 14px;
  z-index: 6;
  pointer-events: none;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 7px;
  overflow: hidden;
}
#training-progress.show { display: block; }
#training-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb254, #ffd25a);
  transition: width 0.15s ease-out;
}

#training-reward-popup {
  display: none;
  position: absolute; top: 140px; left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
  background: rgba(10,10,12,0.85);
  border: 1px solid rgba(255,178,84,0.6);
  border-radius: 10px;
  padding: 14px 22px;
  color: #ffd25a;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#training-reward-popup.show { display: block; opacity: 1; }

/* ============================================================
   COMBAT 3D (Three.js) — perso David/James riggés+animés (Mixamo) par-dessus
   le décor "combat rue.png" existant, controle a la manette (voir
   combat3d.js). z-index entre #scene-img (fond) et #combat-hud/#scene-back-btn
   (au-dessus, deja a 6). Ajoute le 06/08/2026.
   ============================================================ */
#combat3d-canvas-wrap {
  display: none;
  position: fixed; inset: 0;
  z-index: 3;
  pointer-events: none;
}
#combat3d-canvas-wrap.show { display: block; }
#combat3d-canvas { width: 100%; height: 100%; display: block; }
#combat3d-status {
  position: absolute; left: 18px; bottom: 14px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Overlay de debug deplacement (06/08/2026) : valeurs brutes de la manette
   + choix du code affiches EN DIRECT, en plein milieu de l'ecran, pour
   diagnostiquer le bug "play-pause" du deplacement au lieu de deviner sans
   voir. Demande explicitement par Jonathan bien visible (pas discret dans
   un coin) - reste affiche en permanence pendant le combat tant qu'on n'a
   pas resolu le bug. */
#combat3d-debug {
  display: none; /* 07/08/2026 : diagnostic termine (ecart pieds/sol mesure a 0.064, corrige dans Fighter.load()) - recache */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  margin: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #00ff66;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid #00ff66;
  border-radius: 10px;
  padding: 16px 22px;
  white-space: pre;
  pointer-events: none;
  text-align: left;
}

.hud-top {
  /* top decale sous le bouton "Quitter" (top:18px, ~40px de haut) pour ne
     pas chevaucher le nom du combattant de gauche - bug trouve et corrige
     le 05/08/2026 (visible sur la capture de test). */
  position: absolute; top: 66px; left: 18px; right: 18px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.hud-fighter {
  display: flex; align-items: flex-start; gap: 10px;
  width: 38%;
  max-width: 420px;
}
.hud-fighter.right { flex-direction: row-reverse; text-align: right; }
.hud-portrait {
  width: 52px; height: 52px;
  flex: none;
  border: 1px dashed rgba(255, 178, 84, 0.5);
  border-radius: 6px;
  background: rgba(10, 10, 12, 0.55);
  background-size: cover;
  background-position: center top;
}
.hud-fighter-info { flex: 1; min-width: 0; }
.hud-name {
  color: #ffd25a;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-bar-track {
  height: 11px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  margin-bottom: 4px;
}
.hud-bar-fill {
  height: 100%;
  border-radius: 5px;
}
.hud-bar-fill.hp { background: linear-gradient(90deg, #e8433a, #ff8a6b); }
.hud-bar-fill.stamina { background: linear-gradient(90deg, #2f8f4e, #8de08a); }
.hud-fighter.right .hud-bar-fill { margin-left: auto; }
.hud-bar-track.small { height: 7px; }

/* Flash "super refuse, pas assez de stamina" (11/08/2026, demande par
   Jonathan) - voir "kcm:stamina-denied" dans game.js. */
@keyframes stamina-denied-flash {
  0%, 100% { box-shadow: none; }
  25%, 75% { box-shadow: 0 0 0 2px #ff4a3d inset, 0 0 8px 1px #ff4a3d; }
  50% { box-shadow: none; }
}
.hud-bar-fill.stamina-denied-flash { animation: stamina-denied-flash 0.5s ease-in-out; }

/* Ronds de round (07/08/2026, demande par Jonathan) : "dores comme les
   encadres de l'accueil" (meme couleur #ffd25a que .menu-btn/.title-menu),
   vides (juste le contour) au depart, remplis en plein quand ce combattant
   a gagne ce round-la. Assez visible sans etre gros - 10px. */
.hud-round-dots {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.hud-fighter.right .hud-round-dots { justify-content: flex-end; }
.hud-round-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid #ffd25a;
  background: transparent;
  transition: background 0.25s ease;
}
.hud-round-dot.filled { background: #ffd25a; }

.hud-center {
  /* Bloc independant de .hud-top (11/08/2026, demande par Jonathan :
     "le HUD est exactement au meme endroit que le round 1") - avant, enfant
     du meme flex row que les 2 blocs joueur/adversaire (align-items:
     flex-start), donc colle a la meme hauteur que les portraits/PV.
     Position par defaut = MEME hauteur que .hud-top (top:66px) : reproduit
     l'apparence PC d'origine (confirmee "parfaite" par Jonathan) - voir
     #combat-hud.compact ci-dessous pour l'ecart applique UNIQUEMENT sur
     petit ecran (mobile paysage, ex. iPhone Safari - pas de vrai moyen de
     cibler "Safari" en CSS, on cible la vraie cause : la hauteur d'ecran
     reelle, voir COMPACT_HUD_MAX_HEIGHT dans game.js). */
  position: absolute;
  top: 66px;
  padding-top: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
#combat-hud.compact .hud-center { top: 30%; }
.hud-round {
  color: #ffd25a;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.hud-timer {
  /* Plus de cadre (demande par Jonathan le 05/08/2026) : juste le texte,
     en tres gros, avec une ombre portee pour rester lisible sur l'image. */
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.hud-specials {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
.hud-special-slot {
  width: 54px; height: 54px;
  border-radius: 8px;
  border: 1px solid rgba(255, 178, 84, 0.35);
  background: rgba(10, 10, 12, 0.6);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 210, 90, 0.5);
  font-size: 11px;
  text-align: center;
}

/* Bouton Parametres (roue), tout en bas a gauche de la page - demande par
   Jonathan le 05/08/2026 (deconnexion, suppression de compte, pseudo...). */
#settings-btn {
  position: fixed; bottom: 16px; left: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 178, 84, 0.4);
  background: rgba(255,255,255,0.05);
  color: #ffd25a;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s, transform 0.15s;
}
#settings-btn:hover {
  background: rgba(255, 178, 84, 0.15);
  transform: rotate(25deg);
}