/* FUENTE CANÓNICA: wminigames/TOWER_DEFENSE/src/tvh.css — editar allí y ejecutar wminigames/sync.sh */
/* ── TOWER vs HORDE — interfaz (.td-*) ───────────────────────
   Variables VOID de desktop.css. CSP: nada de estilos inline en
   strings; posiciones dinámicas solo con el.style desde JS. */

.td-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05080c;
  color: var(--void-fg);
  font-family: var(--void-mono);
  font-size: 12px;
  user-select: none;
  outline: none;
}
.td-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.td-root[data-mode="placing"] .td-cv { cursor: copy; }
.td-root[data-mode="aiming"] .td-cv { cursor: alias; }
.td-root[data-mode="manual"] .td-cv { cursor: crosshair; }
.td-root[data-mode="rail"] .td-cv { cursor: crosshair; }

.td-btn {
  background: var(--void-panel);
  border: 1px solid var(--void-border);
  color: var(--void-fg);
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.td-btn:hover:not(:disabled) { border-color: var(--void-accent); color: var(--void-accent); }
.td-btn:disabled { opacity: 0.4; cursor: default; }
.td-btn[data-on="1"] { border-color: var(--void-blue); color: var(--void-blue); }
.td-btn--main { border-color: var(--void-accent); color: var(--void-accent); }
.td-btn--warn { border-color: #ff7b72; color: #ff7b72; }

/* ── Barra superior ───────────────────────────────────────── */
.td-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px;
  background: rgba(11, 15, 20, 0.86);
  border-bottom: 1px solid var(--void-border);
  z-index: 3;
  flex-wrap: wrap;
}
.td-stat { white-space: nowrap; color: var(--void-muted); }
.td-stat b { color: var(--void-fg); font-weight: normal; }
.td-stat-cr b { color: #e3b341; }
.td-stat-int b { color: var(--void-blue); }
.td-stat-int[data-low="1"] b { color: #ff7b72; }
.td-next { color: var(--void-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; max-width: 32%; }
.td-spacer { flex: 1; }
.td-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.td-s { display: none; }
.td-pausetag { color: #e3b341; letter-spacing: 2px; display: none; }
.td-root[data-paused="1"] .td-pausetag { display: inline; }

/* ── Paleta lateral ───────────────────────────────────────── */
.td-side {
  position: absolute; left: 6px; top: calc(var(--td-top-h, 36px) + 8px);
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
  /* si no caben todas las categorías, se desplazan (v0.9.8) */
  max-height: calc(100% - var(--td-top-h, 36px) - 16px); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; touch-action: pan-y; overscroll-behavior: contain;
}
.td-side::-webkit-scrollbar { display: none; }
.td-cat { flex-shrink: 0; }
/* degradado en el borde por el que quedan más categorías */
.td-side[data-more="1"] { mask-image: linear-gradient(to bottom, #000 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.td-cat {
  width: 34px; height: 34px;
  background: rgba(17, 23, 32, 0.9);
  border: 1px solid var(--void-border);
  color: var(--void-fg);
  font: inherit; font-size: 16px;
  cursor: pointer; border-radius: 2px;
}
.td-cat:hover, .td-cat[data-open="1"] { border-color: var(--void-accent); color: var(--void-accent); }
.td-items {
  position: absolute; left: 46px; top: calc(var(--td-top-h, 36px) + 8px);
  display: none; flex-direction: column; gap: 2px;
  background: rgba(11, 15, 20, 0.94);
  border: 1px solid var(--void-border);
  padding: 4px;
  z-index: 3;
  max-height: calc(100% - var(--td-top-h, 36px) - 24px); overflow-y: auto;
}
.td-items--open { display: flex; }
.td-item {
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid transparent;
  color: var(--void-fg); font: inherit; text-align: left;
  padding: 4px 6px; cursor: pointer; border-radius: 2px;
}
.td-item:hover { border-color: var(--void-border); background: var(--void-panel); }
.td-item[data-sel="1"] { border-color: var(--void-accent); }
.td-item[data-poor="1"] .td-item-cost { color: #ff7b72; }
.td-item-g { width: 18px; text-align: center; font-size: 14px; }
.td-item-n { flex: 1; min-width: 150px; }
.td-item-cost { color: #e3b341; }

/* ── Ficha del elemento (fija al hacer clic) y ficha flotante (hover) ── */
.td-card, .td-hcard {
  --acc: var(--void-accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 64px),
    rgba(9, 13, 19, 0.96);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid var(--acc);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 22px -10px var(--acc);
  padding: 10px 12px 10px;
}
.td-card {
  position: absolute; right: 8px; top: calc(var(--td-top-h, 36px) + 10px);
  width: 286px; max-height: calc(100% - var(--td-top-h, 36px) - 196px);
  overflow-y: auto;
  z-index: 3;
  display: none;
}
.td-card--open { display: block; }
.td-hcard {
  position: absolute; left: 0; top: 0;
  width: 262px;
  z-index: 7;
  pointer-events: none;
  display: none;
}
.td-hcard--open { display: block; animation: td-pop 0.12s ease-out; }
@keyframes td-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.td-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.td-icon {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.08), rgba(0,0,0,0.25) 70%);
  border: 1px solid rgba(255,255,255,0.08);
}
.td-card-tt { flex: 1; min-width: 0; }
.td-card-t { color: var(--acc); letter-spacing: 1.5px; font-size: 13px; font-weight: bold; }
.td-card-sub { color: var(--void-muted); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px; }
.td-card-x { align-self: flex-start; background: none; border: none; color: var(--void-muted); font: inherit; cursor: pointer; }
.td-card-x:hover { color: var(--void-fg); }

.td-hp { position: relative; margin: 2px 0 8px; }
.td-hp .td-bar { height: 14px; margin: 0; border-radius: 4px; }
.td-hp span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--void-fg); text-shadow: 0 1px 2px #000; letter-spacing: 0.5px;
}
.td-bar { width: 100%; height: 6px; display: block; margin: 2px 0 4px; border: none; border-radius: 3px; overflow: hidden; background: #0b0f14; -moz-appearance: none; appearance: none; }
.td-bar::-webkit-progress-bar { background: #0b0f14; }
.td-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--acc), #7ee787); }
.td-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--acc), #7ee787); }
.td-bar--heat::-webkit-progress-value { background: #ff8c3a; }
.td-bar--heat::-moz-progress-bar { background: #ff8c3a; }

.td-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.td-tile {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 4px 7px 5px;
  min-width: 0;
}
.td-tile span { display: block; color: var(--void-muted); font-size: 9px; letter-spacing: 1px; }
.td-tile b { display: block; font-weight: normal; font-size: 12px; color: var(--void-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.td-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.td-chip {
  font-size: 9.5px; letter-spacing: 0.6px;
  padding: 1px 7px; border-radius: 10px;
  border: 1px solid currentColor; color: var(--void-muted);
  background: rgba(255,255,255,0.03);
}
.td-chip[data-dmg="impact"], .td-acc span[data-dmg="impact"]           { color: #e3b341; }
.td-chip[data-dmg="puncture"], .td-acc span[data-dmg="puncture"]       { color: #d7dde6; }
.td-chip[data-dmg="slash"], .td-acc span[data-dmg="slash"]             { color: #ff7b9c; }
.td-chip[data-dmg="cold"], .td-acc span[data-dmg="cold"]               { color: #9be7ff; }
.td-chip[data-dmg="electricity"], .td-acc span[data-dmg="electricity"] { color: #79c0ff; }
.td-chip[data-dmg="heat"], .td-acc span[data-dmg="heat"]               { color: #ff8c3a; }
.td-chip[data-dmg="toxin"], .td-acc span[data-dmg="toxin"]             { color: #a5d65b; }
.td-chip[data-dmg="blast"], .td-acc span[data-dmg="blast"]             { color: #ffb070; }
.td-chip[data-dmg="corrosive"], .td-acc span[data-dmg="corrosive"]     { color: #56d4bc; }
.td-chip[data-dmg="gas"], .td-acc span[data-dmg="gas"]                 { color: #b7c97a; }
.td-chip[data-dmg="magnetic"], .td-acc span[data-dmg="magnetic"]       { color: #c297ff; }
.td-chip[data-dmg="radiation"], .td-acc span[data-dmg="radiation"]     { color: #e6f14a; }
.td-chip[data-dmg="viral"], .td-acc span[data-dmg="viral"]             { color: #e879c9; }
.td-chip[data-dmg="antimatter"], .td-acc span[data-dmg="antimatter"] { color: #d2a8ff; }
.td-chip--eff { border-style: dashed; }
.td-chip--eff[data-e="chill"]    { color: #9be7ff; }
.td-chip--eff[data-e="poison"]   { color: #b7c97a; }
.td-chip--eff[data-e="burn"]     { color: #ff8c3a; }
.td-chip--eff[data-e="corroded"] { color: #56d4bc; }
.td-chip--eff[data-e="jammed"]   { color: #8b949e; }
.td-chip--eff[data-e="disint"]   { color: #d2a8ff; }
.td-chip--eff[data-e="lure"]     { color: #e879c9; }
.td-chip--flag { color: #e3b341; }

.td-note { color: var(--void-blue); font-size: 10.5px; margin: 2px 0 6px; line-height: 1.35; }
.td-foot {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  color: var(--void-muted); font-size: 9.5px; letter-spacing: 0.8px;
}
.td-card-desc { color: var(--void-muted); font-size: 11px; margin: 6px 0 0; line-height: 1.4; }
.td-sec { color: var(--acc); opacity: 0.85; font-size: 10px; letter-spacing: 1px; margin: 9px 0 4px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 6px; }
.td-row { display: flex; justify-content: space-between; gap: 8px; line-height: 1.55; }
.td-row span:first-child { color: var(--void-muted); }
.td-row b { font-weight: normal; text-align: right; }
.td-res { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 11px; }
.td-res span { color: var(--void-muted); }
.td-res b { font-weight: normal; text-align: right; }
.td-res b[data-k="weak"] { color: #ff7b72; }
.td-res b[data-k="strong"] { color: var(--void-blue); }
.td-res b[data-k="immune"] { color: var(--void-muted); }
.td-eff { display: flex; justify-content: space-between; font-size: 11px; }
.td-eff-n[data-e="knock"], .td-eff-n[data-e="stun"] { color: #e3b341; }
.td-eff-n[data-e="weak"]      { color: #d7dde6; }
.td-eff-n[data-e="bleed"]     { color: #ff7b9c; }
.td-eff-n[data-e="chill"]     { color: #9be7ff; }
.td-eff-n[data-e="frozen"]    { color: #d6f6ff; }
.td-eff-n[data-e="shock"]     { color: #79c0ff; }
.td-eff-n[data-e="burn"]      { color: #ff8c3a; }
.td-eff-n[data-e="poison"]    { color: #a5d65b; }
.td-eff-n[data-e="corroded"]  { color: #56d4bc; }
.td-eff-n[data-e="jammed"]    { color: #8b949e; }
.td-eff-n[data-e="disorient"], .td-eff-n[data-e="magslow"] { color: #c297ff; }
.td-eff-n[data-e="confused"]  { color: #e6f14a; }
.td-eff-n[data-e="infected"]  { color: #e879c9; }
.td-eff-n[data-e="panic"]     { color: #ffb070; }
.td-acc { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 6px; font-size: 10.5px; }
.td-acc .td-bar { margin: 2px 0; }
.td-bar--acc::-webkit-progress-value { background: #e3b341; }
.td-bar--acc::-moz-progress-bar { background: #e3b341; }
.td-bar--shield::-webkit-progress-value { background: #58a6ff; }
.td-bar--shield::-moz-progress-bar { background: #58a6ff; }
.td-btn--modes { border-color: #e3b341; color: #e3b341; }
.td-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
/* rejilla fija de la ficha: cada botón en su casilla (no se reordenan al mejorar) */
.td-acts--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.td-acts--grid .td-btn { width: 100%; min-height: 30px; white-space: normal; line-height: 1.2; text-align: center; }
.td-btn--off, .td-btn--off:disabled { opacity: 0.45; border-style: dashed; background: rgba(255,255,255,0.03); cursor: not-allowed; }
.td-hint { color: #e3b341; font-size: 11px; margin-top: 4px; line-height: 1.35; }

/* ── Minimapa ─────────────────────────────────────────────── */
.td-mini {
  position: absolute; right: 6px; bottom: 6px;
  width: 220px; height: 150px;
  border: 1px solid var(--void-border);
  background: #05080c;
  z-index: 3; cursor: pointer;
  touch-action: none;
}

/* ── Registro / avisos ────────────────────────────────────── */
.td-log {
  position: absolute; left: 50px; bottom: 8px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 3; pointer-events: none;
  max-width: 50%;
}
.td-toast {
  background: rgba(11, 15, 20, 0.85);
  border-left: 2px solid var(--void-border);
  padding: 2px 8px; font-size: 11px;
  animation: td-fade 5s forwards;
}
.td-toast[data-k="wave"]   { border-color: #ff7b72; color: #ff7b72; }
.td-toast[data-k="credit"] { border-color: #e3b341; }
.td-toast[data-k="ai"]     { border-color: var(--void-blue); color: var(--void-blue); }
.td-toast[data-k="loss"]   { border-color: #ff7b72; }
.td-toast[data-k="err"]    { border-color: #ff7b72; color: #ff7b72; }
@keyframes td-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* ── Capas (menú de niveles, ayuda, ajustes, resultado) ──── */
.td-ov {
  position: absolute; inset: 0; z-index: 8;
  background: rgba(5, 8, 12, 0.94);
  display: none; overflow-y: auto;
  padding: 18px 22px;
}
.td-ov--open { display: block; }
.td-ov h2 { color: var(--void-accent); letter-spacing: 3px; font-size: 18px; font-weight: normal; margin: 0 0 2px; }
.td-ov h3 { color: var(--void-blue); letter-spacing: 1px; font-size: 12px; font-weight: normal; margin: 16px 0 6px; }
.td-ov p { color: var(--void-muted); margin: 4px 0; line-height: 1.45; max-width: 760px; }
.td-ov-close { position: absolute; right: 14px; top: 12px; }
.td-sub { color: var(--void-muted); margin-bottom: 10px; }

.td-biomes { display: flex; gap: 10px; flex-wrap: wrap; }
.td-biome {
  flex: 1 1 200px; max-width: 280px; text-align: left;
  background: var(--void-panel); border: 1px solid var(--void-border);
  color: var(--void-fg); font: inherit; padding: 10px; cursor: pointer;
}
.td-biome[data-sel="1"] { border-color: var(--void-accent); }
.td-biome-g { font-size: 22px; color: var(--void-accent); }
.td-biome-n { letter-spacing: 1px; margin: 4px 0; }
.td-biome-d { color: var(--void-muted); font-size: 11px; line-height: 1.35; }
.td-biome-s { color: #e3b341; font-size: 11px; margin-top: 6px; }
.td-diffs, .td-levels { display: flex; gap: 6px; flex-wrap: wrap; }
.td-diff[data-sel="1"], .td-lvl[data-sel="1"] { border-color: var(--void-accent); color: var(--void-accent); }
.td-lvl { width: 78px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.td-lvl small { color: #e3b341; font-size: 11px; letter-spacing: 1px; }
.td-lvl em { font-style: normal; font-size: 10px; color: #c297ff; min-height: 1em; }
.td-lvl[data-lock="1"] { color: var(--void-muted); }
.td-lvl[data-lock="1"] small { color: var(--void-muted); font-size: 9px; letter-spacing: 0.5px; }
.td-play-row { display: flex; gap: 8px; flex-wrap: wrap; }
.td-btn--inf { border-color: #c297ff; color: #c297ff; }
.td-btn--inf:hover:not(:disabled) { border-color: #d9bfff; color: #d9bfff; }
.td-result-inf { color: #c297ff; font-size: 18px; letter-spacing: 2px; margin: 8px 0; }
.td-lvl-info { color: var(--void-muted); margin: 10px 0; }
.td-play { font-size: 13px; padding: 6px 22px; margin-top: 4px; }

.td-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 16px; max-width: 900px; }
.td-key { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.td-key span { color: var(--void-muted); }
.td-key kbd {
  font: inherit; border: 1px solid var(--void-border); padding: 1px 6px; border-radius: 2px;
  background: var(--void-panel); min-width: 22px; text-align: center;
}
.td-key button[data-wait="1"] { border-color: #e3b341; color: #e3b341; }
.td-opts label { display: flex; gap: 8px; align-items: center; margin: 4px 0; color: var(--void-fg); cursor: pointer; }
.td-opts .td-opt-range { display: grid; grid-template-columns: 1fr 140px 44px; gap: 10px; max-width: 760px; }
.td-opts .td-opt-range b { font-weight: normal; color: var(--void-accent); text-align: right; }
@media (max-width: 560px) { .td-opts .td-opt-range { grid-template-columns: 1fr 44px; } .td-opts .td-opt-range span { grid-column: 1 / -1; } }
.td-opts select { background-color: var(--void-panel); color: var(--void-fg); border: 1px solid var(--void-border); font: inherit; }
.td-help-list { color: var(--void-muted); line-height: 1.5; max-width: 820px; padding-left: 18px; }
.td-help-list b { color: var(--void-fg); font-weight: normal; }

.td-result-box { max-width: 460px; margin: 40px auto; text-align: center; }
.td-result-t { font-size: 22px; letter-spacing: 4px; }
.td-result-t[data-won="1"] { color: var(--void-accent); }
.td-result-t[data-won="0"] { color: #ff7b72; }
.td-result-stars { color: #e3b341; font-size: 26px; letter-spacing: 6px; margin: 8px 0; }
.td-result-stats { color: var(--void-muted); line-height: 1.6; margin: 10px 0 16px; }
.td-result-acts { display: flex; gap: 8px; justify-content: center; }

/* ── Disposición compacta (ventana estrecha o móvil) ───────────
   La decide el tamaño de la VENTANA del juego (data-compact: ancho < 720 o alto < 520,
   desde JS), no el del
   viewport: el juego vive dentro de una ventana del escritorio VOID.
   · barra superior con iconos; · paleta de construcción en una fila abajo;
   · ficha como panel inferior; · minimapa y avisos bajo la barra. */
.td-root[data-compact="1"] .td-top { gap: 6px; padding: 4px 6px; font-size: 11px; }
.td-root[data-compact="1"] .td-l { display: none; }
.td-root[data-compact="1"] .td-s { display: inline; }
.td-root[data-compact="1"] .td-next { display: none; }
.td-root[data-compact="1"] .td-v-phase { font-size: 10px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
.td-root[data-compact="1"] .td-btns { gap: 3px; }
.td-root[data-compact="1"] .td-top .td-btn { min-width: 30px; min-height: 28px; padding: 2px 6px; }

.td-root[data-compact="1"] .td-side {
  top: auto; bottom: 8px; left: 8px; right: 8px;
  flex-direction: row; gap: 6px;
  max-height: none; overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
}
.td-root[data-compact="1"] .td-side[data-more="1"] { mask-image: linear-gradient(to right, #000 82%, transparent); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); }
.td-root[data-compact="1"] .td-side[data-more="1"][data-start="1"],
.td-root[data-compact="1"] .td-side[data-more="0"][data-start="1"] { mask-image: linear-gradient(to right, transparent, #000 14%, #000 82%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 82%, transparent); }
.td-root[data-compact="1"] .td-side[data-more="0"][data-start="1"] { mask-image: linear-gradient(to right, transparent, #000 14%); -webkit-mask-image: linear-gradient(to right, transparent, #000 14%); }
.td-root[data-compact="1"] .td-cat { width: 42px; height: 42px; font-size: 18px; }
.td-root[data-compact="1"] .td-items {
  top: auto; bottom: 58px; left: 8px; right: 8px;
  max-height: 46%;
}
.td-root[data-compact="1"] .td-item { padding: 7px 6px; }
.td-root[data-compact="1"] .td-item-n { min-width: 0; }

.td-root[data-compact="1"] .td-card {
  top: auto; bottom: 58px; left: 8px; right: 8px; width: auto;
  max-height: 46%;
}
.td-root[data-compact="1"][data-items="1"] .td-card { display: none; }
.td-root[data-compact="1"] .td-hcard { width: 220px; }
/* ficha anclada en táctil (al tocar una defensa de la paleta) */
.td-hcard.td-hcard--dock {
  left: 8px; top: calc(var(--td-top-h, 36px) + 6px);
  width: min(320px, calc(100% - 140px)); max-height: 42%;
  overflow-y: auto; pointer-events: auto;
}
.td-root[data-compact="1"] .td-hcard.td-hcard--dock { width: min(320px, calc(100% - 140px)); }
.td-btn--mod { border-color: var(--el, #9be7ff); }

.td-root[data-compact="1"] .td-mini {
  top: calc(var(--td-top-h, 36px) + 6px); bottom: auto; right: 6px;
  width: 116px; height: 80px;
}
.td-root[data-compact="1"] .td-log {
  top: calc(var(--td-top-h, 36px) + 6px); bottom: auto; left: 8px;
  max-width: calc(100% - 140px);
}
/* compacta apaisada (móvil en horizontal): ficha y paleta a la izquierda, avisos abajo a la derecha */
.td-root[data-compact="1"][data-land="1"] .td-card,
.td-root[data-compact="1"][data-land="1"] .td-items {
  right: auto; width: min(330px, 46%);
  max-height: calc(100% - var(--td-top-h, 36px) - 70px);
}
.td-root[data-compact="1"][data-land="1"] .td-log {
  top: auto; bottom: 8px; left: auto; right: 8px;
  align-items: flex-end; max-width: 45%;
}
.td-root[data-compact="1"] .td-ov { padding: 12px 10px; }
.td-root[data-compact="1"] .td-biome { max-width: none; }
.td-root[data-compact="1"] .td-ov-close { position: static; display: block; margin: 6px 0 10px; }
.td-btn--mod[data-el="cold"]        { --el: #9be7ff; color: #9be7ff; }
.td-btn--mod[data-el="heat"]        { --el: #ff8c3a; color: #ff8c3a; }
.td-btn--mod[data-el="electricity"] { --el: #79c0ff; color: #79c0ff; }
.td-btn--mod[data-el="toxin"]       { --el: #a5d65b; color: #a5d65b; }
.td-tile--wide { grid-column: 1 / -1; }
.td-tile--wide b { white-space: normal; }
/* guía y ajustes con pestañas */
.td-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.td-tab { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--void-muted);
  font: inherit; font-size: 11px; letter-spacing: 1px; padding: 6px 12px; cursor: pointer; border-radius: 6px 6px 0 0; }
.td-tab:hover { color: var(--void-fg); }
.td-tab[data-on="1"] { color: var(--void-accent); border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.td-tablewrap { overflow-x: auto; max-width: 100%; margin: 4px 0 10px; }
.td-table { border-collapse: collapse; font-size: 11px; color: var(--void-muted); min-width: 520px; }
.td-table th { color: var(--void-blue); font-weight: normal; letter-spacing: 1px; text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.td-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.td-table b[data-k="weak"] { color: #7ee787; } .td-table b[data-k="strong"] { color: #e3b341; } .td-table b[data-k="immune"] { color: #ff7b72; }
.td-table b { font-weight: normal; color: var(--void-fg); }
.td-table--mx td, .td-table--mx th { text-align: center; }
.td-tnote { font-size: 10px; opacity: 0.8; margin-top: 2px; }
.td-muted { color: var(--void-muted); opacity: 0.7; }
.td-beasts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.td-beast { --acc: var(--void-accent); background: rgba(9,13,19,0.9); border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid var(--acc); border-radius: 8px; padding: 10px 12px; }
.td-dbars { display: grid; grid-template-columns: auto 1fr 38px; gap: 4px 8px; align-items: center; font-size: 11px; margin-bottom: 6px; }
.td-dbars progress { width: 100%; }
.td-dbars b { font-weight: normal; color: var(--void-fg); text-align: right; }
/* barra superior: el texto de la próxima oleada no salta de línea (evita recolocar todo) */
.td-next { white-space: nowrap; }
.td-perf { color: #7ee787; font-size: 10px; white-space: nowrap; opacity: 0.85; }
.td-root[data-compact="1"] .td-perf { display: none; }
.td-barrels { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.td-btn--tab { min-width: 30px; }
.td-btn--tab[data-on="1"] { border-color: #7ee787; color: #7ee787; }
/* configurador del modo infinito */
.td-cfg { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 4px; }
.td-num { display: inline-flex; align-items: center; gap: 6px; color: var(--void-muted); font-size: 11px; }
.td-num input, .td-num select { background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: var(--void-fg);
  font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 4px; width: 84px; }
.td-num select { width: auto; padding-right: 24px; }
.td-num input[type="text"] { width: 120px; }
.td-presets { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.td-presets .td-btn[data-sel="1"] { border-color: var(--void-accent); color: var(--void-accent); }
.td-warn { color: #e3b341; border: 1px solid rgba(227,179,65,0.4); border-radius: 6px; padding: 6px 10px; margin: 8px 0; font-size: 12px; max-width: 820px; }
/* taller de mejoras: lista de prioridades */
.td-wsplan { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.td-wsrow { display: grid; grid-template-columns: 1fr auto auto auto auto auto; gap: 4px; align-items: center; font-size: 11px; color: var(--void-fg); }
.td-wsrow[data-off="1"] span, .td-wsrow[data-off="1"] b { opacity: 0.45; }
.td-wsrow .td-btn { padding: 2px 7px; min-width: 24px; }
.td-wsrow b { font-weight: normal; min-width: 26px; text-align: center; }
/* pantalla de carga: tapa todo y bloquea clics mientras se genera el mapa */
.td-loading { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: rgba(5,8,12,0.82); cursor: wait; }
.td-loading--on { display: flex; }
.td-loading-box { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--void-fg); letter-spacing: 3px; }
.td-loading-box b { font-weight: normal; font-size: 16px; color: var(--void-accent); }
.td-loading-box small { color: var(--void-muted); letter-spacing: 0.5px; font-size: 11px; max-width: 360px; text-align: center; }
.td-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--void-accent);
  animation: td-spin 0.8s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }

/* ── Tendido de vía (guion 24): barra flotante ──────────────── */
.td-railbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
  display: none; gap: 6px; padding: 6px; background: rgba(5, 8, 12, 0.88);
  border: 1px solid #c9a26b; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 32px);
}
.td-railbar--open { display: flex; }
.td-wslog { font-size: 11px; color: var(--void-dim, #8b949e); line-height: 1.5; }

/* ── Ventana flotante dentro del juego (guion 26): cerrar, avisos de carga ── */
.td-modal { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(5, 8, 12, 0.72); }
.td-modal--open { display: flex; }
.td-modal-box { width: min(440px, calc(100% - 32px)); background: var(--void-panel); border: 1px solid var(--void-border);
  border-top: 2px solid var(--void-accent); padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.td-modal-box h3 { margin: 0 0 8px; color: var(--void-accent); letter-spacing: 2px; font-size: 13px; }
.td-modal-t p { margin: 4px 0; font-size: 12px; line-height: 1.45; }
.td-modal-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 12px; }
.td-modal-b .td-btn { min-height: 32px; }
/* partidas guardadas */
.td-saves { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.td-save { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center;
  border: 1px solid var(--void-border); background: rgba(255,255,255,0.02); padding: 6px 8px; }
.td-save-i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-save-i small { color: var(--void-muted); font-size: 10px; }
.td-save-v { color: #e3b341; }

/* ── Materiales (guion 27) ─────────────────────────────────── */
.td-mats { display: inline-flex; gap: 8px; }
.td-mat { display: inline-flex; gap: 3px; align-items: baseline; }
.td-mat b { font-weight: normal; color: var(--void-fg); }
.td-mat[data-mat="metal"] { color: #c9d1d9; }
.td-mat[data-mat="fuel"]  { color: #ff8c3a; }
.td-mat[data-mat="cryo"]  { color: #9be7ff; }
.td-mat[data-mat="rad"]   { color: #e6f14a; }
.td-mat[data-mat="mag"]   { color: #c297ff; }
.td-root[data-compact="1"] .td-mats { gap: 4px; font-size: 10px; }
/* mejora a la que le falta material: se puede pulsar (y dice qué falta), pero se nota */
.td-btn--short { border-color: #e3b341 !important; color: #e3b341 !important; background: rgba(227,179,65,0.06); }

/* ── Tabla de OBJETIVOS (guion 27): ventana aparte, encima de la ficha ── */
.td-tpanel { position: absolute; right: 12px; top: calc(var(--td-top-h, 36px) + 14px); z-index: 9; display: none;
  width: min(340px, calc(100% - 24px)); max-height: calc(100% - var(--td-top-h, 36px) - 40px); overflow-y: auto;
  background: var(--void-panel); border: 1px solid var(--void-border); border-top: 2px solid var(--void-accent);
  padding: 10px 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.td-tpanel--open { display: block; }
.td-tp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--void-accent); margin-bottom: 4px; }
.td-tp-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.td-tp-row { display: grid; grid-template-columns: 54px 1fr; gap: 2px 8px; text-align: left; font: inherit; cursor: pointer;
  background: rgba(255,255,255,0.02); border: 1px solid var(--void-border); color: var(--void-fg); padding: 5px 8px; border-radius: 2px; }
.td-tp-row small { grid-column: 2; color: var(--void-muted); font-size: 10px; }
.td-tp-chk { grid-row: span 2; align-self: center; text-align: center; font-size: 10px; border: 1px solid; padding: 2px 0; }
.td-tp-row[data-on="1"] .td-tp-chk { color: var(--void-accent); border-color: var(--void-accent); }
.td-tp-row[data-on="0"] { opacity: 0.6; }
.td-tp-row[data-on="0"] .td-tp-chk { color: #ff7b72; border-color: #ff7b72; }
.td-tp-ranks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.td-root[data-compact="1"] .td-tpanel { left: 8px; right: 8px; width: auto; }
/* exportar / importar partidas */
.td-code { width: 100%; height: 110px; margin-top: 8px; resize: vertical; box-sizing: border-box;
  background: var(--void-bg); color: var(--void-fg); border: 1px solid var(--void-border); font: 10px/1.3 var(--void-mono);
  padding: 6px; word-break: break-all; user-select: text; -webkit-user-select: text; }
.td-code:focus { outline: none; border-color: var(--void-accent-dim); }
.td-file { display: inline-block; margin-top: 6px; cursor: pointer; }
.td-file input { display: none; }
.td-file span { display: inline-block; border: 1px dashed var(--void-border); padding: 4px 10px; font-size: 11px; color: var(--void-muted); }
.td-file:hover span { border-color: var(--void-accent-dim); color: var(--void-fg); }
.td-modal-box { max-height: calc(100% - 40px); overflow-y: auto; }
@media (max-width: 560px) { .td-save { grid-template-columns: 1fr 1fr 1fr; } .td-save-i { grid-column: 1 / -1; } }