/* ============================================================
   VOIDBELT — SHUTDOWN
   Roulage libre dans un district a la grille. La scene 3D prend
   tout l'ecran ; l'interface reprend le vocabulaire du reste du
   site (Archivo Black, Space Mono, orange et cyan sur noir) et
   se pose par-dessus en cadres nets, sans arrondi.
   ============================================================ */

.sbody{ background:#06070a }

#city{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; display:block;
}

/* voile : vignette et assombrissement des bords, pour asseoir le rendu */
.sveil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 130% 108% at 50% 52%, transparent 54%, rgba(6,7,10,.62) 100%),
    linear-gradient(180deg, rgba(6,7,10,.55) 0%, transparent 18%, transparent 80%, rgba(6,7,10,.5) 100%);
}

.stage{ pointer-events:none }
.stop, .sbtn, .smodal, .sbrand, .skeys{ pointer-events:auto }

.view.shutdown{ overflow:hidden; position:relative }

/* ============================================================
   BANDEAU HAUT
   ============================================================ */

.stop{
  position:absolute; z-index:5; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:space-between; gap:1.4em;
  padding:.85em clamp(14px,2.6vmin,44px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,10,11,.9), transparent);
  font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase;
}
.sbrand{
  display:inline-flex; align-items:center; gap:.9em;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:1.5em; letter-spacing:.04em; color:var(--bone); text-decoration:none;
}
.sbrand i{ width:2.2em; height:2px; background:var(--orange) }
.sbrand:hover{ color:var(--orange) }
.ssector{ color:var(--txt-3) }
.ssector span{ color:var(--cyan); margin-right:1em }
.stop-a{ display:flex; align-items:center; gap:1em }

/* l'etat de la manette : gris tant qu'aucune n'a parle, cyan ensuite */
.spad{
  display:inline-flex; align-items:center; gap:.6em;
  color:var(--txt-3); white-space:nowrap;
}
.spad::before{
  content:""; width:.6em; height:.6em; flex:none;
  transform:rotate(45deg); box-shadow:inset 0 0 0 1px var(--txt-3);
}
.spad.on{ color:var(--cyan) }
.spad.on::before{ background:var(--cyan); box-shadow:none }

/* ============================================================
   BOUTONS
   ============================================================ */

.sbtn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.7em 1.2em; border:1px solid var(--line);
  background:rgba(10,10,11,.82); color:var(--txt-2);
  font:inherit; font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:color .12s, border-color .12s, background .12s, transform .12s;
}
.sbtn:hover, .sbtn:focus-visible{ color:var(--bone); border-color:var(--orange) }
.sbtn:disabled{ opacity:.4; cursor:not-allowed }
.sbtn.solid{
  border-color:var(--bone); background:var(--orange); color:var(--black);
  font-family:'Archivo Black','Arial Black',sans-serif; letter-spacing:.14em;
  padding:.95em 1.6em; box-shadow:.45em .45em 0 rgba(237,231,218,.16);
}
.sbtn.solid:hover{ transform:translate(-2px,-2px); box-shadow:.65em .65em 0 rgba(237,231,218,.24); color:var(--black) }
.sbtn.solid i{ font-style:normal }
.sbtn .kbd{ font-size:.72em }

/* ============================================================
   TABLEAU DE BORD
   ============================================================ */

.shud{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
}
.shud-br{ position:absolute; right:clamp(14px,2.6vmin,44px); bottom:clamp(16px,3vmin,48px); text-align:right }
.shud-bl{ position:absolute; left:clamp(14px,2.6vmin,44px); bottom:clamp(16px,3vmin,48px) }

.shealth{
  position:absolute; top:clamp(82px,10vmin,126px); right:clamp(14px,2.6vmin,44px);
  width:min(260px,36vw); display:flex; flex-direction:column; gap:.55em;
  text-align:right;
}
.shp{
  display:grid; grid-template-columns:1fr auto; gap:.25em .8em;
  padding:.55em .7em; border-right:3px solid var(--cyan);
  background:linear-gradient(90deg,rgba(10,10,11,.18),rgba(10,10,11,.78));
  color:var(--txt-2);
}
.shp.local{ border-right-color:var(--orange); color:var(--bone) }
.shp.dead{ border-right-color:#ff3131; opacity:.68 }
.shp-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.shp-value{ color:var(--bone); font-variant-numeric:tabular-nums }
.shp.dead .shp-value{ color:#ff5c4d }
.shp-track{ grid-column:1 / -1; height:3px; background:rgba(237,231,218,.16) }
.shp-track i{ display:block; width:var(--hp); height:100%; background:var(--cyan); transition:width .16s }
.shp.local .shp-track i{ background:var(--orange) }
.shp.dead .shp-track i{ background:#ff3131 }

.stouch{ display:none; position:absolute; inset:0; pointer-events:none }
.stouch-steer,.stouch-drive{ position:absolute; bottom:86px; display:flex; gap:10px; pointer-events:auto }
.stouch-steer{ left:16px }
.stouch-drive{ right:16px; align-items:flex-end }
.stouch button{
  width:58px; height:58px; border:1px solid rgba(237,231,218,.5); border-radius:50%;
  background:rgba(10,10,11,.66); color:var(--bone); font:700 11px 'Space Mono',monospace;
  box-shadow:inset 0 0 0 3px rgba(10,10,11,.4); touch-action:none; user-select:none;
}
.stouch button.gas{ width:72px; height:72px; border-color:var(--orange); color:var(--orange) }
.stouch button.on{ background:var(--orange); color:var(--black); transform:scale(.94) }

.sspeed{ display:flex; align-items:baseline; justify-content:flex-end; gap:.5em }
.sspeed b{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:4.4em; line-height:.82; letter-spacing:.01em;
  color:var(--bone); font-variant-numeric:tabular-nums;
  text-shadow:0 0 1.4em rgba(6,7,10,.95);
}
.sspeed small{ font-size:1em; letter-spacing:.3em; color:var(--txt-3) }
/* le rapport engage : N, D ou R, dans un carre a part */
.sspeed em{
  font-style:normal; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  min-width:2.4em; margin-left:.7em; padding:.2em;
  border:1px solid var(--line); background:rgba(10,10,11,.6);
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:1.7em; letter-spacing:0; color:var(--orange);
}

/* le rappel des commandes, en bas a gauche */
.skeys{ display:flex; flex-direction:column; gap:.35em; color:var(--txt-3) }
.skeys span{ display:flex; align-items:center; gap:.7em }
.skeys i{
  font-style:normal; flex:none; min-width:2.2em; padding:.15em .45em;
  border:1px solid var(--line); background:rgba(10,10,11,.6);
  text-align:center; color:var(--cyan);
}

/* ============================================================
   PANNEAUX : chargement, depart, pause
   ============================================================ */

.smodal{
  position:absolute; inset:0; z-index:8;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(70px,9vmin,120px) clamp(16px,4vmin,60px) clamp(16px,4vmin,60px);
  background:linear-gradient(180deg, rgba(6,7,10,.86), rgba(6,7,10,.94));
  overflow:auto;
}
.smodal[hidden]{ display:none }

.smodal-in{
  width:min(96ch, 100%);
  border:1px solid var(--line); border-left:var(--edge) solid var(--orange);
  background:rgba(10,10,11,.92);
  padding:clamp(18px,3.4vmin,44px);
}
.smodal-in.narrow{ width:min(56ch, 100%) }

.skicker{
  display:flex; align-items:center; gap:.8em;
  font-size:var(--fs-xs); letter-spacing:.3em; text-transform:uppercase; color:var(--txt-3);
}
.skicker i{ width:.62em; height:.62em; background:var(--orange); transform:rotate(45deg) }

.stitle{
  margin:.35em 0 .3em;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(38px,8.4vmin,104px); line-height:.92; letter-spacing:-.02em;
}
.stitle span{ color:var(--bone) }
.stitle em{ font-style:normal; color:var(--orange) }

.ssub{
  margin:.35em 0 1em;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(20px,3.2vmin,38px); letter-spacing:.02em; color:var(--bone);
}

.slede{ max-width:62ch; color:var(--txt-2); margin-bottom:1.6em }

/* --- barre de chargement --- */
.sbar{ height:3px; background:rgba(237,231,218,.14); overflow:hidden }
.sbar i{ display:block; height:100%; width:0; background:var(--orange); transition:width .25s ease }

/* --- les deux colonnes de commandes --- */
.sgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(28ch,100%),1fr)); gap:clamp(14px,2.6vmin,34px) }
.scol h2{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cyan); padding-bottom:.5em; margin-bottom:.6em; border-bottom:1px solid var(--line);
}
.scol dl{ display:flex; flex-direction:column; gap:.3em; font-size:var(--fs-sm) }
.scol dl div{ display:flex; align-items:baseline; gap:1em }
.scol dt{
  flex:none; min-width:10ch; padding:.12em .5em;
  border:1px solid var(--line); background:rgba(237,231,218,.05);
  color:var(--txt); letter-spacing:.12em; text-transform:uppercase; font-size:.9em;
}
.scol dd{ color:var(--txt-3) }

.sstart{
  display:flex; align-items:center; flex-wrap:wrap; gap:1.2em;
  margin-top:clamp(18px,3vmin,34px);
}
.shint{ font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3) }
.smulti{ margin-top:1.4em; padding-top:1.1em; border-top:1px solid var(--line) }
.sfield{ display:flex; flex-direction:column; gap:.45em; max-width:28ch; color:var(--txt-3); font-size:var(--fs-xs); letter-spacing:.2em }
.sfield input, .sjoin input{
  min-width:0; border:1px solid var(--line); background:rgba(6,7,10,.84); color:var(--bone);
  padding:.72em .85em; font:inherit; letter-spacing:.14em; text-transform:uppercase; outline:none;
}
.sfield input:focus, .sjoin input:focus{ border-color:var(--cyan) }
.sjoin{ display:flex; gap:.55em }
.sjoin input{ width:8ch; text-align:center; letter-spacing:.28em }
.srooms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.55em; margin-top:.8em }
.sroom{ justify-content:space-between; width:100% }
.sroom b{ color:var(--cyan); letter-spacing:.25em }
.sroom small{ color:var(--txt-3) }

.sset-a{ display:flex; flex-wrap:wrap; gap:.8em }
.spause-room{ width:100%; margin:0 0 1.2em; padding:.8em 1em; border:1px solid var(--line); background:rgba(237,231,218,.04); color:var(--txt-3); font:inherit; letter-spacing:.2em; text-align:left; cursor:pointer }
.spause-room b{ float:right; color:var(--cyan); font-size:1.25em; letter-spacing:.3em }

.scredit{
  margin-top:1.6em; padding-top:1em; border-top:1px solid var(--line);
  font-size:var(--fs-xs); line-height:1.7; color:var(--txt-3);
}
.scredit a{ color:var(--txt-2) }
.scredit a:hover{ color:var(--orange) }

/* ============================================================
   PETITS ECRANS — on garde la vitesse, on retire le bavardage
   ============================================================ */

@media (max-width: 820px), (max-height: 520px){
  .ssector, .skeys{ display:none }
  .sspeed b{ font-size:3.2em }
  .shealth{ top:72px; width:min(210px,48vw); font-size:9px }
}
@media (pointer:coarse){
  .stouch{ display:block }
  .shud-br{ bottom:170px }
}