/* joystick.css — ARCADE CORE joystick (contexto hero + contacto) */
.joy-socket{position:relative;width:min(28vw,320px);aspect-ratio:1;display:grid;place-items:center;color:var(--ink)}
.joy-socket:before{content:"";position:absolute;inset:0;border:1.5px dashed rgba(17,17,15,.32);border-radius:50%}
.joy-guide{position:absolute;background:rgba(17,17,15,.13);pointer-events:none}
.joy-guide--x{left:0;right:0;top:50%;height:1px}
.joy-guide--y{top:0;bottom:0;left:50%;width:1px}
.joy-knob{position:relative;width:58%;aspect-ratio:1;border-radius:50%;background:var(--blue);border:clamp(5px,.8vw,8px) solid var(--ink);display:grid;place-items:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .45s cubic-bezier(.22,1.45,.36,1);will-change:transform;box-shadow:0 14px 0 -6px rgba(17,17,15,.1),0 34px 70px -24px rgba(17,17,15,.4)}
.joy-knob.is-dragging{cursor:grabbing}
.joy-knob:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.joy-ring{position:absolute;inset:15%;border:3px solid var(--paper);border-radius:50%;pointer-events:none}
.joy-disc{position:absolute;inset:31%;background:var(--paper);border-radius:50%;pointer-events:none}
.joy-plus{font:600 clamp(28px,2.6vw,44px)/1 var(--mono);color:#F6B40E;transform:translateY(-.05em);pointer-events:none}
.joy-caption{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);font-size:9px;letter-spacing:.08em;white-space:nowrap}
.scene-hero .joy-socket{position:absolute;right:7vw;bottom:9vh;z-index:3}
.contact-joy .joy-socket{width:min(24vw,300px)}
.contact-joy .joy-socket:before{border-color:rgba(240,238,230,.28)}
.contact-joy .joy-guide{background:rgba(240,238,230,.14)}

@media(max-width:900px){
  .scene-hero .joy-socket{left:50%;right:auto;transform:translateX(-50%);bottom:12vh;width:min(52vw,220px)}
  .joy-caption{bottom:-24px}
}