/* ============================================================
   VOIDBELT — l'Arene
   Vaisseau a inertie, astéroïdes, atelier. Aucun texte de mise
   en scene : seule l'interface de jeu occupe l'ecran.
   ============================================================ */

#gamebg{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  width:100%; height:100%;
}

.arena{ overflow:hidden; position:relative; height:100%; font-size:clamp(10px, 1.5vh, 15px) }

/* --- bandeau d'etat --- */

.hud{
  position:absolute; inset:0 0 auto 0; z-index:3;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1em;
  padding:clamp(10px,1.8vmin,22px) clamp(14px,3vmin,40px);
  pointer-events:none;
}
.hud-l, .hud-r{ display:flex; align-items:center; gap:.7em }

.lvl{
  display:flex; align-items:center; gap:.55em;
  border:var(--edge) solid var(--bone); background:rgba(10,10,11,.86);
  padding:.4em .7em;
}
.lvl i{
  width:.7em; height:.7em; background:var(--orange); transform:rotate(45deg); flex:none;
}
.lvl b{
  font-family:'Archivo Black','Arial Black',sans-serif; font-weight:400;
  font-size:1.25em; letter-spacing:.02em; color:#F6F2EA;
}
.xpbar{ display:block; width:7em; height:.45em; background:rgba(237,231,218,.16) }
.xpbar i{ display:block; height:100%; width:0; background:var(--orange); transition:width .2s linear }

.hullbar{
  position:relative; width:12em; height:1.5em; overflow:hidden;
  border:var(--edge) solid var(--bone); background:rgba(10,10,11,.86);
}
.hullbar i{
  position:absolute; left:2px; top:2px; bottom:2px; width:100%;
  background:linear-gradient(90deg, var(--orange), #FF8A3D);
  transition:width .18s linear;
}
.hullbar em{
  position:absolute; right:.45em; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:.8em; letter-spacing:.1em; color:var(--cyan);
}

.res{
  display:flex; align-items:center; gap:.4em;
  border:1px solid var(--line); background:rgba(10,10,11,.8);
  padding:.35em .6em; min-width:4.6em;
}
.res i{ width:.62em; height:.62em; background:var(--c); transform:rotate(45deg); flex:none }
.res b{ font-weight:400; font-size:.98em; color:var(--txt) }

.keys{
  position:absolute; left:clamp(14px,3vmin,40px); bottom:clamp(10px,2vmin,26px); z-index:3;
  display:flex; gap:.35em; pointer-events:none; opacity:.75;
}
.keys .wide{ letter-spacing:.2em }

/* --- invite de verrouillage de la souris --- */

/* Tant que le pointeur n'est pas capturé, la partie attend : le voile
   couvre l'arene, absorbe le clic et rappelle les commandes. */
.lockcue{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1em; padding:2em; text-align:center; cursor:pointer;
  background:rgba(6,6,8,.66);
  backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px);
  font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase; color:var(--txt-2);
  animation:gfade .2s ease both;
}
.lockcue[hidden]{ display:none }
.lockcue b{
  font-size:clamp(15px,2.6vmin,28px); letter-spacing:.16em; color:var(--bone);
  border:var(--edge) solid var(--orange); padding:.55em 1.1em;
  background:rgba(10,10,11,.9);
  box-shadow:.35em .35em 0 rgba(255,77,0,.9);
}
.lockcue em{ font-style:normal; color:var(--cyan) }
.lockcue s{ text-decoration:none; color:var(--orange); margin:0 .7em }
.lockcue .kbd{ margin:0 .3em }

/* reglage du volume : le bloc ne capture pas le pointeur, on peut donc
   tirer le curseur sans relancer la partie. */
.lockvol{
  display:flex; align-items:center; gap:1.1em;
  padding:.7em 1.2em; cursor:default;
  border:1px solid var(--line); background:rgba(10,10,11,.9);
}
.lockvol label{ letter-spacing:.24em; color:var(--txt-3) }
.lockvol output{ min-width:3ch; text-align:right; color:var(--orange) }
.lockvol input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:clamp(110px,22vmin,240px); height:1.2em;
  background:none; cursor:pointer;
}
.lockvol input[type=range]:focus{ outline:none }
.lockvol input[type=range]::-webkit-slider-runnable-track{ height:3px; background:var(--line) }
.lockvol input[type=range]::-moz-range-track{ height:3px; background:var(--line) }
.lockvol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; border:0; border-radius:0;
  width:.7em; height:1.2em; margin-top:-.55em; background:var(--orange);
}
.lockvol input[type=range]::-moz-range-thumb{
  border:0; border-radius:0;
  width:.7em; height:1.2em; background:var(--orange);
}
.lockvol input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--cyan) }
.lockvol input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 2px var(--cyan) }

/* --- cartes de niveau --- */

.cardrow{ display:flex; gap:.8em; padding:1em }
.gcard{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  padding:1.4em .8em 1.1em;
  border:1px solid var(--line); background:rgba(20,20,22,.9);
  color:var(--txt); font:inherit; text-align:center; cursor:pointer;
  position:relative;
  transition:border-color .12s, background .12s;
}
.gcard-i{ display:block; width:3.2em; height:3.2em; color:var(--orange) }
.gcard-i svg{ width:100%; height:100% }
.gcard b{
  font-family:'Archivo Black','Arial Black',sans-serif; font-weight:400;
  font-size:1em; letter-spacing:.02em; text-transform:uppercase; color:#F6F2EA;
}
.gcard-d{ font-size:.84em; line-height:1.45; color:var(--txt-3) }
.gcard-key{
  position:absolute; top:.4em; left:.5em;
  font-size:.72em; letter-spacing:.1em; color:var(--txt-3);
  border:1px solid var(--line); padding:0 .35em;
}
.gcard:hover, .gcard:focus-visible{
  border-color:var(--orange); background:rgba(255,77,0,.10); outline:0;
  animation:gshake .2s linear infinite;
}
.gcard:hover .gcard-i{ color:#FFC66B }
@keyframes gshake{
  0%  { transform:translate(0,0)      rotate(0)      scale(1.05) }
  14% { transform:translate(-3px,2px) rotate(-1.2deg) scale(1.05) }
  28% { transform:translate(3px,-2px) rotate(1.1deg)  scale(1.06) }
  42% { transform:translate(-2px,-3px)rotate(-.9deg)  scale(1.05) }
  56% { transform:translate(3px,2px)  rotate(1.3deg)  scale(1.06) }
  70% { transform:translate(-3px,1px) rotate(-1.1deg) scale(1.05) }
  85% { transform:translate(2px,-1px) rotate(.7deg)   scale(1.06) }
  100%{ transform:translate(0,0)      rotate(0)       scale(1.05) }
}

/* --- atelier --- */

.gshop{ width:min(96%, 74em) }

.gitems{
  flex:1 1 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(7.5em, 1fr));
  gap:.6em; padding:1em; align-content:start;
}
.gitem{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.4em;
  padding:.9em .5em .7em;
  border:1px solid var(--line); background:rgba(20,20,22,.86);
  color:var(--txt); font:inherit; cursor:pointer;
  transition:transform .1s, border-color .1s, background .1s;
}
.gitem-i{ display:block; width:2.4em; height:2.4em; color:var(--cyan) }
.gitem-i svg{ width:100%; height:100% }
.gitem-n{ font-size:.76em; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-2) }
.gitem-lv{ font-size:.72em; letter-spacing:.1em; color:var(--txt-3) }
.gitem:hover{ border-color:var(--orange); background:rgba(255,77,0,.10); transform:translateY(-2px) }
.gitem:hover .gitem-i{ color:var(--orange) }
.gitem.on{ border-color:var(--cyan) }
.gitem.full .gitem-lv{ color:var(--cyan) }
.gitem.poor .gitem-i{ color:var(--txt-3) }
.gitem.poor{ opacity:.62 }

.gdetail{
  flex:none; min-height:7.5em;
  display:flex; align-items:center; gap:1em;
  border-top:1px solid var(--line); padding:1em 1.2em;
}
.gdet-i{ width:3em; height:3em; color:var(--orange); flex:none }
.gdet-i svg{ width:100%; height:100% }
.gdetail b{
  font-family:'Archivo Black','Arial Black',sans-serif; font-weight:400;
  font-size:1.05em; text-transform:uppercase; color:#F6F2EA;
}
.gdet-d{ font-size:.88em; color:var(--txt-2) }
.gdet-lv{ font-size:.76em; letter-spacing:.18em; color:var(--txt-3) }
.gdet-c{ display:flex; gap:.5em; margin-left:auto; align-items:center }
.gdet-c em{ font-style:normal; font-size:.8em; letter-spacing:.18em; color:var(--cyan) }
.chip{
  display:flex; align-items:center; gap:.35em;
  border:1px solid var(--line); padding:.3em .55em; font-size:.85em; color:var(--txt);
}
.chip i{ width:.6em; height:.6em; background:var(--c); transform:rotate(45deg) }
.chip.no{ color:var(--txt-3); border-color:rgba(255,77,0,.4) }
.gnone{ display:block; height:3em }

/* --- fin de partie --- */

.gover{ width:min(90%, 30em) }

@media (max-width:820px){
  .cardrow{ flex-wrap:wrap }
  .gcard{ flex:1 1 44% }
  .hud{ flex-direction:column; align-items:stretch }
  .keys{ display:none }
}