/* ============================================================
   VOIDBELT — composants d'interface de jeu, utilises par l'Arene
   Fenetres modales, onglets, bouton d'action, puce de touche.
   Chaque jeu ajoute par-dessus ses propres variantes.
   ============================================================ */

.kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.9em; padding:.25em .45em;
  border:1px solid var(--txt-3); border-bottom-width:3px;
  font-size:.78em; letter-spacing:.12em; color:var(--txt-2);
  background:rgba(10,10,11,.8);
}

.gmodal{
  position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vmin,40px);
  background:rgba(6,6,8,.74);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:gfade .18s ease both;
}
.gmodal[hidden]{ display:none }
@keyframes gfade{ from{ opacity:0 } to{ opacity:1 } }

.gpanel{
  width:min(96%, 68em);
  border:var(--edge) solid var(--bone);
  background:linear-gradient(180deg, rgba(20,20,22,.97), rgba(10,10,11,.97));
  box-shadow:.5em .5em 0 rgba(255,77,0,.9);
}
.ghead{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:.6em 1em;
  background:var(--bone); color:var(--black);
  font-size:.85em; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
}
.ghead b{ font-weight:700 }
.gx{
  border:0; background:none; cursor:pointer; font:inherit;
  color:var(--black); padding:0 .2em; line-height:1;
}
.resmini{ display:flex; gap:.7em; letter-spacing:.1em }
.resmini span{ display:flex; align-items:center; gap:.3em }
.resmini i{ width:.6em; height:.6em; background:var(--c); transform:rotate(45deg) }

.gbody{ display:flex; min-height:18em }

.gtabs{
  flex:none; width:11em;
  display:flex; flex-direction:column;
  border-right:1px solid var(--line);
}
.gtab{
  border:0; border-bottom:1px solid var(--line); border-left:3px solid transparent;
  background:none; font:inherit; color:var(--txt-2); cursor:pointer;
  padding:1em .9em; text-align:left;
  font-size:.86em; letter-spacing:.2em; text-transform:uppercase;
  transition:background .12s, color .12s, border-color .12s;
}
.gtab:hover{ background:rgba(237,231,218,.06); color:var(--txt) }
.gtab.on{ border-left-color:var(--orange); color:var(--orange); background:rgba(255,77,0,.08) }

.gmain{ flex:1 1 0; min-width:0; display:flex; flex-direction:column }

.gbtn{
  display:block; width:calc(100% - 2em); margin:1.2em 1em;
  border:var(--edge) solid var(--bone); background:rgba(255,77,0,.14);
  color:#F6F2EA; font:inherit; font-size:1em; letter-spacing:.24em;
  text-transform:uppercase; padding:.8em; cursor:pointer;
  transition:background .12s;
}
.gbtn:hover{ background:rgba(255,77,0,.3) }

.gshop.nope, .gmodal .gpanel.nope{ animation:gnope .3s ease }
@keyframes gnope{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-8px) } 50%{ transform:translateX(8px) } 75%{ transform:translateX(-4px) }
}

@media (max-width:820px){
  .gbody{ flex-direction:column }
  .gtabs{ width:100%; flex-direction:row; border-right:0; border-bottom:1px solid var(--line) }
  .gtab{ flex:1; text-align:center; border-bottom:0; border-left:0; border-top:3px solid transparent }
  .gtab.on{ border-left-color:transparent; border-top-color:var(--orange) }
}