/* ============================================================================
   ROCKET BALL — INTERFACE (HUD + menu)
   Thème : « sobre et sportif » (choix de Guigui), palette cyan/magenta,
   équipes bleu vs orange, lisibilité maximale en plein vol.
   ========================================================================== */

:root{
  --bleu:      #2f7bff;
  --bleu-clair:#8ec5ff;
  --orange:    #ff7a1a;
  --orange-clair:#ffc48a;
  --neon-a:    #22e0ff;
  --neon-b:    #ff3bd0;
  --fond:      #070c18;
  --texte:     #eaf2ff;
  --texte-dim: #8fa4c4;
  --verre:     rgba(12,20,38,.62);
  --ligne:     rgba(255,255,255,.12);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%; height:100%; overflow:hidden;
  background:var(--fond); color:var(--texte);
  font-family:"Segoe UI", Inter, system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  touch-action:none;              /* le jeu capte les gestes */
}

#scene{ position:fixed; inset:0; }
#scene canvas{ display:block; width:100%; height:100%; }

.cache{ display:none !important; }

/* ═══════════════════════════════ HUD ═══════════════════════════════════ */

#hud{ position:fixed; inset:0; pointer-events:none; z-index:10; }

/* --- Bandeau du haut : score / chrono --- */
.bandeau{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  background:var(--verre);
  border:1px solid var(--ligne);
  border-radius:14px;
  padding:8px 16px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 28px rgba(0,0,0,.42);
}
.equipe{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.6px; }
.equipe .nom{ font-size:12px; color:var(--texte-dim); }
.equipe .points{
  font-size:26px; font-weight:900; font-variant-numeric:tabular-nums;
  min-width:38px; text-align:center; line-height:1;
}
.equipe.bleu .points{ color:var(--bleu-clair); text-shadow:0 0 14px rgba(47,123,255,.75); }
.equipe.orange .points{ color:var(--orange-clair); text-shadow:0 0 14px rgba(255,122,26,.75); }
.pastille{ width:11px; height:11px; border-radius:50%; }
.equipe.bleu .pastille{ background:var(--bleu); box-shadow:0 0 12px var(--bleu); }
.equipe.orange .pastille{ background:var(--orange); box-shadow:0 0 12px var(--orange); }

.chrono-boite{ text-align:center; padding:0 6px; }
.chrono{
  font-size:22px; font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:1px; line-height:1;
}
.chrono.prolongation{ color:#ff5c5c; text-shadow:0 0 16px rgba(255,92,92,.8); }
.fps{ font-size:10px; color:var(--texte-dim); font-variant-numeric:tabular-nums; margin-top:2px; }

/* --- Instruments du bas : boost circulaire + vitesse --- */
.instruments{
  position:absolute; bottom:22px; left:22px;
  display:flex; align-items:center; gap:12px;
  background:var(--verre); border:1px solid var(--ligne);
  border-radius:14px; padding:10px 14px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.jauge{ width:56px; height:56px; transform:rotate(-90deg); }
.jauge-fond{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:5; }
.jauge-arc{
  fill:none; stroke:var(--neon-a); stroke-width:5; stroke-linecap:round;
  transition:stroke-dashoffset .12s linear, stroke .25s;
  filter:drop-shadow(0 0 6px rgba(34,224,255,.85));
}
.jauge-arc.plein{ stroke:#ffd24a; filter:drop-shadow(0 0 8px rgba(255,210,74,.9)); }
.jauge-valeur{
  position:absolute; left:22px; bottom:42px; width:56px; text-align:center;
  font-size:16px; font-weight:900; font-variant-numeric:tabular-nums;
}
.vitesse{
  font-size:14px; font-weight:800; color:var(--texte-dim);
  font-variant-numeric:tabular-nums; min-width:78px;
}

/* --- Message central --- */
.message{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) scale(.9);
  font-size:clamp(24px,5vw,54px); font-weight:900; letter-spacing:2px;
  text-align:center; opacity:0; transition:opacity .22s, transform .22s;
  text-shadow:0 6px 34px rgba(0,0,0,.85);
  background:linear-gradient(100deg,#fff,var(--neon-a) 55%,var(--neon-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0 16px;
}
.message.visible{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* --- Flèche vers le ballon --- */
.fleche{
  position:absolute; font-size:34px; color:var(--neon-a);
  opacity:0; transition:opacity .2s;
  text-shadow:0 0 18px rgba(34,224,255,.95);
  pointer-events:none;
}
.fleche.visible{ opacity:.92; }

/* --- Mode de jeu (affiché dans le bandeau de score) --- */
.mode-jeu{
  font-size:10px; font-weight:800; letter-spacing:1.2px;
  color:var(--texte-dim); text-align:center; margin-top:1px;
}
.mode-jeu.portails{ color:#7fe9ff; text-shadow:0 0 10px rgba(34,224,255,.55); }

/* --- Commandes tactiles (mobile — priorité demandée par Guigui) ---
   DEUX sticks : gauche = DIRECTION, droit = GAZ (demande du 2026-09-27). */
.tactile{
  position:absolute; inset:auto 0 0 0; height:44%;
  display:none;                    /* activé en JS si écran tactile */
  align-items:flex-end; justify-content:space-between;
  padding:0 22px 26px; pointer-events:none;
}
.stick{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.stick-titre{
  font-size:11px; font-weight:800; letter-spacing:1.5px;
  color:rgba(255,255,255,.5); text-shadow:0 1px 3px #000;
}
.joystick{
  width:132px; height:132px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  background:radial-gradient(circle, rgba(34,224,255,.10), rgba(0,0,0,.28));
  display:grid; place-items:center; pointer-events:auto;
  touch-action:none;
}
.joystick-gaz{
  border-color:rgba(255,210,74,.55);
  background:radial-gradient(circle, rgba(255,210,74,.12), rgba(0,0,0,.28));
  /* Le stick de gaz ne se déplace que sur un axe : repère visuel vertical */
  background-image:
    linear-gradient(rgba(255,210,74,.18), rgba(255,210,74,.18)),
    linear-gradient(90deg, transparent 48%, rgba(255,210,74,.35) 48%, rgba(255,210,74,.35) 52%, transparent 52%);
  background-size:4px 70%, 100% 70%;
  background-position:center, center;
  background-repeat:no-repeat;
}
.joystick-halo{
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7fe9ff, var(--neon-a));
  box-shadow:0 0 22px rgba(34,224,255,.75);
}
.halo-gaz{
  background:radial-gradient(circle at 35% 30%, #ffd97a, #ff7a1a);
  box-shadow:0 0 22px rgba(255,122,26,.75);
}
.btn-boost{
  pointer-events:auto; touch-action:none;
  width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(255,210,74,.6);
  background:radial-gradient(circle at 35% 30%, #ffd97a, #ff7a1a);
  color:#26150a; font-weight:900; font-size:15px; letter-spacing:.5px;
  box-shadow:0 0 26px rgba(255,122,26,.5);
  font-family:inherit; cursor:pointer;
  margin-bottom:6px;
}
.btn-boost:active{ transform:scale(.94); }

/* ═══════════════════════════════ MENU ═══════════════════════════════════ */

#menu{
  position:fixed; inset:0; z-index:30;
  display:grid; place-items:center;
  background:
    radial-gradient(46% 52% at 22% 12%, rgba(34,224,255,.16), transparent 70%),
    radial-gradient(42% 48% at 80% 20%, rgba(255,59,208,.13), transparent 70%),
    linear-gradient(180deg, rgba(7,12,24,.86), rgba(7,12,24,.96));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  overflow-y:auto; padding:20px;
}
.menu-cadre{
  width:min(560px, 94vw);
  background:var(--verre); border:1px solid var(--ligne);
  border-radius:20px; padding:26px 24px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:apparait .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes apparait{ from{ opacity:0; transform:translateY(22px) scale(.97);} to{ opacity:1; transform:none;} }

.menu-cadre h1{
  font-size:clamp(30px,7vw,46px); font-weight:900; letter-spacing:-.5px;
  text-align:center; line-height:1.05;
}
.menu-cadre h1 span{
  background:linear-gradient(100deg, var(--neon-a), var(--neon-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accroche{
  text-align:center; color:var(--texte-dim); font-size:14px;
  margin:10px 0 20px;
}

.reglages{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.ligne{ display:flex; flex-direction:column; gap:6px; }
.ligne label{
  font-size:11px; font-weight:800; letter-spacing:1.3px;
  color:var(--texte-dim); text-transform:uppercase;
}
.choix{ display:flex; gap:7px; flex-wrap:wrap; }
.choix button{
  flex:1 1 auto; min-width:88px;
  font-family:inherit; font-size:13px; font-weight:700;
  padding:10px 8px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.05);
  border:1px solid var(--ligne); color:var(--texte);
  transition:background .18s, border-color .18s, transform .12s;
}
.choix button:hover{ background:rgba(34,224,255,.10); border-color:rgba(34,224,255,.4); }
.choix button:active{ transform:scale(.97); }
.choix button.actif{
  background:linear-gradient(135deg, rgba(34,224,255,.24), rgba(255,59,208,.20));
  border-color:var(--neon-a); color:#fff;
  box-shadow:0 0 18px rgba(34,224,255,.28);
}

.decoler{
  width:100%; font-family:inherit;
  font-size:19px; font-weight:900; letter-spacing:1.6px;
  padding:17px; border-radius:15px; cursor:pointer; border:none;
  color:#04141c;
  background:linear-gradient(100deg, var(--neon-a), #35b6ff 55%, var(--neon-b));
  box-shadow:0 12px 38px rgba(34,224,255,.38);
  transition:transform .14s, box-shadow .2s;
}
.decoler:hover{ transform:translateY(-2px); box-shadow:0 16px 48px rgba(34,224,255,.52); }
.decoler:active{ transform:translateY(0) scale(.985); }

.aide{
  margin-top:14px;
  font-size:12px; color:var(--texte-dim); line-height:1.85;
}
.aide b{ color:var(--neon-a); }
.aide-detail{ margin-top:16px; border-top:1px solid var(--ligne); padding-top:12px; }
.aide-detail summary{
  cursor:pointer; font-size:12.5px; font-weight:800; letter-spacing:.6px;
  color:var(--texte-dim); list-style:none; padding:6px 0;
  transition:color .18s;
}
.aide-detail summary:hover{ color:var(--neon-a); }
.aide-detail summary::-webkit-details-marker{ display:none; }
.aide-detail[open] summary{ color:var(--neon-a); margin-bottom:8px; }
.bloc-aide{ margin-bottom:12px; }
.bloc-aide > b{ display:block; margin-bottom:4px; color:#fff; font-size:12.5px; }

/* Curseurs de volume (4 réglages demandés par Guigui) */
.curseurs{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.curseur{ display:flex; align-items:center; gap:9px; }
.curseur span{
  font-size:11px; font-weight:700; color:var(--texte-dim);
  min-width:56px; text-transform:uppercase; letter-spacing:.6px;
}
.curseur input[type=range]{
  flex:1 1 auto; accent-color:var(--neon-a); height:20px; cursor:pointer;
}

/* --- Panneau de test (debug) --- */
#panneau-test{
  position:fixed; top:8px; right:8px; z-index:40; width:min(430px,94vw);
  max-height:90vh; overflow:auto;
  background:rgba(6,10,20,.94); border:1px solid var(--ligne);
  border-radius:12px; padding:12px; font-size:12px; line-height:1.55;
  color:var(--texte); pointer-events:auto;
}
#panneau-test hr{ border:none; border-top:1px solid var(--ligne); margin:8px 0; }
#panneau-test span{ color:var(--texte-dim); }

/* ═══════════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width:640px){
  .bandeau{ gap:8px; padding:6px 10px; top:8px; border-radius:12px; }
  .equipe .points{ font-size:21px; min-width:30px; }
  .equipe .nom{ display:none; }             /* on garde les chiffres, c'est l'essentiel */
  .chrono{ font-size:18px; }
  .instruments{ bottom:14px; left:12px; padding:8px 10px; gap:8px; border-radius:12px; }
  .jauge{ width:46px; height:46px; }
  .jauge-valeur{ left:12px; bottom:34px; width:46px; font-size:13px; }
  .vitesse{ font-size:12px; min-width:64px; }
  .menu-cadre{ padding:20px 16px; border-radius:16px; }
  .decoler{ font-size:16px; padding:15px; }
  /* Deux sticks sur 375 px : on réduit pour que les deux tiennent côte à côte
     sans se chevaucher ni sortir de l'écran (mesuré à 375 px). */
  .tactile{ padding:0 12px 18px; }
  .stick{ gap:5px; }
  .stick-titre{ font-size:9px; letter-spacing:1px; }
  .joystick{ width:104px; height:104px; }
  .joystick-halo{ width:44px; height:44px; }
  .btn-boost{ width:74px; height:74px; font-size:12px; margin-bottom:2px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}