/* ===================== Entrenamiento y mutadores ===================== */
/* Botón ENTRENAR del título (debajo de COMBOS · ONLINE · TORRE) */
.tr-corner{ top:160px; }
:is(.tr-corner, .mut-btn, #tr-panel button, #tr-pause button):focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* Selección en entrenamiento: sin modo, CPU ni torre */
#screen-select.is-training :is(#select-mode, #diff-pick, #arc-modes){ display:none; }

/* ---------- Selector de mutador (pantalla de selección) ---------- */
.mut-btn{ top:auto; left:auto; right:80px; bottom:122px; min-height:44px; font-size:10px; color:#cbd5ff; }
.mut-btn.is-on{ color:var(--ink); background:var(--gold); }
#screen-select:is(.is-online, .arc-tower) .mut-btn{ display:none; }

/* ---------- Banner de la intro e icono del HUD ---------- */
#mut-banner{
  position:absolute; top:55%; left:50%; transform:translate(-50%,-50%); z-index:6; pointer-events:none;
  font-size:16px; color:#b8ff6b; white-space:nowrap; text-shadow:3px 3px 0 #000;
  background:rgba(12,16,32,.78); padding:12px 18px; border-radius:6px; box-shadow:0 0 0 3px #000, 0 0 0 5px #b8ff6b;
  opacity:0;
}
#mut-banner.show{ animation:mutBan 2.6s ease-out forwards; }
@keyframes mutBan{ 0%{ opacity:0; transform:translate(-50%,-30%); } 12%,78%{ opacity:1; transform:translate(-50%,-50%); } 100%{ opacity:0; } }
#mut-hud{
  margin:6px auto 0; width:30px; height:24px; line-height:20px; text-align:center;
  font:bold 15px Arial, sans-serif; color:#b8ff6b; background:rgba(12,16,32,.75); border:2px solid #b8ff6b; border-radius:4px;
}
#mut-drop{
  position:absolute; left:0; top:0; width:44px; height:40px; z-index:3; display:none;
  align-items:center; justify-content:center; font-size:11px; color:#000;
  background:#fff8e0; border:3px solid #000; border-left:8px solid #2f7bff; border-radius:3px;
  box-shadow:0 0 12px rgba(255,255,255,.7);
}
#mut-drop[data-k="hp"]{ border-left-color:var(--green); }

/* ---------- Entrenamiento en batalla ---------- */
html.tr-on #timer, html.tr-on #tc-p2{ display:none !important; }
#tr-panel{ display:none; }
html.tr-on #tr-panel{
  display:block; position:absolute; right:12px; top:118px; z-index:7; width:290px;
  font-size:8px; color:#cbd5ff;
}
.tr-head{ display:flex; gap:6px; justify-content:flex-end; }
#tr-panel button, #tr-pause button{
  min-height:44px; padding:6px 8px; font-family:inherit; font-size:8px; color:#fff; cursor:pointer;
  background:var(--navy); border:3px solid #000; box-shadow:0 2px 0 #000, 0 0 0 2px var(--gold); border-radius:4px;
}
#tr-panel button[aria-pressed="true"], #tr-pause button[aria-pressed="true"]{ background:var(--gold); color:var(--ink); }
.tr-body{
  display:none; margin-top:8px; max-height:600px; overflow:auto; padding:8px;
  background:rgba(10,14,28,.8); border:2px solid #000; box-shadow:0 0 0 2px rgba(255,207,63,.5); border-radius:6px;
}
#tr-panel.is-open .tr-body{ display:block; }
.tr-stats{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.tr-stats div{ background:rgba(36,49,86,.5); padding:5px 6px; border-radius:3px; }
.tr-stats span{ display:block; color:#8ea0c8; margin-bottom:3px; }
.tr-stats b{ font-weight:normal; color:#fff; font-size:9px; }
.tr-stats b.pos{ color:#7dff8a; } .tr-stats b.neg{ color:#ff8a7d; }
.tr-hist{ list-style:none; margin:8px 0; min-height:20px; }
.tr-hist li{ display:flex; align-items:center; gap:4px; height:20px; border-bottom:1px solid rgba(255,255,255,.07); }
.tr-hist li:first-child{ background:rgba(255,207,63,.12); }
.tr-hist b.dir{ width:20px; text-align:center; font:bold 15px Arial, sans-serif; color:var(--gold); }
.tr-hist kbd, .tr-mv kbd{
  display:inline-block; min-width:16px; text-align:center; font-family:inherit; font-size:8px;
  padding:3px 3px; border-radius:3px; border:2px solid #000;
}
.tr-hist kbd.kP{ background:#ff9a7d; color:#000; } .tr-hist kbd.kK{ background:#6eaaff; color:#000; } .tr-hist kbd.kE{ background:var(--gold); color:#000; }
.tr-hist i{ margin-left:auto; font-style:normal; color:#8ea0c8; }
.tr-ctl, #tr-pause{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#tr-pause{ width:520px; margin:6px auto 0; }
#tr-pause button{ font-size:9px; }
.tr-mv h4{ margin:10px 0 4px; color:var(--gold); font-size:9px; }
.tr-mv table{ width:100%; border-collapse:collapse; line-height:1.5; }
.tr-mv td{ padding:3px 2px; border-top:1px solid rgba(255,255,255,.08); vertical-align:middle; }
.tr-mv td:first-child{ width:34%; }
.tr-body{ overflow-x:hidden; }
.tr-mv b{ color:var(--gold); font-weight:normal; margin:0 2px; }
.tr-mv b.dir{ font:bold 13px Arial, sans-serif; }
.tr-mv i{ font-style:normal; color:#8ea0c8; margin:0 2px; }
.tr-mv kbd.arr{ font:bold 12px Arial, sans-serif; padding:1px 3px; }

/* Hitboxes: cuerpo (azul), invulnerable (gris), ataque activo (rojo), proyectil (amarillo) */
#tr-hb{ position:absolute; inset:0; z-index:4; pointer-events:none; }
html:not(.tr-on) #tr-hb{ display:none; }
.tr-box{ position:absolute; left:0; top:0; border:2px solid; }
.tr-box.body{ border-color:#39a0ff; background:rgba(57,160,255,.12); }
.tr-box.body.inv{ border-color:#aaa; border-style:dashed; background:none; }
.tr-box.atk{ border-color:#ff3b2e; background:rgba(255,59,46,.25); }
.tr-box.proj{ border-color:var(--gold); background:rgba(255,207,63,.2); }

@keyframes mutFade{ 0%,85%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ #mut-banner.show{ animation-name:mutFade; } }
html.reduce-motion #mut-banner.show{ animation-name:mutFade; }