/* ============================================================================
   CYBER-CLONES // PANIC LOGIC — sistema de diseño "Holográfico Cyberpunk"
   Tipografía monoespaciada de sistema (offline-first), paneles con corchetes,
   neón cian/magenta, scanlines CRT y micro-animaciones.
   ========================================================================== */
:root {
  --bg: #05060a;
  --bg2: #0a0e17;
  --panel: rgba(13, 19, 33, .92);
  --panel2: #141c30;
  --line: #223052;
  --line-glow: rgba(53, 224, 255, .35);
  --text: #d7e4ff;
  --dim: #66779c;
  --cyan: #35e0ff;
  --cyan-dim: rgba(53, 224, 255, .12);
  --magenta: #ff4fd8;
  --gold: #ffd24a;
  --green: #58ff9b;
  --red: #ff4d5e;
  --violet: #b16bff;
  --orange: #ff9d3a;
  --cyan-hi: #7deeff;
  --mono: 'Cascadia Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  overflow: hidden;
  height: 100vh;
  letter-spacing: .02em;
}

.hidden { display: none !important; }
.dim { color: var(--dim); font-size: .82em; }
.neon-cyan { color: var(--cyan); text-shadow: 0 0 12px rgba(53, 224, 255, .6); }
.error { color: var(--red); min-height: 1.3em; margin-top: 10px; text-align: center; font-size: 13px; }

/* ---------- Capa CRT global ---------- */
.crt-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .5) 100%);
}

/* ---------- Fondo animado de rejilla ---------- */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    linear-gradient(transparent 96%, rgba(53, 224, 255, .07) 100%),
    linear-gradient(90deg, transparent 96%, rgba(53, 224, 255, .07) 100%);
  background-size: 44px 44px;
  animation: gridDrift 14s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
}
@keyframes gridDrift { to { background-position: 44px 88px; } }

/* Arte de fondo PixelLab (assets/bg/menu.png): si el PNG no existe, esta capa
   simplemente no pinta nada y queda la rejilla de siempre. */
.bg-grid::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/bg/menu.png') center / cover no-repeat;
  image-rendering: pixelated;
  opacity: .32;
}

.screen { position: absolute; inset: 0; overflow: auto; animation: screenIn .35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.012); } }

/* ---------- Marca / logo ---------- */
.brand { text-align: center; padding: 46px 0 10px; position: relative; }
.brand h1 {
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: .28em;
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(53, 224, 255, .55), 0 0 4px rgba(53, 224, 255, .9);
}
.brand-sub { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.brand-sub h2 {
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: .9em; text-indent: .9em;
  color: var(--magenta);
  text-shadow: 0 0 18px rgba(255, 79, 216, .6);
}
.brand-line { height: 1px; width: min(140px, 14vw); background: linear-gradient(90deg, transparent, var(--magenta)); }
.brand-sub .brand-line:last-child { transform: scaleX(-1); }
.brand-tag { margin-top: 14px; color: var(--dim); font-size: 12px; letter-spacing: .3em; }

/* Glitch text (logo, muerte, transición) */
.glitch-text { position: relative; display: inline-block; }
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
}
.glitch-text::before { color: var(--magenta); animation: glitchA 3.2s infinite steps(1); }
.glitch-text::after { color: var(--cyan); animation: glitchB 3.2s infinite steps(1); }
@keyframes glitchA {
  0%, 91%, 100% { opacity: 0; transform: none; clip-path: none; }
  92% { opacity: .85; transform: translate(-3px, 1px); clip-path: inset(10% 0 60% 0); }
  94% { opacity: .85; transform: translate(3px, -1px); clip-path: inset(55% 0 20% 0); }
  96% { opacity: 0; }
}
@keyframes glitchB {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: none; }
  93% { opacity: .8; transform: translate(3px, 1px); clip-path: inset(35% 0 40% 0); }
  95% { opacity: .8; transform: translate(-2px, -2px); clip-path: inset(70% 0 5% 0); }
  97% { opacity: 0; }
}

/* ---------- Paneles con corchetes de esquina ---------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px;
  backdrop-filter: blur(2px);
}
.corner::before, .corner::after,
.corner-sm::before, .corner-sm::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.corner::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.corner::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.corner-sm::before { top: -1px; left: -1px; border-top: 2px solid var(--line-glow); border-left: 2px solid var(--line-glow); width: 9px; height: 9px; }
.corner-sm::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--line-glow); border-right: 2px solid var(--line-glow); width: 9px; height: 9px; }

.panel h3 {
  color: var(--cyan); font-size: 12px; letter-spacing: .25em;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.panel h4 { color: var(--dim); font-size: 11px; letter-spacing: .15em; }
.panel > * + * { margin-top: 10px; }
.h-dot { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex: none; }

/* ---------- Controles base ---------- */
input[type=text], input:not([type]), select, .code-input {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--mono);
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(53, 224, 255, .25); }
select { cursor: pointer; appearance: none; }
.code-input { text-transform: uppercase; letter-spacing: .4em; text-align: center; }

.field { display: block; text-align: center; margin-bottom: 26px; }
.field span { display: block; color: var(--dim); font-size: 11px; letter-spacing: .3em; margin-bottom: 8px; }
.field input { width: 300px; text-align: center; font-size: 18px; letter-spacing: .2em; }

.btn {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 10px 18px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: .16em;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  position: relative;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px rgba(53, 224, 255, .25), inset 0 0 14px rgba(53, 224, 255, .06); }
.btn.primary {
  background: linear-gradient(180deg, rgba(53, 224, 255, .95), rgba(31, 160, 190, .95));
  color: #032028; border-color: var(--cyan); font-weight: 700;
}
.btn.primary:hover { box-shadow: 0 0 24px rgba(53, 224, 255, .55); color: #001318; }
.btn.big { padding: 13px 26px; font-size: 14px; }
.btn.danger:hover { border-color: var(--red); color: var(--red); box-shadow: 0 0 14px rgba(255, 77, 94, .3); }
.btn.small { padding: 6px 10px; font-size: 11px; }

/* Sliders neón */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: linear-gradient(90deg, var(--cyan-dim), rgba(53, 224, 255, .4));
  border: 1px solid var(--line);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); border: 1px solid #032028;
}
input[type=range]::-moz-range-track { height: 4px; background: rgba(53, 224, 255, .2); border: 1px solid var(--line); }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); border: 1px solid #032028; }

/* Interruptores */
.switch { -webkit-appearance: none; appearance: none; width: 40px; height: 20px; flex: none;
  background: var(--bg2); border: 1px solid var(--line); position: relative; cursor: pointer; transition: all .18s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: var(--dim); transition: all .18s; }
.switch:checked { border-color: var(--cyan); background: var(--cyan-dim); }
.switch:checked::after { left: 22px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; color: var(--dim); letter-spacing: .1em; cursor: pointer; }
.switch-row span { color: var(--dim); }

/* Chips de personalidad */
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.chip-grid label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .06em; color: var(--dim);
  border: 1px solid var(--line); padding: 6px 8px; cursor: pointer;
  transition: all .15s; user-select: none;
}
.chip-grid label:has(input:checked) {
  color: var(--magenta); border-color: var(--magenta);
  box-shadow: 0 0 10px rgba(255, 79, 216, .25), inset 0 0 10px rgba(255, 79, 216, .06);
}
.chip-grid input { -webkit-appearance: none; appearance: none; width: 7px; height: 7px; flex: none;
  background: var(--line); transition: all .15s; }
.chip-grid input:checked { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* Tooltips */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; z-index: 60; left: 0; bottom: calc(100% + 8px);
  width: max(220px, 80%);
  background: #0a1220; color: var(--text);
  border: 1px solid var(--cyan); box-shadow: 0 0 18px rgba(53, 224, 255, .25);
  padding: 8px 10px; font-size: 11px; letter-spacing: .03em; line-height: 1.5;
  pointer-events: none; animation: tipIn .12s ease-out;
}
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Menú ---------- */
.menu-box { max-width: 1080px; margin: 0 auto; padding: 18px; position: relative; }
.menu-panels { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.space { justify-content: space-between; margin-top: 14px; }

.room-list { max-height: 230px; overflow: auto; }
.room-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); margin-bottom: 6px; cursor: pointer;
  transition: all .15s; background: rgba(10, 14, 23, .5);
}
.room-entry:hover { border-color: var(--cyan); box-shadow: inset 0 0 14px rgba(53, 224, 255, .06); transform: translateX(2px); }
.room-entry .dim { font-size: 11px; }

.lb-rows table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lb-rows td, .lb-rows th { padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.lb-rows th { color: var(--dim); font-size: 10px; letter-spacing: .15em; }

/* ---------- Lobby ---------- */
.lobby-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 26px; border-bottom: 1px solid var(--line); position: relative;
}
.lobby-head h2 { letter-spacing: .2em; }
.code-chip {
  color: var(--gold); letter-spacing: .35em; cursor: pointer;
  border: 1px dashed rgba(255, 210, 74, .5); padding: 2px 8px;
}
.code-chip:hover { box-shadow: 0 0 12px rgba(255, 210, 74, .35); }
.lobby-head .btn { margin-left: 8px; }

.lobby-grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 14px;
  padding: 16px 26px; align-items: start; position: relative;
}
/* Los hijos de un grid tienen min-width:auto: un texto sin espacios estiraría
   la columna y reventaría el layout */
.lobby-grid > * { min-width: 0; }

.player-list { list-style: none; margin-bottom: 18px; }
.player-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); margin-bottom: 6px;
  font-size: 13px; background: rgba(10, 14, 23, .5);
  animation: screenIn .25s ease-out;
}
.player-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.player-list .host { color: var(--gold); }
.player-list .kit-tag { color: var(--kit-accent, var(--dim)); font-size: 11px; letter-spacing: .08em; flex: none; text-align: right; }

.kit-cards { display: grid; gap: 8px; }
.kit-card {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center;
  border: 1px solid var(--line); padding: 10px; cursor: pointer;
  transition: all .15s; background: rgba(10, 14, 23, .5);
  border-left: 3px solid var(--kit-accent, var(--line));
}
/* Acento de color por clase: Distracción/Sigilo/Destrucción deben distinguirse
   de un vistazo (los previews de agente comparten el cuerpo cian por diseño) */
.kit-distraction { --kit-accent: var(--magenta); --kit-accent-soft: rgba(255, 79, 216, .3); }
.kit-stealth { --kit-accent: var(--cyan-hi); --kit-accent-soft: rgba(125, 238, 255, .3); }
.kit-destruction { --kit-accent: var(--orange); --kit-accent-soft: rgba(255, 157, 58, .3); }
.kit-card b { color: var(--kit-accent, var(--text)); }
.kit-card:hover { border-color: var(--kit-accent, var(--cyan)); transform: translateX(2px); }
.kit-card.selected {
  border-color: var(--kit-accent, var(--magenta));
  box-shadow: 0 0 16px var(--kit-accent-soft, rgba(255, 79, 216, .3));
}
.kit-card canvas { width: 48px; height: 48px; image-rendering: pixelated; background: rgba(53,224,255,.04); border: 1px solid var(--line); }
.kit-card b { display: block; font-size: 13px; letter-spacing: .08em; margin-bottom: 2px; }
.kit-card .kit-desc { color: var(--dim); font-size: 11px; display: block; }
.kit-card .kit-abilities { display: flex; gap: 4px; margin-top: 5px; }
.kit-card .kit-abilities canvas { width: 20px; height: 20px; border: none; background: none; }

.cfg .cfg-row { display: block; margin-bottom: 15px; font-size: 12px; }
.cfg .cfg-row > span { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--dim); letter-spacing: .12em; font-size: 11px; }
.cfg .cfg-row > span b { color: var(--cyan); }
.cfg.locked { opacity: .55; pointer-events: none; }
/* En pantallas de PC bajas (720p) las ~14 filas desbordaban: se cierra con scroll
   propio en vez de reventar la columna del lobby. */
#cfg-panel { max-height: min(60vh, 470px); overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
#cfg-panel::-webkit-scrollbar { width: 6px; }
#cfg-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#cfg-panel::-webkit-scrollbar-track { background: transparent; }

.chat { display: flex; flex-direction: column; max-height: 72vh; }
.chat-log { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 220px; max-height: 48vh; font-size: 12px; margin-bottom: 10px; }
/* overflow-wrap: un "asasas..." de 200 caracteres sin espacios rompía el panel */
.chat-log p { margin-bottom: 5px; line-height: 1.45; animation: screenIn .2s; overflow-wrap: anywhere; }
.chat-log b { color: var(--cyan); }

/* ---------- HUD de juego ---------- */
#screen-game { overflow: hidden; background: var(--bg); }
#game-canvas { display: block; image-rendering: pixelated; }

.hud-label { color: var(--dim); font-size: 9px; letter-spacing: .25em; }

.hud-top {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: center; pointer-events: none;
}
.hud-timer-box {
  background: var(--panel); border: 1px solid var(--line);
  padding: 6px 18px; text-align: center;
}
.hud-timer-box .hud-label { display: block; }
#hud-timer { font-size: 24px; font-weight: 700; color: var(--text); text-shadow: 0 0 10px rgba(53, 224, 255, .4); }
#hud-timer.low { color: var(--red); text-shadow: 0 0 12px rgba(255, 77, 94, .7); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

#hud-phase { color: var(--red); font-size: 15px; letter-spacing: .2em; animation: pulse 1s infinite; text-shadow: 0 0 14px rgba(255, 77, 94, .8); }

/* Killfeed anclado a la esquina superior derecha (deja libre el centro para
   timer/pánico/mutador). Los toasts entran desde la derecha y se apilan hacia abajo. */
.killfeed {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  pointer-events: none; z-index: 25; max-width: min(340px, 32vw);
}
.kill-toast {
  background: var(--panel); border: 1px solid var(--red);
  padding: 8px 20px; font-size: 14px; letter-spacing: .08em; text-align: right;
  color: var(--text); box-shadow: 0 0 24px rgba(255, 77, 94, .35);
  animation: killIn .25s ease-out, killOut .4s ease-in 3.2s forwards;
}
.kill-toast b { color: var(--red); }
.kill-toast .stolen { color: var(--gold); }
.kill-toast .lost { color: var(--red); font-weight: 700; }
/* Variantes del feed privado: buenas noticias en cian, muertes/errores en rojo */
.kill-toast.bank { border-color: var(--cyan); box-shadow: 0 0 24px rgba(53, 224, 255, .3); }
.kill-toast.death { background: rgba(60, 10, 18, .92); }
@keyframes killIn { from { opacity: 0; transform: translateX(24px) scale(1.04); } }
@keyframes killOut { to { opacity: 0; transform: translateX(16px); } }

.hud-mutator {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--magenta);
  padding: 4px 14px; font-size: 11px; letter-spacing: .1em; color: var(--magenta);
  box-shadow: 0 0 14px rgba(255, 79, 216, .25);
  pointer-events: none; white-space: nowrap;
}

.hud-left {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: 238px;
}
.res-panel { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; }
.hud-stat { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.hud-stat .hud-label { font-size: 11px; }
.hud-stat b { font-size: 26px; font-weight: 700; min-width: 3ch; text-align: right; margin-left: auto; line-height: 1; }
.stat-icon { image-rendering: pixelated; width: 24px; height: 24px; flex: none; }
.hud-stat.mb b { color: var(--green); text-shadow: 0 0 12px rgba(88, 255, 155, .7); }
.hud-stat.gem b { color: var(--magenta); text-shadow: 0 0 12px rgba(255, 79, 216, .7); }
.hud-stat.bank b { color: var(--gold); text-shadow: 0 0 12px rgba(255, 210, 74, .7); }
/* llevas gemas sin bancar: riesgo a la vista — la fila late */
.hud-stat.gem.carrying b,
.hud-stat.gem.carrying .stat-icon { animation: gemPulse 1.1s infinite; }
@keyframes gemPulse { 50% { opacity: .7; } }
/* (Sin barra de integridad: el juego es 100% instakill) */

/* Barra de UPLINK: fija y centrada sobre la barra de habilidades — bancar es EL
   momento de tensión y merece el centro de la mirada. El progreso persiste
   fuera del anillo drenando despacio: el estado .draining lo cuenta en ámbar. */
.upload {
  position: fixed; left: 50%; bottom: 118px; transform: translateX(-50%);
  width: min(380px, 88vw); z-index: 20;
  background: var(--panel); border: 1px solid var(--cyan); padding: 10px 14px;
  box-shadow: 0 0 28px rgba(53, 224, 255, .35);
}
.upload-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.upload-label { color: var(--cyan); font-size: 12px; letter-spacing: .2em; animation: pulse 1.2s infinite; }
#upload-pct { color: var(--cyan); font-size: 18px; font-weight: 700; text-shadow: 0 0 10px rgba(53, 224, 255, .6); }
.upload-track { position: relative; height: 14px; background: var(--bg2); border: 1px solid var(--line); margin-top: 7px; overflow: hidden;
  /* segmentos */
  background-image: repeating-linear-gradient(90deg, transparent 0 9%, rgba(34, 48, 82, .9) 9% 10%); }
#upload-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #1a7f99, var(--cyan)); transition: width .12s linear;
  box-shadow: 0 0 10px rgba(53, 224, 255, .8); }
.upload-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  width: 40%; animation: scanX 1s linear infinite; }
@keyframes scanX { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
/* drenando: fuera del anillo el progreso gotea — vuelve o lo pierdes */
.upload.draining { border-color: var(--gold); box-shadow: 0 0 28px rgba(255, 210, 74, .3); }
.upload.draining .upload-label { color: var(--gold); animation: pulse .55s infinite; }
.upload.draining #upload-pct { color: var(--gold); text-shadow: 0 0 10px rgba(255, 210, 74, .6); }
.upload.draining #upload-bar { background: linear-gradient(90deg, #8a6a10, var(--gold)); box-shadow: 0 0 10px rgba(255, 210, 74, .8); }
.upload.draining .upload-scan { display: none; }

.contract { background: var(--panel); border: 1px solid var(--magenta); padding: 8px 10px; font-size: 11px; line-height: 1.5; }
.contract-label { display: block; color: var(--magenta); font-size: 9px; letter-spacing: .25em; margin-bottom: 3px; }
.contract b { color: var(--gold); margin-left: 6px; }
.contract.done { border-color: var(--green); box-shadow: 0 0 14px rgba(88, 255, 155, .25); }
.contract.done b { color: var(--green); }

/* Slots de habilidad */
.ability-bar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; pointer-events: auto;
}
.ability-slot {
  width: 62px; height: 70px; position: relative;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 8px; font-size: 9px; color: var(--dim); letter-spacing: .04em;
  transition: border-color .2s;
}
.ability-slot canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.ability-slot .key {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--gold); font-weight: 700; font-size: 10px; padding: 0 5px;
}
.ability-slot .cost { position: absolute; bottom: 2px; right: 4px; color: var(--green); font-size: 9px; }
.ability-slot .uses { position: absolute; top: 2px; right: 4px; color: var(--magenta); font-size: 9px; }
.ability-slot .regen { position: absolute; bottom: 2px; left: 4px; color: var(--green); font-size: 9px; }
.ability-slot .ab-name { margin-top: 2px; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Munición del disparo: pips (una por bala) con relleno radial de su recarga */
.ammo-pips { position: absolute; top: 3px; right: 4px; display: flex; gap: 2px; }
.ammo-pips i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  border: 1px solid rgba(255, 210, 74, .5); box-sizing: border-box;
}
.ammo-pips i.full { background: var(--gold); box-shadow: 0 0 5px rgba(255, 210, 74, .7); border-color: var(--gold); }
.ammo-pips i.charging { border-color: rgba(255, 210, 74, .7); } /* el fondo lo pinta el conic-gradient inline */
.ammo-pips i.empty { background: rgba(255, 210, 74, .06); }
.ability-slot .cd {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--red); font-weight: 700; text-shadow: 0 1px 4px #000;
}
.ability-slot.ready { border-color: rgba(53, 224, 255, .55); box-shadow: 0 0 10px rgba(53, 224, 255, .15); }
.ability-slot.noMb { border-color: rgba(255, 77, 94, .6); }
.ability-slot.noMb .cost { color: var(--red); }

/* NO DISPONIBLE (cooldown o sin cargas): atenuado fuerte + icono de bloqueo. Debe
   quedar clarísimo aunque estés apuntando o haciendo hover que NO va a salir. */
.ability-slot.notready { opacity: .82; border-color: rgba(102, 119, 156, .5); cursor: not-allowed; }
.ability-slot.notready canvas { filter: grayscale(1) brightness(.5); }
.ability-slot.notready .ab-name { color: #48547a; }
.ability-slot.notready:hover { border-color: var(--red); box-shadow: 0 0 12px rgba(255, 77, 94, .25); }
/* Símbolo "prohibido" (⊘) dibujado por CSS: círculo rojo + barra diagonal. Sin glifos. */
.ability-slot .lock {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  border: 2px solid var(--red); border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .9);
}
.ability-slot .lock::after {
  content: ''; position: absolute; top: 50%; left: -2px; width: 22px; height: 2px;
  background: var(--red); transform: rotate(45deg); transform-origin: center;
}
.ability-slot.notready .lock { animation: lockPulse 1s ease-in-out infinite; }
@keyframes lockPulse { 50% { opacity: .45; } }
.ability-slot { cursor: pointer; }
.ability-slot.selected {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 210, 74, .35), inset 0 0 10px rgba(255, 210, 74, .08);
}
.ability-slot.selected .key { color: var(--bg2); background: var(--gold); border-color: var(--gold); }

.hud-controls {
  position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--dim); text-align: right; pointer-events: none; letter-spacing: .08em;
}
.hud-controls i { font-style: normal; color: var(--cyan); border: 1px solid var(--line); padding: 0 4px; margin-right: 4px; }
#controls-legend { display: contents; } /* la leyenda se regenera desde los binds reales */

/* Tienda */
.shop-panel {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: min(340px, 34vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--gold);
  padding: 12px; box-shadow: 0 0 26px rgba(255, 210, 74, .18);
  animation: screenIn .2s;
}
.shop-panel::before, .shop-panel::after { border-color: var(--gold) !important; }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.shop-head h3 { color: var(--gold); font-size: 13px; letter-spacing: .18em; }
.shop-balance { font-size: 12px; color: var(--dim); letter-spacing: .1em; }
.shop-balance b { color: var(--green); font-size: 15px; text-shadow: 0 0 8px rgba(88, 255, 155, .5); }
/* Pestañas: reparten el contenido para que ninguna sección haga scroll */
.shop-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.shop-tab {
  flex: 1; background: transparent; color: var(--dim); cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 4px;
  font: inherit; font-size: 10px; letter-spacing: .08em; transition: background .12s, color .12s, border-color .12s;
}
.shop-tab:hover { border-color: var(--gold); color: var(--text); }
.shop-tab.active { border-color: var(--gold); color: var(--bg2); background: var(--gold); }
.shop-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.shop-body::-webkit-scrollbar { width: 6px; }
.shop-body::-webkit-scrollbar-thumb { background: var(--line); }
.shop-pane { display: none; }
.shop-pane.active { display: block; }
.shop-grid { display: flex; flex-direction: column; gap: 5px; }
.shop-grid.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
/* Recarga de CD: un botón grande e inconfundible */
.shop-cd-desc { font-size: 11px; color: var(--dim); line-height: 1.45; margin: 8px 2px 14px; }
.shop-cd-btn {
  width: 100%; background: transparent; cursor: pointer; font: inherit;
  border: 1px solid var(--gold); color: var(--gold); border-radius: 4px;
  padding: 13px 8px; font-size: 13px; letter-spacing: .07em; transition: background .12s, color .12s, border-color .12s;
}
.shop-cd-btn b { color: var(--green); font-size: 15px; }
.shop-cd-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg2); }
.shop-cd-btn:hover:not(:disabled) b { color: var(--bg2); }
.shop-cd-btn:disabled { opacity: .45; cursor: default; border-color: var(--line); color: var(--dim); }
.shop-cd-btn.poor { border-color: var(--red); color: var(--red); }
.shop-cd-btn.poor b { color: var(--red); }
.shop-cd-sub { text-align: center; font-size: 10px; color: var(--dim); margin-top: 9px; letter-spacing: .05em; }

.shop-item {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px;
  font-size: 11px; transition: border-color .12s, box-shadow .12s, opacity .12s;
}
.shop-item canvas { width: 28px; height: 28px; image-rendering: pixelated; align-self: start; }
.shop-info b { display: block; font-size: 12px; color: var(--text); }
.shop-info .dim { font-size: 10px; line-height: 1.35; }
.shop-state { position: absolute; top: 5px; right: 8px; font-size: 9px; color: var(--gold); letter-spacing: .05em; }
/* Chip de acción: el botón claro de "qué pasa si pulso" */
.shop-action {
  grid-column: 2; margin-top: 5px; align-self: start;
  display: inline-block; font-size: 10px; letter-spacing: .06em;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--dim);
}
.shop-action b { color: var(--green); }
.shop-action i { color: var(--dim); font-style: normal; font-size: 9px; }
.shop-action .req { color: var(--dim); }

/* Comprable: interactivo y llamativo */
.shop-item.buyable { cursor: pointer; }
.shop-item.buyable:hover { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(255, 210, 74, .1); }
.shop-item.buyable .shop-action { border-color: var(--gold); color: var(--gold); }
.shop-item.buyable:hover .shop-action { background: var(--gold); color: var(--bg2); }
.shop-item.buyable:hover .shop-action b { color: var(--bg2); }
/* Estados no interactivos */
.shop-item.owned { opacity: .82; }
.shop-item.owned .shop-state { color: var(--green); }
.shop-item.poor { opacity: .5; }
.shop-item.poor .shop-action { border-color: var(--red); color: var(--red); }
.shop-item.poor .shop-action b { color: var(--red); }
.shop-item.locked { opacity: .45; }
/* Confirmación de compra/recarga: destello verde en el propio ítem (WP5) */
.shop-item.just-bought { animation: shopBought .5s ease-out; }
@keyframes shopBought {
  0% { border-color: var(--green); box-shadow: inset 0 0 22px rgba(88, 255, 155, .55), 0 0 18px rgba(88, 255, 155, .35); }
  100% { box-shadow: inset 0 0 0 rgba(88, 255, 155, 0); }
}
.shop-hint { margin-top: 8px; font-size: 9px; color: var(--dim); text-align: center; line-height: 1.4; }

/* El overlay de muerte es informativo: no debe bloquear el engranaje de ajustes */
.death-overlay { pointer-events: none; }

/* Overlays de estado */
.death-overlay {
  position: absolute; inset: 0; z-index: 20;
  background: radial-gradient(ellipse at center, rgba(120, 10, 20, .32), rgba(5, 6, 10, .75));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  backdrop-filter: blur(1.5px); animation: screenIn .15s;
}
.death-overlay h2 { color: var(--red); font-size: 42px; letter-spacing: .3em; text-shadow: 0 0 30px rgba(255, 32, 56, .8); }
/* Quién te mató y cuánto pierdes: la lectura clave del respawn */
.death-cause { margin-top: 14px; font-size: 17px; letter-spacing: .1em; }
.death-cause b { color: var(--red); }
.death-cause .lost { color: var(--gold); font-weight: 700; }
.death-overlay .respawn-line { margin-top: 16px; font-size: 16px; letter-spacing: .15em; }
.death-overlay .respawn-line b { color: var(--cyan); }
.death-overlay .dim { margin-top: 10px; }

.flicker-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 15;
  background: rgba(255, 32, 56, .08);
  animation: pulse .2s infinite;
}

/* Transición de inicio de partida */
.transition {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.transition p { color: var(--cyan); font-size: 20px; letter-spacing: .3em; }
.transition-bar { width: 300px; height: 4px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.transition-bar div { height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: loadBar .85s ease-out forwards; }
@keyframes loadBar { to { width: 100%; } }

/* ---------- Cuenta atrás final (últimos 5s de ronda) ---------- */
.countdown {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 18vh; pointer-events: none; z-index: 20;
}
.countdown span {
  font-size: clamp(80px, 14vw, 130px); font-weight: 700; color: var(--cyan);
  text-shadow: 0 0 26px rgba(53, 224, 255, .6), 0 2px 0 #000;
  animation: countPop .95s ease-out;
}
.countdown.danger span { color: var(--red); text-shadow: 0 0 26px rgba(255, 32, 56, .65), 0 2px 0 #000; }
@keyframes countPop {
  0% { transform: scale(1.7); opacity: 0; }
  16% { transform: scale(1); opacity: 1; }
  80% { opacity: .92; }
  100% { transform: scale(.9); opacity: .35; }
}

/* ---------- Modal fin de ronda ---------- */
.modal {
  position: absolute; inset: 0; background: rgba(3, 5, 10, .82);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  animation: screenIn .25s;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--cyan);
  padding: 30px; min-width: 520px; text-align: center;
  box-shadow: 0 0 60px rgba(53, 224, 255, .2);
}
.modal-box h2 { letter-spacing: .3em; margin-bottom: 20px; font-size: 20px; }

/* ---------- Modal de ajustes ---------- */
.settings-box { max-width: 560px; max-height: 84vh; overflow-y: auto; text-align: left; }
.settings-sec { margin-bottom: 18px; }
.settings-sec h3 {
  color: var(--cyan); font-size: 12px; letter-spacing: .25em;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 4px; font-size: 13px; cursor: pointer;
}
.settings-row input[type=range] { flex: 1; max-width: 220px; }
.settings-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cyan); }
.settings-row b { min-width: 44px; text-align: right; color: var(--cyan); }
.settings-binds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.bind-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 2px; font-size: 12px;
}
.bind-row .bind-key { min-width: 110px; text-align: center; color: var(--gold); }
.bind-row .bind-key.waiting { color: var(--magenta); border-color: var(--magenta); animation: pulse .5s infinite; }
.bind-row.swapped .bind-key { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 210, 74, .35); }
.settings-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.hud-gear { pointer-events: auto; margin-left: 6px; }
.score-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.score-table th { color: var(--dim); font-size: 10px; letter-spacing: .2em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.score-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.score-table tr.winner td { color: var(--gold); font-weight: 700; text-shadow: 0 0 10px rgba(255, 210, 74, .4); }
.score-table tr.winner td:first-child::before { content: '\2726 '; }

.awards { margin-bottom: 20px; text-align: left; }
.awards .award {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; font-size: 12px; color: var(--dim);
  border-left: 2px solid var(--line); margin-bottom: 4px;
}
.awards .award canvas { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.awards .award b { color: var(--gold); }

/* ---------- Pulido UX: aviso de pánico, contrato, mutador, feed, flash ---------- */

/* Aviso previo de pánico (T-10s): banner ámbar bajo el timer, cuenta viva */
.hud-panic-warn {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--gold);
  padding: 6px 18px; font-size: 13px; letter-spacing: .12em; color: var(--gold);
  box-shadow: 0 0 22px rgba(255, 210, 74, .35);
  pointer-events: none; white-space: nowrap; z-index: 26;
  animation: pulse .8s infinite;
}
/* nunca dos banners superiores a la vez: el pánico manda sobre el mutador */
#hud-panic-warn:not(.hidden) ~ .hud-mutator { display: none; }
/* llevas gemas y el pánico se acerca: el contador late en ámbar */
.hud-stat.gem.panic-risk b,
.hud-stat.gem.panic-risk .stat-icon { animation: panicRisk .5s infinite; }
@keyframes panicRisk { 50% { opacity: .55; filter: hue-rotate(-70deg); } }

/* Mutador: expandido (nombre + desc) los primeros 12s; luego colapsa al nombre.
   Hover lo re-expande — el contexto nunca se pierde del todo. */
.hud-mutator { pointer-events: auto; }
.hud-mutator b { font-weight: 700; }
.hud-mutator .mut-desc { display: none; }
.hud-mutator.expanded .mut-desc,
.hud-mutator:hover .mut-desc { display: inline; }

/* Línea de mutador en la transición de inicio */
.transition-mutator {
  color: var(--magenta) !important; font-size: 14px !important; letter-spacing: .15em !important;
  border: 1px solid var(--magenta); padding: 8px 20px;
  box-shadow: 0 0 22px rgba(255, 79, 216, .3);
  animation: screenIn .4s;
}

/* Contrato secreto: revelación expandida, pulso de progreso, chip de recompensa */
.contract { position: relative; transition: border-color .3s; }
.contract-long, .contract-reward { display: none; }
.contract.expanded .contract-long {
  display: block; margin-top: 5px; color: var(--text); opacity: .85; font-size: 11px;
}
.contract.expanded .contract-reward {
  display: block; margin-top: 4px; color: var(--gold); font-size: 10px; letter-spacing: .12em;
}
.contract.reveal {
  animation: contractReveal .5s ease-out;
  box-shadow: 0 0 24px rgba(255, 79, 216, .45);
}
@keyframes contractReveal { from { opacity: 0; transform: translateY(8px); } }
.contract.pulse { animation: contractPulse .4s ease-out; }
@keyframes contractPulse {
  30% { box-shadow: 0 0 26px rgba(255, 79, 216, .7); border-color: #ff8ae4; }
}

/* Feed privado: variantes de línea (banco = verde, contrato = magenta) */
.kill-toast.bank { border-color: var(--green); box-shadow: 0 0 24px rgba(88, 255, 155, .3); }
.kill-toast.bank .stolen { color: var(--green); }
.kill-toast.contract { border-color: var(--magenta); box-shadow: 0 0 24px rgba(255, 79, 216, .3); }
.kill-toast.contract b { color: var(--magenta); }
.kill-toast.gold { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 26px rgba(255, 210, 74, .4); letter-spacing: .12em; }
.kill-toast.gold .stolen { color: var(--goldHi, #ffeeb0); }
/* Icono pixel-art (reusa el sprite de la gema) incrustado en el toast */
.kill-toast .feed-ico { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; image-rendering: pixelated; }

/* Flash de "habilidad lista": el cooldown cruza a 0 o entra munición nueva */
.ability-slot.flash { animation: slotFlash .3s ease-out; }
@keyframes slotFlash {
  0% { box-shadow: 0 0 0 rgba(242, 254, 255, 0); }
  40% { box-shadow: 0 0 18px rgba(242, 254, 255, .9), inset 0 0 14px rgba(242, 254, 255, .5); border-color: #f2feff; }
  100% { box-shadow: 0 0 0 rgba(242, 254, 255, 0); }
}

/* "-N MB" flotante al comprar en la tienda */
.mb-float {
  position: fixed; z-index: 60; pointer-events: none;
  color: var(--red); font-weight: 700; font-size: 16px;
  text-shadow: 0 0 10px rgba(255, 77, 94, .7), 0 1px 0 #000;
  animation: mbFloat 1.25s ease-out forwards;
}
@keyframes mbFloat {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-38px); }
}

/* Chuleta de flujo en el lobby */
.flow-guide { list-style: none; font-size: 11px; line-height: 1.7; color: var(--dim); }
.flow-guide li { margin-bottom: 3px; }
.flow-guide b { font-weight: 700; }
.fg-magenta { color: var(--magenta); }
.fg-cyan { color: var(--cyan); }
.fg-gold { color: var(--gold); }
.fg-green { color: var(--green); }
.fg-red { color: var(--red); }

/* Etiqueta de estilo de juego en las tarjetas de kit */
.kit-card .kit-style { display: block; margin-top: 3px; color: var(--gold); font-size: 10px; letter-spacing: .06em; }

/* ============================================================================
   HUD RESPONSIVE — el HUD se adapta a cualquier pantalla. El canvas siempre
   ocupa la ventana completa; aquí escalamos los paneles superpuestos para que
   quepan y sigan legibles en portátiles pequeños, tablets y móviles.
   ========================================================================== */

/* La barra de habilidades se centra y PUEDE envolver si no cabe (muchas habilidades
   en pantalla estrecha): nunca se sale por los lados. */
.ability-bar { flex-wrap: wrap; justify-content: center; max-width: 96vw; }

/* Escritorio medio (portátiles, ventana no maximizada): el menú apila sus paneles
   y el lobby pasa de 3 a 2 columnas con el chat a lo ancho, para que nada desborde
   en resoluciones de PC pequeñas (p. ej. 1366×768 con la ventana reducida). */
@media (max-width: 1024px) {
  .menu-panels { grid-template-columns: 1fr; }
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .lobby-grid > .chat { grid-column: 1 / -1; }
  .chat { max-height: 34vh; }
  .chat-log { min-height: 120px; max-height: 26vh; }
}

/* Pantallas medianas (tablets, portátiles pequeños, ventanas a media pantalla) */
@media (max-width: 900px) {
  .hud-left { width: min(190px, 42vw); }
  .res-panel { padding: 8px 9px; }
  .hud-stat { font-size: 12px; }
  #hud-timer { font-size: 20px; }
  .ability-slot { width: 54px; height: 62px; }
  .ability-slot canvas { width: 28px; height: 28px; }
  .shop-panel { width: min(280px, 44vw); }
  .hud-controls { font-size: 9px; }
}

/* Móviles / ventanas muy estrechas: HUD compacto y legible */
@media (max-width: 560px) {
  .hud-top { top: 6px; gap: 8px; }
  #hud-timer { font-size: 17px; }
  #hud-phase, #hud-emp { font-size: 11px; }
  .hud-mutator { top: 46px; font-size: 9px; padding: 3px 8px; }
  .hud-left { left: 6px; bottom: 6px; width: min(150px, 46vw); gap: 5px; }
  .res-panel { padding: 6px 7px; }
  .hud-stat { font-size: 11px; padding: 2px 0; }
  .hud-stat b { font-size: 12px; }
  .ability-bar { bottom: 6px; gap: 5px; }
  .ability-slot { width: 46px; height: 54px; padding-top: 6px; font-size: 8px; }
  .ability-slot canvas { width: 24px; height: 24px; }
  .ability-slot .key { font-size: 9px; padding: 0 3px; }
  .ammo-pips i { width: 7px; height: 7px; }
  /* La tienda pasa a ocupar casi todo el ancho, centrada y por encima de la barra */
  .shop-panel {
    width: 94vw; right: 3vw; left: 3vw; top: auto; bottom: 74px; transform: none;
    max-height: 60vh;
  }
  .hud-controls { display: none; } /* en móvil el espacio manda; los binds se aprenden jugando */
  .killfeed { top: 70px; right: 6px; max-width: 76vw; }
  .kill-toast { font-size: 12px; padding: 6px 12px; }
}

/* Ventanas MUY bajas (landscape de móvil): recorta alturas verticales */
@media (max-height: 480px) {
  .ability-slot { height: 50px; }
  .shop-panel { max-height: 92vh; top: 50%; bottom: auto; transform: translateY(-50%); }
  .death-overlay h2 { font-size: 28px; }
}