/* ============================================================
   HORDA :: Estilos de Interfaz In-Game (HUD, Tienda, Overlays)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --bg-0: #070809;
  --bg-1: #0d0f12;
  --bg-2: #14171c;
  --panel: #16191f;
  --panel-edge: #262b33;
  
  --ink: #e7ebf0;
  --ink-dim: #9aa3ad;
  --ink-faint: #5d646d;
  
  --amber: #ff8a1f;
  --amber-hot: #ffb454;
  --amber-deep: #c9560a;
  --danger: #ff3b2f;
  --cyan: #00d2ff;
  --neon-green: #00ffaa;

  --r-soldier: #9bb04a;
  --r-medic: #e8453c;
  --r-scientist: #48a7c8;
  --r-bomber: #8d8a86;

  --glow-amber: 0 0 18px rgba(255,138,31,.55), 0 0 48px rgba(255,138,31,.22);
  
  --font-display: 'Teko', sans-serif;
  --font-ui: 'Chakra Petch', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

body, html {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background-color: var(--bg-0); overflow: hidden;
    font-family: var(--font-ui); color: var(--ink);
    user-select: none;
}

/* ==========================================
   LIENZO DE JUEGO
   ========================================== */
#gameArea {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1; display: block;
}
#gameCanvas {
    display: block; width: 100%; height: 100%;
    cursor: crosshair;
}

/* ==========================================
   UTILIDAD DE MARCOS HUD (Desde intro.css)
   ========================================== */
.hud { position: relative; }
.hud::before, .hud::after, .hud > .corner-bl, .hud > .corner-br {
    content: ""; position: absolute; width: 12px; height: 12px; 
    border: 2px solid var(--amber); opacity: 0.7; pointer-events: none;
}
.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud::after { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corner-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ==========================================
   TELEMETRÍA SUPERIOR IZQUIERDA (Estadísticas)
   ========================================== */
#ui {
    position: absolute; top: 20px; left: 20px; z-index: 10;
    width: 280px; padding: 16px;
    background: linear-gradient(180deg, rgba(20,23,28,0.85), rgba(13,15,18,0.9));
    border: 1px solid var(--panel-edge); backdrop-filter: blur(4px);
    display: flex; flex-direction: column; gap: 8px;
}
#ui .hud-header {
    font-family: var(--font-display); font-size: 24px; font-weight: 600;
    color: var(--amber-hot); letter-spacing: 2px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,138,31,0.3); padding-bottom: 4px;
}
.hud-stat {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
}
.hud-stat .lbl { color: var(--ink-dim); text-transform: uppercase; }
.hud-stat .val { color: #fff; font-weight: bold; font-size: 15px; }
.hud-stat.hl-danger .val { color: var(--danger); }
.hud-stat.hl-safe .val { color: var(--neon-green); text-shadow: 0 0 10px rgba(0,255,170,0.5); }
.hud-stat.spec {
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--panel-edge);
}

/* ==========================================
   TERMINAL DE COMPRAS (Inferior Derecha)
   ========================================== */
#store {
    position: absolute; bottom: 20px; right: 20px; z-index: 10;
    width: 480px; /* <--- ANCHO EXPANDIDO PARA SOPORTAR LA CUADRÍCULA */
    padding: 18px;
    background: linear-gradient(180deg, rgba(20,23,28,0.85), rgba(13,15,18,0.9));
    border: 1px solid var(--panel-edge); backdrop-filter: blur(4px);
    display: flex; flex-direction: column; /* <--- ESTRUCTURA FORZADA */
}
#store .hud-header {
    font-family: var(--font-display); font-size: 26px; font-weight: 600;
    color: var(--cyan); text-shadow: 0 0 15px rgba(0,210,255,0.4);
    letter-spacing: 2px; margin-bottom: 14px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.3); padding-bottom: 4px;
}

.store-item {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; /* <--- SEPARACIÓN AMPLIADA */
    background: rgba(255,255,255,0.03); border: 1px solid var(--panel-edge);
    border-left: 3px solid var(--ink-faint); padding: 12px 16px; margin-bottom: 10px;
    transition: opacity 0.3s, border-color 0.3s;
}
.store-item[style*="opacity: 1"] { border-left-color: var(--cyan); }
.store-item[id="item-rebuild"][style*="display: block"] { border-left-color: var(--neon-green); background: rgba(0,255,170,0.05); }

.store-item .kbd {
    font-family: var(--font-mono); font-size: 14px; min-width: 28px; height: 28px;
    display: grid; place-items: center; color: var(--metal);
    background: linear-gradient(180deg,#23272e,#13161b);
    border: 1px solid #353b44; border-bottom: 3px solid #0a0c0f; border-radius: 4px;
}
.store-item .st-info h4 {
    margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; 
    letter-spacing: 1px; color: var(--ink); line-height: 1;
}
.store-item .st-info p {
    margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
}
.btn-buy {
    cursor: pointer; border: 0; background: linear-gradient(180deg, #2a2e35, #1e2229);
    color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 18px;
    padding: 6px 16px; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
    transition: filter 0.2s, color 0.2s;
}
.store-item[style*="opacity: 1"] .btn-buy {
    background: linear-gradient(180deg, var(--cyan), #0088aa); color: #000;
}
.store-item[id="item-rebuild"] .btn-buy {
    background: linear-gradient(180deg, var(--neon-green), #00aa66); color: #000;
}
.btn-buy:hover { filter: brightness(1.2); }
.btn-buy:active { transform: translateY(1px); }

/* ==========================================
   OVERLAYS DE TRANSICIÓN (Game Over / Victoria)
   ========================================== */
.overlay-screen {
    position: fixed; inset: 0; z-index: 9000; display: none;
    flex-direction: column; justify-content: center; align-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(13,15,18,0.9), #000);
    backdrop-filter: blur(6px);
}
.overlay-box {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--panel-edge); padding: 40px 60px;
    text-align: center; min-width: 400px;
}
.overlay-screen h1 {
    font-family: var(--font-display); font-size: 72px; letter-spacing: 6px;
    line-height: 1; margin: 0 0 10px;
}
.overlay-screen h2 {
    font-family: var(--font-mono); font-size: 20px; letter-spacing: 4px;
    color: var(--ink); margin: 0 0 30px;
}
.ov-stats {
    display: grid; gap: 14px; margin-bottom: 30px;
    background: rgba(0,0,0,0.4); border: 1px solid #1a1e24; padding: 20px;
}
.ov-stat { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed #222; padding-bottom: 8px;}
.ov-stat .k { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); letter-spacing: 1px; }
.ov-stat .v { font-family: var(--font-display); font-size: 28px; font-weight: bold; }

.ov-hint { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 2px; animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }