/* hud-styles.css — Estilos alternativos del HUD (se eligen en Pausa → Estilo del HUD).
   "actual" no añade nada: es el HUD de components.css tal cual.
   Para quitar un estilo basta con borrar su bloque y su entrada en HUD_STYLES (js/data.js). */

/* ---------- Selector en la pausa ---------- */
.hud-style-pick { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--panel-border); border-radius: 0.4rem; }
.hud-style-pick legend { padding: 0 0.4rem; color: var(--muted); font-size: 0.9rem; }
.hud-style-options { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.hud-style-options .btn.is-picked { outline: 2px solid var(--gold); outline-offset: 1px; color: var(--gold); }

/* =====================================================================
   TIBIA CLÁSICO — paneles de piedra gris con bisel, como el cliente 8.60
   ===================================================================== */
#hud[data-hud-style="clasico"] {
  --tc-stone: #3d3d3d;
  --tc-stone-2: #4a4a4a;
  --tc-hi: #8c8c8c;      /* bisel claro (arriba/izquierda) */
  --tc-lo: #161616;      /* bisel oscuro (abajo/derecha) */
  --tc-text: #dcdcdc;
  --tc-hp: #c41f1f;
  --tc-xp: #2f7d2f;
  --tc-font: Verdana, Tahoma, "Segoe UI", sans-serif;
}

/* Panel superior: barras + datos dentro de una ventana de piedra */
#hud[data-hud-style="clasico"] .hud-top {
  padding: 6px 3.25rem 6px 8px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--tc-stone-2), var(--tc-stone));
  border: 2px solid; border-color: var(--tc-hi) var(--tc-lo) var(--tc-lo) var(--tc-hi);
  box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0,0,0,0.6);
  font-family: var(--tc-font);
}

/* Barras: hundidas en la piedra, color plano como en el cliente */
#hud[data-hud-style="clasico"] .bar {
  height: 14px; border-radius: 0; background: #111;
  border: 1px solid; border-color: var(--tc-lo) var(--tc-hi) var(--tc-hi) var(--tc-lo);
}
#hud[data-hud-style="clasico"] .bar span { background: linear-gradient(180deg, #e24a4a, var(--tc-hp) 55%, #8e1414); }
#hud[data-hud-style="clasico"] .bar-xp { height: 10px; }
#hud[data-hud-style="clasico"] .bar-xp span { background: linear-gradient(180deg, #4fae4f, var(--tc-xp) 55%, #1d531d); }
#hud[data-hud-style="clasico"] .bar em {
  font-family: var(--tc-font); font-size: 10px; font-weight: 700; line-height: 12px; color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
#hud[data-hud-style="clasico"] .bar-xp em { font-size: 9px; line-height: 8px; }

/* Datos: texto pequeño y nítido, separadores tipo marco */
#hud[data-hud-style="clasico"] .hud-info { font-family: var(--tc-font); font-size: 12px; color: var(--tc-text); gap: 0; flex-wrap: wrap; row-gap: 4px; }
#hud[data-hud-style="clasico"] .hud-info > span {
  padding: 1px 7px; background: #262626;
  border: 1px solid; border-color: var(--tc-lo) var(--tc-hi) var(--tc-hi) var(--tc-lo);
  margin-right: 4px;
}
#hud[data-hud-style="clasico"] .hud-time { color: #f0d060; }
#hud[data-hud-style="clasico"] .hud-zone { color: #b5b5b5; }

/* Boss: ventana propia de piedra */
#hud[data-hud-style="clasico"] .boss-bar {
  padding: 4px 8px 6px; font-family: var(--tc-font); font-size: 12px;
  background: linear-gradient(180deg, var(--tc-stone-2), var(--tc-stone));
  border: 2px solid; border-color: var(--tc-hi) var(--tc-lo) var(--tc-lo) var(--tc-hi);
  box-shadow: 0 0 0 1px #000;
}
#hud[data-hud-style="clasico"] .boss-bar b { color: #ff6b5a; }
#hud[data-hud-style="clasico"] .bar-boss span { background: linear-gradient(180deg, #e24a4a, #a01818); }

/* Barra de hechizos: huecos cuadrados de hotkey sobre una tira de piedra */
#hud[data-hud-style="clasico"] .hud-spells {
  padding: 5px 8px; gap: 4px;
  background: linear-gradient(180deg, var(--tc-stone-2), var(--tc-stone));
  border: 2px solid; border-color: var(--tc-hi) var(--tc-lo) var(--tc-lo) var(--tc-hi);
  box-shadow: 0 0 0 1px #000, 0 -3px 8px rgba(0,0,0,0.5);
  font-family: var(--tc-font);
}
#hud[data-hud-style="clasico"] .spell-row { gap: 3px; }
#hud[data-hud-style="clasico"] .spell-row-label { font-family: var(--tc-font); font-size: 10px; text-transform: uppercase; color: #a8a8a8; }
#hud[data-hud-style="clasico"] .spell-chip {
  min-width: 3.4rem; min-height: 2rem; justify-content: center; align-items: center;
  border-radius: 0; background: #1e1e1e; font-family: var(--tc-font); font-size: 10px;
  border: 1px solid; border-color: var(--tc-lo) var(--tc-hi) var(--tc-hi) var(--tc-lo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el) 35%, transparent);
}
#hud[data-hud-style="clasico"] .spell-chip b { font-weight: 700; text-shadow: 1px 1px 0 #000; }
#hud[data-hud-style="clasico"] .spell-chip .spell-fill { height: 2px; }
#hud[data-hud-style="clasico"] .spell-chip.is-empty { border-style: solid; background: #2a2a2a; }
#hud[data-hud-style="clasico"] .manual-slot { border-radius: 0; }

/* =====================================================================
   MINIMALISTA — sin paneles, barras finas y todo más discreto
   ===================================================================== */
#hud[data-hud-style="minimal"] .hud-top { max-width: 30rem; gap: 4px; }
#hud[data-hud-style="minimal"] .bars { gap: 2px; min-width: 10rem; }
#hud[data-hud-style="minimal"] .bar { height: 6px; border: 0; border-radius: 3px; background: rgba(0,0,0,0.45); }
#hud[data-hud-style="minimal"] .bar-xp { height: 3px; }
#hud[data-hud-style="minimal"] .bar span { border-radius: 3px; }
#hud[data-hud-style="minimal"] .bar em { display: none; }
#hud[data-hud-style="minimal"] .hud-info { font-size: 0.8rem; gap: var(--space-2); opacity: 0.85; }
#hud[data-hud-style="minimal"] .boss-bar { font-size: 0.85rem; }
#hud[data-hud-style="minimal"] .bar-boss { height: 5px; }
#hud[data-hud-style="minimal"] .hud-spells { gap: 2px; opacity: 0.9; }
#hud[data-hud-style="minimal"] .spell-row-label { display: none; }
#hud[data-hud-style="minimal"] .spell-row { gap: 3px; }
#hud[data-hud-style="minimal"] .spell-chip { padding: 0.1rem 0.35rem; font-size: 0.65rem; background: rgba(0,0,0,0.35); border-color: transparent; }
#hud[data-hud-style="minimal"] .spell-chip small { display: none; }
#hud[data-hud-style="minimal"] .spell-chip.is-empty,
#hud[data-hud-style="minimal"] .spell-chip.is-locked { display: none; }

/* =====================================================================
   TIBIA FIGHT TACTICS — maqueta propia (hudTacticsView en js/views/game.js)
   Reutiliza piezas del modo Tactics: .tac-panel, .tac-round, .tac-progress/.tac-dot,
   .tac-hp-bar, .tac-lvl, .tac-hex, .tac-xp, .tac-goldbox. Aquí sólo se colocan y se añaden las cartas.
   ===================================================================== */
#hud[data-hud-style="tactics"] { padding-top: 76px; }

/* Panel superior izquierdo: zona, progreso de bosses y datos de la partida */
#hud[data-hud-style="tactics"] .thud-top { top: 8px; left: 8px; width: min(40rem, calc(100% - 17rem)); display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0.8rem; min-height: 58px; }
.thud-stats { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.9rem; }
.thud-stats > span { white-space: nowrap; }
.thud-stats .is-full { color: var(--danger); }
.thud-time { color: #fff; font-weight: 700; font-size: 1rem; background: #142340; border: 2px solid #4a6aa8; border-radius: 8px; padding: 0.05rem 0.6rem; }

/* Panel superior derecho: vida, como el del modo Tactics (deja sitio al botón de pausa) */
#hud[data-hud-style="tactics"] .thud-hp { top: 8px; right: 3.6rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; }
.thud-hp .tac-hp-bar { width: 140px; height: 10px; }
.thud-hp b { font-size: 1.05rem; white-space: nowrap; }
.thud-hp small { color: var(--muted); font-size: 0.75rem; }

/* Boss: panel rojo con relieve, como el botón ¡Combatir! */
.thud-boss { width: min(26rem, 70%); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.3rem 0.9rem 0.5rem; border-radius: 10px; border: 2px solid #ff9a8a; background: linear-gradient(180deg, rgba(90, 26, 20, 0.95), rgba(42, 12, 9, 0.95)); box-shadow: 0 4px 0 #6d140e, 0 6px 14px #0008; }
.thud-boss b { color: #fff; font-size: 1.1rem; text-shadow: 0 2px 2px #0008; }
.thud-boss .tac-hp-bar { width: 100%; height: 10px; }
.thud-boss .tac-hp-bar i { background: linear-gradient(90deg, #a8231a, #e8483b); }

/* Panel inferior: nivel en hexágono + oro a la izquierda, cartas de magias y runas a la derecha */
#hud[data-hud-style="tactics"] .thud-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); width: min(1000px, calc(100% - 16px)); display: grid; grid-template-columns: 12.5rem 1fr; gap: 0.6rem; padding: 0.55rem; background: linear-gradient(180deg, rgba(34, 27, 19, 0.97), rgba(18, 14, 10, 0.97)); }
#ui:has(.modal.is-levelup) #hud[data-hud-style="tactics"] .thud-bottom { z-index: 10; }
.thud-left { display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; }
.thud-gold { justify-content: center; font-size: 1.15rem; }
.thud-right { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; justify-content: center; }
.thud-row { display: flex; gap: 0.35rem; align-items: center; flex-wrap: nowrap; min-width: 0; }
.thud-row-label { flex: none; min-width: 3.4rem; color: var(--gold); font-size: 0.8rem; }
.thud-row.is-runes .thud-row-label { color: #c89bff; }

/* Cartas: borde y brillo del color del elemento; la sombra baja según se recarga */
.thud-card { --el: #6b5a3a; position: relative; flex: 0 1 5.9rem; min-width: 3.4rem; height: 3.7rem; border-radius: 8px; border: 2px solid var(--el); overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--el) 24%, #2e271e), #15110c 75%); }
.thud-card.is-ready { box-shadow: 0 0 10px color-mix(in srgb, var(--el) 70%, transparent); }
.thud-cd { position: absolute; inset: 0 0 auto 0; height: calc((1 - var(--ready)) * 100%); background: rgba(0, 0, 0, 0.6); z-index: 1; }
.thud-card-art { position: absolute; inset: 0 0 18px 0; display: grid; place-items: center; text-align: center; padding: 0 3px; }
.thud-card-art b { font-size: 0.82rem; line-height: 1; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px var(--el); }
.thud-card-art .rune-icon { width: 28px; height: 28px; image-rendering: pixelated; }
.thud-card-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 0.3rem; background: rgba(0, 0, 0, 0.66); border-top: 1px solid color-mix(in srgb, var(--el) 50%, transparent); z-index: 2; }
.thud-card-foot small { font-size: 0.62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.thud-card-foot i { font-style: normal; font-size: 0.62rem; color: #ffd34d; text-shadow: 0 0 2px #7a4a00, 0 0 5px #ffd34d; }
.thud-card.is-empty { border: 2px dashed #3a3127; background: none; }
.thud-card.is-empty b { color: var(--muted); font-weight: 400; text-shadow: none; }
.thud-card.is-locked { --el: #3a3127; background: #15110c; opacity: 0.7; }
.thud-card.is-locked b { text-shadow: none; }

/* Pantallas estrechas: paneles apilados y cartas más pequeñas */
@media (max-width: 44rem) {
  #hud[data-hud-style="tactics"] { padding-top: 132px; }
  #hud[data-hud-style="tactics"] .thud-top { top: 62px; right: 8px; width: auto; flex-wrap: wrap; gap: 0.4rem; }
  #hud[data-hud-style="tactics"] .thud-hp { left: 8px; }
  .thud-hp .tac-hp-bar { flex: 1; width: auto; }
  #hud[data-hud-style="tactics"] .thud-bottom { grid-template-columns: 1fr; }
  .thud-left { flex-direction: row; align-items: center; }
  .thud-left .tac-lvl { flex: 1; }
  .thud-row-label { display: none; }
  .thud-card { min-width: 2.9rem; height: 3.3rem; }
}