/* Controles táctiles: solo aplican con html.tc (lo pone js/touch.js) */
html.tc, html.tc body{
  touch-action:manipulation;            /* sin zoom por doble toque */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
#tc{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  font-family:"Press Start 2P", monospace; color:#fff;
  --pad:clamp(140px, 46vh, 240px);
  --b:clamp(58px, 17vh, 86px);
  --sl:max(12px, env(safe-area-inset-left)); --sr:max(12px, env(safe-area-inset-right));
  --sb:max(10px, env(safe-area-inset-bottom));
}
#tc > *{ pointer-events:auto; }
.tc-ctl{ touch-action:none; }
#tc-pad, #tc-btns, #tc-p2, #tc-rotate{ display:none; }
#tc.tc-battle:not(.tc-off) #tc-pad{ display:block; }
#tc.tc-battle:not(.tc-off) #tc-btns{ display:grid; }

/* Palanca: cruz tenue + bola que sigue al pulgar */
#tc-pad{
  position:absolute; left:var(--sl); bottom:var(--sb);
  width:var(--pad); height:var(--pad); border-radius:50%;
  background:
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) center/22% 100% no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) center/100% 22% no-repeat,
    rgba(12,16,32,.38);
  border:3px solid rgba(255,207,63,.6); box-shadow:0 0 0 3px rgba(0,0,0,.55);
}
#tc-pad i{
  position:absolute; left:32%; top:32%; width:36%; height:36%; border-radius:50%;
  background:rgba(255,207,63,.5); border:3px solid #000; pointer-events:none;
}
#tc-pad.on{ border-color:var(--gold); }
#tc-pad.on i{ background:rgba(255,207,63,.85); }

/* Botones: fila alta AGARRE · ESP.2 · ESP; fila baja PUÑO · PATADA (bajo el pulgar) */
#tc-btns{
  position:absolute; right:var(--sr); bottom:var(--sb);
  grid-template-columns:repeat(3, var(--b)); gap:10px;
}
.tc-pu{ grid-column:2; }
.tc-b{
  width:var(--b); height:var(--b); padding:0; border-radius:50%;
  font:inherit; font-size:8px; color:#fff; text-shadow:2px 2px 0 #000;
  background:rgba(12,16,32,.45); border:3px solid rgba(255,255,255,.6);
  box-shadow:0 4px 0 rgba(0,0,0,.65);
}
.tc-pu{ border-color:rgba(255,154,125,.9); }
.tc-ki{ border-color:rgba(110,170,255,.9); }
.tc-sp{ border-color:var(--gold); color:var(--gold); }
.tc-grab{ font-size:7px; }
.tc-b.on{ transform:translateY(3px) scale(.93); background:rgba(255,207,63,.55); box-shadow:0 1px 0 rgba(0,0,0,.65); }

/* Barra: mostrar/ocultar controles y pantalla completa (junto al botón de sonido) */
#tc-bar{ position:absolute; bottom:var(--sb); right:50%; margin-right:6px; display:flex; gap:8px; }
#tc-bar button{
  min-width:48px; min-height:44px; padding:0 10px;
  font:inherit; font-size:9px; color:var(--gold);
  background:rgba(12,16,32,.8); border:2px solid var(--gold); border-radius:6px;
}
#tc-toggle[aria-pressed="false"]{ color:#aaa; border-color:#777; }
html.tc #sound-toggle{ right:auto; left:50%; margin-left:6px; bottom:max(10px, env(safe-area-inset-bottom)); min-height:44px; min-width:48px; }
/* Móvil apaisado (franjas negras laterales): la barra va en columna arriba a la izquierda */
@media (min-aspect-ratio: 16/10){
  #tc-bar{ bottom:auto; right:auto; margin:0; top:max(8px, env(safe-area-inset-top)); left:var(--sl); flex-direction:column; }
  html.tc #sound-toggle{ bottom:auto; left:max(12px, env(safe-area-inset-left)); margin:0; top:calc(max(8px, env(safe-area-inset-top)) + 104px); }
}
/* El escenario (1280 px) no debe encogerse dentro del flex de #game en pantallas estrechas */
html.tc #stage{ flex-shrink:0; }

#tc-p2{
  position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--sb) + 54px);
  font-size:8px; color:var(--gold); background:rgba(12,16,32,.8); padding:6px 8px; border-radius:4px; white-space:nowrap;
}
#tc.tc-2p[data-scr="select"] #tc-p2, #tc.tc-2p[data-scr="battle"] #tc-p2{ display:block; }

/* Vertical: el juego no cabe, se pide girar */
#tc-rotate{
  position:fixed; inset:0; z-index:100; background:#05070e; color:var(--gold);
  flex-direction:column; align-items:center; justify-content:center; gap:20px;
  font-size:14px; text-align:center; padding:24px;
}
#tc-rotate b{ font-size:48px; }
@media (orientation:portrait){ #tc-rotate{ display:flex; } }

/* Menús: pausa y botones de esquina con más área de toque; aviso en Opciones */
/* (medidas en px lógicos del escenario: en un móvil se ven a ~0,45x) */
html.tc #pause-btn{ font-size:30px; min-width:96px; min-height:84px; }
html.tc .corner-btn::after{ content:""; position:absolute; inset:-24px; }
html.tc #select-prompt{ pointer-events:none; }   /* el rótulo no debe tapar el toque a "1 JUGADOR" */
html.tc .mode-btn, html.tc .diff-btn{ position:relative; }
html.tc .mode-btn::after, html.tc .diff-btn::after{ content:""; position:absolute; inset:-14px -3px; }
html.tc #screen-options .panel::before{
  content:"En móvil usa los botones en pantalla"; display:block; margin-bottom:12px;
  font-size:14px; color:var(--gold); text-align:center;
}