:root {
  --bg: #070912;
  --bg2: #0c1122;
  --panel: #0e1428;
  --panel2: #131b36;
  --grid: #16203f;
  --neon: #00f0ff;
  --neon2: #ff2bd6;
  --neon3: #b6ff3c;
  --gold: #ffcf3a;
  --text: #cfe3ff;
  --muted: #6a7ba3;
  --danger: #ff4d6d;
  --ok: #45f0a0;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Consolas", monospace;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Canvas full-bleed ---------- */
#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: var(--bg2);
  cursor: crosshair;
  touch-action: none;
}
#game.panning { cursor: grabbing; }

/* ---------- Capa HUD ---------- */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#hud > * { pointer-events: auto; }

/* Barra superior: recursos (izq) · controles (centro) · ⚙ (der, en .hud-sys) */
.hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 16px;
  padding-right: 66px; /* deja hueco al botón ⚙ de la esquina */
  background: linear-gradient(180deg, rgba(10,16,32,.92), rgba(10,16,32,.55) 78%, transparent);
  backdrop-filter: blur(3px);
}
.hud-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 30px; }
/* Cluster central: controles + preview de la próxima oleada */
.hud-topcenter {
  position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.hud-topcenter > * { pointer-events: auto; }
.tc-controls { display: flex; align-items: center; gap: 8px; }
.tc-controls .btn { margin-top: 0; width: auto; white-space: nowrap; }
.tc-controls .btn.big { padding: 9px 18px; font-size: 15px; }
.tc-controls .btn.force-mode { background: none; border-color: var(--gold); color: var(--gold); box-shadow: none; }
.tc-controls .btn.force-mode:hover { background: var(--gold); color: #1a1400; }
/* Preview de la próxima oleada */
.wave-preview {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  max-width: min(80vw, 900px);
  padding: 5px 10px;
  background: rgba(10,16,32,.85); border: 1px solid var(--grid); border-radius: 20px;
  backdrop-filter: blur(3px); font-size: 12px;
}
.wave-preview .wp-label { color: var(--muted); font-weight: 700; margin-right: 4px; }
.wp-item { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }
.wp-item b { color: var(--neon); font-size: 12px; }
.wp-item.boss { color: var(--neon2); }
.wp-item.boss b { color: var(--neon2); }

/* Próximo hito: pequeña píldora con el siguiente evento importante */
.next-milestone {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 11.5px;
  background: rgba(10,16,32,.8); border: 1px solid var(--grid);
  backdrop-filter: blur(3px);
}
.next-milestone .nm-ic { font-size: 13px; line-height: 1; }
.next-milestone .nm-lbl { color: var(--text); font-weight: 700; }
.next-milestone .nm-in { color: var(--muted); }
.next-milestone .nm-in.soon { color: var(--neon2); font-weight: 700; }
.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--neon);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
.logo span { color: var(--neon2); text-shadow: 0 0 10px rgba(255, 43, 214, 0.6); }
.logo.sm { font-size: 18px; letter-spacing: 1.5px; }
.stats { display: flex; gap: 18px; font-size: 15px; }
.stat { display: flex; align-items: center; gap: 6px; }
.stat-ico { font-size: 16px; }
.stat:nth-child(1) .stat-ico { color: var(--gold); }
.stat:nth-child(2) .stat-ico { color: var(--danger); }
.stat:nth-child(3) .stat-ico { color: var(--neon); }
.stat.meta .stat-ico { color: var(--neon2); }

/* ---------- Clusters de la HUD ---------- */
.hud-btn {
  min-width: 42px; height: 42px;
  padding: 0 10px;
  display: inline-grid; place-items: center;
  background: rgba(14,20,40,.9);
  color: var(--text);
  border: 1px solid var(--grid);
  border-radius: 10px;
  font-family: inherit; font-size: 18px; font-weight: 700;
  cursor: pointer;
  transition: border-color .12s, color .12s, box-shadow .12s, opacity .12s;
  backdrop-filter: blur(3px);
}
.hud-btn:hover:not(:disabled) { border-color: var(--neon); color: #fff; }
.hud-btn:disabled { opacity: .35; cursor: not-allowed; }
.hud-btn.active { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 12px rgba(0,240,255,.4) inset; }
.hud-btn.gold { color: var(--gold); }
.hud-btn.gold:hover { border-color: var(--gold); }

/* Sistema (sup. derecha) — por encima del resto para que el popover no se solape */
.hud-sys { position: absolute; top: 8px; right: 14px; z-index: 40; }
.popover {
  position: absolute; top: 50px; right: 0;
  width: 210px;
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 1px solid var(--neon);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 24px rgba(0,240,255,.18);
  display: flex; flex-direction: column;
}
.pop-h { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pop-sep { height: 1px; background: var(--grid); margin: 8px 0 2px; }

/* Reproducción (inf. izquierda) */
.hud-play {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.spd-group {
  display: flex; gap: 2px;
  background: rgba(14,20,40,.9);
  border: 1px solid var(--grid);
  border-radius: 10px;
  padding: 3px;
  backdrop-filter: blur(3px);
}
.spd-btn {
  min-width: 34px; height: 34px;
  background: transparent; color: var(--muted);
  border: none; border-radius: 7px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .12s;
}
.spd-btn:hover:not(:disabled) { color: #fff; }
.spd-btn.active { background: var(--panel2); color: var(--neon); box-shadow: 0 0 10px rgba(0,240,255,.35) inset; }
.spd-btn:disabled { opacity: .3; cursor: not-allowed; }

/* Dock de construcción (inf. centro) */
.hud-dock {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  max-width: calc(100vw - 360px);
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,16,32,.82);
  border: 1px solid var(--grid);
  border-radius: 12px;
  padding: 8px 10px;
  backdrop-filter: blur(4px);
}
.dock-cap { font-size: 11px; font-weight: 700; color: var(--muted); flex: none; letter-spacing: 1px; }
#tower-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
#tower-list::-webkit-scrollbar { height: 6px; }
#tower-list::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 3px; }

.tower-card {
  flex: none; width: 66px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  background: var(--panel2);
  border: 1px solid var(--grid);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .12s, transform .08s;
}
.tower-card:hover { border-color: var(--neon); transform: translateY(-2px); }
.tower-card.active { border-color: var(--neon); box-shadow: 0 0 12px rgba(0,240,255,.35) inset; }
.tower-card.locked { opacity: .45; cursor: not-allowed; }
.tower-card.unavailable { opacity: .5; }
.tower-swatch {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 19px;
}
.tower-info { display: none; }
.tower-name { font-size: 10px; font-weight: 700; line-height: 1.1; text-align: center; }
.tower-cost { font-size: 11px; color: var(--gold); font-weight: 700; }
.tower-desc { display: none; }

/* Acción/juego (inf. derecha) */
.hud-action {
  position: absolute; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.action-mini { display: flex; gap: 6px; }
.hud-action .btn { margin-top: 0; width: auto; white-space: nowrap; }
.hud-action .btn.big { padding: 12px 18px; font-size: 15px; }

/* ---------- Selection panel (flotante) ---------- */
#selection-panel {
  position: absolute; left: 14px; top: 56px;
  width: 214px;
  background: rgba(19,27,54,.94);
  border: 1px solid var(--neon);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}
#selection-panel h3 { font-size: 14px; color: var(--neon); margin-bottom: 6px; }
.sel-stats { font-size: 12px; color: var(--text); display: grid; gap: 3px; margin-bottom: 8px; }

/* ---------- Buttons ---------- */
.btn {
  width: 100%;
  padding: 9px 10px;
  margin-top: 6px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--grid);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.btn:hover:not(:disabled) { border-color: var(--neon); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: linear-gradient(90deg, #0090a8, #00c6d6); color: #041018; border: none; }
.btn-primary:hover { box-shadow: 0 0 14px rgba(0,240,255,.5); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.small { font-size: 11px; padding: 6px; }
.control-row { display: flex; gap: 6px; }
.control-row .btn { flex: 1; }

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 14, .82);
  display: grid;
  place-items: center;
  z-index: 20;
  backdrop-filter: blur(4px);
}
.modal {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 1px solid var(--neon);
  border-radius: 14px;
  padding: 26px 30px;
  width: min(440px, 92vw);
  text-align: center;
  box-shadow: 0 0 40px rgba(0,240,255,.25);
}
.modal.wide { width: min(680px, 94vw); text-align: left; }
.modal h2 { color: var(--neon); letter-spacing: 1px; margin-bottom: 8px; }
.modal p { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.reward { font-size: 20px; color: var(--gold); margin: 14px 0 20px; }

/* Resumen del run (pantalla de fin de partida) */
.run-summary {
  display: flex; flex-direction: column; gap: 2px;
  margin: 16px 0 6px; text-align: left;
  background: rgba(10,16,32,.5); border: 1px solid var(--grid); border-radius: 10px;
  padding: 8px 12px;
}
.run-summary .rs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px;
}
.run-summary .rs-row:last-child { border-bottom: none; }
.run-summary .rs-k { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.run-summary .rs-bullet { opacity: .85; width: 18px; text-align: center; }
.run-summary .rs-v { color: var(--text); font-weight: 700; text-align: right; }
.run-summary .rs-ico { font-size: 15px; }
.run-summary .rs-record { color: var(--gold); font-size: 12px; margin-left: 6px; letter-spacing: .04em; }
.meta-balance { color: var(--neon2); font-weight: 700; margin: 6px 0 16px; }

/* Preview del payoff de prestigio (con qué empieza la próxima run) */
.prestige-preview {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(157,123,255,.12), rgba(10,16,32,.5));
  border: 1px solid rgba(157,123,255,.35);
}
.prestige-preview .pp-title { font-size: 11px; font-weight: 700; color: var(--neon2); text-transform: uppercase; letter-spacing: .04em; }
.prestige-preview .pp-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.prestige-preview .pp-item { font-size: 12px; color: var(--muted); white-space: nowrap; }
.prestige-preview .pp-item b { color: var(--text); font-weight: 700; }
.muted { color: var(--muted); }

.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meta-card {
  background: var(--panel);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 10px;
}
.meta-card .m-name { font-size: 13px; font-weight: 700; color: var(--text); }
.meta-card .m-desc { font-size: 11px; color: var(--muted); margin: 3px 0 8px; }
.meta-card .m-level { font-size: 11px; color: var(--neon); }
.meta-card .btn { margin-top: 8px; }
.meta-card.maxed { border-color: var(--ok); }
.meta-card.maxed .m-level { color: var(--ok); }

.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { margin-top: 0; }

/* ---------- Menú principal ---------- */
.modal.menu { width: min(480px, 92vw); text-align: center; }
.logo.big { font-size: 46px; letter-spacing: 4px; margin-bottom: 4px; }
.tagline { color: var(--neon2) !important; letter-spacing: 3px; font-size: 12px; margin-bottom: 20px !important; }
.menu-stats { display: flex; justify-content: center; gap: 26px; margin-bottom: 22px; font-size: 14px; }
.menu-stats b { color: var(--neon); }
.btn.big { padding: 14px; font-size: 16px; letter-spacing: 1px; }
.small { font-size: 12px; }

/* ---------- Pestañas de la tienda ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab {
  flex: 1; padding: 8px; background: var(--panel); color: var(--muted);
  border: 1px solid var(--grid); border-radius: 8px 8px 0 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13px;
}
.tab.active { color: var(--neon); border-color: var(--neon); border-bottom-color: transparent; }

#meta-body { max-height: 52vh; overflow-y: auto; margin-bottom: 16px; padding-right: 4px; }
#meta-body::-webkit-scrollbar { width: 8px; }
#meta-body::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 4px; }

/* Fila de mejora/desbloqueo de torreta en el taller */
.shop-tower {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--grid);
  border-radius: 8px; padding: 10px; margin-bottom: 8px;
}
.shop-tower.locked { opacity: .92; border-style: dashed; }
.shop-tower .st-swatch {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 8px; font-size: 22px;
}
.shop-tower .st-info { flex: 1; }
.shop-tower .st-name { font-weight: 700; font-size: 14px; }
.shop-tower .st-desc { font-size: 11px; color: var(--muted); }
.shop-tower .st-level { font-size: 11px; color: var(--neon); margin-top: 2px; }
.shop-tower .st-action { flex: none; width: 150px; }
.shop-tower .st-action .btn { margin-top: 0; }
.tag-owned { color: var(--ok); font-size: 12px; font-weight: 700; text-align: center; display: block; }

.hidden { display: none !important; }

/* ---------- Árbol de mejoras ---------- */
.tree-modal { width: min(800px, 97vw); }
.tree-modal #meta-body { max-height: none; overflow: visible; margin-bottom: 14px; }
.tree-wrap {
  overflow: auto; max-width: 100%; max-height: 64vh;
  border: 1px solid var(--grid); border-radius: 10px;
  background: radial-gradient(circle at 50% 45%, rgba(22,34,68,.55), rgba(6,9,18,.65));
}
.tree-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.tree-wrap::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 4px; }
.tree { position: relative; margin: 0 auto; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; }

.tree-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 78px; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; user-select: none; z-index: 2;
}
.tn-circle {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  border: 2px solid var(--nc, #00f0ff); background: rgba(10, 16, 32, .92);
  transition: transform .1s ease, box-shadow .15s ease;
}
.tree-node:hover .tn-circle { transform: scale(1.14); }
.tn-label {
  font-size: 10px; font-weight: 700; margin-top: 3px; text-align: center;
  color: var(--text); text-shadow: 0 1px 3px #000; white-space: nowrap;
}
.tn-status { font-size: 10px; color: var(--muted); text-shadow: 0 1px 3px #000; white-space: nowrap; }

.tree-node.root .tn-circle { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 18px rgba(0, 240, 255, .6); }
.tree-node.root .tn-status { color: var(--neon); }
.tree-node.owned .tn-circle { border-color: var(--nc); color: var(--nc); }
.tree-node.buyable .tn-circle { border-color: var(--nc); color: var(--nc); box-shadow: 0 0 14px var(--nc); animation: nodePulse 1.5s infinite; }
.tree-node.buyable .tn-status { color: var(--gold); }
.tree-node.poor { opacity: .62; }
.tree-node.poor .tn-circle { border-color: #56658c; color: #8fa1c9; }
.tree-node.maxed .tn-circle { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(255, 207, 58, .5); }
.tree-node.maxed .tn-status { color: var(--gold); }
.tree-node.hidden-node { cursor: default; opacity: .4; }
.tree-node.hidden-node .tn-circle { border-style: dashed; border-color: #2b3a5c; color: #3f4f74; background: rgba(8, 12, 24, .7); }
.tree-node.hidden-node:hover .tn-circle { transform: none; }

@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 8px var(--nc); } 50% { box-shadow: 0 0 18px var(--nc); } }

/* ---------- Evolución / botón de oleada ---------- */
.sel-evo { font-size: 11px; color: var(--gold); margin: 0 0 6px; min-height: 14px; font-weight: 700; }
#btn-force { border-color: var(--gold); color: var(--gold); }
#btn-force:hover:not(:disabled) { background: var(--gold); color: #1a1400; border-color: var(--gold); }

/* ---------- Responsive de la HUD ---------- */
/* Si no caben el dock centrado y los clusters laterales en una fila, se elevan
   los clusters por encima del dock (que ocupa el fondo). */
@media (max-width: 1320px) {
  .hud-dock { max-width: calc(100vw - 28px); }
  .hud-play, .hud-action { bottom: 70px; }
}
@media (max-width: 560px) {
  .stats { gap: 10px; font-size: 13px; }
  .logo.sm { display: none; }
  .hud-action .btn.big { padding: 10px 12px; font-size: 13px; }
  .hud-action { gap: 6px; }
}

/* ---------- Botones extra + contador ---------- */
.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-gold:hover:not(:disabled) { background: var(--gold); color: #1a1400; border-color: var(--gold); }
#stat-enemies .stat-ico { color: #ff8a8a; }

/* ---------- Modal del árbol (contenido, no deforma la pantalla) ---------- */
.tree-modal { width: min(800px, 97vw); max-height: 94vh; display: flex; flex-direction: column; text-align: left; }
.tree-modal h2 { margin-bottom: 2px; }
.shop-sub { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.tree-modal .meta-balance { font-size: 18px; }
#shop-ccy { color: var(--neon2); }
.tree-modal #meta-body { flex: 0 1 auto; min-height: 0; margin-bottom: 10px; overflow: visible; }
.tree-wrap { overflow: auto; max-width: 100%; max-height: 52vh; }

/* ---------- Panel de descripción del nodo ---------- */
.tree-detail { background: var(--panel); border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; min-height: 64px; }
.td-hint { color: var(--muted); font-size: 12px; }
.td-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.td-icon { font-size: 20px; line-height: 1; }
.td-name { font-weight: 800; font-size: 15px; color: var(--text); }
.td-lvl { margin-left: auto; font-size: 11px; color: var(--muted); }
.td-desc { font-size: 13px; color: var(--text); line-height: 1.45; }
.td-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 12px; gap: 10px; }
.td-detail { color: var(--neon3); font-weight: 700; }
.td-cost { color: var(--gold); }
.td-cost b { color: #fff; }
.td-max { color: var(--ok); font-weight: 700; }

/* ---------- Árbol pannable estilo circuito integrado ---------- */
.tree-wrap {
  position: relative;
  height: 58vh; max-height: 58vh; overflow: hidden;
  cursor: grab; touch-action: none;
  border: 1px solid var(--grid); border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(80,150,200,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(80,150,200,.05) 0 1px, transparent 1px 26px),
    radial-gradient(circle at 50% 40%, rgba(20,40,70,.6), rgba(6,9,18,.85));
}
.tree-wrap.grabbing { cursor: grabbing; }
.tree { position: absolute; left: 0; top: 0; will-change: transform; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Torres bloqueadas en el panel */
.tower-card.unavailable { opacity: .5; filter: grayscale(.6); }
.tower-card.unavailable:hover { border-color: var(--grid); }
.tower-cap { font-size: 12px; color: var(--neon); font-weight: 700; }

/* Botones toggle activos */
#btn-auto.active { border-color: var(--neon3); color: var(--neon3); box-shadow: 0 0 8px rgba(182,255,60,.35) inset; }
#gfx-fx.active { border-color: var(--neon); color: var(--neon); }
#graphics .btn { margin-top: 8px; }

/* ---------- Botón recentrar árbol ---------- */
.recenter-btn {
  margin-left: 12px; padding: 4px 10px;
  background: var(--panel); color: var(--neon);
  border: 1px solid var(--neon); border-radius: 6px;
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  vertical-align: middle;
}
.recenter-btn:hover { background: var(--neon); color: #041018; }

/* ---------- Fix: el panel de torreta ya no deforma el canvas ---------- */
#stage { align-items: flex-start; }

/* ---------- Zoom del árbol (origen para escalar) ---------- */
.tree { transform-origin: 0 0; }

/* Nodo "categoría" (hub de mejoras generales) */
.tree-node.cat .tn-circle { border-color: #9fb2d8; color: #cfe0ff; background: rgba(20,30,54,.95); box-shadow: 0 0 10px rgba(159,178,216,.35); cursor: default; }
.tree-node.cat { cursor: default; }
.tree-node.cat:hover .tn-circle { transform: none; }

/* Botones toggle activos (áreas) */
#btn-ranges.active { border-color: var(--neon2); color: var(--neon2); box-shadow: 0 0 8px rgba(255,43,214,.35) inset; }

/* ---------- Panel de estadísticas ---------- */
.stats-modal { width: min(560px, 94vw); }
#stats-body { max-height: 62vh; overflow-y: auto; margin-bottom: 14px; text-align: left; }
#stats-body::-webkit-scrollbar { width: 8px; }
#stats-body::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 4px; }
.st-h { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.st-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px 8px; align-items: center; padding: 6px 8px; background: var(--panel); border: 1px solid var(--grid); border-radius: 8px; margin-bottom: 6px; }
.st-ico { font-size: 18px; text-align: center; }
.st-nm { font-weight: 700; font-size: 13px; color: var(--text); }
.st-val { font-weight: 700; color: var(--neon); font-size: 13px; }
.st-sub { grid-column: 2 / 4; font-size: 11px; color: var(--muted); }
.st-empty { color: var(--muted); font-size: 13px; padding: 8px; }
.st-row2 { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--grid); font-size: 13px; }
.st-row2 b { color: var(--gold); }

/* ---------- Cámara del mapa ---------- */
canvas { touch-action: none; }
canvas.panning { cursor: grabbing; }

/* ---------- Sinergias ---------- */
.sel-syn { color: #7bffb0; font-size: 11px; }
.st-syn { display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--grid); border-radius: 8px; margin-bottom: 6px; opacity: .7; }
.st-syn.on { opacity: 1; border-color: #7bffb0; box-shadow: 0 0 8px rgba(123,255,176,.2) inset; }
.st-syn .st-ico { font-size: 16px; text-align: center; }
.st-syn .st-nm { font-weight: 700; font-size: 13px; color: var(--text); }
.st-syn .st-sub { grid-column: 2; font-size: 11px; color: var(--muted); }
.st-on { color: #7bffb0; font-size: 10px; text-transform: uppercase; }

/* ---------- Guía con demos animados ---------- */
.guide-modal { width: min(640px, 96vw); max-height: 94vh; display: flex; flex-direction: column; text-align: left; }
.guide-modal h2 { margin-bottom: 10px; }
#guide-canvas {
  width: 100%; height: min(190px, 34vh); flex: none; display: block;
  border: 1px solid var(--grid); border-radius: 10px; margin-bottom: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(22,34,68,.5), rgba(6,9,18,.7));
}
#guide-body { font-size: 13px; color: var(--text); overflow-y: auto; padding-right: 4px; flex: 1 1 auto; min-height: 0; }
#guide-body::-webkit-scrollbar { width: 8px; }
#guide-body::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 4px; }
#guide-body p { color: var(--text); font-size: 13px; margin: 0 0 8px; }
#guide-body .g-muted { color: var(--muted); }
#guide-body b.g-hi { color: var(--neon); }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.g-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; background: var(--panel); border: 1px solid var(--grid);
  border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 700;
  color: var(--text); transition: all .12s;
}
.g-chip:hover { border-color: var(--neon); }
.g-chip.active { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 10px rgba(0,240,255,.3) inset; }
.g-chip .g-ico { font-size: 15px; }
.g-detail {
  background: var(--panel); border: 1px solid var(--grid); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
}
.g-detail .g-name { font-weight: 700; font-size: 14px; color: var(--neon); }
.g-detail .g-eff { color: #7bffb0; font-size: 12px; font-weight: 700; margin-top: 2px; }
.g-detail .g-desc { color: var(--muted); font-size: 12px; margin-top: 4px; }
.g-tips { display: grid; gap: 8px; }
.g-tip { display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px; background: var(--panel); border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px; }
.g-tip .g-tico { font-size: 17px; text-align: center; }
.g-tip .g-th { font-weight: 700; font-size: 13px; color: var(--text); }
.g-tip .g-td { grid-column: 2; font-size: 12px; color: var(--muted); }

/* ---------- Modo editar / acciones de torre ---------- */
#btn-edit.active { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 12px rgba(0,240,255,.35) inset; }
.sel-actions { display: flex; gap: 6px; margin-top: 8px; }
.sel-actions .btn { margin-top: 0; flex: 1; }

/* Selector de prioridad de objetivo */
.sel-target { margin: 2px 0 4px; }
.sel-target .stg-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 4px; }
.sel-target .stg-key { color: var(--neon); font-weight: 700; }
.sel-target .stg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sel-target .tgt-btn {
  font: inherit; font-size: 11px; cursor: pointer; padding: 4px 6px;
  background: rgba(255,255,255,.04); color: var(--muted);
  border: 1px solid var(--grid); border-radius: 6px; text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}
.sel-target .tgt-btn:hover { color: var(--text); border-color: var(--neon); }
.sel-target .tgt-btn.active {
  background: color-mix(in srgb, var(--neon) 18%, transparent);
  color: var(--neon); border-color: var(--neon); font-weight: 700;
}
/* En el dock, con torretas gratis la "cost" solo marca el candado de bloqueada */
.tower-card .tower-cost { color: var(--muted); }
.tower-card.unavailable .tower-cost { color: var(--danger); }

/* Robustez en pantallas estrechas: liberar espacio para el cluster central */
@media (max-width: 1100px) { .logo.sm { display: none; } }
@media (max-width: 900px) {
  .hud-left .stats { font-size: 13px; gap: 10px; }
  .tc-controls .btn.big { padding: 7px 12px; font-size: 13px; }
  .wave-preview { font-size: 11px; max-width: 70vw; }
}

/* ---------- Contenedor de recursos (bajo los controles centrales) ---------- */
.hud-stats {
  display: flex; gap: 14px; align-items: center;
  padding: 4px 12px;
  background: rgba(10,16,32,.85); border: 1px solid var(--grid); border-radius: 16px;
  backdrop-filter: blur(3px); font-size: 14px;
}
/* Botón de forzar fin: destacado para que no se pierda en la barra */
.tc-controls .btn.force-mode {
  background: linear-gradient(90deg, #d1521a, #ff7b3a); color: #180a02; border: none;
  box-shadow: 0 0 16px rgba(255,123,58,.55); animation: forcePulse 1.25s infinite;
}
.tc-controls .btn.force-mode:hover { color: #180a02; box-shadow: 0 0 22px rgba(255,123,58,.85); }
@keyframes forcePulse { 0%,100% { box-shadow: 0 0 12px rgba(255,123,58,.45); } 50% { box-shadow: 0 0 22px rgba(255,123,58,.85); } }
.wave-preview { cursor: pointer; }
.wave-preview:hover { border-color: var(--neon); }
#game.dragging { cursor: grabbing; }

/* Botón "quitar todas" en el dock */
.dock-clear { margin-top: 0; width: auto; white-space: nowrap; flex: none; padding: 6px 10px; font-size: 12px; }

/* ---------- Bestiario ---------- */
.bestiary-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px;
  max-height: 64vh; overflow-y: auto; padding-right: 4px; margin-bottom: 14px;
}
.bestiary-grid::-webkit-scrollbar { width: 8px; }
.bestiary-grid::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 4px; }
.bestiary-card { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--grid); border-radius: 10px; padding: 8px 10px; }
.bestiary-card.hot { border-color: var(--neon2); box-shadow: 0 0 10px rgba(255,43,214,.25) inset; }
.bestiary-canvas { width: 48px; height: 48px; flex: none; }
.bestiary-meta { min-width: 0; }
.be-name { font-weight: 700; font-size: 13px; color: var(--text); }
.be-hot { color: var(--neon2); }
.be-trait { font-size: 11px; color: var(--neon); margin: 2px 0; }
.be-stats { font-size: 11px; color: var(--muted); }

/* =========================================================
   Árbol de mejoras REDISEÑADO: pestañas + tarjetas + tiers
   ========================================================= */
.tree-modal #meta-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; margin-bottom: 10px; }
.tree-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; flex: none; }
.tree-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; background: var(--panel); color: var(--muted);
  border: 1px solid var(--grid); border-radius: 9px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13px; transition: all .12s;
}
.tree-tab:hover { border-color: var(--neon); color: #fff; }
.tree-tab.active { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 10px rgba(0,240,255,.3) inset; }
.tree-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.tree-panel::-webkit-scrollbar { width: 8px; }
.tree-panel::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 4px; }

/* Chips de torreta (pestaña Torretas) */
.tw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tw-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: var(--panel); color: var(--text);
  border: 1px solid var(--grid); border-radius: 20px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12px; transition: all .12s;
}
.tw-chip .tw-ic { font-size: 15px; color: var(--nc); }
.tw-chip:hover { border-color: var(--nc); }
.tw-chip.active { border-color: var(--nc); box-shadow: 0 0 10px var(--nc) inset; color: #fff; }
.tw-chip.locked { opacity: .5; }

/* Cabecera de tier */
.tier-head { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--neon); margin: 12px 0 8px; }
.tier-head.locked { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Cuadrícula de tarjetas */
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.up-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--grid); border-left: 3px solid var(--grid);
  border-radius: 9px; padding: 9px 11px; cursor: pointer; transition: border-color .12s, transform .08s, box-shadow .12s;
}
.up-card .uc-top { display: flex; align-items: center; gap: 7px; }
.up-card .uc-ic { font-size: 17px; color: var(--nc); width: 20px; text-align: center; }
.up-card .uc-name { font-weight: 700; font-size: 13px; color: var(--text); }
.up-card .uc-desc { font-size: 11px; color: var(--muted); line-height: 1.25; }
.up-card .uc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.up-card .uc-lvl { font-size: 12px; color: var(--muted); }
.up-card .pips { letter-spacing: 1px; color: var(--nc); }
.up-card .uc-cost { font-size: 13px; font-weight: 700; color: var(--gold); }
.up-card .uc-max { font-size: 11px; font-weight: 700; color: var(--ok); }
.up-card .uc-lock { font-size: 11px; color: var(--muted); }

.up-card.buyable { border-left-color: var(--nc); }
.up-card.buyable:hover { border-color: var(--neon); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.up-card.owned { border-left-color: var(--nc); opacity: .95; }
.up-card.poor { opacity: .6; cursor: not-allowed; }
.up-card.poor .uc-cost { color: var(--danger); }
.up-card.maxed { border-left-color: var(--ok); opacity: .9; cursor: default; }
.up-card.tlocked { opacity: .45; cursor: not-allowed; border-style: dashed; }
.up-card.spec-off { opacity: .4; cursor: not-allowed; }

/* =========================================================
   Árbol de mejoras VISUAL direccional (columnas + conectores 90°)
   ========================================================= */
.tree-modal #meta-body { flex: 0 0 auto; display: block; overflow: visible; min-height: 0; margin-bottom: 10px; }
.tree-wrap { position: relative; height: 56vh; max-height: 56vh; overflow: hidden; cursor: grab; touch-action: none;
  border: 1px solid var(--grid); border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(80,150,200,.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(80,150,200,.05) 0 1px, transparent 1px 30px),
    radial-gradient(circle at 30% 45%, rgba(20,40,70,.6), rgba(6,9,18,.9)); }
.tree-wrap.grabbing { cursor: grabbing; }
.tree { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Nodo (pieza rectangular con acento por color de rama) */
.tree-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 152px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 1px 8px;
  padding: 7px 10px; border-radius: 10px; cursor: pointer; z-index: 2;
  background: rgba(12,18,34,.96); border: 1px solid var(--grid); border-left: 3px solid var(--nc, #00f0ff);
  transition: box-shadow .12s, transform .08s, border-color .12s;
}
.tree-node .tn-ic { grid-row: 1 / span 2; font-size: 19px; color: var(--nc); text-align: center; }
.tree-node .tn-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.12; }
.tree-node .tn-status { font-size: 10.5px; color: var(--muted); line-height: 1; }
.tree-node:hover { border-color: var(--neon); transform: translate(-50%,-50%) scale(1.05); }
.tree-node.buyable { border-color: var(--nc); box-shadow: 0 0 12px var(--nc); animation: nodePulse 1.7s infinite; }
.tree-node.buyable .tn-status { color: var(--gold); }
.tree-node.owned .tn-status { color: var(--neon3); }
.tree-node.avail-poor .tn-status { color: var(--danger); }
.tree-node.maxed { border-color: var(--ok); border-left-color: var(--ok); }
.tree-node.maxed .tn-status { color: var(--ok); }
.tree-node.tlocked { opacity: .5; }
.tree-node.spec-off { opacity: .4; }
.tree-node.spec-off .tn-status { color: var(--muted); }
/* Hubs de categoría y raíz (piezas más grandes, centradas, no comprables) */
.tree-node.hub, .tree-node.root { width: auto; grid-template-columns: auto; justify-items: center; gap: 2px; cursor: default; text-align: center; padding: 9px 15px; }
.tree-node.hub .tn-ic, .tree-node.root .tn-ic { grid-row: auto; }
.tree-node.hub { background: rgba(20,30,54,.97); border-color: #9fb2d8; border-left-color: #9fb2d8; }
.tree-node.hub .tn-ic { font-size: 22px; color: #cfe0ff; }
.tree-node.hub .tn-name { font-size: 12px; }
.tree-node.root { background: rgba(10,16,32,.98); border: 2px solid var(--nc); box-shadow: 0 0 18px var(--nc); }
.tree-node.root .tn-ic { font-size: 25px; }
.tree-node.root .tn-name { font-size: 13px; }
.tree-node.hub:hover, .tree-node.root:hover { transform: translate(-50%,-50%); border-color: var(--nc); }
@keyframes nodePulse { 0%,100% { box-shadow: 0 0 8px var(--nc); } 50% { box-shadow: 0 0 18px var(--nc); } }

/* Barra de detalle compacta */
.tree-detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: auto; padding: 8px 12px; font-size: 12px; }
.tree-detail .td-ic { font-size: 16px; line-height: 1; }
.tree-detail .td-lvl { color: var(--muted); }
.tree-detail .td-desc { color: var(--muted); flex: 1 1 auto; min-width: 140px; }
.tree-detail .td-cost { color: var(--gold); font-weight: 700; }
.tree-detail .td-max { color: var(--ok); font-weight: 700; }
/* Preview comparativo "actual → siguiente nivel" */
.tree-detail .td-delta {
  font-weight: 700; font-size: 12px; color: var(--ok); white-space: nowrap;
  background: rgba(69,240,160,.1); border: 1px solid rgba(69,240,160,.3);
  border-radius: 6px; padding: 2px 8px;
}
.tree-detail .td-delta .td-arrow { color: var(--muted); margin: 0 1px; }

/* Número de atajo (1-8) en las tarjetas del dock + botón de borrado activo */
.tower-card { position: relative; }
.tower-key { position: absolute; top: 2px; left: 3px; font-size: 9px; font-weight: 800; color: var(--muted); background: rgba(0,0,0,.35); border-radius: 4px; padding: 0 3px; line-height: 13px; }
.tower-card.active .tower-key { color: var(--neon); }
#btn-eraser.active { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 10px rgba(255,77,109,.35) inset; }

/* =========================================================
   Árbol "mapa estelar" (estilo Path of Exile): nodos + estados
   ========================================================= */
.tree-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; z-index: 2; width: auto; padding: 0; background: none; border: none; }
.tree-node .tn-ic { display: grid; place-items: center; border-radius: 50%; background: rgba(9,14,28,.96); border: 2px solid var(--nc, #00f0ff); color: var(--nc, #00f0ff); transition: transform .1s, box-shadow .15s; line-height: 1; }
.tree-node .tn-name { font-size: 10px; font-weight: 700; color: var(--text); text-shadow: 0 1px 3px #000, 0 0 4px #000; white-space: nowrap; }
.tree-node:hover .tn-ic { transform: scale(1.14); }
.tree-node:hover .tn-name { color: #fff; }

/* Tamaños por clase */
.tree-node.small .tn-ic { width: 27px; height: 27px; font-size: 13px; border-width: 1.5px; }
.tree-node.notable .tn-ic { width: 44px; height: 44px; font-size: 21px; border-radius: 13px; }
.tree-node.keystone .tn-ic { width: 52px; height: 52px; font-size: 25px; border-radius: 50%; border-width: 3px; box-shadow: 0 0 0 3px rgba(255,43,214,.15); }
.tree-node.keystone { z-index: 3; }
.tree-node.hub .tn-ic { width: 40px; height: 40px; font-size: 20px; border-color: #9fb2d8; color: #cfe0ff; }
.tree-node.hub .tn-name { color: #cfe0ff; font-size: 11px; }
.tree-node.root .tn-ic { width: 50px; height: 50px; font-size: 26px; }

/* Estados (asignación por conectividad) */
.tree-node.far { opacity: .3; }
.tree-node.far .tn-name { display: none; }
.tree-node.can .tn-ic { box-shadow: 0 0 14px var(--nc); animation: nodePulse 1.7s infinite; }
.tree-node.can .tn-name { color: #fff; }
.tree-node.can-poor { opacity: .62; }
.tree-node.alloc .tn-ic { background: var(--nc); color: #04121a; box-shadow: 0 0 12px var(--nc); }
.tree-node.maxed .tn-ic { background: var(--gold); border-color: var(--gold); color: #1a1400; box-shadow: 0 0 12px rgba(255,207,58,.6); }
.tree-node.spec-off { opacity: .3; }
.tree-node.root .tn-ic, .tree-node.hub .tn-ic { cursor: default; }
@keyframes nodePulse { 0%,100% { box-shadow: 0 0 8px var(--nc); } 50% { box-shadow: 0 0 18px var(--nc); } }

/* Badge de nivel visible en cada nodo del mapa estelar */
.tree-node .tn-ic { position: relative; }
.tree-node .tn-lv {
  position: absolute; right: -7px; bottom: -6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; line-height: 1;
  color: #fff; background: #0a1122; border: 1.5px solid var(--nc, #00f0ff); border-radius: 8px;
}
.tree-node .tn-lv.max { color: #1a1400; background: var(--gold); border-color: var(--gold); }
.tree-node.small .tn-lv { right: -6px; bottom: -5px; font-size: 8px; min-width: 13px; height: 13px; }
/* Torreta bloqueada por inversión (candado) */
.tree-node.gated { opacity: .55; }
.tree-node.gated .tn-ic { border-style: dashed; border-color: #7c86a8; color: #7c86a8; background: rgba(10,14,26,.9); }
.tree-node.gated .tn-ic::after { content: '🔒'; position: absolute; right: -8px; bottom: -7px; font-size: 12px; filter: grayscale(.3); }
.tree-node.gated .tn-name { color: var(--muted); }

/* ===== Eventos entre oleadas (elige 1 de 3) ===== */
.event-modal { width: min(760px, 94vw); max-width: 760px; text-align: center; }
#event-title { color: var(--gold); letter-spacing: 1px; }
.event-cards { display: flex; gap: 14px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.event-card {
  flex: 1 1 210px; max-width: 230px; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 14px 14px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(160deg, rgba(24,30,50,.95), rgba(12,16,30,.95));
  border: 1.5px solid rgba(120,140,190,.35); color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.event-card:hover { transform: translateY(-5px); }
.event-card .ev-kind { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.event-card .ev-ic { font-size: 40px; line-height: 1; margin: 2px 0; filter: drop-shadow(0 0 8px currentColor); }
.event-card .ev-name { font-size: 16px; font-weight: 800; }
.event-card .ev-desc { font-size: 12.5px; line-height: 1.4; color: var(--muted); flex: 1; }
.event-card .ev-tag {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
/* Colores por tipo de carta */
.event-card.good { border-color: rgba(69,240,160,.55); }
.event-card.good .ev-ic, .event-card.good .ev-kind { color: #45f0a0; }
.event-card.good:hover { box-shadow: 0 10px 26px rgba(69,240,160,.28); border-color: #45f0a0; }
.event-card.mod { border-color: rgba(90,170,255,.55); }
.event-card.mod .ev-ic, .event-card.mod .ev-kind { color: #5aa8ff; }
.event-card.mod:hover { box-shadow: 0 10px 26px rgba(90,170,255,.28); border-color: #5aa8ff; }
.event-card.risk { border-color: rgba(255,110,90,.6); }
.event-card.risk .ev-ic, .event-card.risk .ev-kind { color: #ff7b5a; }
.event-card.risk:hover { box-shadow: 0 10px 26px rgba(255,110,90,.3); border-color: #ff7b5a; }
@media (max-width: 720px) { .event-card { min-height: 0; flex-basis: 100%; } }

/* =========================================================
   Iconos SVG propios (reemplazan a los emojis)
   ========================================================= */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
/* En botones con texto, el icono va un poco mayor y separado del texto */
.bi { display: inline-flex; align-items: center; }
.bi .ico { width: 1.15em; height: 1.15em; }
button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.hud-btn .ico { width: 1.25em; height: 1.25em; }
/* Iconos de recursos en las píldoras del HUD */
.stat-ico { display: inline-flex; align-items: center; }
.stat-ico .ico { width: 1.15em; height: 1.15em; }
/* Icono de torre en la tarjeta del dock */
.tower-swatch .ico { width: 60%; height: 60%; }
/* Botón grande de oleada: icono acorde */
#btn-wave .ico { width: 1.05em; height: 1.05em; }
/* Emblema del logo (antes del wordmark) */
.logo-mark { display: inline-block; vertical-align: -0.2em; margin-right: .38em; color: var(--neon); }
.logo-mark .ico { width: 1.05em; height: 1.05em; filter: drop-shadow(0 0 6px var(--neon)); }
/* Iconos dentro de contenedores concretos (nodos del árbol, eventos, stats, etc.) */
.tree-node .tn-ic .ico { width: 62%; height: 62%; }
.tree-detail .td-ic .ico { width: 1.15em; height: 1.15em; }
.event-card .ev-ic .ico { width: 1em; height: 1em; }
.wave-preview .wp-item .ico { width: 1.05em; height: 1.05em; }
.next-milestone .nm-ic .ico { width: 1.05em; height: 1.05em; }
.run-summary .rs-bullet .ico, .prestige-preview .pp-item .ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.st-ico .ico { width: 1.1em; height: 1.1em; }
.st-row2 .ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.be-stats .ico { width: 1em; height: 1em; vertical-align: -0.14em; }
/* Panel de selección, pestañas de guía, título de evento, recompensa */
.sel-stats .ico, .sel-evo .ico { width: 1em; height: 1em; vertical-align: -0.14em; }
.sel-target .tgt-btn .ico, .sel-target .stg-label .ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.tab .ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 2px; }
#event-title .ico { width: 1.1em; height: 1.1em; }
.reward .ico { width: 1em; height: 1em; vertical-align: -0.14em; }
/* Guía: chips, tips y detalle */
.g-ico .ico, .g-tico .ico, .g-name .ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }

/* =========================================================
   Tutorial guiado (spotlight / coach marks)
   ========================================================= */
#tutorial { position: fixed; inset: 0; z-index: 200; }
#tutorial.hidden { display: none; }
#tut-hole {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(6, 9, 18, .78), 0 0 18px 2px var(--neon) inset;
  border: 2px solid var(--neon);
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease;
}
#tut-pop {
  position: absolute; width: min(340px, 90vw);
  background: linear-gradient(180deg, var(--panel2, #141d31), var(--panel, #0e1524));
  border: 1px solid var(--neon); border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 18px 44px -18px #000, 0 0 22px -6px var(--neon);
  transition: left .28s ease, top .28s ease;
}
#tut-pop .tut-step { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; color: var(--neon); opacity: .85; }
#tut-pop .tut-title { margin: 4px 0 6px; font-size: 18px; color: #fff; }
#tut-pop .tut-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
#tut-pop .tut-text b { color: var(--gold); }
#tut-pop .tut-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
#tut-pop .tut-actions .btn { margin-top: 0; }
#tut-pop #tut-next { min-width: 120px; }

/* =========================================================
   Aviso que pausa (enemigo nuevo / apertura de entrada)
   ========================================================= */
.notice-modal { width: min(460px, 94vw); text-align: center; }
.notice-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 6px;
}
.notice-tag .ico { width: 1.05em; height: 1.05em; }
.notice-tag.danger { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.notice-tag.warn { color: #ff7b3a; border: 1px solid rgba(255,123,58,.45); }
.notice-canvas { width: 96px; height: 96px; margin: 6px auto 2px; display: block; }
.notice-bigicon { margin: 10px auto 2px; }
.notice-bigicon .ico { width: 58px; height: 58px; filter: drop-shadow(0 0 10px currentColor); animation: nodePulse 1.6s infinite; }
.notice-title { margin: 4px 0 2px; font-size: 21px; }
.notice-trait { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-style: italic; }
.notice-desc { margin: 0 auto 4px; font-size: 14px; line-height: 1.5; color: var(--text); max-width: 40ch; }
.notice-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.notice-actions .btn { margin-top: 0; }
.notice-actions #notice-ok { min-width: 140px; }

/* =========================================================
   Árbol a PANTALLA COMPLETA + frontera de compra clara
   (override final: gana por orden de cascada)
   ========================================================= */
#shop { padding: 0; }
.tree-modal {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  border-radius: 0; border-left: none; border-right: none;
  padding: 14px clamp(16px, 3vw, 40px) 12px; display: flex; flex-direction: column;
}
.tree-modal #meta-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; margin-bottom: 8px;
}
.tree-modal .tree-wrap {
  flex: 1 1 auto; height: auto; max-height: none; min-height: 0; width: 100%;
}
/* Frontera de compra (asignable + asequible): resalta con un aro verde pulsante */
.tree-node.can .tn-ic {
  box-shadow: 0 0 0 3px rgba(69,240,160,.3), 0 0 16px var(--nc, #00f0ff);
  animation: buyPulse 1.3s infinite;
}
.tree-node.can .tn-name { color: #eafff4; }
/* Alcanzable pero sin créditos suficientes: visible y punteado (dorado) */
.tree-node.can-poor { opacity: .82; }
.tree-node.can-poor .tn-ic { border-style: dashed; box-shadow: 0 0 8px rgba(255,207,58,.35); }
/* Lejano: algo más visible que antes, para poder planear la ruta */
.tree-node.far { opacity: .42; }
@keyframes buyPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(69,240,160,.22), 0 0 10px var(--nc, #00f0ff); }
  50%      { box-shadow: 0 0 0 4px rgba(69,240,160,.5), 0 0 22px var(--nc, #00f0ff); }
}