html,body{box-sizing:border-box;margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#232323;color:#e8e8e8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;user-select:none}
*{box-sizing:border-box}

/* ═══ JOYSTICK ORIGINAL — NO TOCAR ═══ */
.pad{position:absolute;inset:0;background:#232323;overflow:visible;cursor:pointer;touch-action:none;}
.stick{position:absolute;left:50%;top:50%;width:var(--stick-size,50px);height:var(--stick-size,50px);margin-left:calc(var(--stick-size,50px)*-0.5);margin-top:calc(var(--stick-size,50px)*-0.5);border-radius:50%;overflow:hidden;cursor:grab;z-index:100;background:#232323;pointer-events:none;transform:translate(var(--joy-dx,0px),var(--joy-dy,0px)) scale(1);transition:transform .1s ease-out;will-change:transform;}
.stick::before,.stick::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.stick::before{left:3%;right:3%;top:58%;bottom:1%;z-index:0;background:radial-gradient(ellipse at 46% 58%,rgba(0,0,0,.54) 0%,rgba(0,0,0,.36) 36%,rgba(0,0,0,.16) 55%,rgba(0,0,0,0) 78%);filter:blur(4.5px);transform:translate(-3px,5px) scale(1.05,.72);opacity:.82}
.stick::after{inset:0;z-index:2;background-image:url("assets/joystick_button_ref.png");background-repeat:no-repeat;background-position:center;background-size:100% 100%;filter:grayscale(1) brightness(1.15) contrast(1.05);}
.stickColorOverlay{position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;mix-blend-mode:color;background:var(--center-color,#e74116);}
.stick.pressed .stickColorOverlay{background:var(--pressed-color,#b2260b);}
.stick.hoverNear::after{filter:grayscale(1) brightness(1.28) contrast(1.05);}
.stick.pressed::after{filter:grayscale(1) brightness(1.0) contrast(1.05);}
.stick.hoverNear{transform:translate(var(--joy-dx,0px),var(--joy-dy,0px)) scale(.97);}
.stick.pressed{cursor:grabbing;transform:translate(var(--joy-dx,0px),var(--joy-dy,0px)) scale(.985)}
.pulse{display:none}.status{display:none}
/* Entrada del joystick: rápida y sutil → cambiar a Anchor es inmediato,
   sin el rebote largo que se sentía como retraso. */
.pad.entering .stick{animation:joyEnter .12s ease-out forwards;}
@keyframes joyEnter{0%{transform:scale(.9)}100%{transform:scale(1)}}

/* ═══ BUTTON GRIDS ═══ */
.btnGrid{position:absolute;inset:0;display:none;overflow:hidden;}
.btnGrid.active{display:block}

/* Botones: cada uno muestra su porción del SVG completo como sprite.
   El mismo lenguaje visual que el Joystick: hover=elevar+brillar, press=hundir, release=rebote */
.gbtn{
  position:absolute;border:0 none transparent;padding:0;margin:0;cursor:pointer;z-index:2;
  outline:none;box-shadow:none;
  background-color:transparent;background-repeat:no-repeat;background-origin:border-box;
  /* Feedback SÓLO por brillo — NO se desplaza la tesela. Mover/escalar un solo
     botón rompería la composición sellada y asomaría el borde del vecino
     (los triángulos grises). Sólo cambia el brillo del botón hovereado. */
  transition:filter .12s ease-out;
}
.gbtn:focus{outline:none;}
.gbtn:hover{
  filter:brightness(1.2);
  z-index:3; /* el botón hovereado se pinta por encima; nunca lo tapa un vecino */
}
.gbtn:active,.gbtn.pressed{
  filter:brightness(.78);
  z-index:3;
}

/* COMP/SELECT activo: botón físico MUY hundido — evidente a primera vista */
.gbtn.toggleActive{
  filter:brightness(.32) contrast(1.1) saturate(.8);
  transform:translateY(3px) scale(.94);
}
.gbtn.toggleActive:hover{
  filter:brightness(.4) contrast(1.1) saturate(.8);
  transform:translateY(3px) scale(.93);
}

/* Entrance: aparición INMEDIATA y uniforme. Los botones ya son visibles
   (opacity:1); el cambio de modo no deja estado intermedio ni parpadeo.
   Sólo un fundido colectivo muy corto (sin escalonado y sin transform, para
   no desplazar teselas ni asomar el vecino). */
.gbtn{opacity:1;}
.btnGrid.animIn .gbtn{animation:btnPop .09s ease-out;}
@keyframes btnPop{0%{opacity:.45}100%{opacity:1}}
.btnGrid.animOut .gbtn{animation:btnShrink .08s ease-in forwards;}
@keyframes btnShrink{0%{opacity:1}100%{opacity:0}}

/* ═══ DUAL VIEW ═══ */
/* Geometría (posición/tamaño de cada mitad) la calcula main.js según la
   relación de aspecto (computeDualGeom/applyDualGeom); estas clases sólo
   quedan como marcadores, sin reglas de posición que puedan pisar el JS. */