/* ============================================================
   css/controls-polish.css
   Mando y teclado: marco de foco para navegar los menús con mando (#pad-focus, js/core/pad-nav.js), marcador del
   clic derecho del esquema MOBA (#ctm-marker, js/core/input-desk.js) y la pantalla "Controles" (#ctl-map,
   js/core/controls-panel.js). Todo pixel-art: bordes duros, sin desenfoques, animación en pasos (steps) y apagada con
   "Reducir movimiento". Se carga tras ux-simplify-b.css.
   ============================================================ */

/* ---------- foco del mando: marco doble (negro/dorado) con flecha en escalera ---------- */
#pad-focus{ position:fixed; left:0; top:0; z-index:2147483000; display:none; pointer-events:none; box-sizing:border-box; will-change:transform,width,height; }
#pad-focus.on{ display:block; }
#pad-focus::before{ content:""; position:absolute; inset:-7px; box-sizing:border-box; border:3px solid #ffd76a; background:transparent;
  box-shadow:0 0 0 3px #000, inset 0 0 0 3px #000; image-rendering:pixelated; animation:padFocusBlink .8s steps(1) infinite; }
#pad-focus::after{ content:""; position:absolute; left:-30px; top:50%; width:15px; height:21px; margin-top:-10px; background:#ffd76a;
  clip-path:polygon(0 0, 33% 0, 33% 15%, 66% 15%, 66% 38%, 100% 38%, 100% 62%, 66% 62%, 66% 85%, 33% 85%, 33% 100%, 0 100%);
  filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);
  animation:padFocusNudge .7s steps(1) infinite; }
#pad-focus.pf-in::after{ left:4px; }
#pad-focus.press::before{ border-color:#fff; background:rgba(255,215,106,.22); }
#pad-focus.bump::before{ animation:padFocusBump .18s steps(2) 1; }
@keyframes padFocusBlink{ 0%,100%{ border-color:#ffd76a; } 50%{ border-color:#fff1b8; } }
@keyframes padFocusNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-4px); } }
@keyframes padFocusBump{ 0%{ transform:translateX(0); } 50%{ transform:translateX(-4px); } 100%{ transform:translateX(0); } }
body.reduce-motion #pad-focus::before, body.reduce-motion #pad-focus::after, body.reduce-motion #pad-focus.bump::before{ animation:none; }

/* ---------- marcador del clic derecho (MOBA): anillo cuadrado de píxeles en el piso ---------- */
#ctm-marker{ position:fixed; z-index:30; width:0; height:0; pointer-events:none; }
#ctm-marker.hidden{ display:none; }
#ctm-marker i{ position:absolute; left:-14px; top:-14px; width:28px; height:28px; box-sizing:border-box; border:4px solid #7dffa0; background:transparent;
  box-shadow:0 0 0 3px #000, inset 0 0 0 3px #000; image-rendering:pixelated; animation:ctmSpin .9s steps(2) infinite; }
#ctm-marker b{ position:absolute; left:-4px; top:-4px; width:8px; height:8px; background:#fff; box-shadow:0 0 0 3px #000; }
#ctm-marker.ping i{ animation:ctmPing .36s steps(4) 1, ctmSpin .9s steps(2) .36s infinite; }
@keyframes ctmSpin{ 0%{ border-color:#7dffa0; } 50%{ border-color:#d9ffe4; } 100%{ border-color:#7dffa0; } }
@keyframes ctmPing{ 0%{ transform:scale(2.4); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }
body.reduce-motion #ctm-marker i, body.reduce-motion #ctm-marker.ping i{ animation:none; }

/* ---------- pantalla Controles ---------- */
#ctl-map .ctl-panel{ max-width:560px; }
#ctl-map .ctl-scheme{ width:100%; margin:4px 0 6px; }
#ctl-map .ctl-scheme button{ flex:1; min-height:44px; }
#ctl-map .ctl-sub{ font-size:.82rem; line-height:1.3; color:#cdbb98; margin:0 0 8px; }
#ctl-map .ctl-head, #ctl-map .ctl-row{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,.9fr); gap:8px; align-items:center; }
#ctl-map .ctl-head{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:#a9946c; padding:0 6px 4px; border-bottom:2px solid #3a2415; }
#ctl-map .ctl-row{ min-height:44px; padding:4px 6px; border-bottom:1px solid #2a180e; }
#ctl-map .ctl-row:nth-child(odd){ background:rgba(255,255,255,.03); }
#ctl-map .ctl-act{ font-size:.86rem; color:#f2dfba; }
#ctl-map kbd{ display:inline-block; min-width:26px; padding:3px 7px; margin:1px 2px; text-align:center; font:inherit; font-size:.78rem; color:#2a1a0c;
  background:linear-gradient(#efe0bd,#c9b48a); border:2px solid #6a5230; border-radius:3px; box-shadow:0 2px 0 #060403; }
#ctl-map .ctl-pad kbd{ color:#e8f6ff; background:linear-gradient(#37506a,#22344a); border-color:#0e1a28; }
#ctl-map .ctl-kb i{ color:#8c7a58; font-style:normal; margin:0 1px; }
#ctl-map .ctl-key{ min-width:64px; min-height:44px; padding:4px 10px; font:inherit; font-size:.9rem; color:#2a1a0c; cursor:pointer;
  background:linear-gradient(#efe0bd,#c9b48a); border:3px solid #6a5230; border-radius:4px; box-shadow:0 3px 0 #060403; }
#ctl-map .ctl-key:hover{ background:linear-gradient(#fff3d0,#d8c397); }
#ctl-map .ctl-key.waiting{ color:#ffe9a8; background:#3a1a0a; border-color:#ffd76a; animation:padFocusBlink .8s steps(1) infinite; }
#ctl-map .ctl-alias{ display:block; margin-top:2px; font-size:.7rem; color:#a9946c; }
#ctl-map .ctl-msg{ min-height:1.2em; margin:8px 0 2px; font-size:.8rem; color:#ffd76a; }
#ctl-map .ctl-pad-line{ font-size:.78rem; color:#a9c7e0; margin:2px 0 8px; }
#ctl-map .ctl-pad-line b{ color:#e8f6ff; font-weight:400; }
@media (max-width:560px){
  #ctl-map .ctl-head, #ctl-map .ctl-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #ctl-map .ctl-head span:nth-child(3){ display:none; }
  #ctl-map .ctl-row .ctl-pad{ grid-column:1 / -1; padding-bottom:2px; }
}
body.reduce-motion #ctl-map .ctl-key.waiting{ animation:none; }