/* Tipografías de ESTILO.md (OFL, licencias en client/fonts/): servidas desde el juego, sin Google. */
@font-face { font-family: 'Big Shoulders Stencil Display'; src: url(fonts/big-shoulders-stencil-display.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url(fonts/share-tech-mono.woff2) format('woff2'); font-weight: 400; font-display: swap; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: system-ui, sans-serif;
  color: #cfe;
}

canvas { display: block; }

/* Menú neutro "Colonia 2000" (ESTILO.md): lista de texto a la izquierda y ventana a la derecha. Fondo
   noche, texto polvo, filetes concreto, títulos en Big Shoulders Stencil y el resto en Share Tech Mono.
   Bordes rectos de 1 px con un leve bisel (luz arriba/izquierda). El color de cada especie aparece
   solo en su ficha. */
.menu {
  --noche: #16171a; --oxido: #3d3129; --concreto: #6e6a5e; --polvo: #b9a988; --claro: #e6dcc4;
  --hondo: #101113; --luz: #8f8873;
  --bisel: var(--luz) #0b0c0d #0b0c0d var(--luz); --hundido: #0b0c0d var(--luz) var(--luz) #0b0c0d;
  --stencil: 'Big Shoulders Stencil Display', Impact, 'Arial Narrow', sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, Consolas, monospace;
}
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 14, 16, 0.72);
  z-index: 10;
}
#overlay.hidden { display: none; }

.menu {
  display: flex; gap: 2.4em; width: min(58em, calc(100vw - 32px)); height: min(36em, calc(100vh - 32px));
  font: 15px/1.45 var(--mono); color: var(--polvo); color-scheme: dark;
}
.menu button, .menu input { font: inherit; border-radius: 0; }
.menu :focus-visible { outline: 1px solid var(--claro); outline-offset: 2px; }
.side { flex: 0 0 13em; display: flex; flex-direction: column; padding-top: 1em; }
.menu h1 { margin: 0 0 1.8em; font: 900 3rem/0.9 var(--stencil); letter-spacing: 0.04em; color: var(--claro); }
.menu h1::before { content: ''; display: block; width: 0.9em; height: 0.9em; margin: 0 0 0.25em; background: currentColor; -webkit-mask: url(logo.svg) center/contain no-repeat; mask: url(logo.svg) center/contain no-repeat; image-rendering: pixelated; }
.menu h1 small { display: block; margin-top: 0.6em; font: 0.65rem/1.4 var(--mono); letter-spacing: 0.22em; color: var(--concreto); }
#tabs { display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--concreto); }
#tabs button {
  padding: 0.3em 0 0.3em 0.9em; color: var(--polvo); background: transparent; border: 0; cursor: pointer; margin-left: -1px;
  border-left: 3px solid transparent; font: 700 1.5rem/1.1 var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
}
#tabs button:hover { color: var(--claro); }
#tabs button.on { color: var(--claro); border-left-color: var(--claro); }
#name {
  margin-top: auto; padding: 0.4em 0.6em; color: var(--claro); background: var(--hondo); border: 1px solid; border-color: var(--hundido); outline: none;
}
#name::placeholder { color: var(--concreto); }
.win {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: rgba(22, 23, 26, 0.94); border: 1px solid; border-color: var(--bisel); box-shadow: 0 0 0 4px rgba(22, 23, 26, 0.5);
}
.tb { padding: 0.45em 1em; background: var(--oxido); color: var(--claro); border-bottom: 1px solid #0b0c0d; font: 700 1.05rem/1 var(--stencil); letter-spacing: 0.18em; text-transform: uppercase; }
.menu section { flex: 1; padding: 0.4em 1.2em 1.1em; overflow-y: auto; scrollbar-color: var(--concreto) transparent; }
.menu section[hidden] { display: none; }
.menu h2 { margin: 0.9em 0 0.5em; font: 700 1.05rem/1 var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; color: var(--claro); }
.menu h3 { margin: 0.7em 0 0.4em; font-size: 0.75rem; font-weight: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--concreto); }
#species, #modes, #servers { display: flex; flex-direction: column; gap: 2px; counter-reset: fila; }
#species button, #modes button, #servers button {
  padding: 0.4em 0.7em; color: var(--polvo); background: transparent; text-align: left; border: 1px solid transparent; cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.9em;
}
#species button::before { counter-increment: fila; content: counter(fila); color: var(--concreto); }
#species button b, #modes button b, #servers button b { font-weight: normal; color: var(--claro); text-transform: uppercase; letter-spacing: 0.1em; }
#species button span, #modes button span { font-size: 0.8rem; color: var(--polvo); opacity: 0.85; }
#species button:hover, #modes button:hover, #servers button:hover { background: rgba(185, 169, 136, 0.08); }
#species button.on, #modes button.on { background: rgba(185, 169, 136, 0.14); border-color: var(--hundido); }
/* Color de cada especie: un cuadrito junto al nombre. */
#species button b::before { content: ''; display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.55em; background: var(--sp); vertical-align: -0.4em; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; image-rendering: pixelated; }
#species [data-sp="awqaq"] { --sp: #f2a33a; --ic: url(icons/awqaq.png); }
#species [data-sp="uturunku"] { --sp: #e0442c; --ic: url(icons/uturunku.png); }
#species [data-sp="kawri"] { --sp: #a6e23a; --ic: url(icons/kawri.png); }
#rooms, #keybinds { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
#rooms th, #keybinds th { text-align: left; font-weight: normal; color: var(--concreto); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; padding: 0.35em 0.6em; background: var(--hondo); border: 1px solid #0b0c0d; }
#rooms td, #keybinds td { padding: 0.45em 0.6em; border-bottom: 1px solid rgba(110, 106, 94, 0.35); }
#rooms tr.cur td { background: rgba(185, 169, 136, 0.14); color: var(--claro); }
#rooms td:last-child, #keybinds td:last-child { text-align: right; }
.note { font-size: 0.8rem; color: var(--concreto); margin: 0.8em 0 0; }
#rooms button, #keybinds button, #keys-reset, #play, #server-go {
  padding: 0.4em 1.1em; color: var(--claro); background: var(--noche); border: 1px solid; border-color: var(--bisel); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem;
}
#rooms button:hover, #keybinds button:hover, #keys-reset:hover, #play:hover, #server-go:hover { background: var(--oxido); }
#rooms button:active, #keybinds button:active, #keys-reset:active, #play:active, #server-go:active { border-color: var(--hundido); }
#rooms button:disabled { opacity: 0.4; cursor: default; background: var(--noche); }
.opts { display: grid; grid-template-columns: auto 12em; gap: 0.7em 1.2em; justify-content: start; align-items: center; }
.opts label { display: contents; }
.opts input { accent-color: var(--polvo); }
.opts select { padding: 0.3em 0.5em; color: var(--claro); background: var(--hondo); border: 1px solid var(--hundido); outline: none; }
.menu footer { display: flex; justify-content: flex-end; padding: 0.8em 1.2em; border-top: 1px solid #0b0c0d; }
#play { font: 900 1.5rem/1 var(--stencil); letter-spacing: 0.18em; padding: 0.4em 2.2em 0.35em; background: var(--polvo); color: var(--noche); }
#play:hover { background: var(--claro); }
.keys { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
.keys b { color: var(--claro); font-weight: normal; border: 1px solid var(--concreto); padding: 0 0.35em; }

/* Flujo del menú (body[data-flow]): lobby = antes de entrar a una sala (sin partida ni HUD detrás),
   room = dentro de la sala (Escape). */
body.lobby > :not(#overlay):not(canvas:not([id])) { display: none; }
body.lobby #overlay { background: rgba(14, 14, 16, 0.4); }
body[data-flow="room"] #mode-block { display: none; }
body[data-flow="room"] #tabs [data-tab="server"], body[data-flow="connect"] #tabs [data-tab="play"], body[data-flow="connect"] .menu footer { display: none; }
.srv { display: flex; flex-wrap: wrap; gap: 0.6em; }
#server-addr { flex: 1 1 14em; padding: 0.4em 0.7em; color: var(--claro); background: var(--hondo); border: 1px solid var(--hundido); outline: none; }
#server-addr::placeholder { color: var(--concreto); }
#server-info { margin-top: 0.4em; }
#server-status:empty { display: none; }
#tabs [data-act="leave"] { display: none; margin-top: 1.2em; font-size: 1rem; color: var(--concreto); }
body[data-flow="room"] #tabs [data-act="leave"] { display: block; }

#hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-size: 13px;
  color: #6f9;
  background: rgba(0, 8, 6, 0.6);
  border-radius: 4px;
  pointer-events: none;
}
#hint.hidden { display: none; }

#net {
  position: fixed;
  right: 8px;
  top: 8px;
  font: 13px/1.4 monospace;
  color: #6f9;
  pointer-events: none;
}

#debug {
  position: fixed;
  left: 8px;
  top: 8px;
  font: 12px/1.4 monospace;
  white-space: pre;
  color: #6f9;
  pointer-events: none;
}

/* ---------- Combate ---------- */
/* Cuadrado del auto-apuntado del Rastreador: scanlines y esquinas. */
#aimbox {
  position: fixed;
  left: 50%;
  top: 50%;
  width: calc(var(--h, 20vh) * 2);
  height: calc(var(--h, 20vh) * 2);
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
  border: 1px solid var(--c);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 14px no-repeat,
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 24px var(--glow);
  opacity: 0.55;
}
#aimbox.on { display: block; }

/* Mira de fijado: cuatro ticks en cruz con el centro libre. */
#lock {
  position: fixed;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--c));
}
#lock.on { display: block; animation: lockin 0.18s ease-out; }
#lock i { position: absolute; background: var(--c); }
#lock i:nth-child(1) { left: 19px; top: 0; width: 2px; height: 12px; }
#lock i:nth-child(2) { left: 19px; bottom: 0; width: 2px; height: 12px; }
#lock i:nth-child(3) { top: 19px; left: 0; width: 12px; height: 2px; }
#lock i:nth-child(4) { top: 19px; right: 0; width: 12px; height: 2px; }
@keyframes lockin { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#radar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  width: 280px;
  height: 158px;
  margin-left: -140px;
  display: none;
  pointer-events: none;
}
#radar.on { display: block; }

#hitmarker {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent 45%, var(--hm, #fff) 45%, var(--hm, #fff) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--hm, #fff) 45%, var(--hm, #fff) 55%, transparent 55%);
  -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px);
  mask: radial-gradient(circle, transparent 4px, #000 5px);
}
#hitmarker.on { animation: fade 120ms ease-out; }
#hitmarker.head { --hm: #f33; transform: scale(1.35); }
#hitmarker.head.on { animation-duration: 220ms; }
#hitmarker.kill { --hm: #f33; transform: scale(1.6); }
#hitmarker.kill.on { animation-duration: 400ms; }

#damage {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 0, 0, 0.55) 100%);
}
#zap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
#heat {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  background: rgba(40, 0, 90, 0.38); /* tinte violeta sobre el mundo */
  box-shadow: inset 0 0 160px rgba(255, 60, 0, 0.35);
}
#heat.on { display: block; }
#heat.fx { background: none; }
/* Visión del Kawri: membrana orgánica: viñeta húmeda, manchas de tejido que respiran y latido. */
#scent {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(20, 30, 0, 0.08) 35%, rgba(25, 10, 0, 0.5) 75%, rgba(10, 0, 0, 0.85) 100%),
    rgba(60, 50, 0, 0.12);
  animation: scentBeat 2.8s ease-in-out infinite;
}
#scent::before {
  content: '';
  position: absolute;
  inset: -6%;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.2  0 0 0 0 0  0 0 0 -3.2 1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 60vmax;
  -webkit-mask: radial-gradient(ellipse at center, transparent 30%, #000 85%);
  mask: radial-gradient(ellipse at center, transparent 30%, #000 85%);
  animation: scentBreathe 7s ease-in-out infinite;
}
#scent::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px 30px rgba(120, 40, 0, 0.45), inset 0 0 50px rgba(150, 255, 60, 0.12);
  filter: blur(8px);
}
#scent.on { display: block; }
@keyframes scentBeat {
  0%, 30%, 100% { opacity: 0.8; }
  10% { opacity: 1; }
  20% { opacity: 0.88; }
  25% { opacity: 1; }
}
@keyframes scentBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.07) rotate(1.2deg); }
}
#cloak {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(120, 200, 255, 0.35); /* borde celeste: camuflado */
  transition: opacity 200ms;
}
#cloak.on { display: block; }
#cloak.seen { opacity: 0; } /* revelado por disparar o recibir daño */
#damage.on { animation: fade 300ms ease-out; }

/* Indicador de dónde vino el daño: el contenedor gira hacia el atacante. */
#dmgdir { position: fixed; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; pointer-events: none; }
#dmgdir i {
  position: absolute;
  left: -50px;
  top: -170px;
  width: 100px;
  height: 36px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 40, 40, 0.95), transparent 70%);
}
#dmgdir.on { animation: fade 1000ms ease-out; }

/* Vida baja: viñeta roja que late. */
#lowhp {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(160, 0, 0, 0.55) 100%);
}
#lowhp.on { display: block; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 15% { opacity: 1; } 30% { opacity: 0.5; } 45% { opacity: 0.9; } }

@keyframes fade { from { opacity: 1; } to { opacity: 0; } }

#death {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: #f66;
  background: radial-gradient(ellipse at center, rgba(40, 0, 0, 0.35), rgba(60, 0, 0, 0.75));
  pointer-events: none;
}
#death.hidden { display: none; }
#death h2 { margin: 0; font: 900 84px/1 'Big Shoulders Stencil Display', Impact, sans-serif; letter-spacing: 0.3em; text-indent: 0.3em; text-shadow: 0 0 12px #a00; }
#death p { margin: 0; font: 22px 'Share Tech Mono', monospace; color: #fcc; }
#death p img, #killfeed img { width: 18px; height: 18px; vertical-align: middle; image-rendering: pixelated; }
#death .count { margin-top: 6px; padding: 6px 22px; font: 700 28px 'Big Shoulders Stencil Display', Impact, sans-serif; letter-spacing: 0.12em; color: #cfe; border: 1px solid #f66; background: rgba(0, 0, 0, 0.5); }

#killfeed {
  position: fixed;
  right: 8px;
  top: 32px;
  font: 14px/1.8 'Share Tech Mono', monospace;
  text-align: right;
  color: #cfe;
  pointer-events: none;
}
#killfeed div { padding: 0 8px; margin-bottom: 2px; background: rgba(0, 0, 0, 0.45); border-right: 2px solid #355; }
#killfeed em { color: #f66; font-style: normal; }
#killfeed .me { color: var(--c); border-right-color: #f66; }

#match {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  min-width: 260px;
  padding: 4px 18px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 14px/1.4 'Share Tech Mono', monospace;
  color: #cfe;
  text-shadow: 0 0 4px #000;
  background: rgba(0, 8, 6, 0.55);
  border-bottom: 1px solid #2a4;
  pointer-events: none;
}
#match:empty { display: none; }
#match small { font: 700 12px 'Big Shoulders Stencil Display', Impact, sans-serif; letter-spacing: 0.35em; opacity: 0.7; }
#match b { font: 800 34px/1 'Big Shoulders Stencil Display', Impact, sans-serif; letter-spacing: 0.06em; }
#match .bar { position: relative; width: 100%; height: 5px; margin-top: 4px; background: rgba(255, 255, 255, 0.12); display: flex; }
#match.team .bar { gap: 2px; background: none; }
#match .bar i { display: block; height: 100%; }
#match:not(.team) .bar i { position: absolute; left: 0; top: 0; }
#match .bar .lead { background: #567; }
#match .bar .mine, #match .bar .awqaq { background: #6f9; }
#match .bar .uturunku { background: #f55; }
#match .bar .kawri { background: #fc4; }
#match .bar span { position: relative; flex: 1; background: rgba(255, 255, 255, 0.12); }
#match.team .bar i { position: absolute; left: 0; top: 0; }
#match.last { color: #f66; }

#matchend {
  position: fixed;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  text-align: center;
  font: 17px/1.6 'Share Tech Mono', monospace;
  color: #cfe;
  text-shadow: 0 0 6px #000;
  pointer-events: none;
}
#matchend b { display: block; font: 900 56px/1.1 'Big Shoulders Stencil Display', Impact, sans-serif; letter-spacing: 0.1em; color: #6f9; }
#matchend.hidden { display: none; }

#scoreboard {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  min-width: 280px;
  border-collapse: collapse;
  font: 15px 'Share Tech Mono', monospace;
  background: rgba(0, 8, 6, 0.8);
  pointer-events: none;
}
#scoreboard.hidden { display: none; }
#scoreboard th, #scoreboard td { padding: 6px 14px; text-align: left; }
#scoreboard th { color: #6f9; border-bottom: 1px solid #2a4; }
#scoreboard tr.me td { color: #6f9; }
#scoreboard tr.team td { color: #9cb; padding-top: 12px; border-bottom: 1px solid #243; }

#pickup {
  position: fixed;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  font: bold 18px monospace;
  color: var(--c);
  opacity: 0;
  pointer-events: none;
}
#pickup.on { animation: fade 1500ms ease-in; }

/* Aturdido por la cola del Kawri: borde violeta mientras dura. */
#stun {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(150, 60, 255, 0.45) 100%);
}
#stun.on { display: block; }

/* ================= HUD por especie (body[data-sp]) ================= */
body { --c: #6f9; --glow: rgba(80, 255, 150, 0.5); --warn: #fc5; --bad: #f44; --hp: 1; --beat: 1.2s; }

#frame, #frame i { position: fixed; pointer-events: none; }
#frame { inset: 0; }
#frame i { display: none; }

#crosshair { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
#crosshair i {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  background: var(--c); border-radius: 50%; box-shadow: 0 0 4px var(--c);
}

#hud, #weapon { position: fixed; bottom: 16px; font-family: monospace; color: var(--c); pointer-events: none; }
#hud { left: 16px; }
#weapon { right: 16px; text-align: right; }
#hp-label { font-size: 10px; letter-spacing: 0.25em; opacity: 0.7; }
#health { font-size: 40px; font-weight: bold; line-height: 1; text-shadow: 0 0 10px var(--glow); font-variant-numeric: tabular-nums; }
#health::after { content: ' VIDA'; font-size: 14px; }
#health.low { color: var(--bad); text-shadow: 0 0 10px var(--bad); }
#hp-bar, #mag { display: none; position: relative; }
#stamina { width: 160px; height: 6px; margin: 4px 0; background: rgba(255, 255, 255, 0.15); }
#stamina-fill { height: 100%; width: 100%; background: #6cf; }
#stamina.tired #stamina-fill { background: #f95; }
#energy { display: none; width: 196px; height: 5px; margin: 4px 0; background: rgba(255, 90, 40, 0.2); }
#energy-fill { height: 100%; width: 100%; background: #ff3b30; }
#energy.ready #energy-fill { background: #fff; box-shadow: 0 0 8px #ff3b30; animation: energy-ready 0.8s infinite alternate; }
@keyframes energy-ready { to { opacity: 0.45; } }
body[data-sp="uturunku"] #energy { display: block; }
#score { font-size: 13px; opacity: 0.8; }
#ammo { font-size: 32px; font-weight: bold; text-shadow: 0 0 10px var(--glow); font-variant-numeric: tabular-nums; }
#ammo.low { color: var(--warn); }
#ammo-note { font-size: 13px; letter-spacing: 0.1em; min-height: 1.2em; }
#slots { font-size: 12px; margin: 4px 0 0 auto; max-width: 280px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; }
#slots span { opacity: 0.8; display: inline-flex; align-items: center; gap: 4px; }
#slots i { width: 32px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; image-rendering: pixelated; }
#slots span.cur { opacity: 1; font-weight: bold; }
#slots span.none { opacity: 0.25; }

/* ---------- Awqaq: terminal táctico de fósforo, marcos y segmentos ---------- */
body[data-sp="awqaq"] { --c: #f2a33a; --glow: rgba(242, 163, 58, 0.45); --warn: #ff6a3d; }
body[data-sp="awqaq"] #frame::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(242, 163, 58, 0.035) 0 1px, transparent 1px 3px);
}
body[data-sp="awqaq"] #frame i { display: block; width: 46px; height: 46px; opacity: 0.45; border: 0 solid var(--c); }
body[data-sp="awqaq"] #frame i:nth-child(1) { left: 22px; top: 22px; border-width: 2px 0 0 2px; }
body[data-sp="awqaq"] #frame i:nth-child(2) { right: 22px; top: 22px; border-width: 2px 2px 0 0; }
body[data-sp="awqaq"] #frame i:nth-child(3) { left: 22px; bottom: 22px; border-width: 0 0 2px 2px; }
body[data-sp="awqaq"] #frame i:nth-child(4) { right: 22px; bottom: 22px; border-width: 0 2px 2px 0; }
/* Mira: cruz con hueco al centro. */
body[data-sp="awqaq"] #crosshair::before, body[data-sp="awqaq"] #crosshair::after {
  content: ''; position: absolute; background: var(--c); opacity: 0.85;
}
body[data-sp="awqaq"] #crosshair::before {
  left: -14px; top: -1px; width: 28px; height: 2px;
  -webkit-mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%);
  mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%);
}
body[data-sp="awqaq"] #crosshair::after {
  left: -1px; top: -14px; width: 2px; height: 28px;
  -webkit-mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%);
  mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%);
}
body[data-sp="awqaq"] #crosshair i { left: -1px; top: -1px; width: 2px; height: 2px; }
body[data-sp="awqaq"] #hud, body[data-sp="awqaq"] #weapon { bottom: 24px; padding: 8px 14px; }
body[data-sp="awqaq"] #hud {
  left: 24px; border-left: 3px solid var(--c);
  background: linear-gradient(90deg, rgba(28, 16, 4, 0.65), rgba(28, 16, 4, 0.15));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
body[data-sp="awqaq"] #weapon {
  right: 24px; border-right: 3px solid var(--c);
  background: linear-gradient(270deg, rgba(28, 16, 4, 0.65), rgba(28, 16, 4, 0.15));
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
}
body[data-sp="awqaq"] #health { font-size: 46px; letter-spacing: 0.05em; }
body[data-sp="awqaq"] #health::after { content: ' %'; font-size: 16px; opacity: 0.7; }
/* Vida y cargador en segmentos. */
body[data-sp="awqaq"] #hp-bar {
  display: block; width: 210px; height: 10px; margin: 5px 0;
  background: linear-gradient(90deg, var(--c) calc(var(--hp) * 100%), rgba(242, 163, 58, 0.12) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
  mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}
body[data-sp="awqaq"] #health.low + #hp-bar { background: linear-gradient(90deg, var(--warn) calc(var(--hp) * 100%), rgba(255, 106, 61, 0.15) 0); }
body[data-sp="awqaq"] #mag {
  --seg: max(3px, calc(210px / var(--pips, 30)));
  display: block; width: 210px; height: 8px; margin: 4px 0 4px auto;
  background: linear-gradient(270deg, var(--c) calc(var(--mag, 1) * 100%), rgba(242, 163, 58, 0.12) 0);
  -webkit-mask: repeating-linear-gradient(270deg, #000 0 calc(var(--seg) - 2px), transparent 0 var(--seg));
  mask: repeating-linear-gradient(270deg, #000 0 calc(var(--seg) - 2px), transparent 0 var(--seg));
}
body[data-sp="awqaq"] #weapon.melee #mag { display: none; }
body[data-sp="awqaq"] #stamina { width: 210px; height: 4px; }
body[data-sp="awqaq"] #stamina-fill { background: #5df0ff; }
body[data-sp="awqaq"] #score { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
body[data-sp="awqaq"] #ammo { font-size: 40px; }
body[data-sp="awqaq"] #ammo-note { color: var(--warn); }
body[data-sp="awqaq"] #slots { gap: 4px; }
body[data-sp="awqaq"] #slots span { padding: 1px 5px; border: 1px solid rgba(242, 163, 58, 0.35); }
body[data-sp="awqaq"] #slots span.cur { background: var(--c); color: #1a1004; border-color: var(--c); }

/* ---------- Uturunku: glifos rojos, triángulos y paneles angulosos ---------- */
body[data-sp="uturunku"] { --c: #ff5a2a; --glow: rgba(255, 70, 20, 0.6); --warn: #ffd23a; --bad: #fff; }
body[data-sp="uturunku"] #frame::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(90, 0, 0, 0.28) 100%);
}
body[data-sp="uturunku"] #frame i {
  display: block; width: 140px; height: 140px; opacity: 0.4;
  background:
    linear-gradient(135deg, transparent 28px, var(--c) 28px 30px, transparent 30px),
    linear-gradient(135deg, transparent 44px, var(--c) 44px 45px, transparent 45px);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
body[data-sp="uturunku"] #frame i:nth-child(1) { left: 0; top: 0; }
body[data-sp="uturunku"] #frame i:nth-child(2) { right: 0; top: 0; transform: scaleX(-1); }
body[data-sp="uturunku"] #frame i:nth-child(3) { left: 0; bottom: 0; transform: scaleY(-1); }
body[data-sp="uturunku"] #frame i:nth-child(4) { right: 0; bottom: 0; transform: scale(-1); }
/* Mira: tres puntos en triángulo y un triángulo punteado que gira lento. */
body[data-sp="uturunku"] #crosshair i {
  left: -1.5px; top: -7.5px; width: 3px; height: 3px; border-radius: 0;
  box-shadow: -5px 9px 0 var(--c), 5px 9px 0 var(--c), 0 0 6px var(--c);
}
body[data-sp="uturunku"] #crosshair::before {
  content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 2 L39.32 32 L4.68 32 Z' fill='none' stroke='%23ff5a2a' stroke-width='1.2' stroke-dasharray='10 6'/%3E%3C/svg%3E");
  animation: spin 7s linear infinite;
  translate: var(--sx, 0) var(--sy, 0); /* va hacia el enemigo más cercano en el área de ataque */
  transition: translate 0.25s ease-out, opacity 0.2s;
}
/* Fijado: el triángulo se cierra sobre el enemigo, sólido y más rápido. */
body[data-sp="uturunku"] #crosshair.locked::before { opacity: 1; animation-duration: 1.5s; filter: drop-shadow(0 0 4px var(--c)); }
@keyframes spin { to { transform: rotate(360deg); } }
body[data-sp="uturunku"] #hud, body[data-sp="uturunku"] #weapon {
  bottom: 24px; padding: 10px 22px; border-bottom: 1px solid var(--c);
  background: linear-gradient(rgba(60, 5, 0, 0.55), rgba(30, 0, 0, 0.25));
}
body[data-sp="uturunku"] #hud { left: 24px; padding-right: 40px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body[data-sp="uturunku"] #weapon { right: 24px; padding-left: 40px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%); }
/* Los números se leen con glifos. */
body[data-sp="uturunku"] #health, body[data-sp="uturunku"] #ammo { font-size: 0; }
body[data-sp="uturunku"] #health::before, body[data-sp="uturunku"] #ammo::before {
  content: attr(data-g); font-size: 36px; letter-spacing: 0.18em; font-weight: normal;
  font-family: 'Segoe UI Symbol', 'Cambria Math', serif;
}
body[data-sp="uturunku"] #ammo::before { font-size: 26px; }
body[data-sp="uturunku"] #weapon.melee #ammo::before { font-family: monospace; font-size: 20px; letter-spacing: 0.4em; }
body[data-sp="uturunku"] #health::after { content: none; }
body[data-sp="uturunku"] #health.low { animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
/* Vida: fila de triángulos que se apaga de derecha a izquierda. */
body[data-sp="uturunku"] #hp-bar {
  display: block; width: 196px; height: 12px; margin: 6px 0 4px;
  background: linear-gradient(90deg, var(--c) calc(var(--hp) * 100%), rgba(255, 80, 40, 0.15) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 11 L7 1 L13 11 Z'/%3E%3C/svg%3E") 0 0 / 14px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 11 L7 1 L13 11 Z'/%3E%3C/svg%3E") 0 0 / 14px 12px repeat-x;
}
body[data-sp="uturunku"] #stamina { width: 196px; height: 2px; background: rgba(255, 90, 40, 0.2); }
body[data-sp="uturunku"] #stamina-fill { background: #ffb347; box-shadow: 0 0 6px #ffb347; }
body[data-sp="uturunku"] #stamina.tired #stamina-fill { background: #fff; }
body[data-sp="uturunku"] #score { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.65; }
body[data-sp="uturunku"] #ammo-note { letter-spacing: 0.3em; opacity: 0.8; }
body[data-sp="uturunku"] #slots span { letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; }
body[data-sp="uturunku"] #slots span.cur { opacity: 1; text-shadow: 0 0 6px var(--c); }
body[data-sp="uturunku"] #slots span.cur::before { content: '▲ '; font-size: 9px; }

/* ---------- Kawri: sin máquinas, una membrana viva que late ---------- */
body[data-sp="kawri"] { --c: #9dff6a; --glow: rgba(110, 255, 80, 0.5); --warn: #e6ff5a; --bad: #ff3b6b; }
body[data-sp="kawri"] #frame {
  background: radial-gradient(ellipse 75% 80% at 50% 50%, transparent 50%, rgba(3, 22, 6, 0.6) 82%, rgba(0, 8, 2, 0.92) 100%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 0.75; } }
body[data-sp="kawri"] #frame i {
  display: block; width: 55vmin; height: 55vmin; opacity: 0.8;
  background:
    radial-gradient(ellipse 28% 80% at 0 0, rgba(6, 35, 10, 0.95), transparent 70%),
    radial-gradient(ellipse 80% 22% at 0 0, rgba(4, 28, 8, 0.9), transparent 70%),
    radial-gradient(ellipse 45% 45% at 0 0, rgba(20, 60, 15, 0.7), transparent 75%);
}
body[data-sp="kawri"] #frame i:nth-child(1) { left: 0; top: 0; }
body[data-sp="kawri"] #frame i:nth-child(2) { right: 0; top: 0; transform: scaleX(-1); }
body[data-sp="kawri"] #frame i:nth-child(3) { left: 0; bottom: 0; transform: scaleY(-1); }
body[data-sp="kawri"] #frame i:nth-child(4) { right: 0; bottom: 0; transform: scale(-1); }
/* Mira: una celda blanda que late al ritmo del corazón. */
body[data-sp="kawri"] #crosshair i {
  left: -9px; top: -9px; width: 18px; height: 18px; background: none;
  border: 1px solid rgba(180, 255, 150, 0.35); border-radius: 45% 55% 50% 50%;
  box-shadow: 0 0 8px var(--glow), inset 0 0 6px var(--glow);
  animation: beat var(--beat) ease-out infinite;
}
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 26% { transform: scale(1.04); } 38% { transform: scale(1.12); } }
/* Vida: un saco orgánico que se vacía, con el número adentro; late más rápido herido. */
body[data-sp="kawri"] #hud { left: 24px; bottom: 24px; display: grid; justify-items: center; gap: 6px; }
body[data-sp="kawri"] #hp-bar {
  display: block; grid-area: 1 / 1; width: 96px; height: 104px; overflow: hidden;
  border-radius: 48% 52% 44% 56% / 58% 55% 45% 42%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 35%), rgba(5, 30, 8, 0.55);
  box-shadow: 0 0 18px var(--glow), inset 0 0 14px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(170, 255, 140, 0.4);
  animation: beat var(--beat) ease-out infinite;
}
body[data-sp="kawri"] #hp-bar i {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hp) * 100%);
  background: radial-gradient(ellipse at 50% 0, #eaffd8, #6fdc3a 30%, #1a5a0c 85%);
  border-radius: 40% 60% 0 0 / 12px 12px 0 0; opacity: 0.85; transition: height 300ms;
}
body[data-sp="kawri"] #health {
  grid-area: 1 / 1; align-self: center; z-index: 1; font-size: 24px; color: #fff;
  text-shadow: 0 0 6px #000, 0 0 12px var(--glow);
}
body[data-sp="kawri"] #health::after { content: none; }
body[data-sp="kawri"] #health.low { color: var(--bad); }
body[data-sp="kawri"] #health.low + #hp-bar i { background: radial-gradient(ellipse at 50% 0, #ffd0dc, #ff3b6b 35%, #5a0020 90%); }
body[data-sp="kawri"] #hp-label { display: none; }
body[data-sp="kawri"] #stamina { width: 110px; height: 5px; border-radius: 3px; background: rgba(80, 160, 60, 0.25); }
body[data-sp="kawri"] #stamina-fill { border-radius: 3px; background: linear-gradient(90deg, #2c6a12, #9dff6a); }
body[data-sp="kawri"] #stamina.tired #stamina-fill { background: #ff3b6b; }
body[data-sp="kawri"] #score { font-size: 11px; opacity: 0.55; }
body[data-sp="kawri"] #weapon { right: 24px; bottom: 24px; }
body[data-sp="kawri"] #ammo { font-size: 18px; letter-spacing: 0.5em; font-weight: normal; opacity: 0.75; }
body[data-sp="kawri"] #ammo-note { font-size: 11px; opacity: 0.7; }
body[data-sp="kawri"] #slots { display: none; }

/* Pantalla de carga al entrar a una sala. */
#loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; background: #16171a; color: #b9a988; font: 15px/1.4 'Share Tech Mono', ui-monospace, Consolas, monospace; }
#loading.hidden { display: none; }
#loading h1 { margin: 0; font: 900 4.5rem/0.9 'Big Shoulders Stencil Display', Impact, 'Arial Narrow', sans-serif; letter-spacing: 0.04em; color: #e6dcc4; }
#loading h1::before { content: ''; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.18em; background: currentColor; vertical-align: -0.04em; -webkit-mask: url(logo.svg) center/contain no-repeat; mask: url(logo.svg) center/contain no-repeat; image-rendering: pixelated; }
#loading i { width: 14em; height: 3px; background: #3d3129; overflow: hidden; position: relative; }
#loading i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 30%; background: #b9a988; animation: cargando 1.1s ease-in-out infinite alternate; }
@keyframes cargando { to { left: 70%; } }

/* Editor de agarres del modo debug (gripedit.js) */
#gripedit {
  position: fixed;
  right: 8px;
  top: 40px;
  z-index: 50;
  width: 260px;
  padding: 8px;
  background: rgba(10, 12, 14, 0.85);
  color: #ddd;
  font: 12px/1.3 monospace;
}
#gripedit label { display: flex; align-items: center; gap: 6px; }
#gripedit label span { width: 20px; }
#gripedit input { flex: 1; }
#gripedit output { width: 44px; text-align: right; }
#gripedit .ge-h { margin-top: 6px; color: #6f9; }
#gripedit textarea { width: 100%; height: 64px; margin-top: 6px; font: 11px monospace; background: #111; color: #ddd; }
#version { position: fixed; right: 0.9rem; bottom: 0.6rem; font: 0.8rem/1 var(--mono, 'Share Tech Mono', monospace); letter-spacing: 0.1em; color: var(--concreto); opacity: 0.8; pointer-events: none; }

#scoreboard img { width: 18px; height: 18px; vertical-align: middle; image-rendering: pixelated; }
#scoreboard td:nth-child(n+3), #scoreboard th:nth-child(n+3) { text-align: right; }
#scoreboard td .ok { color: #6f9; }
#scoreboard td .mid { color: #fc4; }
#scoreboard td .bad { color: #f65; }

body.nostats #net, body.nostats #debug { display: none; }
#assets { position: fixed; left: 0.9rem; bottom: 0.6rem; padding: 0.3em 0.7em; font: 0.8rem/1 var(--mono, 'Share Tech Mono', monospace); letter-spacing: 0.08em; color: var(--polvo); background: linear-gradient(90deg, rgba(185, 169, 136, 0.35) var(--p, 0%), rgba(22, 23, 26, 0.7) var(--p, 0%)); border: 1px solid var(--hundido); pointer-events: none; }
#assets[hidden] { display: none; }
#keybinds button { min-width: 7em; }
#keybinds button.wait { background: var(--oxido); }
#keys-reset { margin: 0.8em 0 0.4em; }

/* Pestaña Info: una ficha por especie con su color, controles y armas (íconos como máscara). */
.ficha { --sp: var(--polvo); margin-top: 1.2em; }
.ficha[data-sp="awqaq"] { --sp: #f2a33a; --ic: url(icons/awqaq.png); }
.ficha[data-sp="uturunku"] { --sp: #e0442c; --ic: url(icons/uturunku.png); }
.ficha[data-sp="kawri"] { --sp: #a6e23a; --ic: url(icons/kawri.png); }
.ficha h2 { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; border-bottom: 1px solid var(--concreto); padding-bottom: 0.3em; }
.ficha h2 i, .ficha .arms i { flex: none; background: var(--sp); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; image-rendering: pixelated; }
.ficha h2 i { width: 1.4em; height: 1.4em; }
.ficha h2 small { font: 0.75rem var(--mono); letter-spacing: 0.05em; text-transform: none; color: var(--concreto); }
.ficha .keys { font-size: 0.85rem; line-height: 1.8; }
.ficha .arms { list-style: none; padding: 0; margin: 0.6em 0 0; font-size: 0.85rem; }
.ficha .arms li { display: flex; align-items: center; gap: 0.7em; padding: 0.25em 0; border-top: 1px solid rgba(110, 106, 94, 0.25); }
.ficha .arms i { width: 3em; height: 1.5em; }
.ficha .arms b { font-weight: normal; color: var(--claro); white-space: nowrap; }
.ficha .arms span { color: var(--polvo); opacity: 0.85; }