/* ============================================================
   TEACHER FIGHTER — perfil, logros, ajustes y avisos PWA
   (complementa style.css; no toca sprites ni hotspots)
   ============================================================ */
:root{ --tf-p1:#39d353; --tf-p1b:#7dff8a; --tf-p2:#e23b2e; --tf-p2b:#ff9a7d; --tf-en:#2f7bff; --tf-en2:#9fd4ff; --tf-hud-edge:#000; }

/* Acceso PERFIL en el título: hueco libre abajo a la izquierda */
.moves-btn.pf-corner{ top:auto; bottom:16px; left:16px; right:auto; }

/* Foco visible (teclado) en todo lo nuevo */
#screen-profile :focus-visible, #screen-settings :focus-visible, .pf-corner:focus-visible,
#screen-options .retro-btn:focus-visible, #tf-update button:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
#pf-h:focus, #st-h:focus{ outline:none; }

/* ---------- Perfil ---------- */
.pf-panel{ width:88%; max-height:92%; padding:22px 26px; }
.pf-panel h2, .st-panel h2{ margin-bottom:14px; }
.pf-panel h3{ color:var(--gold); font-size:12px; margin:16px 0 8px; }
.pf-row{ display:flex; align-items:center; justify-content:center; gap:14px; }
.pf-row label{ font-size:12px; color:#cbd5ff; }
#pf-nick, #pf-io{
  font-family:inherit; color:var(--ink); background:#fff; border:3px solid #000; border-radius:4px;
  box-shadow:0 0 0 3px var(--gold);
}
#pf-nick{ font-size:16px; width:300px; min-height:48px; padding:8px 10px; text-transform:none; }
#pf-io{ display:block; width:100%; font-size:9px; line-height:1.5; padding:8px; resize:vertical; }
.pf-msg{ margin-top:8px; min-height:1.6em; color:#cbd5ff; }
.pf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 12px; font-size:10px; }
.pf-stats > div{ display:flex; justify-content:space-between; gap:8px; background:rgba(36,49,86,.45); padding:7px 9px; border-radius:4px; }
.pf-stats dt{ color:#cbd5ff; }
.pf-stats dd{ color:#fff; text-align:right; }
.pf-ach{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 12px; padding:0; margin:0; }
.pf-a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:2px solid #000; border-radius:6px; background:rgba(36,49,86,.3); }
.pf-a > div{ flex:1; }
.pf-a b{ display:block; font-size:10px; color:#cbd5ff; font-weight:normal; margin-bottom:5px; }
.pf-a small{ display:block; font-size:8px; line-height:1.6; color:#a9b6d8; }
.pf-a em{ font-style:normal; font-size:8px; color:#a9b6d8; border:2px solid #4a5680; padding:4px 5px; border-radius:3px; white-space:nowrap; }
.pf-a.is-on{ background:rgba(255,207,63,.12); box-shadow:0 0 0 2px var(--gold); }
.pf-a.is-on b{ color:var(--gold); }
.pf-a.is-on em{ color:var(--ink); background:var(--gold); border-color:#000; }

/* ---------- Ajustes ---------- */
.st-panel{ width:72%; }
.st-vol{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:12px; color:#cbd5ff; }
.st-vol > span:first-child{ width:120px; }
.st-step{
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--gold); border:3px solid #000;
  box-shadow:0 3px 0 #000; min-width:48px; min-height:48px; border-radius:4px; cursor:pointer;
}
.st-meter{ flex:1; height:18px; background:#0b1430; border:3px solid #000; border-radius:3px; overflow:hidden; }
.st-meter i{ display:block; height:100%; background:linear-gradient(#fff3a0,var(--gold)); }
.st-vol output{ width:44px; text-align:right; color:#fff; }
.st-togs{ display:grid; gap:10px; margin-top:6px; }
.st-tog{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px;
  font-family:inherit; font-size:11px; color:#fff; text-align:left; cursor:pointer;
  background:var(--navy); border:3px solid #000; border-radius:4px; box-shadow:0 3px 0 #000; padding:10px 14px;
}
.st-tog b{ font-weight:normal; min-width:44px; text-align:center; padding:6px; border:2px solid #000; border-radius:3px; background:#3a4466; color:#fff; }
.st-tog[aria-checked="true"] b{ background:var(--gold); color:var(--ink); }
.st-desc{ margin:-4px 0 4px; text-align:left; font-size:8px; color:#cbd5ff; }

/* Táctil: el escenario se reduce ~0,45x en un móvil; se agrandan áreas de toque y textos */
html.tc .st-step{ min-width:100px; min-height:100px; font-size:28px; }
html.tc .st-tog{ min-height:100px; font-size:16px; }
html.tc #screen-profile .retro-btn, html.tc #screen-settings .retro-btn{ min-height:100px; font-size:16px; }
html.tc .pf-stats{ font-size:14px; }
html.tc .pf-a b{ font-size:14px; } html.tc .pf-a small, html.tc .pf-a em, html.tc .st-desc{ font-size:12px; }

/* ---------- Toast de logro (abajo a la izquierda, lejos del HUD) ---------- */
#tf-toast{
  position:absolute; left:16px; bottom:16px; z-index:30; max-width:360px; pointer-events:none;
  background:rgba(10,14,28,.95); border:3px solid var(--gold); box-shadow:0 0 0 3px #000; border-radius:6px;
  padding:10px 14px; opacity:0; transform:translateY(16px); transition:opacity .25s, transform .25s;
}
#tf-toast.on{ opacity:1; transform:none; }
#tf-toast b{ display:block; font-size:8px; color:var(--gold); font-weight:normal; margin-bottom:6px; }
#tf-toast span{ font-size:11px; color:#fff; }
html.tc #tf-toast{ bottom:auto; top:118px; left:50%; transform:translate(-50%,-8px); }
html.tc #tf-toast.on{ transform:translate(-50%,0); }

/* ---------- Aviso de nueva versión (PWA) ---------- */
#tf-update{
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:10px; font:10px "Press Start 2P", monospace; color:#fff;
  background:rgba(12,16,32,.95); border:2px solid var(--gold); border-radius:6px; padding:6px 8px 6px 12px;
}
#tf-update button{ font:inherit; color:var(--ink); background:var(--gold); border:2px solid #000; border-radius:4px; min-height:44px; padding:0 10px; cursor:pointer; }

/* ---------- Modo daltónico: azul (J1) / naranja (J2), energía violeta ---------- */
html.cb-mode{ --tf-p1:#2f8cff; --tf-p1b:#a8d4ff; --tf-p2:#ff8a00; --tf-p2b:#ffd08a; --tf-en:#7a5cff; --tf-en2:#e0d8ff; }
html.cb-mode .hud-side .hp-fill{ background:linear-gradient(var(--tf-p1b),var(--tf-p1)); }
html.cb-mode .hud-p2 .hp-fill{ background:linear-gradient(var(--tf-p2b),var(--tf-p2)); }
html.cb-mode .hud-side .hp-fill.low{ background:repeating-linear-gradient(45deg,#fff 0 6px,#9a9a9a 6px 12px); }
html.cb-mode .en-fill{ background:linear-gradient(var(--tf-en2),var(--tf-en)); }
html.cb-mode .p1 kbd{ background:var(--tf-p1); }
html.cb-mode .p2 kbd{ background:var(--tf-p2); color:#000; }
html.cb-mode .mv-table th .p1{ color:var(--tf-p1); }
html.cb-mode .mv-table th .p2{ color:var(--tf-p2); }
html.cb-mode .card-hotspot.locked-p2{ box-shadow:0 0 0 5px var(--tf-p2) inset, 0 0 18px var(--tf-p2); background:rgba(255,138,0,.16); }

/* ---------- Alto contraste del HUD ---------- */
html.hc-mode{ --tf-hud-edge:#fff; }
html.hc-mode .hp-bar, html.hc-mode .en-bar{ background:#000; border-color:var(--tf-hud-edge); box-shadow:0 0 0 2px #000, 0 0 0 4px var(--tf-hud-edge); }
html.hc-mode .hud-name, html.hc-mode #timer, html.hc-mode #round-label{ background:#000; color:#fff; text-shadow:none; box-shadow:0 0 0 2px var(--tf-hud-edge); padding:3px 6px; }
html.hc-mode .pips span{ border-color:var(--tf-hud-edge); }
html.hc-mode .combo b, html.hc-mode .combo span, html.hc-mode .fx-float{ text-shadow:3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }

/* ---------- Reducir movimiento (AJUSTES), igual que prefers-reduced-motion ---------- */
html.reduce-motion .proj.onda, html.reduce-motion .proj.quake, html.reduce-motion .en-bar.full .en-fill,
html.reduce-motion .combo.pop b, html.reduce-motion .bind-key.listening{ animation:none; }
html.reduce-motion #tf-toast{ transition:none; }
@media (prefers-reduced-motion: reduce){ #tf-toast{ transition:none; } }