/* MONOIDES - style.css. Sistema de diseno por tokens (44-AUDITORIA-HUD secciones 2 a 4 y 9; 22 seccion 7.24).
   Reglas: todo color, tamano de letra, interlineado, espaciado, radio y capa vive en :root; los componentes solo usan variables.
   Una sola variable de escala (--ui = uiScale x hudScale, 70_ui.js aplicarEscala). Nada de transform: scale. Estilo celular a
   computarizado por fase (data-fase en <html>, 41 DIR03): marco, radio y acento cambian con la fase. Pixel art: contorno carbon,
   luz arriba a la izquierda, sin degradados en el HUD. Cada componente se define una sola vez. */

/* ---------------- Fuentes embebidas (HUD02, licencia OFL en public/fonts) ---------------- */
@font-face { font-family: 'Pixelify Sans'; src: url('../fonts/pixelify-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------------- Tokens (HUD01, HUD03, HUD13) ---------------- */
:root {
  --ui: 1;
  /* tipografia: pixel para cifras y rotulos cortos, humanista para texto; escala de 5 pasos */
  --font-pixel: 'Pixelify Sans', 'Courier New', monospace;
  --font-texto: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --t-12: max(12px, calc(12px * var(--ui)));
  --t-14: max(12px, calc(14px * var(--ui)));
  --t-16: max(12px, calc(16px * var(--ui)));
  --t-20: max(12px, calc(20px * var(--ui)));
  --t-28: max(12px, calc(28px * var(--ui)));
  --lh-junto: 1.1;
  --lh-texto: 1.3;
  --tr-rotulo: 0.06em;
  /* espaciado (multiplos de 8), radios y capas nombradas */
  --e-1: calc(8px * var(--ui));
  --e-2: calc(16px * var(--ui));
  --e-3: calc(24px * var(--ui));
  --e-4: calc(32px * var(--ui));
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 999px;
  --z-mundo: 1;
  --z-hoja: 2;
  --z-hud: 10;
  --z-editor: 12;
  --z-flotante: 14;
  --z-popover: 16;
  --z-capa: 20;
  --z-escalera: 25;
  --z-portada: 30;
  --z-cartas: 34;
  --z-ajustes: 35;
  --z-dev: 36;
  --z-pausa: 37;
  --z-fundido: 40;
  --z-carga: 41;   /* pantalla de carga: por encima del fundido */
  --z-tip: 45;
  /* paleta con significado: carbon y hueso; ambar = vivo, cian = maquina; estados siempre con forma */
  --c-fondo: #0a0c12;
  --c-carbon: #05060a;
  --c-panel: rgba(10, 12, 18, 0.94);
  --c-velo: rgba(6, 8, 14, 0.72);
  --c-superficie: rgba(242, 239, 232, 0.06);
  --c-superficie-2: rgba(242, 239, 232, 0.12);
  --c-hundido: rgba(0, 0, 0, 0.35);
  --c-linea: rgba(242, 239, 232, 0.14);
  --c-linea-2: rgba(242, 239, 232, 0.34);
  --c-texto: #f2efe8;
  --c-texto-2: #a9afba;
  --c-accion: #e9e4d8;
  --c-accion-2: #ffffff;
  --c-tinta: #0a0c12;
  --c-camino: #f2c94c;
  --c-bien: #56d66a;
  --c-aviso: #ff9a3c;
  --c-peligro: #ff6b5c;
  --c-ambar: #e0973f;
  --c-cian: #7de3ff;
  --c-azul: #4a8cff;
  --c-rayo-actual: #e9e4d8;
  --c-rayo-amarillo: #f2c230;
  --c-rayo-blanco: #ffffff;
  --c-rayo-negro: #0d0d14;
  --c-sombra: rgba(0, 0, 0, 0.45);
  --c-negro: #000000;
  --c-o: #c9a227;
  --c-i: #cfe8ff;
  --c-g: #ff8c2a;
  --c-a: #56d66a;
  --c-vineta-0: rgba(10, 12, 18, 0.15);
  --c-vineta-1: rgba(10, 12, 18, 0.8);
  --c-hueso-suave: rgba(233, 228, 216, 0.14);
  --c-hueso-halo: rgba(233, 228, 216, 0.3);
  /* azul y morado monoide (panel de reclutar; sin rosa: docs memoria monoides-sin-rosa) */
  --c-mono-azul: #4a8cff;
  --c-mono-azul-claro: #8fc0ff;
  --c-mono-morado: #7b5cff;
  --c-mono-noche: rgba(14, 14, 40, 0.97);
  --c-mono-halo: rgba(123, 92, 255, 0.42);
  --c-mono-halo-azul: rgba(74, 140, 255, 0.5);
  /* panel de reclutar: los tonos del panel, con nombre (HUD01: 0 literales de color fuera de :root) */
  --c-mono-fondo: rgba(6, 8, 20, 0.97);
  --c-mono-velo: rgba(30, 22, 80, 0.5);
  --c-mono-filo: rgba(143, 192, 255, 0.14);
  --c-mono-filo-2: rgba(143, 192, 255, 0.18);
  --c-mono-filo-3: rgba(143, 192, 255, 0.25);
  --c-mono-filo-4: rgba(143, 192, 255, 0.4);
  --c-mono-filo-5: rgba(143, 192, 255, 0.6);
  --c-mono-suelo: rgba(143, 192, 255, 0.35);
  --c-mono-rejilla: rgba(143, 192, 255, 0.05);
  --c-mono-tarjeta: rgba(40, 34, 96, 0.9);
  --c-mono-tarjeta-fondo: rgba(12, 14, 34, 0.96);
  --c-mono-tarjeta-luz: rgba(52, 44, 124, 0.95);
  --c-mono-tarjeta-luz-fondo: rgba(14, 18, 44, 0.97);
  --c-mono-borde: rgba(123, 92, 255, 0.6);
  --c-mono-borde-2: rgba(123, 92, 255, 0.45);
  --c-mono-azul-velo: rgba(74, 140, 255, 0.1);
  --c-mono-azul-velo-2: rgba(74, 140, 255, 0.12);
  --c-mono-azul-borde: rgba(74, 140, 255, 0.3);
  --c-mono-sombra-dura: rgba(0, 0, 0, 0.55);
  --c-mono-sombra-tecla: rgba(0, 0, 0, 0.5);
  --c-peligro-borde: rgba(255, 107, 92, 0.45);
  --c-mono-blanco: #fff;
  /* marco por fase (HUD13): celular = membrana ambar redondeada; mixta = hueso; computarizada = pista cian de esquina viva */
  --fase-marco: rgba(224, 151, 63, 0.34);
  --fase-luz: rgba(242, 239, 232, 0.1);
  --fase-acento: var(--c-ambar);
  --fase-radio: var(--r-m);
  /* zonas del HUD (HUD05): barra + banda <= 26% del alto; ventanas chicas (CI 640x400) usan la base */
  --barra: calc(40px * var(--ui));
  --boton: calc(40px * var(--ui));
  --banda: calc(160px * var(--ui));
  --mini-base: calc(112px * var(--ui));
  --mini-f: 1;
  --mini: calc(var(--mini-base) * var(--mini-f));
  --celda-w: calc(48px * var(--ui));
  --celda-h: calc(40px * var(--ui));
  --avisos-w: calc(280px * var(--ui));
  --sel-max: calc(960px * var(--ui));
  --detalle-w: calc(320px * var(--ui));
  /* selector de civilizacion del menu: lado de la elegida y radio del anillo (cabe a 360 px de ancho) */
  --civ-lado: calc(80px * var(--ui));
  --civ-radio: min(calc(128px * var(--ui)), 17vw);
}
:root[data-fase="mixta"] { --fase-marco: rgba(233, 228, 216, 0.3); --fase-luz: rgba(242, 239, 232, 0.12); --fase-acento: var(--c-accion); --fase-radio: var(--r-m); }
:root[data-fase="computarizada"] { --fase-marco: rgba(125, 227, 255, 0.36); --fase-luz: rgba(125, 227, 255, 0.12); --fase-acento: var(--c-cian); --fase-radio: var(--r-s); }
:root[data-minimapa="chico"] { --mini-f: 0.75; }
:root[data-minimapa="grande"] { --mini-f: 1.25; }
@media (min-width: 900px) and (min-height: 600px) { :root { --banda: calc(168px * var(--ui)); --mini-base: calc(144px * var(--ui)); --celda-w: calc(64px * var(--ui)); } }
@media (min-width: 1200px) and (min-height: 720px) { :root { --banda: calc(168px * var(--ui)); --mini-base: calc(160px * var(--ui)); --celda-w: calc(76px * var(--ui)); } }
@media (min-width: 1600px) and (min-height: 1000px) { :root { --banda: calc(240px * var(--ui)); --mini-base: calc(220px * var(--ui)); --celda-w: calc(104px * var(--ui)); --celda-h: calc(56px * var(--ui)); --avisos-w: calc(320px * var(--ui)); --detalle-w: calc(400px * var(--ui)); } }
:root { --banda-min: 0px; }
@media (pointer: coarse) { :root { --boton: calc(44px * var(--ui)); --banda-min: calc(176px * var(--ui)); } }

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { font-family: var(--font-texto); font-size: var(--t-14); line-height: var(--lh-texto); color: var(--c-texto); }
html, body { margin: 0; height: 100%; background: var(--c-fondo); overflow: hidden; }
button {
  font: inherit; color: var(--c-texto); background: var(--c-superficie); cursor: pointer;
  min-height: var(--boton); padding: 0 var(--e-2); border: 2px solid var(--c-carbon); border-radius: var(--fase-radio);
  box-shadow: inset 2px 2px 0 var(--fase-luz), inset -2px -2px 0 var(--c-hundido);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
button:hover { background: var(--c-superficie-2); border-color: var(--c-linea-2); }
button:active { box-shadow: inset -2px -2px 0 var(--fase-luz), inset 2px 2px 0 var(--c-hundido); }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-accion); outline-offset: 2px; }
button:disabled { color: var(--c-texto-2); cursor: not-allowed; background: var(--c-hundido); box-shadow: none; }
button.primary { background: var(--c-accion); color: var(--c-tinta); border-color: var(--c-accion); font-weight: 600; }
button.primary:hover { background: var(--c-accion-2); border-color: var(--c-accion-2); }
button.ghost { background: transparent; box-shadow: none; }
button.danger, button.peligro { color: var(--c-peligro); }
button.launch { color: var(--c-aviso); border-color: var(--c-aviso); }
button.link { min-height: calc(32px * var(--ui)); border: none; padding: 0; background: none; box-shadow: none; color: var(--c-accion); text-decoration: underline; text-underline-offset: 3px; border-radius: 0; display: inline-flex; align-items: center; }
button.link:hover { color: var(--c-accion-2); background: none; }
input, select, textarea { font: inherit; color: var(--c-texto); background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: 0 var(--e-1); min-height: var(--boton); }
textarea { width: 100%; resize: vertical; padding: var(--e-1); font-size: var(--t-12); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-linea-2); }
input[type="range"] { width: 100%; accent-color: var(--c-accion); background: transparent; border: none; padding: 0; min-height: 0; }
label { display: flex; flex-direction: column; gap: var(--e-1); color: var(--c-texto-2); font-size: var(--t-12); }
kbd { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-12); line-height: var(--lh-junto); color: var(--c-texto); }
.dim { color: var(--c-texto-2); }
.cifra { font-family: var(--font-pixel); font-weight: 400; white-space: nowrap; }
.cifra .dg { display: inline-block; width: 0.6em; text-align: center; font-style: normal; }
.rotulo { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-12); line-height: var(--lh-junto); text-transform: uppercase; letter-spacing: var(--tr-rotulo); color: var(--fase-acento); }
.tecla { display: inline-grid; place-items: center; min-width: calc(20px * var(--ui)); padding: 0 var(--e-1); border: 1px solid var(--c-linea-2); border-radius: var(--r-s); color: var(--c-texto); background: var(--c-hundido); }
.mayus { text-transform: uppercase; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.row { display: flex; gap: var(--e-1); align-items: flex-end; flex-wrap: wrap; margin: var(--e-1) 0; }
.row > input, .row > textarea { flex: 1; min-width: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }
.micon { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); image-rendering: pixelated; flex: none; }

#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body[data-cursor="build"] #gl { cursor: copy; }
body[data-cursor="attack"] #gl { cursor: crosshair; }
body[data-cursor="rally"] #gl { cursor: cell; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--z-mundo); }
.lbl { position: absolute; left: 0; top: 0; transform: translate(-1000px, -1000px); font-size: var(--t-12); color: var(--c-texto); text-shadow: 0 1px 2px var(--c-negro); white-space: nowrap; margin-left: calc(-5 * var(--e-1)); width: calc(10 * var(--e-1)); text-align: center; }
.lbl.fleet { color: var(--c-camino); }
.overlay-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--e-3); background: var(--c-fondo); font-size: var(--t-16); }

/* ---------------- Componente panel (HUD12, HUD13): membrana del HUD ---------------- */
.panel { background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--fase-radio); box-shadow: inset 2px 2px 0 var(--fase-luz), 0 8px 24px var(--c-sombra); }
.card { background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--fase-radio); box-shadow: inset 2px 2px 0 var(--fase-luz), 0 16px 48px var(--c-sombra); padding: var(--e-2) var(--e-3); max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; }
.card h3 { margin: 0 0 var(--e-1); display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-20); line-height: var(--lh-junto); }
.card h4 { margin: var(--e-2) 0 var(--e-1); font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-16); color: var(--fase-acento); }
.card p, .card li { font-size: var(--t-14); }

/* ---------------- HUD: capa, barra superior (HUD04) ---------------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-hud); }
#hud > * { pointer-events: auto; }
#top { position: absolute; top: 0; left: 0; right: 0; height: var(--barra); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--e-2); padding: 0 var(--e-1); border-width: 0 0 2px; border-radius: 0; }
.barra-izq { display: flex; align-items: center; gap: var(--e-1); min-width: 0; overflow: hidden; }
.barra-der { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-1); min-width: 0; }
.barra-der > button, .menu-hud > button { min-height: var(--boton); height: var(--barra); border-width: 0 0 0 2px; border-color: var(--fase-marco); border-radius: 0; box-shadow: none; background: transparent; }
.barra-der > button:hover, .menu-hud > button:hover, .menu-hud > button[aria-expanded="true"] { background: var(--c-superficie-2); }
#res { display: flex; align-items: center; gap: var(--e-1); min-width: 0; }
.ficha { display: inline-flex; align-items: center; gap: var(--e-1); height: calc(32px * var(--ui)); padding: 0 var(--e-1); border-radius: var(--r-s); background: var(--c-superficie); white-space: nowrap; }
.ficha-ico { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); flex: none; image-rendering: pixelated; }
i.ficha-ico { display: inline-block; border-radius: var(--r-s); background: var(--c, var(--c-accion)); box-shadow: inset 2px 2px 0 var(--fase-luz), inset -2px -2px 0 var(--c-hundido); }
i.ficha-ico.ico-pob { --c: var(--c-accion); border-radius: var(--r-l); }
.ficha-val { font-size: var(--t-16); line-height: var(--lh-junto); color: var(--c-texto); }
.ficha-ing { font-size: var(--t-12); line-height: var(--lh-junto); color: var(--c-bien); }
.ficha-ing:empty { display: none; }
#pop.warn { color: var(--c-peligro); }
.ficha.up .ficha-val, .ficha.down .ficha-val { color: var(--c); animation: resbrinco 0.4s ease both; }
@keyframes resbrinco { 0% { translate: 0 0; } 35% { translate: 0 -2px; } 100% { translate: 0 0; } }
.ficha.ping { animation: resping 0.65s ease-out both; }
@keyframes resping { 0% { box-shadow: 0 0 0 0 var(--c); } 100% { box-shadow: 0 0 0 var(--e-2) transparent; } }
/* 55 seccion 1: los ticks al lado del reloj, mas chicos y apagados; solo con el modo dev */
/* 17 seccion 3: una fila del editor de soundtrack en el panel de desarrollo */
.dh-pista { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-1) 0; border-bottom: 1px solid var(--c-linea); }
.dh-pista-txt { display: flex; flex-direction: column; gap: var(--e-1); }
/* 17 seccion 5: rejilla de una pista escrita. Un canvas por canal; el canvas se dibuja solo, aqui solo va la caja. */
.dh-rejilla { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-2) 0; border-bottom: 1px solid var(--c-linea); overflow-x: auto; }
/* 17 seccion 5: cabecera de la rejilla de una pista */
.dh-rej-cab { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-1); padding-block: var(--e-1); }
.dh-chip { font-size: var(--t-12); line-height: var(--lh-junto); color: var(--c-texto-2); background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: 0 var(--e-1); }
.dh-chip-aviso { color: var(--c-aviso, var(--c-texto-2)); }
/* 19 seccion 17: bestiario. Pestanas por familia y una ficha por cosa, con su dibujo real. */
.dh-tabs { flex-wrap: wrap; gap: var(--e-1); }
.dh-tab { font-size: var(--t-12); }
.dh-tab.activo { border-color: var(--c-acento, var(--c-texto)); color: var(--c-texto); }
.dh-bestia { display: flex; flex-direction: column; gap: var(--e-1); }
.dh-bestia-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-2); }
.dh-bestia-ficha { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-1); background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: var(--r-s); }
.dh-bestia-img { flex: none; image-rendering: pixelated; background: var(--c-fondo); border-radius: var(--r-s); }
.dh-bestia-txt { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
/* Adam 2026-10-02: la fecha de alta en la ficha del bestiario, para ver lo recien metido sin abrir una test room. */
.dh-bestia-alta { font-size: var(--t-12); line-height: var(--lh-junto); color: var(--c-texto-2); }
.dh-bestia-alta.es-nuevo { color: var(--c-cian); font-weight: 700; }
.dh-chip-fila { font-size: var(--t-12); line-height: var(--lh-junto); color: var(--c-texto-2); }
.dh-rej-canvas { display: block; background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: var(--r-s); cursor: pointer; }
.reloj-ticks { font-size: var(--t-12); line-height: var(--lh-junto); color: var(--c-texto-2); margin-left: var(--e-2); }
.reloj { font-size: var(--t-20); line-height: var(--lh-junto); color: var(--c-texto); padding: 0 var(--e-2); border-inline: 2px solid var(--fase-marco); height: var(--barra); display: flex; align-items: center; justify-content: center; }
#netinfo { color: var(--c-texto-2); font-size: var(--t-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-hud { position: relative; }
.menu-lista { position: absolute; right: 0; top: calc(100% + var(--e-1)); min-width: calc(200px * var(--ui)); display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-1); z-index: var(--z-popover); }
.menu-lista button { justify-content: space-between; display: flex; align-items: center; text-align: left; }

/* ---------------- Avisos (HUD08): columna izquierda bajo la barra, maximo 3 ---------------- */
#notices { position: absolute; top: calc(var(--barra) + var(--e-1)); left: var(--e-1); width: var(--avisos-w); display: flex; flex-direction: column; gap: var(--e-1); pointer-events: none; z-index: var(--z-flotante); }
.aviso { display: flex; align-items: center; gap: var(--e-1); padding: var(--e-1); background: var(--c-panel); border: 2px solid var(--fase-marco); border-left-width: 4px; border-radius: var(--r-s); font-size: var(--t-14); line-height: var(--lh-texto); opacity: var(--o, 1); animation: avisoentra 0.3s ease both; }
@keyframes avisoentra { from { opacity: 0; translate: calc(-1 * var(--e-2)) 0; } to { opacity: 1; translate: 0 0; } }
.aviso-txt { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aviso-ico { flex: none; width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); background: var(--c-accion); border-radius: var(--r-l); }
.aviso-good { border-left-color: var(--c-bien); } .aviso-good .aviso-ico { background: var(--c-bien); border-radius: 0; rotate: 45deg; }
.aviso-warn { border-left-color: var(--c-aviso); } .aviso-warn .aviso-ico { background: var(--c-aviso); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.aviso-bad { border-left-color: var(--c-peligro); } .aviso-bad .aviso-ico { background: var(--c-peligro); border-radius: 0; }
.aviso-era { border-left-color: var(--fase-acento); } .aviso-era .aviso-ico { background: var(--fase-acento); }
.era-banner { position: fixed; top: 30%; left: 50%; translate: -50% -50%; font-family: var(--font-pixel); font-size: var(--t-28); line-height: var(--lh-junto); color: var(--c-texto); text-shadow: 0 2px 12px var(--c-negro); opacity: 0; transition: opacity 0.6s ease, translate 0.6s ease; pointer-events: none; text-align: center; z-index: var(--z-flotante); }
.era-banner.show { opacity: 1; translate: -50% calc(-50% - var(--e-1)); }
#hud > #floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--z-flotante); }
.floater { position: absolute; left: var(--x, 0); top: var(--y, 0); translate: -50% -100%; display: inline-flex; align-items: center; gap: var(--e-1); font-family: var(--font-pixel); font-size: var(--t-14); color: var(--c-texto); text-shadow: 0 1px 2px var(--c-negro); white-space: nowrap; animation: floatup 1.2s ease-out both; }
.floater i { width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); border-radius: var(--r-l); background: var(--c); display: inline-block; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px); } }
#waiting { position: absolute; top: 45%; left: 50%; translate: -50% -50%; padding: var(--e-1) var(--e-2); border-color: var(--c-aviso); }
#desync { position: absolute; top: 52%; left: 50%; translate: -50% -50%; padding: var(--e-1) var(--e-2); border-color: var(--c-peligro); max-width: 80vw; }

/* ---------------- Banda inferior de altura fija (HUD05): minimapa, seleccion, rejilla ---------------- */
#bottom { position: absolute; left: 0; right: 0; bottom: 0; height: max(var(--banda), var(--banda-min)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--e-1); align-items: end; padding: 0 var(--e-1) var(--e-1); pointer-events: none; }
#bottom > * { pointer-events: auto; }
#mini-wrap { position: relative; display: grid; place-items: center; min-width: calc(max(var(--banda), var(--banda-min)) - var(--e-1)); min-height: calc(max(var(--banda), var(--banda-min)) - var(--e-1)); overflow: visible; }
#minimap, #mini-pings { grid-area: 1 / 1; width: var(--mini); height: var(--mini); }
#minimap { display: block; background: var(--c-negro); image-rendering: pixelated; border-radius: var(--r-s); outline: 2px solid var(--c-carbon); outline-offset: -2px; }
#minimap.strip { height: calc(36px * var(--ui)); }
#mini-pings { position: relative; pointer-events: none; overflow: hidden; border-radius: var(--r-s); }
.mm-ping { position: absolute; left: var(--px); top: var(--py); width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); translate: -50% -50%; border: 2px solid var(--c-accion); border-radius: var(--r-l); animation: mmping 1s ease-out 3 both; }
.mm-ping-warn { border-color: var(--c-aviso); } .mm-ping-bad { border-color: var(--c-peligro); } .mm-ping-good { border-color: var(--c-bien); }
@keyframes mmping { 0% { opacity: 1; width: calc(4px * var(--ui)); height: calc(4px * var(--ui)); } 100% { opacity: 0; width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); } }
#bottom.lane #mini-wrap { min-height: 0; align-self: end; }
#bottom.lane #buildpanel { display: none; }
#bottom.lane #selpanel { grid-column: 2 / -1; height: auto; max-width: none; overflow: visible; padding: var(--e-1); }
#bottom.space #selpanel, #bottom.space #buildpanel { display: none; }
#spacepanel { grid-column: 2 / -1; padding: var(--e-1) var(--e-2); max-height: calc(max(var(--banda), var(--banda-min)) - var(--e-1)); overflow: auto; }
#spacepanel pre { white-space: pre-wrap; font: inherit; margin: 0 0 var(--e-1); }
.fracs { display: flex; gap: var(--e-1); margin-top: var(--e-1); }
.frac.on { background: var(--c-accion); color: var(--c-tinta); }
.ptitle { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--tr-rotulo); color: var(--c-texto-2); }

/* ---------------- Panel de seleccion (HUD05, container query sel) ---------------- */
#selpanel { container: sel / inline-size; width: 100%; max-width: var(--sel-max); justify-self: center; height: calc(max(var(--banda), var(--banda-min)) - var(--e-1)); padding: var(--e-1) var(--e-2); overflow: hidden auto; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-14); }
.sel-head { position: relative; display: flex; align-items: center; gap: var(--e-1); min-height: calc(24px * var(--ui)); padding-bottom: var(--e-1); flex: none; }
.sel-ico { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); image-rendering: pixelated; }
.sel-nombre { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-16); line-height: var(--lh-junto); white-space: nowrap; }
.sel-head .state { margin-left: auto; color: var(--c-texto-2); font-size: var(--t-12); white-space: nowrap; }
.hpbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(4px * var(--ui)); background: var(--c-hundido); border-radius: var(--r-s); overflow: hidden; }
.hpbar i { display: block; height: 100%; width: var(--p, 100%); background: var(--c-bien); transition: width 0.3s ease; }
.hpbar.low i { background: var(--c-aviso); }
.hpbar.crit i { background: var(--c-peligro); }
.sel-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1) var(--e-2); min-height: 0; }
@container sel (min-width: 560px) { .sel-cuerpo:has(> .sel-col + .sel-col) { grid-template-columns: max-content minmax(0, 1fr); } }
.sel-col { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.sel-energia { display: flex; align-items: center; gap: var(--e-1); }
.sel-energia-val { font-size: var(--t-20); line-height: var(--lh-junto); }
.sel-objetivo { font-size: var(--t-14); }
.chips { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.chip { padding: 0 var(--e-1); font-size: var(--t-14); }
.chip.on { background: var(--c-accion); color: var(--c-tinta); }
.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-2); }
.attr { display: grid; grid-template-columns: 16px 86px 1fr 18px; align-items: center; gap: var(--e-1); font-size: var(--t-12); color: var(--c-texto-2); }
.attr canvas { width: 14px; height: 14px; display: block; }
.attr i { display: block; height: calc(6px * var(--ui)); width: var(--p, 0%); background: var(--ac, var(--c-accion)); border-radius: var(--r-s); }
.attr b { color: var(--c-texto); text-align: right; }
.syn, .researching, .hint, .desc, .gen { font-size: var(--t-14); line-height: var(--lh-texto); margin: 0; }
.desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.syn { color: var(--fase-acento); }
.bloque { display: flex; flex-direction: column; min-width: 0; }

/* Menu de la Celula madre (docs/22 secciones 7.22 y 7.23, 22 seccion 7.24): dos columnas, NACE y FLUJO | ADN */
.cm-simple { display: flex; flex-direction: column; gap: var(--e-1); width: 100%; min-width: 0; }
.cm-celula { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1) var(--e-3); min-width: 0; }
@container sel (min-width: 520px) { .cm-celula { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); } }
/* 1280x800 (ciclo 6): nada se corta; la fila deja solo el valor nuevo resaltado en la vista previa y el proximo rayo va en el detalle */
@container sel (max-width: 759px) { #selpanel .cm-adn .adn-cells i { width: calc(6px * var(--ui)); } #selpanel .cm-adn .adn-nombre { font-size: var(--t-12); } #selpanel .cm-adn .costo .micon { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); } #selpanel .cm-adn .costo b { font-size: var(--t-12); } #selpanel .cm-sig { display: none; } #selpanel .cm-celula .con-prev .cm-val-a, #selpanel .cm-celula .con-prev .cm-flecha { display: none; } #selpanel .cm-col-adn > .rotulo { display: none; } #selpanel .cm-nace-l1 > .cm-val { font-size: var(--t-16); } }
.cm-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.cm-col-adn { gap: 0; }
.cm-head { padding-bottom: var(--e-1); }
.cm-especie, .cm-varias { font-size: var(--t-12); color: var(--c-texto-2); white-space: nowrap; }
.cm-maxeo { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.cm-nace-l1 { display: flex; align-items: center; gap: var(--e-1); min-width: 0; white-space: nowrap; }
.cm-nace-l1 > .cm-val { font-size: var(--t-20); line-height: var(--lh-junto); }
.cm-rayo { --c: var(--c-rayo-actual); flex: none; width: calc(19px * var(--ui)); height: calc(20px * var(--ui)); background: var(--c); clip-path: polygon(55% 0%, 100% 0%, 40% 55%, 68% 55%, 15% 100%, 28% 42%, 0% 42%); filter: drop-shadow(0 0 1px var(--c-accion)); }
.cm-chips { display: flex; flex-wrap: wrap; column-gap: var(--e-2); font-size: var(--t-12); line-height: var(--lh-texto); }
.cm-chip { white-space: nowrap; }
.cm-delta { color: var(--c-camino); font-weight: 600; }
.cm-energia { display: flex; align-items: center; gap: var(--e-1); }
.cm-energia-val { font-size: var(--t-20); }
.cm-energia-txt { font-size: var(--t-12); white-space: nowrap; }
.cm-linea { display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; }
.cm-select { flex: 1 1 auto; min-width: 0; max-width: 100%; font-size: var(--t-14); }

/* Componente fila con casillas (ADN y Radio): nombre, 10 casillas de 8x13 (1:1.618), valor, costo y tecla */
.adn-tabla { display: flex; flex-direction: column; min-width: 0; }
.adn-lista { display: grid; grid-template-columns: minmax(0, 1fr); }
.adn-row { display: grid; grid-template-columns: max-content auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-1); min-height: calc(32px * var(--ui)); font-size: var(--t-14); border-bottom: 1px solid var(--c-linea); }
.adn-row:last-child { border-bottom: none; }
.adn-nombre { white-space: nowrap; }
.adn-cells { display: flex; flex: none; }
.adn-cells i { display: block; width: calc(10px * var(--ui)); height: calc(13px * var(--ui)); position: relative; background: var(--c-hundido); box-shadow: inset -2px 0 0 var(--c-panel), inset 0 0 0 1px var(--c-linea-2); overflow: hidden; }
.adn-cells i.part::before, .adn-cells i.full::before { content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% - 2px); height: var(--f, 0%); background: var(--c-accion); }
.cm-agil .adn-cells i { border-bottom: 3px solid var(--tc, transparent); }
.adn-pts { min-width: 0; color: var(--c-texto-2); white-space: nowrap; font-size: var(--t-12); }
.adn-pts .cm-val { color: var(--c-texto); font-size: var(--t-14); }
.adn-row.max .adn-pts .cm-val { color: var(--c-accion); }
.adn-acts { display: flex; align-items: center; gap: var(--e-1); justify-content: flex-end; }
.adn-badge { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-12); color: var(--c-camino); white-space: nowrap; }
.cm-sig { font-size: var(--t-12); }
.costo { display: inline-flex; align-items: center; gap: var(--e-1); white-space: nowrap; }
.costo-res { display: inline-flex; align-items: center; gap: 0; }
.costo .micon { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.costo b { font-family: var(--font-texto); font-size: var(--t-14); font-weight: 400; }
.costo-punto { display: inline-block; width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); border-radius: var(--r-s); background: var(--c); }
.adn-tabla-radio { margin-top: var(--e-1); }

/* Formaciones (docs/22 seccion 7.16): tipo en la rejilla, dimensiones aqui */
.form-menu { gap: var(--e-1); }
.form-titulo { display: flex; align-items: center; gap: var(--e-1); white-space: nowrap; font-size: var(--t-12); }
.form-tipo { font-weight: 600; font-size: var(--t-14); }
.form-dims { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 var(--e-2); }
.form-dim { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-12); }
.form-lbl { color: var(--c-texto-2); min-width: calc(64px * var(--ui)); }
.form-val { min-width: calc(32px * var(--ui)); text-align: center; font-size: var(--t-14); }
.form-step { width: var(--boton); padding: 0; font-family: var(--font-pixel); font-size: var(--t-16); }
#form-preview { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-mundo); }

/* ---------------- Rejilla de comandos 5 x 3 (HUD06, HUD09; container query rejilla) y detalle (HUD07) ---------------- */
#buildpanel { position: relative; height: calc(max(var(--banda), var(--banda-min)) - var(--e-1)); display: flex; align-items: stretch; }
#comandos { container: rejilla / inline-size; display: grid; grid-template-columns: repeat(5, var(--celda-w)); grid-auto-rows: max(var(--celda-h), var(--boton)); align-content: center; gap: var(--e-1); padding: var(--e-1); }
.cmd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; min-height: 0; height: 100%; padding: 0; font-size: var(--t-12); line-height: var(--lh-junto); text-align: center; }
.cmd.vacia { background: var(--c-hundido); border-color: var(--c-carbon); box-shadow: inset 2px 2px 0 var(--c-hundido); cursor: default; }
.cmd.vacia .cmd-tecla { color: var(--c-linea-2); }
.cmd-ico { flex: none; display: grid; place-items: center; width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
.cmd-ico img { width: 100%; height: 100%; image-rendering: pixelated; }
.cmd-glifo { font-family: var(--font-pixel); font-size: var(--t-20); line-height: var(--lh-junto); color: var(--fase-acento); }
.cmd-nom { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmd-tecla { position: absolute; top: 0; right: 2px; color: var(--c-texto-2); }
.cmd.on { border-color: var(--c-accion); background: var(--c-superficie-2); }
.cmd.mira { border-color: var(--c-linea-2); }
.cmd.pulsada { box-shadow: inset -2px -2px 0 var(--fase-luz), inset 2px 2px 0 var(--c-hundido); }
/* docs/72 seccion 3: casilla bloqueada que se pulsa. No parpadea: un solo latido de 0.4 s que empuja la mirada al panel
   de detalle, que es donde esta escrito el motivo. Sin animacion con `prefers-reduced-motion` (queda el borde rojo). */
.cmd.rechazada { border-color: var(--c-peligro); animation: cmdrechazo 0.4s ease-out both; }
@keyframes cmdrechazo { 0% { translate: 0 0; } 25% { translate: -2px 0; } 60% { translate: 2px 0; } 100% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .cmd.rechazada { animation: none; } }
.cmd.bloq { color: var(--c-texto-2); background: var(--c-hundido); }
.cmd.bloq .cmd-ico { opacity: 0.55; }
.cmd.bloq::after { content: ''; position: absolute; left: var(--e-1); top: var(--e-1); width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); background: var(--c-peligro); }
.cmd.peligro { color: var(--c-peligro); }
.cmd.avance .cmd-ico .glifo { background: var(--c-camino); }
#comandos.pagina-construir { border-color: var(--c-camino); }
@container rejilla (max-width: 300px) { .cmd-nom { display: none; } }
@container rejilla (min-width: 500px) { .cmd-ico { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); } .cmd-nom { font-size: var(--t-14); } }
/* glifos de comando: formas de pixel en CSS (sin emojis ni texto de relleno) */
.glifo { display: block; width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); background: var(--fase-acento); }
.g-construir { clip-path: polygon(0 45%, 50% 0, 100% 45%, 85% 45%, 85% 100%, 15% 100%, 15% 45%); }
.g-atacar { clip-path: polygon(0 0, 30% 0, 100% 70%, 100% 100%, 70% 100%, 0 30%); background: var(--c-peligro); }
.g-detener { background: var(--c-accion); }
.g-especializar { border-radius: var(--r-l); }
.g-abordar { clip-path: polygon(50% 0, 80% 40%, 80% 100%, 20% 100%, 20% 40%); }
.g-form-cuadrada { clip-path: polygon(0 0, 40% 0, 40% 40%, 0 40%, 0 60%, 40% 60%, 40% 100%, 0 100%, 0 0, 60% 0, 100% 0, 100% 40%, 60% 40%, 60% 60%, 100% 60%, 100% 100%, 60% 100%); }
.g-form-recta { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); }
.g-form-piramide { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-crear { border-radius: var(--r-l); background: var(--c-bien); }
.g-cancelar { clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); background: var(--c-peligro); }
.g-reunion { clip-path: polygon(20% 0, 100% 25%, 30% 50%, 30% 100%, 20% 100%); }
.g-teorema { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--c-i); }
.g-avance { clip-path: polygon(0 0, 50% 50%, 0 100%, 50% 100%, 100% 50%, 50% 0); }
.g-volver { clip-path: polygon(0 50%, 50% 0, 50% 30%, 100% 30%, 100% 70%, 50% 70%, 50% 100%); background: var(--c-accion); }
#detalle { position: absolute; right: 0; bottom: calc(100% + var(--e-1)); width: max(100%, var(--detalle-w)); padding: var(--e-1) var(--e-2); display: flex; flex-direction: column; gap: var(--e-1); pointer-events: none; z-index: var(--z-popover); font-size: var(--t-14); }
.det-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-1); }
.det-nom { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-16); line-height: var(--lh-junto); }
.det-costo { display: flex; align-items: center; gap: var(--e-1); }
.det-efecto { color: var(--c-texto); }
.det-motivo { display: flex; align-items: center; gap: var(--e-1); color: var(--c-peligro); }
.det-motivo .aviso-ico { background: var(--c-peligro); border-radius: 0; }

/* ---------------- Tips propios, palabras clave y etiqueta sobre el mapa ---------------- */
.tip, .kw-tip { position: fixed; z-index: var(--z-tip); pointer-events: none; max-width: min(calc(280px * var(--ui)), calc(100vw - var(--e-2))); padding: var(--e-1); background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--r-s); box-shadow: 0 8px 24px var(--c-sombra); font-size: var(--t-12); line-height: var(--lh-texto); }
.tip { left: var(--x, 0); top: var(--y, 0); }
.kw-tip b { display: block; font-size: var(--t-14); margin-bottom: 0; }
.kw-tip div { color: var(--c-texto); }
.kw { color: var(--kw-color); font-weight: 600; border-bottom: 1px dotted currentColor; cursor: help; }
.hover-kw-label { position: fixed; left: var(--x, 0); top: var(--y, 0); z-index: var(--z-tip); pointer-events: none; translate: -50% -100%; background: var(--c-panel); border: 1px solid var(--c-linea-2); border-radius: var(--r-s); padding: 0 var(--e-1); font-size: var(--t-12); font-weight: 600; white-space: nowrap; }

/* ---------------- Capas modales: picker, fin, ayuda, escalera, pausa, ajustes, dev, cartas ---------------- */
#picker, #end, #help, #settings, #devpanel, #cartaspanel, #pausa, #ladder { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c-velo); padding: var(--e-2); }
#picker, #end { z-index: var(--z-capa); }
#ladder { z-index: var(--z-escalera); }
#cartaspanel { z-index: var(--z-cartas); }
#help, #settings { z-index: var(--z-ajustes); }
#devpanel { z-index: var(--z-dev); }
#pausa { z-index: var(--z-pausa); }
html[data-effects="alto"] #help, html[data-effects="alto"] #settings, html[data-effects="alto"] #pausa, html[data-effects="alto"] #devpanel, html[data-effects="alto"] #cartaspanel { backdrop-filter: blur(6px); }
.close { min-height: calc(32px * var(--ui)); font-family: var(--font-texto); font-size: var(--t-12); }
.spec { display: block; width: 100%; text-align: left; margin: var(--e-1) 0; padding: var(--e-1) var(--e-2); line-height: var(--lh-texto); }
.spec.locked { color: var(--c-texto-2); }
.spec small { color: var(--c-texto-2); }
#end table, #ladder-summary table { width: 100%; border-collapse: collapse; margin: var(--e-1) 0; font-size: var(--t-12); }
#end th, #end td, #ladder-summary th, #ladder-summary td { border-bottom: 1px solid var(--c-linea); padding: 0 var(--e-1); text-align: left; line-height: var(--lh-texto); }
#end tr.me td, #ladder-summary tr.me td { color: var(--c-accion); font-weight: 600; }
#end h2 { font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-28); line-height: var(--lh-junto); margin: 0 0 var(--e-1); }
#end h2.win { color: var(--c-bien); } #end h2.lose { color: var(--c-peligro); } #end h2.neutral { color: var(--fase-acento); }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-1); align-items: center; }
.teoremas { display: flex; flex-direction: column; gap: var(--e-1); width: 100%; }
.teoremas .act { text-align: left; }
.warnbox { border: 1px solid var(--c-aviso); color: var(--c-aviso); border-radius: var(--r-s); padding: var(--e-1); margin: 0 0 var(--e-1); font-size: var(--t-12); }

/* ayuda (HUD11) */
#help .card { max-width: 880px; }
.hcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin-top: var(--e-1); }
@media (max-width: 720px) { .hcards { grid-template-columns: 1fr; } }
.hcard h4 { margin: 0 0 var(--e-1); }
.hcard p { margin: 0; color: var(--c-texto-2); }
.hkeys { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); padding-top: var(--e-2); margin-top: var(--e-2); border-top: 1px solid var(--c-linea); }
.hk { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--c-texto-2); font-size: var(--t-12); }
.hk kbd { border: 1px solid var(--c-linea-2); border-radius: var(--r-s); padding: 0 var(--e-1); background: var(--c-hundido); }

/* escalera (A13, U25) */
.ladder-card { max-width: 780px; width: min(780px, 94vw); text-align: center; }
.ladder-card h2 { margin: var(--e-1) 0; font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-28); line-height: var(--lh-junto); text-transform: uppercase; letter-spacing: var(--tr-rotulo); }
.ladder-card .actions { justify-content: center; margin-top: var(--e-2); }
#ladder-summary { margin-top: var(--e-1); text-align: left; }
#ladder-summary p { margin: var(--e-1) 0; }
.cells { display: grid; grid-template-columns: repeat(var(--cols, 3), calc(56px * var(--ui))); gap: var(--e-1); justify-content: center; margin: var(--e-2) auto 0; }
.cell { width: calc(56px * var(--ui)); height: calc(56px * var(--ui)); display: grid; place-items: center; border: 2px solid var(--fase-marco); border-radius: var(--fase-radio); background: var(--c-superficie); font-family: var(--font-texto); font-weight: 600; font-size: var(--t-12); color: var(--c-texto-2); text-transform: uppercase; }
.cell.void { border-color: transparent; background: transparent; }
.cell.space { color: var(--c-cian); }
.cell.me { border-color: var(--c-accion); color: var(--c-texto); animation: cellpulse 2.4s ease-in-out infinite; }
@keyframes cellpulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 var(--e-1) var(--c-hueso-suave); } }
#ladder.line { background: none; place-items: start center; padding-top: calc(7vh + var(--e-1)); z-index: var(--z-ajustes); pointer-events: none; }
#ladder.line .ladder-card { background: none; box-shadow: none; border: none; padding: 0; }
#ladder.line .ptitle, #ladder.line .cells, #ladder.line #ladder-summary { display: none; }
#ladder.line h2 { font-size: var(--t-20); text-shadow: 0 2px 12px var(--c-negro); margin: 0; }
#ladder.line #ladder-sub { font-size: var(--t-14); margin: var(--e-1) 0 0; text-shadow: 0 1px 6px var(--c-negro); }
#ladder .progress { display: none; }
#ladder.line .progress { display: block; width: calc(220px * var(--ui)); height: 2px; margin: var(--e-2) auto 0; background: var(--c-hueso-suave); overflow: hidden; }
#ladder.line .progress i { display: block; height: 100%; width: 0; background: var(--c-accion); }
#ladder.line .progress.corre i { animation: fill20 20s linear both; }
@keyframes fill20 { from { width: 0; } to { width: 100%; } }
#ladder.line .actions { margin-top: var(--e-1); pointer-events: auto; }
#ladder.line .actions button { border: none; background: none; box-shadow: none; color: var(--c-accion); text-decoration: underline; text-underline-offset: 3px; }
#ladder-again { background: var(--c-accion); color: var(--c-tinta); }
#ladder.line .actions #ladder-vota { color: var(--c-texto); }
#ladder.line .actions #ladder-vota.on { color: var(--c-accion); }
/* 1v1: sin el mapa de la escalera; el veredicto en ambar al ganar y en peligro al perder (la palabra va con su forma: el titulo) */
#ladder.uno .cells { display: none; }
#menu.esperando .menu-card { visibility: hidden; }
#ladder.uno[data-fin="gana"] h2 { color: var(--c-ambar); }
#ladder.uno[data-fin="pierde"] h2 { color: var(--c-peligro); }
.ladder-nota { margin: var(--e-1) 0 0; color: var(--c-texto); }

/* pistas del primer 1v1 (70_ui.js U.pistas): una tarjeta sobre la banda inferior, centrada; no atrapa clics salvo su boton */
#hud > .pista { position: absolute; left: 50%; bottom: calc(max(var(--banda), var(--banda-min)) + var(--e-2)); translate: -50% 0; z-index: var(--z-flotante); width: min(520px, calc(100vw - var(--e-4))); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); padding: var(--e-1) var(--e-2); pointer-events: none; animation: rise 0.4s ease both; }
.pista-paso { font-size: var(--t-12); color: var(--fase-acento); text-transform: uppercase; letter-spacing: var(--tr-rotulo); }
.pista-txt { flex: 1 1 100%; order: 2; margin: 0; font-size: var(--t-14); color: var(--c-texto); }
.pista-salta { margin-left: auto; min-height: calc(32px * var(--ui)); padding: 0 var(--e-1); font-size: var(--t-12); background: none; box-shadow: none; border-color: transparent; color: var(--c-texto-2); pointer-events: auto; }

/* pausa (docs/22 seccion 7.1) */
.pausa-card { max-width: 320px; text-align: center; padding: var(--e-3); }
.pausa-card h3 { justify-content: center; font-size: var(--t-28); text-transform: uppercase; letter-spacing: var(--tr-rotulo); }
#pausa-online { margin: 0 0 var(--e-1); }
.pausa-actions { flex-direction: column; margin-top: var(--e-2); }
.pausa-actions .act { width: 100%; min-height: calc(44px * var(--ui)); font-size: var(--t-16); }

/* ajustes (docs/22 seccion 7.2) */
#settings .card { max-width: 520px; }
.tabs { display: flex; gap: var(--e-1); margin: var(--e-1) 0; flex-wrap: wrap; }
.tab { font-size: var(--t-14); }
.tab.on { background: var(--c-accion); color: var(--c-tinta); border-color: var(--c-accion); }
.set-pane { display: flex; flex-direction: column; }
.set { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-2) 0; border-bottom: 1px solid var(--c-linea); }
.set:last-of-type { border-bottom: none; }
.set-row { flex-direction: row; align-items: center; justify-content: space-between; }
.set-head { display: flex; flex-direction: column; gap: 0; }
.set-name { font-size: var(--t-14); color: var(--c-texto); }
.set-note { font-size: var(--t-12); color: var(--c-texto-2); }
.seg { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.seg button { color: var(--c-texto-2); font-size: var(--t-14); }
.seg button.on { background: var(--c-accion); color: var(--c-tinta); border-color: var(--c-accion); font-weight: 600; }
.switch { position: relative; width: calc(56px * var(--ui)); min-height: calc(32px * var(--ui)); height: calc(32px * var(--ui)); padding: 0; border-radius: var(--r-l); flex: none; }
.switch i { position: absolute; left: 2px; top: 2px; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); border-radius: var(--r-l); background: var(--c-texto-2); transition: left 0.25s ease, background 0.25s ease; }
.switch.on { background: var(--c-hueso-halo); border-color: var(--c-accion); }
.switch.on i { left: calc(100% - 26px * var(--ui)); background: var(--c-accion); }
.set-foot { display: flex; justify-content: flex-end; padding-top: var(--e-2); }
.keys-table { display: flex; flex-direction: column; gap: var(--e-1); max-height: 40vh; overflow: auto; }
.keyrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--e-1); }
.keyrow-name { font-size: var(--t-14); }
.keyrow-code { min-width: calc(64px * var(--ui)); text-align: center; padding: 0 var(--e-1); border: 1px solid var(--c-linea-2); border-radius: var(--r-s); font-size: var(--t-14); }
.keyrow.capturing .keyrow-code { color: var(--c-aviso); border-color: var(--c-aviso); }

/* modo dev (36-MODO-DEV) */
#devpanel .card { max-width: 780px; max-height: 92vh; }
.dev-live { font-family: var(--font-texto); font-size: var(--t-12); color: var(--c-texto-2); padding: var(--e-1) 0; word-break: break-word; }
.dev-rows { display: flex; flex-direction: column; gap: var(--e-1); }
.dev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); }
.dev-lab { display: flex; flex-direction: column; min-width: 0; }
.dev-num { width: calc(96px * var(--ui)); }
.dev-presets .row { align-items: center; }
.dev-presets select, .dev-presets input { min-width: calc(152px * var(--ui)); }
.dev-json { flex: 1 1 100%; min-height: calc(64px * var(--ui)); font-family: var(--font-texto); }
.dev-foot { justify-content: flex-start; color: var(--c-texto-2); font-size: var(--t-12); }
.dev-find { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; margin: var(--e-1) 0; }
.dev-find input { flex: 1 1 220px; min-width: 160px; }
.dev-tn, .dev-gn, .dev-more, .dev-def { color: var(--c-texto-2); font-size: var(--t-12); }
.dev-gch { color: var(--c-accion); font-size: var(--t-12); }
#dev-tree { display: flex; flex-direction: column; gap: var(--e-1); max-height: 44vh; overflow-y: auto; }
.dev-grp { border: 1px solid var(--c-linea); border-radius: var(--r-s); background: var(--c-superficie); }
.dev-grp > summary { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; cursor: pointer; padding: var(--e-1); min-height: calc(32px * var(--ui)); font-size: var(--t-14); }
.dev-gname { font-weight: 600; }
.dev-grows { display: flex; flex-direction: column; gap: var(--e-1); padding: 0 var(--e-1) var(--e-1); }
.dev-drow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--e-1); align-items: center; }
.dev-path { font-family: var(--font-texto); font-size: var(--t-12); overflow-wrap: anywhere; }
.dev-drow.on .dev-path { color: var(--c-accion); }
.dev-def { text-align: right; white-space: nowrap; }
.dev-x { min-width: var(--boton); padding: 0; }
.kw-rows { display: flex; flex-direction: column; gap: var(--e-1); }
.kw-row { display: grid; grid-template-columns: 16px 112px 40px 1fr; gap: var(--e-1); align-items: center; }
.kw-swatch { width: 14px; height: 14px; border-radius: var(--r-s); border: 1px solid var(--c-linea-2); background: var(--c); }
.kw-row input[type="color"] { width: 40px; padding: 0; }
.kw-row input[type="text"] { font-size: var(--t-12); min-height: calc(32px * var(--ui)); }

/* cartas (docs/22 seccion 7.22) */
#cartaspanel .card { max-width: 420px; }
#cartaspanel .gen { overflow-wrap: anywhere; }

/* ---------------- Menu principal (U23/U24, docs/19 seccion 10): una columna sobre el mundo, un solo boton relleno ---------------- */
#menu { position: absolute; inset: 0; display: block; overflow: auto; z-index: var(--z-portada); padding: var(--e-2); background: radial-gradient(ellipse at 50% 36%, var(--c-vineta-0) 0%, var(--c-vineta-1) 70%); }
.menu-demos { position: absolute; top: var(--e-2); left: var(--e-2); z-index: var(--z-hoja); display: inline-flex; align-items: center; min-height: calc(32px * var(--ui)); padding: 0 var(--e-1); border: 1px solid var(--c-linea-2); border-radius: var(--r-m); background: var(--c-superficie); color: var(--c-accion); font-size: var(--t-12); letter-spacing: var(--tr-rotulo); text-decoration: none; }
.menu-demos:hover { background: var(--c-superficie-2); color: var(--c-accion-2); }
.menu-demos:focus-visible { outline: 2px solid var(--c-accion); outline-offset: 2px; }
.menu-card { max-width: 560px; width: min(560px, 94vw); margin: 0 auto; padding: calc(10vh + var(--e-2)) var(--e-2) var(--e-2); text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 45%, var(--c-velo) 0%, transparent 100%); }
.hero { margin-bottom: var(--e-2); animation: rise 0.7s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero h1 { margin: var(--e-1) 0 0; font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-28); line-height: var(--lh-junto); letter-spacing: var(--tr-rotulo); color: var(--c-accion); text-shadow: 0 2px 0 var(--c-carbon), 0 0 24px var(--c-hueso-halo); }
.hero .tag { margin: var(--e-1) auto 0; max-width: 520px; color: var(--c-texto-2); font-size: var(--t-14); }
.mark { position: relative; width: 88px; height: 88px; margin: 0 auto; }
.mark .dot { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; translate: -50% -50%; border-radius: var(--r-l); background: var(--c-accion); animation: breathe 3.2s ease-in-out infinite; }
.mark .shape { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; translate: -50% -50%; opacity: 0; animation: orbit 12s ease-in-out infinite; }
.mark .s-o { border: 2px solid var(--c-o); animation-delay: 0s; }
.mark .s-i { border: 2px solid var(--c-i); border-radius: var(--r-l); animation-delay: 3s; }
.mark .s-g { width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 50px solid var(--c-g); animation-delay: 6s; }
.mark .s-a { width: 44px; height: 44px; border: 2px solid var(--c-a); rotate: 45deg; animation-delay: 9s; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 var(--c-hueso-halo); opacity: 0.9; } 50% { box-shadow: 0 0 0 var(--e-1) transparent; opacity: 1; } }
@keyframes orbit { 0%, 2% { opacity: 0; } 6%, 14% { opacity: 0.9; } 18%, 100% { opacity: 0; } }
.modes { display: flex; justify-content: center; gap: var(--e-4); margin: 0 0 var(--e-2); }
.mode { display: grid; justify-items: center; gap: var(--e-1); padding: var(--e-1); background: none; border-color: transparent; box-shadow: none; position: relative; }
.mode svg { width: 120px; height: 48px; fill: none; stroke: var(--c-texto-2); stroke-width: 2; }
.mode svg rect.core { fill: var(--c-hueso-suave); }
.mode svg circle { fill: var(--c-texto-2); stroke: none; }
.mode svg circle.hole { fill: var(--c-negro); stroke: var(--c-g); stroke-width: 1.5; }
.mode b { order: -1; font-family: var(--font-texto); font-weight: 600; font-size: var(--t-14); text-transform: uppercase; letter-spacing: var(--tr-rotulo); color: var(--c-texto-2); }
.mode::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--c-accion); translate: -50% 0; transition: width 250ms ease; }
.mode.on::after { width: 120px; }
.mode.on b { color: var(--c-accion); }
.mode.on svg { stroke: var(--c-accion); } .mode.on svg circle { fill: var(--c-accion); } .mode.on svg circle.hole { fill: var(--c-negro); }
.mode:hover { background: none; border-color: transparent; }
/* selector de civilizacion (Adam, 2026-10-12): centro circular que rota; 70_ui.js civSelector pone --civ-x (-1 a 1, lado del
   anillo), --civ-f (1 al frente, 0 detras), --civ-luz (iluminada), --civ-vis, --z-civ por figura y --civ-giro en la caja */
.civsel { margin: 0 0 var(--e-2); --civ-giro: 0; }
.civ-escena { position: relative; width: min(100%, calc(var(--civ-radio) * 2 + var(--civ-lado) + var(--boton) * 2)); height: calc(var(--civ-lado) * 1.3); margin: 0 auto; touch-action: pan-y; }
.civ-escena::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--civ-radio) * 2); height: calc(var(--civ-lado) * 0.4); translate: -50% -50%; border: 1px solid var(--c-linea); border-radius: var(--r-l); }
.civ-dial { position: absolute; left: 50%; top: 50%; width: calc(var(--civ-lado) * 1.25); height: calc(var(--civ-lado) * 1.25); translate: -50% -50%; rotate: calc(var(--civ-giro) * 1deg); border: 2px dashed var(--c-linea-2); border-radius: var(--r-l); background: radial-gradient(circle, var(--c-hueso-halo) 0%, var(--c-hueso-suave) 45%, transparent 70%); box-shadow: 0 0 var(--e-3) var(--c-hueso-suave); }
.civ-dial::after { content: ''; position: absolute; left: 50%; top: 0; width: var(--e-1); height: var(--e-1); translate: -50% -50%; border-radius: var(--r-l); background: var(--c-accion); }
.civ-anillo { position: absolute; inset: 0; }
button.civ-item { position: absolute; left: 50%; top: 50%; z-index: var(--z-civ); width: calc(var(--civ-lado) * (0.5 + 0.5 * var(--civ-f))); height: calc(var(--civ-lado) * (0.5 + 0.5 * var(--civ-f))); min-height: 0; padding: 0; translate: calc(-50% + var(--civ-x) * var(--civ-radio)) calc(-50% - (1 - var(--civ-f)) * var(--e-2)); opacity: var(--civ-vis); filter: brightness(calc(0.18 + 0.82 * var(--civ-luz))) saturate(var(--civ-luz)) drop-shadow(0 0 calc(var(--civ-luz) * var(--e-2)) var(--c-hueso-halo)); background: none; border: none; border-radius: var(--r-l); box-shadow: none; }
button.civ-item:hover { background: none; }
button.civ-item.oculta { pointer-events: none; }
.civ-sprite { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.civ-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; height: 100%; border: 2px dashed var(--c-linea-2); border-radius: var(--r-l); color: var(--c-texto-2); background: var(--c-hundido); }
.civ-ph small { font-size: var(--t-12); line-height: var(--lh-junto); opacity: var(--civ-luz); }
.civ-ph-forma { width: 36%; height: 36%; }
.civ-ph[data-emblema="o"] .civ-ph-forma { border: 2px solid var(--c-o); }
.civ-ph[data-emblema="i"] .civ-ph-forma { border: 2px solid var(--c-i); border-radius: var(--r-l); }
.civ-ph[data-emblema="g"] .civ-ph-forma { background: var(--c-g); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.civ-ph[data-emblema="a"] .civ-ph-forma { width: 28%; height: 28%; border: 2px solid var(--c-a); rotate: 45deg; }
.civ-nombre { margin: 0; font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-20); line-height: var(--lh-junto); letter-spacing: var(--tr-rotulo); color: var(--c-accion); }
.civ-prev { left: 0; }
.civ-next { right: 0; }
button.civ-flecha { position: absolute; top: 50%; translate: 0 -50%; z-index: var(--z-hoja); min-width: var(--boton); padding: 0; font-size: var(--t-20); background: none; box-shadow: none; border-color: var(--c-linea); border-radius: var(--r-l); }
.cta { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-1); }
.cta .name { width: 240px; text-align: center; }
.cta .name span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cta .name input { background: none; border: none; border-bottom: 2px solid var(--c-linea-2); border-radius: 0; text-align: center; font-size: var(--t-16); }
.cta .name input:focus { border-bottom-color: var(--c-accion); }
.cta .go { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; justify-content: center; }
button.big { font-size: var(--t-16); padding: 0 var(--e-3); min-height: calc(56px * var(--ui)); }
#btn-local.big, #btn-reto-acepta.big { min-width: 280px; font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-20); letter-spacing: var(--tr-rotulo); animation: pulse 3.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: inset 2px 2px 0 var(--c-accion-2), 0 0 0 0 transparent; } 50% { box-shadow: inset 2px 2px 0 var(--c-accion-2), 0 0 0 var(--e-1) var(--c-hueso-suave); } }
/* 1v1 (Adam, 2026-10-20): la entrada publica. Un solo boton relleno (JUGAR 1v1, contra la IA) con su dificultad debajo; en linea y
   el reto a un amigo van como texto secundario; las civilizaciones por venir se ven, apagadas, con la marca Proximamente. */
.uno-bloque { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); }
.uno-reto-txt { margin: 0; font-size: var(--t-16); color: var(--c-texto); text-shadow: 0 1px 6px var(--c-negro); }
.dificultad { align-items: center; justify-content: center; }
.dificultad .rotulo { flex-basis: 100%; text-align: center; font-size: var(--t-12); color: var(--c-texto-2); text-transform: uppercase; letter-spacing: var(--tr-rotulo); }
.dificultad button { min-height: calc(32px * var(--ui)); padding: 0 var(--e-2); background: var(--c-velo); }
#uno-linea button { background: var(--c-velo); border-color: var(--c-linea); color: var(--c-accion); }
#uno-linea button:hover { border-color: var(--c-linea-2); }
.reto-box { width: min(440px, 100%); padding: var(--e-2); border: 2px solid var(--fase-marco); border-radius: var(--fase-radio); background: var(--c-panel); text-align: left; }
.reto-box p { margin: 0 0 var(--e-1); }
.reto-paso { color: var(--c-texto); }
.reto-box .row { display: flex; gap: var(--e-1); }
.reto-box .row input { flex: 1; min-width: 0; }
.reto-actions { display: flex; flex-wrap: wrap; gap: var(--e-1); justify-content: flex-end; margin-top: var(--e-1); }
.civs { display: flex; justify-content: center; gap: var(--e-3); margin: 0 0 var(--e-2); }
.civ-fig { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); margin: 0; width: calc(88px * var(--ui)); }
.civ-fig .civ-img { display: block; width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); object-fit: contain; image-rendering: pixelated; }
.civ-fig .civ-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.civ-fig figcaption { display: flex; flex-direction: column; align-items: center; font-family: var(--font-pixel); font-size: var(--t-14); line-height: var(--lh-junto); letter-spacing: var(--tr-rotulo); color: var(--c-texto-2); }
.civ-fig figcaption small { font-family: var(--font-texto); font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--tr-rotulo); color: var(--c-texto-2); }
.civ-fig.on .civ-img { filter: drop-shadow(0 0 var(--e-1) var(--c-hueso-halo)); }
.civ-fig.on figcaption { color: var(--c-accion); }
.civ-fig.pronto .civ-img { opacity: 0.55; filter: saturate(0.35) brightness(0.8); }
/* las texturas de los civiles traen aire alrededor (Cheng ocupa la mitad de su lienzo de 256): se dibujan mas grandes y con margen
   negativo arriba y abajo para que el cuerpo mida lo mismo que el monoide, sin recortar ni duplicar el PNG */
.civ-fig[data-civ="chinos"] img.civ-img { width: calc(128px * var(--ui)); height: calc(128px * var(--ui)); margin: calc(var(--e-4) * -1) 0; max-width: none; }
.civ-fig[data-civ="mayas"] img.civ-img { width: calc(88px * var(--ui)); height: calc(88px * var(--ui)); margin: calc(var(--e-3) / -2) 0; max-width: none; }
.hero .tag, .civ-fig figcaption, .dificultad .rotulo { text-shadow: 0 1px 6px var(--c-negro); }
.go-editor { display: flex; align-items: center; justify-content: center; gap: var(--e-2); flex-wrap: wrap; }
.chk { flex-direction: row; align-items: center; gap: var(--e-1); margin: var(--e-1) 0; }
.chk input { min-height: 0; }
details.more { text-align: center; }
details.more summary { display: inline-block; cursor: pointer; color: var(--c-texto-2); font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--tr-rotulo); list-style: none; padding: var(--e-1) 0; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+ "; }
details.more[open] summary::before { content: "- "; }
details.more .row label { flex: 1; min-width: 130px; }
details.more .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 60vh; overflow: auto; background: var(--c-panel); border-top: 2px solid var(--fase-marco); padding: var(--e-2) var(--e-3) var(--e-3); text-align: left; animation: sheetin 400ms ease both; z-index: var(--z-hoja); }
details.more .sheet > * { max-width: 720px; margin-left: auto; margin-right: auto; }
details.more .sheet-close { position: absolute; right: var(--e-2); top: var(--e-1); font-size: var(--t-12); }
@keyframes sheetin { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.pane { border-radius: var(--r-m); padding: var(--e-2); background: var(--c-superficie); text-align: left; }
.pane p { margin: 0 0 var(--e-1); color: var(--c-texto-2); }
.pane h4 { font-family: var(--font-texto); font-weight: 600; font-size: var(--t-14); margin: var(--e-1) 0; }
.roomcode { font-size: var(--t-14); text-transform: uppercase; letter-spacing: var(--tr-rotulo); color: var(--c-texto-2); margin: var(--e-1) 0; }
.roomcode b { font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-28); color: var(--c-texto); margin-left: var(--e-1); }
.status { color: var(--c-aviso); font-size: var(--t-12); min-height: calc(20px * var(--ui)); margin-top: var(--e-1); }
.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--e-1); font-size: var(--t-12); color: var(--c-texto-2); margin-top: var(--e-2); }
.foot > span:first-child { flex-basis: 100%; }
.foot .sep { color: var(--c-linea-2); margin: 0; }
#fade { position: absolute; inset: 0; background: var(--c-negro); z-index: var(--z-fundido); pointer-events: none; opacity: 1; transition: opacity 0.6s ease; }
#fade.out { opacity: 0; }
/* pantalla de carga (index.html #carga): tapa los discos y el armado del atlas al entrar; el punto late solo con transform y
   opacity (los mueve el compositor aunque el hilo principal este ocupado) */
#carga { position: absolute; inset: 0; z-index: var(--z-carga); background: var(--c-fondo); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); transition: opacity 0.5s ease; }
#carga.fuera { opacity: 0; pointer-events: none; }
.carga-logo { display: flex; align-items: center; gap: var(--e-1); font-family: var(--font-pixel); font-size: var(--t-28); letter-spacing: var(--tr-rotulo); color: var(--c-texto); }
.carga-punto { width: 0.55em; height: 0.55em; border-radius: var(--r-l); background: var(--c-azul); box-shadow: 0 0 0.6em var(--c-azul); animation: carga-late 1.1s ease-in-out infinite; will-change: transform, opacity; }
.carga-txt { margin: 0; font-size: var(--t-12); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--c-texto-2); }
@keyframes carga-late { 0%, 100% { opacity: 0.35; box-shadow: 0 0 0.2em var(--c-azul); } 50% { opacity: 1; box-shadow: 0 0 0.9em var(--c-azul); } }

/* ---------------- Carril (Modo 1 del codigo clasico heredado, U26): fila de 120 px ---------------- */
.lanepanel button { min-height: calc(32px * var(--ui)); }
.lanepanel .lrow { display: flex; align-items: stretch; gap: var(--e-1); }
.lanepanel .flank { display: flex; flex-direction: column; gap: 0; }
.lanepanel .flank button { width: calc(44px * var(--ui)); height: calc(32px * var(--ui)); padding: 0; font-size: var(--t-16); }
.lanepanel .flank button.on { background: var(--c-accion); color: var(--c-tinta); }
.lanepanel .dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(72px * var(--ui)), 1fr)); gap: 0; flex: 1; align-content: start; }
.lanepanel .dbtn { position: relative; min-height: calc(64px * var(--ui)); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 var(--e-1) var(--e-3); text-align: left; }
.lanepanel .dbtn .ico { position: absolute; left: 4px; top: calc(50% - 10px); width: 20px; height: 20px; }
.lanepanel .dbtn b { display: block; font-size: var(--t-12); line-height: var(--lh-junto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lanepanel .dbtn small { display: flex; gap: var(--e-1); align-items: center; font-size: var(--t-12); color: var(--c-texto-2); }
.lanepanel .dbtn kbd { position: absolute; top: 0; right: 4px; }
.lanepanel .dbtn.locked { color: var(--c-texto-2); }
.lanepanel .dbtn.poor small { color: var(--c-aviso); }
.rd { width: 7px; height: 7px; border-radius: var(--r-s); background: var(--c); display: inline-block; vertical-align: middle; }
img.rd.rd-icon { width: 10px; height: 10px; border-radius: 0; background: none; image-rendering: pixelated; }
.ci { display: inline-flex; align-items: center; white-space: nowrap; }
.lanepanel .lacts { display: flex; flex-direction: column; gap: 0; }
.lanepanel .lacts button { padding: 0 var(--e-1); font-size: var(--t-12); white-space: nowrap; }
.lanepanel .lacts button.ready { background: var(--c-accion); color: var(--c-tinta); }
.lanepanel .lfoot { display: flex; align-items: center; gap: var(--e-2); min-height: calc(32px * var(--ui)); font-size: var(--t-12); }
.lanepanel .queue { display: flex; gap: 0; }
.lanepanel .queue i { width: 12px; height: 12px; border-radius: var(--r-s); background: var(--c-hueso-suave); display: block; box-shadow: inset -2px 0 0 var(--c-panel); }
.lanepanel .queue i.on { background: linear-gradient(90deg, var(--seat) var(--fill, 100%), var(--c-hueso-suave) var(--fill, 100%)); }
.lanepanel .qtext, .lanepanel .zoom { font-size: var(--t-12); }
.lanepanel .popbar { width: 60px; height: 3px; background: var(--c-hueso-suave); border-radius: var(--r-s); overflow: hidden; }
.lanepanel .popbar i { display: block; height: 100%; width: var(--p, 0%); background: var(--c-accion); }
.lanepanel .popbar.full i { background: var(--c-aviso); }
.lanepanel .lfoot .act.cancel { color: var(--c-texto-2); }
.lanepanel details.ideas { margin-left: auto; position: relative; }
.lanepanel details.ideas summary { cursor: pointer; color: var(--c-texto-2); text-transform: uppercase; letter-spacing: var(--tr-rotulo); font-size: var(--t-12); list-style: none; min-height: calc(32px * var(--ui)); display: inline-flex; align-items: center; }
.lanepanel details.ideas summary::-webkit-details-marker { display: none; }
.lanepanel details.ideas .teoremas { position: absolute; right: 0; bottom: calc(36px * var(--ui)); min-width: 300px; padding: var(--e-1); background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--r-m); }

/* ---------------- Editor de mapas (docs/37 secciones 1 y 2): paleta encima de la zona de comandos ---------------- */
#btn-editor { font-size: var(--t-14); }
#edpanel { position: fixed; right: var(--e-1); bottom: calc(max(var(--banda), var(--banda-min)) + var(--e-1)); width: 300px; max-height: 50vh; overflow: auto; z-index: var(--z-editor); padding: var(--e-1); background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--fase-radio); font-size: var(--t-12); }
#edpanel .ed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--e-1); flex-wrap: wrap; margin-bottom: var(--e-1); }
#edpanel .ed-head b { color: var(--c-texto-2); text-transform: uppercase; letter-spacing: var(--tr-rotulo); font-size: var(--t-12); }
#edpanel .ed-tabs { display: flex; gap: var(--e-1); }
#edpanel button { min-height: calc(32px * var(--ui)); font-size: var(--t-12); padding: 0 var(--e-1); }
#edpanel .ed-sub, #edpanel .ed-lab, #edpanel .ed-estado, #edpanel .ed-flag small { color: var(--c-texto-2); }
#edpanel .ed-sub { margin: var(--e-1) 0; }
#edpanel .ed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-1); }
#edpanel .ed-tool { display: flex; align-items: center; gap: var(--e-1); }
#edpanel .ed-grid .ed-tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#edpanel .ed-tool.on { border-color: var(--c-accion); background: var(--c-hueso-suave); }
#edpanel .ed-sw { width: 12px; height: 12px; border-radius: var(--r-s); flex: none; border: 1px solid var(--c-sombra); }
#edpanel .ed-row { display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; margin: var(--e-1) 0; }
#edpanel .ed-row select, #ed-nombre { flex: 1; min-width: 0; min-height: calc(32px * var(--ui)); }
#edpanel .ed-amount { flex-direction: row; align-items: center; gap: var(--e-1); margin-left: auto; }
#edpanel .ed-amount input { width: 84px; min-height: calc(32px * var(--ui)); }
#edpanel .ed-flag { display: flex; align-items: center; justify-content: space-between; gap: var(--e-1); padding: var(--e-1) 0; border-bottom: 1px solid var(--c-linea); }
#edpanel .ed-flag span { display: flex; flex-direction: column; min-width: 0; }
#ed-cursor { position: absolute; left: 0; top: 0; pointer-events: none !important; border: 2px dashed var(--c-accion); border-radius: var(--r-s); box-shadow: 0 0 0 1px var(--c-sombra); z-index: var(--z-flotante); }
#ed-cursor.unit { border-style: solid; border-radius: var(--r-l); }
#ed-cursor.build { border-color: var(--c-cian); }

/* ---------------- Efectos (ajuste): medio y bajo sin desenfoques; bajo tampoco pulsos ---------------- */
html[data-effects="bajo"] #btn-queue.big, html[data-effects="bajo"] .cells .cell.me, html[data-effects="bajo"] .mark .dot, html[data-effects="bajo"] .mark .shape, html[data-effects="bajo"] .mm-ping { animation: none; }
@media (prefers-reduced-motion: reduce) { .aviso, .floater, .mm-ping, .hero, #btn-queue.big, .mark .dot, .mark .shape { animation-duration: 1ms; animation-iteration-count: 1; } }

/* ---------------- Ciclo 6 (22 seccion 7.24): + por fila del ADN con su tecla y menu de la Celula madre a 1920x1080 ---------------- */
.adn-mas-grupo { display: inline-flex; align-items: center; gap: 0; }
.adn-row .adn-mas { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); min-height: calc(32px * var(--ui)); padding: 0; font-family: var(--font-pixel); font-size: var(--t-20); line-height: var(--lh-junto); color: var(--fase-acento); }
.adn-row .adn-mas.off { color: var(--c-texto-2); background: var(--c-hundido); box-shadow: none; }
.adn-mas-grupo .tecla { min-width: calc(12px * var(--ui)); padding: 0; border: none; background: none; color: var(--c-texto-2); }
@media (min-width: 1600px) and (min-height: 1000px) {
  .cm-celula { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); }
  .cm-col-nace { gap: var(--e-1); }
  .cm-nace-l1 > .cm-val { font-size: var(--t-28); }
  .cm-chips { font-size: var(--t-14); }
  .adn-row { min-height: calc(48px * var(--ui)); font-size: var(--t-16); }
  .adn-pts { display: flex; flex-direction: column; justify-content: center; line-height: var(--lh-junto); }
  .adn-pts .cm-val { font-size: var(--t-16); }
  .adn-cells i { width: calc(12px * var(--ui)); height: calc(20px * var(--ui)); }
  .adn-row .adn-mas { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); min-height: calc(40px * var(--ui)); }
  .adn-row .costo .micon { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
  .adn-row .costo b { font-size: var(--t-16); }
  .adn-mas-grupo .tecla { font-size: var(--t-14); }
}

/* ---------- Panel de desarrollo al arrancar (36 seccion 2.1) y salas de prueba (46 seccion 2) ---------- */
#devhome { position: absolute; inset: 0; overflow: auto; z-index: var(--z-dev); background: var(--c-fondo); padding: var(--e-2); }
/* El panel es una aplicacion, no una columna. Antes todo iba apilado en 960 px y habia que cruzar el bestiario entero
   para llegar a los atajos; el editor de pistas se quedaba sin sitio para su rejilla (Adam 2026-09-26). */
.dh-card { max-width: 960px; margin: 0 auto; }   /* queda para lo que aun lo use */
.dh-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--e-3); min-height: 100%; align-items: start; }
.dh-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--e-2); padding-right: var(--e-2);
  border-right: 2px solid var(--fase-marco); min-height: calc(100vh - var(--e-3) * 2); }
.dh-marca { display: flex; flex-direction: column; gap: 0; }
.dh-marca strong { font-family: var(--font-pixel); font-size: var(--t-20); letter-spacing: var(--tr-rotulo); }
.dh-menu { display: flex; flex-direction: column; gap: 0; }
.dh-navbtn { text-align: left; width: 100%; padding: var(--e-1) var(--e-2); border: 2px solid transparent; border-radius: var(--r-m);
  background: none; color: inherit; font: inherit; font-size: var(--t-14); cursor: pointer; line-height: var(--lh-texto); }
.dh-navbtn:hover { background: var(--c-panel); }
.dh-navbtn.activo { background: var(--c-panel); border-color: var(--c-texto); font-family: var(--font-pixel);
  letter-spacing: var(--tr-rotulo); }
.dh-navpie { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-1); }
.dh-main { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.dh-top { margin-bottom: 0; }
.dh-top h1 { font-family: var(--font-pixel); font-size: var(--t-28); line-height: var(--lh-junto); margin: 0; }
.dh-cuerpo { min-width: 0; }
.dh-salas-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--e-2); align-items: start; }
.dh-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-2); align-items: start; }
.dh-caja { background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--r-m); padding: var(--e-2); }
.dh-caja h2 { font-family: var(--font-pixel); font-size: var(--t-16); letter-spacing: var(--tr-rotulo); margin: 0 0 var(--e-1); }
@media (max-width: 900px) {
  .dh-app { grid-template-columns: 1fr; }
  .dh-nav { position: static; min-height: 0; border-right: 0; border-bottom: 2px solid var(--fase-marco); padding-bottom: var(--e-2); }
  .dh-menu { flex-direction: row; flex-wrap: wrap; }
}

/* 17 seccion 5: el estudio de pistas. Catalogo a la izquierda, lo que se edita a la derecha. */
.dh-estudio { display: flex; flex-direction: column; gap: var(--e-2); }
.es-lienzo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-2); align-items: start; }
.es-lista { display: flex; flex-direction: column; gap: var(--e-1); max-height: 72vh; overflow: auto; padding-right: var(--e-1); }
.es-grupo { margin-top: var(--e-1); }
.es-grupo h3 { font-family: var(--font-pixel); font-size: var(--t-14); letter-spacing: var(--tr-rotulo); margin: 0; }
.es-vacio { font-style: italic; }
.es-item { display: flex; flex-direction: column; gap: 0; align-items: flex-start; text-align: left; width: 100%;
  padding: var(--e-1); border: 2px solid var(--fase-marco); border-radius: var(--r-m); background: var(--c-panel);
  color: inherit; font: inherit; font-size: var(--t-14); cursor: pointer; line-height: var(--lh-junto); }
.es-item:hover { border-color: var(--c-texto-2); }
.es-item.activo { border-color: var(--c-texto); box-shadow: inset 3px 0 0 var(--c-texto); }
.es-chips { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.es-chips .dh-chip { font-style: normal; }
.es-nueva { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; margin-top: var(--e-2);
  padding-top: var(--e-2); border-top: 2px solid var(--fase-marco); }
.es-nueva h3 { width: 100%; font-family: var(--font-pixel); font-size: var(--t-14); letter-spacing: var(--tr-rotulo); margin: 0; }
.es-panel { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); background: var(--c-panel);
  border: 2px solid var(--fase-marco); border-radius: var(--r-m); padding: var(--e-2); }
.es-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.es-cab-tit { display: flex; flex-direction: column; gap: var(--e-1); min-width: 200px; align-items: flex-start; }
.es-cab-tit h3 { font-family: var(--font-pixel); font-size: var(--t-20); margin: 0; }
.es-sello { font-size: var(--t-12); letter-spacing: var(--tr-rotulo); font-family: var(--font-pixel); padding: 0 var(--e-1);
  border-radius: var(--r-s); border: 2px solid currentColor; align-self: flex-start; line-height: var(--lh-junto); }
.es-sello-mia { color: var(--c-bien); }
.es-sello-fab { color: var(--c-texto-2); }
.es-acciones { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.es-banda { font-size: var(--t-12); line-height: var(--lh-texto); margin: 0; padding: var(--e-1) var(--e-2);
  border-left: 3px solid var(--c-aviso); background: var(--c-superficie); border-radius: var(--r-s); }
.es-leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e-1) var(--e-2); }
.es-dato { display: flex; flex-direction: column; font-size: var(--t-12); line-height: var(--lh-texto); }
.es-dato-k { font-family: var(--font-pixel); letter-spacing: var(--tr-rotulo); opacity: 0.85; }
.es-dato-v { opacity: 0.68; }
.es-barra { border-top: 2px solid var(--fase-marco); padding-top: var(--e-2); }
.es-solo-lectura { cursor: not-allowed; opacity: 0.92; }
@media (max-width: 1100px) { .es-lienzo { grid-template-columns: 1fr; } .es-lista { max-height: none; } }

/* 19 seccion 17: bestiario con vista de detalle. Rejilla a la izquierda, la mesa de trabajo a la derecha. */
.be-lienzo { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--e-2); align-items: start; }
.be-rej { display: flex; flex-direction: column; gap: var(--e-1); max-height: 74vh; overflow: auto; padding-right: var(--e-1); }
.dh-bestia-ficha { width: 100%; text-align: left; cursor: pointer; background: var(--c-panel); color: inherit; font: inherit; }
.dh-bestia-ficha:hover { border-color: var(--c-texto-2); }
.dh-bestia-ficha.activo { border-color: var(--c-texto); box-shadow: inset 3px 0 0 var(--c-texto); }
.be-panel { min-width: 0; }
.be-detalle { display: flex; flex-direction: column; gap: var(--e-2); background: var(--c-panel);
  border: 2px solid var(--fase-marco); border-radius: var(--r-m); padding: var(--e-2); }
.be-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.be-cab-tit { display: flex; flex-direction: column; gap: var(--e-1); align-items: flex-start; min-width: 200px; }
.be-cab-tit h3 { font-family: var(--font-pixel); font-size: var(--t-20); margin: 0; }
.be-bloque { display: flex; flex-direction: column; gap: var(--e-1); padding-top: var(--e-2); border-top: 2px solid var(--fase-marco); }
.be-bloque h4 { font-family: var(--font-pixel); font-size: var(--t-14); letter-spacing: var(--tr-rotulo); margin: 0; }
.be-estado { display: flex; flex-direction: column; gap: var(--e-1); }
.be-estado-cab { display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; }
.be-estado-cab strong { font-family: var(--font-pixel); font-size: var(--t-14); }
.be-tira { display: flex; align-items: flex-start; gap: var(--e-2); flex-wrap: wrap; }
.be-vivo { flex: none; image-rendering: pixelated; background: var(--c-hundido); border: 2px solid var(--fase-marco); border-radius: var(--r-s); }
/* La caja de la animacion va SOLA y antes de los cuadros sueltos: lo de arriba es la secuencia, lo de abajo son
   los fotogramas. Compartiendo fila, el grande se leia como "el cuadro 1 ampliado" en vez de como la animacion. */
.be-gif { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); padding: var(--e-1);
  background: var(--c-hundido); border: 1px solid var(--c-linea); border-radius: var(--r-s); align-self: flex-start; }
.be-gif-pie { font-size: var(--t-12); color: var(--c-texto-2); }
.be-cuadros, .be-variantes { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.be-variantes { max-height: 42vh; overflow: auto; }
.be-cuadro { display: flex; flex-direction: column; align-items: center; gap: 0; }
.be-cuadro canvas { image-rendering: pixelated; background: var(--c-hundido); border: 1px solid var(--c-linea); border-radius: var(--r-s); }
.be-num { font-size: var(--t-12); font-family: var(--font-pixel); opacity: 0.6; line-height: var(--lh-junto); }
.be-paleta { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.be-tinta { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-12); padding: 0 var(--e-1);
  border: 1px solid var(--c-linea); border-radius: var(--r-s); line-height: var(--lh-texto); }
.be-swatch { width: 14px; height: 14px; border-radius: var(--r-s); border: 1px solid var(--c-linea-2); display: inline-block; }
.be-sonido { display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; font-size: var(--t-14); }
.be-muerto { font-size: var(--t-12); color: var(--c-aviso); }
.be-pedido { width: 100%; font-family: var(--font-pixel); font-size: var(--t-12); background: var(--c-hundido);
  color: var(--c-texto); border: 2px solid var(--fase-marco); border-radius: var(--r-m); padding: var(--e-1); }
@media (max-width: 1100px) { .be-lienzo { grid-template-columns: 1fr; } .be-rej { max-height: none; } }

/* 19 seccion 17.6: la mesa se gobierna desde arriba (resumen y buscador), los huecos se ven como huecos,
   las familias se enlazan y dos fichas se pueden poner una al lado de la otra. */
.be-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); margin-bottom: var(--e-1); }
.be-resumen .dh-chip { font-style: normal; }
.be-chip-mal { color: var(--c-aviso); border-color: var(--c-aviso); font-style: normal; }
.be-buscador { gap: var(--e-1); margin-bottom: var(--e-1); }
.be-busca-lab { display: flex; align-items: center; gap: var(--e-1); flex: 1 1 auto; min-width: 260px; }
.be-busca { flex: 1 1 auto; min-width: 0; font-size: var(--t-14); }
.be-falta { font-family: var(--font-pixel); font-size: var(--t-12); line-height: var(--lh-junto);
  letter-spacing: var(--tr-rotulo); color: var(--c-aviso); }
.dh-bestia-ficha.be-hueco { border-style: dashed; border-color: var(--c-aviso); }
.be-banda-mal { font-size: var(--t-12); line-height: var(--lh-texto); margin: 0; padding: var(--e-1) var(--e-2);
  border-left: 3px solid var(--c-peligro); background: var(--c-superficie); border-radius: var(--r-s); }
.be-enlaces { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.be-enlace { font-size: var(--t-12); text-align: left; }
.be-vs { max-width: 260px; font-size: var(--t-12); }
.be-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-2); align-items: start; }
.be-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); min-width: 0;
  padding: var(--e-1); border: 2px solid var(--fase-marco); border-radius: var(--r-m); }
.be-col h4 { font-family: var(--font-pixel); font-size: var(--t-16); margin: 0; }

/* 19 seccion 17.4: editor de pixelart dentro del bestiario. */
.be-clicable { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.be-clicable:hover canvas { border-color: var(--c-texto); }
.be-vista-zona { min-width: 0; }
.px-editor { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2);
  padding-top: var(--e-2); border-top: 2px solid var(--c-linea-2); }
.px-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.px-cab h4 { font-family: var(--font-pixel); font-size: var(--t-16); margin: 0; }
.px-fila { display: flex; gap: var(--e-2); align-items: flex-start; flex-wrap: wrap; }
.px-izq { display: flex; flex-direction: column; gap: var(--e-1); }
.px-der { display: flex; flex-direction: column; gap: var(--e-1); max-width: 260px; }
.px-tools { gap: var(--e-1); align-items: center; }
.px-envolver { display: flex; align-items: center; gap: var(--e-1); cursor: pointer;
  font-size: var(--t-12); line-height: var(--lh-texto); }
.px-lienzo { display: inline-block; background: var(--c-hundido); border: 2px solid var(--fase-marco); border-radius: var(--r-m); }
.px-canvas { display: block; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.px-previo { display: flex; align-items: flex-end; gap: var(--e-1); flex-wrap: wrap; }
.px-previo canvas { image-rendering: pixelated; background: var(--c-hundido); border: 1px solid var(--c-linea); border-radius: var(--r-s); }
.px-paleta { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.px-tinta { display: flex; align-items: center; gap: var(--e-1); padding: 0 var(--e-1); cursor: pointer;
  border: 2px solid var(--c-linea); border-radius: var(--r-s); background: var(--c-panel); color: inherit;
  font: inherit; font-size: var(--t-12); line-height: var(--lh-texto); }
.px-tinta:hover { border-color: var(--c-texto-2); }
.px-tinta.activo { border-color: var(--c-texto); }
.px-vacio { background-image: linear-gradient(45deg, var(--c-linea) 25%, transparent 25%, transparent 75%, var(--c-linea) 75%); }
.dh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-2); }
.dh-head h1 { font-family: var(--font-pixel); font-size: var(--t-28); line-height: var(--lh-junto); margin: 0; }
.dh-tit { min-width: 240px; flex: 1 1 auto; }
.dh-sub, .dh-nota { font-size: var(--t-12); line-height: var(--lh-texto); opacity: 0.72; margin: var(--e-1) 0 0; }
.dh-aviso { font-size: var(--t-12); border: 2px solid var(--c-aviso, currentColor); border-radius: var(--r-m); padding: var(--e-1); margin: 0 0 var(--e-2); }
.dh-sec { margin-bottom: var(--e-3); }
.dh-sec h2 { font-family: var(--font-pixel); font-size: var(--t-20); letter-spacing: var(--tr-rotulo); margin: 0 0 var(--e-1); }
.dh-sala { background: var(--c-panel); border: 2px solid var(--fase-marco); border-radius: var(--r-m); padding: var(--e-2); margin-bottom: var(--e-2); }
.dh-sala h3 { font-family: var(--font-pixel); font-size: var(--t-16); margin: 0; }
.dh-tabla { width: 100%; border-collapse: collapse; margin: var(--e-1) 0; font-size: var(--t-12); }
.dh-tabla th { text-align: left; font-family: var(--font-pixel); letter-spacing: var(--tr-rotulo); opacity: 0.7; font-weight: 400; }
.dh-tabla th, .dh-tabla td { padding: 0 var(--e-1) 0 0; line-height: var(--lh-texto); border-bottom: 1px solid var(--fase-marco); }
.dh-val { font-family: var(--font-pixel); }
.dh-def { opacity: 0.55; }
.dh-campos { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-1) 0; }
.dh-campo { display: flex; flex-direction: column; gap: 0; font-size: var(--t-12); line-height: var(--lh-texto); opacity: 0.9; }
.dh-campo input, .dh-campo select { min-width: 120px; }
.dh-pie { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.dh-fila { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.dh-check { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-14); }
.dh-atajos { display: flex; flex-wrap: wrap; gap: var(--e-1); }
/* 46 seccion 3: panel de rendimiento de una sala de prueba. Arriba a la derecha y debajo de la barra: arriba a la izquierda tapaba
   los recursos y ahi debajo viven los avisos (Adam 2026-09-21). Capa por debajo del HUD, para no tapar nunca la barra ni su menu.
   Rejilla de rotulo y cifra
   (19: humanista para texto, pixel para cifras); se crea una vez y solo se le cambian los valores. */
.test-perf { position: fixed; right: var(--e-1); top: calc(var(--barra) + var(--e-1)); z-index: var(--z-hoja); background: var(--c-panel); color: var(--c-texto);
  font-family: var(--font-texto); font-size: var(--t-12); line-height: var(--lh-texto); padding: var(--e-1);
  border: 2px solid var(--fase-marco); border-radius: var(--r-m); pointer-events: none;
  display: grid; grid-template-columns: auto auto; gap: 0 var(--e-2); }
.test-perf h4 { grid-column: 1 / -1; margin: 0; font-family: var(--font-pixel); font-size: var(--t-14); font-weight: 400; }
.test-perf b { font-family: var(--font-pixel); font-weight: 400; text-align: right; }

/* 22 seccion 7.30: junto a "Trabajando", la ilustracion y el nombre de lo que produce */
.sel-head .state-res { display: inline-flex; align-items: center; gap: var(--e-1); }

/* ---------------- Remate de fin (57 seccion 2, F08): se lee en vertical y sin sonido ---------------- */
/* Orden de lectura de arriba abajo: veredicto grande, por que, una tarjeta por jugador con tres cifras y, plegado, el
   marcador completo de siempre. Nada de texto nuevo: el veredicto y la razon salen de la misma linea de 70_ui.js. */
.fin-card { max-width: 520px; text-align: center; }
.fin-veredicto { text-transform: uppercase; letter-spacing: var(--tr-rotulo); }
.fin-razon { margin: 0 0 var(--e-2); color: var(--c-texto-2); font-size: var(--t-16); line-height: var(--lh-texto); }
.fin-marcador { display: flex; flex-direction: column; gap: var(--e-1); }
.fin-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--e-1); padding: var(--e-1); background: var(--c-superficie); border: 2px solid var(--fase-marco); border-radius: var(--fase-radio); text-align: left; }
.fin-fila.gana { border-color: var(--c-accion); }
.fin-fila.yo .fin-nombre { color: var(--c-accion); }
.fin-punto { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); border-radius: var(--r-l); background: var(--c, var(--c-accion)); }
.fin-nombre { font-size: var(--t-16); line-height: var(--lh-junto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cifras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--e-1); }
.fin-dato { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.fin-cifra { font-size: var(--t-28); line-height: var(--lh-junto); }
.fin-rot { color: var(--c-texto-2); }
.fin-nota { margin: var(--e-1) 0 0; }
.fin-detalle { margin: var(--e-2) 0 0; text-align: left; }
.fin-detalle summary { cursor: pointer; color: var(--c-texto-2); font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--tr-rotulo); padding: var(--e-1) 0; }
.fin-actions { justify-content: center; }

/* ---------------- Modo clip (57 seccion 2, F01 y F02): encuadre 9:16 para grabar en vertical ---------------- */
/* Se enciende con el ajuste 'clip' o con ?clip=1 (05_settings.js clipOn); 70_ui.js marca <html data-clip="on">.
   Todo el juego (lienzo y HUD) cabe dentro de la caja 9:16 centrada, asi nada queda cortado al recortar el video: el
   lienzo mide su tamano del CSS, asi que el mapa pasa a ocupar el alto sin tocar el render. Los paneles de trabajo se
   pliegan (banda inferior, botones de la barra, detalle); quedan los recursos, el reloj y los avisos, que son lo unico
   que se lee sin sonido. Quien no enciende el modo no ve ni una regla de aqui. */
:root[data-clip="on"] #app { inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: min(100vw, calc(100vh * 9 / 16)); height: min(100vh, calc(100vw * 16 / 9)); overflow: hidden; }
:root[data-clip="on"] { --banda: 0px; --banda-min: 0px; --avisos-w: min(calc(280px * var(--ui)), 62%); }
:root[data-clip="on"] #bottom,
:root[data-clip="on"] .barra-der,
:root[data-clip="on"] #detalle,
:root[data-clip="on"] #spacepanel,
:root[data-clip="on"] #clock-ticks,
:root[data-clip="on"] #edpanel,
:root[data-clip="on"] .test-perf { display: none; }
/* el remate en vertical: la tarjeta ocupa el ancho de la caja y el marcador largo no compite con las cifras grandes */
:root[data-clip="on"] #end .card { max-width: 100%; }
:root[data-clip="on"] .fin-detalle { display: none; }
/* La sala `trailer` (66_testroom.js, TR.trailerVista) en modo clip: 75 seccion 0, cero texto, cero cifras, cero HUD.
   Fuera tambien los recursos, el reloj y los avisos que el modo clip deja; solo queda el lienzo. */
:root[data-clip="on"][data-sala="trailer"] #hud,
:root[data-clip="on"][data-sala="trailer"] #labels,
:root[data-clip="on"][data-sala="trailer"] .era-banner { display: none; }

/* ---------- 64 vistas: el armazon del panel ----------
   Una vista es un dato, no codigo (public/dev/vistas.json). Esto es TODO su estilo: cuatro tipos, un solo juego de
   reglas. El panel viejo tiene una hoja por seccion porque cada seccion invento su forma; aqui no hay donde inventar.
   Espaciado y color SOLO por token: la regla de HUD01, que ya me pillo un `gap: 4px` suelto. */
.vi-vista { margin-bottom: var(--e-3); }
.vi-titulo { font-family: var(--font-pixel); font-size: var(--t-20); letter-spacing: var(--tr-rotulo); margin: 0 0 var(--e-1); }
.vi-nota { color: var(--c-texto-2); font-size: var(--t-12); line-height: var(--lh-texto); margin: 0 0 var(--e-2); }
.vi-texto { font-size: var(--t-14); line-height: var(--lh-texto); margin: 0; }
.vi-malo { color: var(--c-peligro); font-size: var(--t-14); }

.vi-medidas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vi-medida { display: flex; flex-direction: column; gap: var(--e-1);
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--r-m); padding: var(--e-2); min-width: calc(var(--e-4) * 3); }
.vi-cifra { font-family: var(--font-pixel); font-size: var(--t-28); line-height: var(--lh-junto); }
.vi-etiqueta { color: var(--c-texto-2); font-size: var(--t-12); letter-spacing: var(--tr-rotulo); }
.vi-limite { font-size: var(--t-12); }
/* El veredicto lo pinta el DATO, no la declaracion: si esto se pone rojo es que el juego esta rozando el limite. */
.vi-bien { border-color: var(--c-bien); }
.vi-bien .vi-limite { color: var(--c-bien); }
.vi-mal { border-color: var(--c-peligro); }
.vi-mal .vi-cifra, .vi-mal .vi-limite { color: var(--c-peligro); }

.vi-tabla { border-collapse: collapse; width: 100%; font-size: var(--t-14); }
.vi-tabla th, .vi-tabla td { text-align: left; padding: var(--e-1); border-bottom: 1px solid var(--c-linea); }
.vi-tabla th { color: var(--c-texto-2); font-size: var(--t-12); letter-spacing: var(--tr-rotulo); font-weight: 400; }

.vi-sprites { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vi-sprite { display: flex; flex-direction: column; gap: var(--e-1);
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--r-m); padding: var(--e-1); }

/* Catalogo (Adam 2026-10-03): lista unica de TODO, con veredicto por pieza. */
.cat-barra { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-block: var(--e-2); }
.cat-filtro, .cat-busca { background: var(--c-hundido); color: var(--c-texto); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: var(--e-1) var(--e-2); }
.cat-busca { min-width: 18ch; }
.cat-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e-2); }
.cat-ficha { display: flex; flex-direction: column; gap: var(--e-1); background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: var(--e-2); }
.cat-ficha.v-si { border-color: var(--c-bien); }
.cat-ficha.v-no { border-color: var(--c-peligro); opacity: 0.55; }
.cat-img { width: 100%; height: 128px; object-fit: contain; image-rendering: pixelated; background: var(--c-hundido); border-radius: var(--r-s); }
.cat-sinarte, .cat-roto { display: flex; align-items: center; justify-content: center; font-size: var(--t-12); color: var(--c-texto-2); }
.cat-txt { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.cat-txt strong { font-size: var(--t-12); overflow-wrap: anywhere; }
.cat-bot { display: flex; gap: var(--e-1); }

/* De donde sale la pieza: etiqueta en la ficha y bloque de proceso en la ventana (Adam, 2026-10-03). Son dos colores
   para dos cosas distintas: lo que dibuja el juego y lo que vino de PixelLab. */
.cat-via { align-self: flex-start; padding: 0 var(--e-1); border-radius: var(--r-s); font-size: var(--t-12);
  letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.cat-via-pixellab { background: var(--c-superficie-2); color: var(--c-cian); }
.cat-via-codigo { background: var(--c-hundido); color: var(--c-texto-2); }
.cat-via-nano-banana { background: var(--c-superficie-2); color: var(--c-ambar); }
.cat-via-variantes { background: var(--c-superficie-2); color: var(--c-bien); }
/* La tira de variantes va en rejilla: con 64 emblemas, una por fila son 64 filas y no se compara nada. El boton no
   puede crecer (los de la rejilla son de ancho completo), asi que se fija y no se estira. */
/* La cabecera de una fila de cuadros no tenia NINGUNA regla: era un div suelto y el boton de Play se montaba
   encima del contador. Por eso Adam no lo veia. */
/* La ventana de una pieza va en dos columnas: lo que se lee baja por la izquierda y el visor se queda PEGADO a la
   derecha, para poder pinchar un cuadro y verlo sin subir. En pantalla estrecha vuelve a una sola columna. */
.cat-cols { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: var(--e-3); align-items: start; }
.cat-col-izq { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cat-col-der { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--e-1); }
@media (max-width: 860px) { .cat-cols { grid-template-columns: 1fr; } .cat-col-der { position: static; } }
.cat-fila-cab { display: flex; gap: var(--e-2); align-items: center; }
.cat-fila-cab .cat-b { flex: 0 0 auto; padding-inline: var(--e-2); }
/* la muestra de una animacion de PixelLab se compara con los cuadros del juego, asi que se ve al mismo tamano */
/* El mini planeta: un disco con la pieza plantada encima, para verla girar y animarse como en la partida. La
   ventana se ensancha para que quepa, que es lo que Adam pidio: "no importa que tanto tengas que expandir". */
/* La partida dentro de la ficha. Ocupa lo que haga falta: Adam pidio el apartado interactivo y dijo que no
   importaba cuanto hubiera que ensanchar la ventana. */
.cat-visor { display: block; width: 100%; max-width: 560px; border: 1px solid var(--c-linea);
  border-radius: var(--r-s); image-rendering: pixelated; touch-action: none; cursor: ew-resize; }
.cat-cuadro-grande { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated;
  background: var(--c-hundido); border: 1px solid var(--c-linea); border-radius: var(--r-s); }
.cat-vartira { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.cat-vartira .cat-cuadro { flex: 0 0 auto; width: 56px; height: 56px; padding: var(--e-1); }
/* Adam, 2026-10-04: un marco sobre la miniatura del cuadro que esta en el visor, para saber cual es y cual no cierra bien */
/* omitido: sigue en la tira pero la animacion lo salta (68_bestiario.js, boton Omitir) */
.cat-vartira .cat-cuadro.omitido { position: relative; outline: 3px solid var(--c-negro); outline-offset: 1px; box-shadow: 0 0 0 6px var(--c-texto); }
.cat-vartira .cat-cuadro.omitido img { opacity: 0.4; }
.cat-vartira .cat-cuadro.omitido::after { content: 'omitido'; position: absolute; left: 0; right: 0; bottom: 2px; font-size: var(--t-12); text-align: center; color: var(--c-texto); background: var(--c-negro); }
.cat-vartira .cat-cuadro.omitido.puesto { outline-color: var(--c-ambar); opacity: 0.7; }
.cat-vartira .cat-cuadro.puesto { outline: 3px solid var(--c-ambar); outline-offset: 1px; background: var(--c-panel); }
/* deslizadores de fase de la sala `piramides` (66_testroom.js): siguen a su piramide en pantalla */
.tr-fase { position: fixed; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--e-1); padding: var(--e-1); border-radius: var(--r-s); background: var(--c-panel); color: var(--c-texto); font-size: var(--t-12); z-index: var(--z-flotante); }
.tr-fase[hidden], .tr-fase-caja[hidden] { display: none; }
.tr-fase-glob { left: 50%; top: 64px; z-index: var(--z-popover); }   /* velocidad y direccion del desplazamiento (V), arriba al centro */
.tr-fase input { width: 120px; }
/* el visor y, al lado, el menu de la luz (solo en piezas con mapa de normales, en modo Controlar luz) */
.cat-visor-fila { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-start; }
.cat-visor-fila > .cat-visor { flex: 1 1 0; min-width: 280px; height: auto; }   /* el lienzo cede sitio al menu */
.cat-luz-panel { flex: 0 0 280px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-2); border: 1px solid var(--c-linea); border-radius: var(--r-s); background: var(--c-hundido); }
.cat-luz-panel[hidden] { display: none; }
.cat-luz-campo { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: var(--e-1); }
.cat-luz-valor { text-align: right; font-variant-numeric: tabular-nums; }
/* el editor de pixeles del visor (68_bestiario.js editorPixeles) */
.cat-editor { margin-top: var(--e-2); padding: var(--e-2); border: 1px solid var(--c-linea); border-radius: var(--r-s); background: var(--c-hundido); }
.cat-editor .cat-b.puesto { outline: 2px solid var(--c-ambar); }
.cat-editor-lienzo { display: block; max-width: 100%; image-rendering: pixelated; cursor: crosshair; touch-action: none; margin: var(--e-1) 0; }
.cat-editor-paleta { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-1); }
.cat-editor-tinta { width: 18px; height: 18px; padding: 0; border: 1px solid var(--c-linea); border-radius: var(--r-s); cursor: pointer; }
.cat-editor-color { display: inline-block; width: 26px; height: 26px; border: 2px solid var(--c-texto); border-radius: var(--r-s); vertical-align: middle; }
.cat-vartira .cat-cuadro img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* y la grande se ve grande: un emblema de 40 px nativo no se juzga a 40 px */
.cat-grande { min-width: 192px; min-height: 192px; object-fit: contain; }
.cat-proceso { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-2);
  background: var(--c-hundido); border-radius: var(--r-s); }
.cat-proceso-txt { font-family: var(--font-texto); font-size: var(--t-12); overflow-wrap: anywhere; color: var(--c-texto); }
.cat-proceso-src { opacity: .7; }
.cat-diseno { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-2);
  background: var(--c-superficie); border-radius: var(--r-s); }
.cat-diseno-tit { font-size: var(--t-12); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--c-texto-2); }
.cat-diseno-txt { font-size: var(--t-14); color: var(--c-texto); }
.cat-diseno-cita { margin: 0; padding-left: var(--e-2); border-left: 2px solid var(--c-linea);
  font-size: var(--t-12); color: var(--c-texto-2); }
.cat-diseno-usos { margin: 0; padding-left: var(--e-3); font-size: var(--t-12); color: var(--c-texto-2); }
.cat-b { flex: 1; background: var(--c-hundido); color: var(--c-texto-2); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: var(--e-1); cursor: pointer; }
.cat-si.puesto { background: var(--c-bien); color: var(--c-negro); }
.cat-no.puesto { background: var(--c-peligro); color: var(--c-negro); }
.cat-detalle:empty { display: none; }
.cat-detalle { background: var(--c-panel); border: 1px solid var(--c-cian); border-radius: var(--r-s); padding: var(--e-2); margin-block: var(--e-2); }
.cat-det-cab { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--e-2); }
.cat-tira { display: flex; flex-direction: column; gap: var(--e-2); }
.cat-fila { display: flex; flex-direction: column; gap: var(--e-1); }
.cat-cuadros { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.cat-cuadro { background: var(--c-hundido); border: 1px solid var(--c-linea); border-radius: var(--r-s); image-rendering: pixelated; }
.cat-grande { max-width: 256px; image-rendering: pixelated; background: var(--c-hundido); border-radius: var(--r-s); }
.cat-velo { position: fixed; inset: 0; background: var(--c-velo); display: none; align-items: center; justify-content: center; z-index: var(--z-flotante); padding: var(--e-3); }
.cat-velo.abierto { display: flex; }
.cat-velo .cat-detalle { max-width: min(95vw, 1180px); max-height: 90vh; overflow: auto; margin: 0; }

/* Codice (Adam 2026-10-11): el juego entero en una rejilla, civilizacion por fila (68_codice.js). */
.cod-rej { display: grid; gap: var(--e-1); align-items: stretch; }
.cod-cab { font-family: var(--font-pixel); font-size: var(--t-12); text-align: center; padding: var(--e-1); cursor: pointer; border-radius: var(--r-s); }
.cod-cab:hover { background: var(--c-hundido); }
.cod-eti { font-size: var(--t-12); color: var(--c-texto-2); align-self: center; }
.cod-banda { font-family: var(--font-pixel); font-size: var(--t-12); padding: var(--e-1) var(--e-2); margin-top: var(--e-2); background: var(--c-hundido); border-radius: var(--r-s); }
.cod-celda { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.cod-formas { display: flex; gap: var(--e-1); }
.cod-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--e-1); background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: var(--e-1); cursor: pointer; }
.cod-card img, .cod-card canvas { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.cod-mitades { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); width: 100%; }
.cod-mitades:has(.cod-mitad) { flex-direction: row; justify-content: center; }
.cod-mitad { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--e-1); }
.cod-mitad + .cod-mitad { border-left: 1px solid var(--c-linea); }
.cod-forma { font-size: var(--t-12); color: var(--c-texto-2); }
.cod-sinarte { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: var(--t-12); color: var(--c-texto-2); background: var(--c-hundido); border-radius: var(--r-s); }
.cod-nom { font-size: var(--t-12); text-align: center; overflow-wrap: anywhere; }
.cod-cod { font-size: var(--t-12); color: var(--c-texto-2); }
.cod-marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1); font-size: var(--t-12); color: var(--c-texto-2); }
.cod-hueco { border-color: var(--c-peligro); }
.cod-sel { outline: 1px solid var(--c-accion); }
.cod-marcada { border-color: var(--c-aviso); box-shadow: 0 0 0 1px var(--c-aviso); }
.cod-nueva { position: absolute; top: 0; left: 0; font-size: var(--t-12); color: var(--c-fondo); background: var(--c-bien); border-radius: var(--r-s); padding: 0 var(--e-1); }
.cod-pendientes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1); }
.cod-pen-manuel { font-size: var(--t-12); color: var(--c-fondo); background: var(--c-peligro); border-radius: var(--r-s); padding: 0 var(--e-1); }
.cod-actual-chica { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; opacity: 0.6; }
.cod-mira { position: absolute; top: 0; right: 0; font-size: var(--t-12); color: var(--c-fondo); background: var(--c-aviso); border-radius: var(--r-s); padding: 0 var(--e-1); }
.cod-chips { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.cod-chip { font-size: var(--t-12); background: var(--c-hundido); color: var(--c-texto); border: 1px solid var(--c-linea); border-radius: var(--r-s); padding: 0 var(--e-1); cursor: pointer; }
.cod-apagada { opacity: 0.15; }
.cod-comunes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: var(--e-1); }
.cod-detalle { position: fixed; top: var(--e-3); right: var(--e-3); width: min(36em, 92vw); max-height: calc(100vh - 2 * var(--e-3)); overflow: auto; overflow-wrap: anywhere; z-index: var(--z-flotante); }
.cod-cierra { float: right; cursor: pointer; }
.cod-con-detalle > :not(.cod-detalle) { max-width: calc(100% - min(36em, 92vw) - var(--e-3)); }
.cod-grande { width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; }
.cod-detalle details { border-top: 1px solid var(--c-linea); padding: var(--e-1) 0; }
.cod-detalle summary { cursor: pointer; font-weight: 600; }
.cod-lista { margin: 0; padding-left: var(--e-2); font-size: var(--t-12); }
.cod-lista li { margin: 0 0 var(--e-1); }
.cod-rojo { color: var(--c-peligro); }
.cod-ambar { color: var(--c-ambar); }
.cod-verde { color: var(--c-bien); }
.cod-tenue { color: var(--c-texto-2); }
.cod-pedido { font: inherit; font-size: var(--t-12); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; background: var(--c-hundido); border-left: 3px solid var(--c-bien); border-radius: var(--r-s); padding: var(--e-1); margin: var(--e-1) 0; }
.cod-guardado { font-weight: 600; }
.cod-animacion { margin: var(--e-1) 0; }
.cod-anim-grande { width: 256px; max-width: 100%; height: auto; image-rendering: pixelated; background: var(--c-hundido); border-radius: var(--r-s); display: block; }
.cod-anim, .tin-anim { image-rendering: pixelated; }
.cod-propuesta { opacity: 0.75; outline: 1px dashed var(--c-texto-2); outline-offset: 2px; }
.cod-prompt { font-size: var(--t-12); white-space: pre-wrap; background: var(--c-hundido); border-radius: var(--r-s); padding: var(--e-1); margin: var(--e-1) 0; }
.cod-tiras { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.cod-tiras img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; background: var(--c-hundido); border-radius: var(--r-s); }
.cod-paquete { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--e-1); margin: var(--e-1) 0; }
.cod-vista { margin: 0; padding: var(--e-1); background: var(--c-hundido); border: 2px solid var(--c-linea); border-radius: var(--r-s); text-align: center; }
.cod-vista img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.cod-vista-si { border-color: var(--c-bien); }
.cod-vista-no { border-color: var(--c-peligro); }
.cod-escala { display: grid; gap: 0; background: var(--c-hundido); border: 1px solid var(--c-linea); margin: var(--e-1) 0; }
.cod-escala span { border: 1px solid var(--c-linea-2); }
.cod-acciones { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-1) 0; }
.cod-acciones textarea { width: 100%; min-height: 4em; font-size: var(--t-12); }
/* MODO TINDER del CODICE (68_tinder.js): una pantalla de celular con tarjetas que se arrastran */
.cod-vistas { display: flex; gap: var(--e-1); margin: var(--e-1) 0; }
.cod-vistas button.cod-vista-on { outline: 1px solid var(--c-accion); }
.tin-cel { position: relative; width: 380px; max-width: 100%; height: 760px; margin: var(--e-2) auto; background: var(--c-fondo); border: 10px solid var(--c-hundido); border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--c-linea); overflow: hidden; display: flex; flex-direction: column; touch-action: none; user-select: none; }
.tin-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1); padding: var(--e-1) var(--e-2); font-size: var(--t-14); }
.tin-sel { width: auto; height: auto; min-height: 0; font-size: var(--t-12); padding: 0 var(--e-1); background: var(--c-hundido); color: var(--c-texto); border: 1px solid var(--c-linea); border-radius: var(--r-s); }
.tin-cuenta { color: var(--c-texto-2); font-size: var(--t-12); }
.tin-filtro { font-size: var(--t-12); color: var(--c-texto-2); white-space: nowrap; display: flex; flex-direction: row; align-items: center; gap: var(--e-1); }
.tin-filtro input { width: auto; height: auto; min-height: 0; margin: 0; }
.tin-zona { position: relative; flex: 1 1 auto; margin: 0 var(--e-1); }
.tin-carta { position: absolute; inset: 0; background: var(--c-fondo); border: 1px solid var(--c-linea); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease; cursor: grab; }
.tin-carta.tin-moviendo { transition: none; cursor: grabbing; }
.tin-carta.tin-vuela { transition: transform 0.25s ease-in; }
.tin-foto { position: relative; flex: 1 1 62%; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--c-hundido); }
.tin-foto img, .tin-foto canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.tin-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); width: 100%; height: 100%; padding: var(--e-1); }
.tin-rej { position: relative; margin: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tin-rej figcaption { position: absolute; left: var(--e-1); top: var(--e-1); font-weight: 700; font-size: var(--t-12); padding: 0 var(--e-1); border-radius: var(--r-s); background: var(--c-fondo); color: var(--c-texto); }
.tin-sinfoto { font-family: var(--font-pixel); font-size: var(--t-20); color: var(--c-texto-2); }
.tin-sello-nueva, .tin-sello-actual { position: absolute; top: var(--e-1); left: var(--e-1); font-size: var(--t-12); padding: 0 var(--e-1); border-radius: var(--r-s); color: var(--c-fondo); background: var(--c-bien); }
.tin-sello-actual { background: var(--c-texto-2); }
.tin-barras { position: absolute; top: var(--e-1); left: var(--e-1); right: var(--e-1); display: flex; gap: var(--e-1); pointer-events: none; }
.tin-barra { flex: 1 1 0; height: 3px; border-radius: var(--r-s); background: var(--c-texto-2); opacity: 0.45; }
.tin-barra-si { background: var(--c-texto); opacity: 1; }
.tin-barras ~ .tin-sello-nueva, .tin-barras ~ .tin-sello-actual, .tin-foto:has(.tin-barras) .tin-sello-nueva, .tin-foto:has(.tin-barras) .tin-sello-actual { top: var(--e-3); }
.tin-sello { position: absolute; top: var(--e-3); font-family: var(--font-pixel); font-size: var(--t-28); padding: 0 var(--e-1); border: 3px solid currentColor; border-radius: var(--r-s); opacity: 0; pointer-events: none; }
.tin-sello-si { left: var(--e-2); color: var(--c-bien); transform: rotate(-14deg); }
.tin-sello-no { right: var(--e-2); color: var(--c-peligro); transform: rotate(14deg); }
.tin-info { flex: 0 1 auto; max-height: 38%; overflow: auto; padding: var(--e-1) var(--e-2); }
.tin-carta.tin-abierta .tin-info { max-height: 100%; flex: 1 1 auto; }
.tin-carta.tin-abierta .tin-foto { flex: 0 0 30%; }
.tin-info h3 { margin: 0; font-size: var(--t-20); }
.tin-sub { margin: 0; color: var(--c-texto-2); font-size: var(--t-12); }
.tin-chip { display: inline-block; font-size: var(--t-12); padding: 0 var(--e-1); border-radius: var(--r-l); background: var(--c-hundido); color: var(--c-texto-2); }
.tin-texto { font-size: var(--t-12); margin: var(--e-1) 0 0; }
.tin-prompt { color: var(--c-texto-2); }
.tin-mas { font-size: var(--t-12); background: none; border: 0; color: var(--c-accion); cursor: pointer; padding: 0; }
.tin-botones { display: flex; justify-content: center; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; }
.tin-b { width: 64px; height: 64px; border-radius: var(--r-l); border: 1px solid var(--c-linea); background: var(--c-panel); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tin-b-chico { width: 48px; height: 48px; color: var(--c-aviso); }
.tin-b-no { color: var(--c-peligro); }
.tin-b-si { color: var(--c-bien); }
.tin-vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-texto-2); }
.tin-hoja { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%; overflow: auto; background: var(--c-fondo); border-top: 3px solid var(--c-linea); border-radius: var(--r-m); padding: var(--e-2); z-index: var(--z-popover); }
.tin-hoja-si { border-top-color: var(--c-bien); }
.tin-hoja-no { border-top-color: var(--c-peligro); }
.tin-hoja h3 { margin: 0 0 var(--e-1); font-size: var(--t-16); }
.tin-q { font-size: var(--t-12); color: var(--c-texto-2); margin: var(--e-1) 0 0; }
.tin-ops { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-1) 0; }
.tin-op { font-size: var(--t-12); border: 1px solid var(--c-linea); border-radius: var(--r-l); background: var(--c-hundido); color: var(--c-texto); padding: 0 var(--e-2); cursor: pointer; }
.tin-op.tin-op-si { border-color: var(--c-accion); color: var(--c-accion); }
.tin-nota { width: 100%; min-height: 4em; font-size: var(--t-12); margin: var(--e-1) 0; }
.tin-acciones { display: flex; justify-content: flex-end; gap: var(--e-1); }
.tin-estado { text-align: center; }

/* celular en vertical (1v1 publico, Adam 2026-10-20: "imagina que va para tiktok"): la banda en tres columnas no cabe en 390 px y la
   seleccion quedaba de 16 px. En vertical la banda se apila: seleccion arriba a todo el ancho y la rejilla 5 x 3 abajo; el minimapa
   se pliega (la camara se mueve con dos dedos). Solo cambia la maquetacion, ningun dato. Va al final para mandar sobre
   las reglas base de la banda. */
@media (max-width: 600px) and (orientation: portrait) {
  :root:not([data-clip="on"]) #hud { --banda: calc(296px * var(--ui)); --banda-min: 0px; --celda-w: calc((100vw - 96px) / 5); }
  #hud #bottom { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; row-gap: var(--e-1); }
  #mini-wrap { display: none; }
  #selpanel { height: auto; max-width: none; min-height: 0; }
  #buildpanel { height: auto; justify-content: center; }
  #bottom > #selpanel { grid-row: 1; } #bottom > #buildpanel { grid-row: 2; }
}

/* ---------------- Panel de reclutar (Adam 2026-10-21: "las clasicas tarjetas centrales ... que se vea epico") ----------------
   70_ui.js U.abrirReclutar: #picker con clase .reclutar. La capa no atrapa el raton (la camara sigue viva fuera de la tarjeta) y
   termina encima de la banda del HUD, asi que la rejilla de comandos queda libre. Una tarjeta por tropa de `produces`. */
#picker.reclutar { inset: var(--barra) 0 max(var(--banda), var(--banda-min)) 0; padding: var(--e-1); pointer-events: none; z-index: var(--z-capa);
  background: radial-gradient(ellipse 60% 55% at 50% 55%, var(--c-mono-velo), transparent 75%); }
#picker.reclutar .rc-card { pointer-events: auto; width: auto; max-width: min(calc(820px * var(--ui)), 100%); max-height: 100%; padding: var(--e-2) var(--e-3) var(--e-1);
  background: linear-gradient(180deg, var(--c-mono-noche), var(--c-mono-fondo)); border: 2px solid var(--c-mono-morado); border-radius: var(--r-m);
  box-shadow: 0 0 0 2px var(--c-carbon), 0 0 36px var(--c-mono-halo), inset 0 0 0 1px var(--c-mono-filo), inset 0 2px 0 var(--c-mono-filo-2), 0 18px 48px var(--c-sombra);
  animation: rcentra 0.22s ease-out both; }
@keyframes rcentra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rc-cab { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); padding-bottom: var(--e-1); border-bottom: 1px solid var(--c-mono-filo-2); }
.rc-edificio { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); image-rendering: pixelated; flex: none; }
.rc-titulo { display: flex; flex-direction: column; gap: calc(var(--e-1) / 4); min-width: 0; }
.rc-titulo .rotulo { color: var(--c-mono-azul-claro); }
#picker .rc-titulo h3 { margin: 0; font-size: var(--t-28); color: var(--c-texto); text-shadow: 0 0 12px var(--c-mono-halo); }
.rc-cola-total { margin-left: auto; font-size: var(--t-14); color: var(--c-texto-2); white-space: nowrap; }
.rc-cola-total.activa { color: var(--c-camino); }
.rc-cerrar { flex: none; min-height: calc(32px * var(--ui)); padding: 0 var(--e-1); font-size: var(--t-12); }
.rc-tarjetas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.rc-tarjeta { position: relative; display: flex; flex-direction: column; align-items: stretch; width: calc(232px * var(--ui)); min-height: 0; padding: 0; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, var(--c-mono-tarjeta), var(--c-mono-tarjeta-fondo) 58%); border: 2px solid var(--c-mono-borde); border-radius: var(--r-m);
  box-shadow: 0 0 0 2px var(--c-carbon), inset 0 1px 0 var(--c-mono-filo-3), 0 8px 20px var(--c-sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.rc-tarjeta:hover, .rc-tarjeta:focus-visible { transform: translateY(-4px); border-color: var(--c-mono-azul-claro); background: linear-gradient(180deg, var(--c-mono-tarjeta-luz), var(--c-mono-tarjeta-luz-fondo) 58%);
  box-shadow: 0 0 0 2px var(--c-carbon), 0 0 24px var(--c-mono-halo-azul), 0 0 48px var(--c-mono-halo), inset 0 1px 0 var(--c-mono-filo-4), 0 12px 28px var(--c-sombra); }
.rc-tarjeta.pulsada { transform: translateY(2px); }
.rc-tarjeta.rechazada { border-color: var(--c-peligro); animation: cmdrechazo 0.4s ease-out both; }
.rc-marco { position: relative; display: grid; place-items: center; height: calc(168px * var(--ui));
  background: radial-gradient(ellipse 55% 30% at 50% 86%, var(--c-mono-suelo), transparent 70%), radial-gradient(circle at 50% 58%, var(--c-mono-halo), var(--c-mono-azul-velo) 48%, transparent 72%),
    repeating-linear-gradient(0deg, var(--c-mono-rejilla) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, var(--c-mono-rejilla) 0 1px, transparent 1px 8px);
  border-bottom: 2px solid var(--c-mono-borde-2); }
.rc-retrato { width: calc(152px * var(--ui)); height: calc(152px * var(--ui)); image-rendering: pixelated; filter: drop-shadow(0 3px 0 var(--c-mono-sombra-dura)); transition: transform 0.15s ease; }
.rc-retrato.sin-arte { visibility: hidden; }
.rc-tarjeta:hover .rc-retrato { transform: translateY(-4px); }
.rc-camada { position: absolute; left: var(--e-1); top: var(--e-1); padding: 0 var(--e-1); font-family: var(--font-pixel); font-size: var(--t-20); line-height: var(--lh-junto); color: var(--c-mono-blanco);
  background: linear-gradient(135deg, var(--c-mono-azul), var(--c-mono-morado)); border: 1px solid var(--c-mono-filo-5); border-radius: var(--r-s); box-shadow: 0 0 10px var(--c-mono-halo); }
.rc-tecla { position: absolute; right: var(--e-1); top: var(--e-1); min-width: calc(24px * var(--ui)); padding: calc(var(--e-1) / 4) var(--e-1); text-align: center; font-size: var(--t-14); color: var(--c-texto);
  background: var(--c-hundido); border: 1px solid var(--c-linea-2); border-radius: var(--r-s); box-shadow: inset 0 -2px 0 var(--c-mono-sombra-tecla); }
.rc-cuerpo { display: flex; flex-direction: column; gap: calc(var(--e-1) * 0.75); padding: var(--e-1) var(--e-2) var(--e-2); }
.rc-nombre { font-family: var(--font-pixel); font-weight: 400; font-size: var(--t-20); line-height: var(--lh-junto); color: var(--c-texto); }
.rc-rol { font-size: var(--t-12); line-height: var(--lh-texto); color: var(--c-texto-2); min-height: calc(2 * 1.3em); }
.rc-attrs { display: flex; flex-wrap: wrap; gap: calc(var(--e-1) / 2); }
.rc-attr { font-size: var(--t-12); line-height: var(--lh-texto); padding: 0 calc(var(--e-1) * 0.75); border-radius: var(--r-s); color: var(--c-mono-azul-claro); background: var(--c-mono-azul-velo-2); border: 1px solid var(--c-mono-azul-borde); }
.rc-datos { display: flex; align-items: center; justify-content: space-between; gap: var(--e-1); font-size: var(--t-14); padding-top: calc(var(--e-1) * 0.75); border-top: 1px solid var(--c-mono-filo); }
.rc-costo .costo { display: inline-flex; flex-wrap: wrap; gap: var(--e-1); }
.rc-costo .micon { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.rc-tiempo { color: var(--c-texto-2); white-space: nowrap; }
.rc-estado { font-size: var(--t-12); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-rotulo); color: var(--c-cian); }
.rc-estado.cola { color: var(--c-camino); }
.rc-estado.bloq { color: var(--c-peligro); text-transform: none; letter-spacing: 0; }
.rc-tarjeta.bloq { border-color: var(--c-peligro-borde); }
.rc-tarjeta.bloq .rc-retrato { filter: saturate(0.25) brightness(0.65) drop-shadow(0 3px 0 var(--c-mono-sombra-dura)); }
.rc-barra { position: absolute; left: 0; right: 0; bottom: 0; height: calc(4px * var(--ui)); background: linear-gradient(90deg, var(--c-mono-azul), var(--c-mono-morado)); width: calc(var(--p, 0) * 100%); right: auto; box-shadow: 0 0 8px var(--c-mono-halo-azul); }
.rc-pie { margin: var(--e-1) 0 0; text-align: center; font-size: var(--t-12); color: var(--c-texto-2); }
@media (prefers-reduced-motion: reduce) { #picker.reclutar .rc-card, .rc-tarjeta.rechazada { animation: none; } .rc-tarjeta, .rc-retrato { transition: none; } .rc-tarjeta:hover { transform: none; } }
/* ventana baja (celular en horizontal, CI 640x400): la tarjeta se acuesta, retrato a la izquierda, sin el rol */
@media (max-height: 560px) {
  #picker.reclutar .rc-card { padding: var(--e-1) var(--e-2); }
  .rc-cab { margin-bottom: var(--e-1); padding-bottom: calc(var(--e-1) / 2); } #picker .rc-titulo h3 { font-size: var(--t-20); } .rc-edificio { display: none; }
  .rc-tarjeta { flex-direction: row; width: calc(280px * var(--ui)); }
  .rc-marco { height: auto; width: calc(88px * var(--ui)); flex: none; border-bottom: 0; border-right: 2px solid var(--c-mono-borde-2); }
  .rc-retrato { width: calc(72px * var(--ui)); height: calc(72px * var(--ui)); }
  .rc-camada { font-size: var(--t-14); top: 4px; left: 4px; } .rc-tecla { top: auto; bottom: 4px; right: 4px; font-size: var(--t-12); }
  .rc-cuerpo { padding: calc(var(--e-1) / 2) var(--e-1); gap: calc(var(--e-1) / 4); } .rc-nombre { font-size: var(--t-16); }
  .rc-rol, .rc-attrs, .rc-pie { display: none; }
}
/* celular en vertical: la banda del HUD mide 296 px (bloque de arriba); dos tarjetas lado a lado */
@media (max-width: 600px) and (orientation: portrait) {
  :root:not([data-clip="on"]) #picker.reclutar { bottom: calc(296px * var(--ui)); }
  #picker.reclutar .rc-card { padding: var(--e-1); }
  .rc-cab { gap: var(--e-1); } #picker .rc-titulo h3 { font-size: var(--t-20); } .rc-edificio { display: none; }
  .rc-tarjetas { gap: var(--e-1); flex-wrap: nowrap; }
  .rc-tarjeta { width: auto; flex: 1 1 0; min-width: 0; }
  .rc-marco { height: calc(112px * var(--ui)); } .rc-retrato { width: calc(100px * var(--ui)); height: calc(100px * var(--ui)); }
  .rc-cuerpo { padding: calc(var(--e-1) / 2) var(--e-1) var(--e-1); } .rc-nombre { font-size: var(--t-16); }
  .rc-attrs, .rc-pie { display: none; }
  .rc-datos { flex-direction: column; align-items: flex-start; gap: calc(var(--e-1) / 4); }
}