/* TACTICAL VECTOR // GRID COLLAPSE PROTOCOL
   Phosphor UI Foundation — MATTE STROKES, 2px BORDERS, NO ANTI-ALIASING */

/* ── CSS Custom Properties ───────────────────────────────── */
:root {
   --phosphor: #00ff41;
   --phosphor-dim: #008f24;
   --amber: #ffb000;
   --amber-dim: #8a5f00;
   --rust: #b7410e;
   --bg: #0a0e07;
   --bg-panel: rgba(0, 255, 65, 0.02);
   --border-warn: 2px;
   --border-breach: 4px;
   --hud-margin: 12px;
   --font-stencil: 'Courier New', monospace;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-font-smoothing: none;
   -moz-osx-font-smoothing: unset;
   text-rendering: optimizeSpeed;
   font-smooth: never;
}

html, body {
   background: var(--bg);
   color: var(--phosphor);
   font-family: var(--font-stencil);
   overflow: hidden;
   height: 100vh;
   width: 100vw;
}

/* ── Terminal Container ──────────────────────────────────── */
#terminal {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

/* ── HUD Frame (12px margin) ───────────────────────────── */
#hud-frame {
   flex: 1;
   margin: var(--hud-margin);
   display: grid;
   grid-template-rows: auto auto 1fr auto auto auto auto;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   border: var(--border-warn) solid var(--phosphor-dim);
   padding: 8px;
   transition: border-color 0.1s step-end;
}

/* Breach state: 4px thick border, amber bleed */
#hud-frame.breach {
   border-width: var(--border-breach) !important;
   border-color: var(--amber) !important;
}

#hud-frame.critical {
   border-color: var(--rust) !important;
}

/* ── Status Bar ─────────────────────────────────────────── */
#status-bar {
   grid-column: 1 / -1;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 6px;
   border-bottom: 1px solid var(--phosphor-dim);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

/* ── Panel Labels ───────────────────────────────────────── */
.panel-label {
   font-size: 9px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--phosphor-dim);
   margin-bottom: 4px;
}

/* ── Integrity Panel ─────────────────────────────────────── */
#integrity-panel {
   grid-column: 1 / 2;
}

#integrity-track {
   width: 100%;
   height: 16px;
   background: rgba(0, 255, 65, 0.05);
   border: 1px solid var(--phosphor-dim);
   position: relative;
   overflow: hidden;
}

#integrity-fill {
   height: 100%;
   width: 100%;
   background: var(--phosphor);
   transition: width 0.08s step-end;
   /* Crisp white flash with 1px phosphor rim on impact */
   box-shadow: inset 0 0 1px var(--phosphor), inset 0 0 0 1px rgba(255,255,255,0.8);
}

#integrity-value {
   font-size: 14px;
   font-weight: bold;
   margin-top: 4px;
   text-align: right;
   letter-spacing: 0.08em;
}

#integrity-panel.degraded #integrity-fill {
   background: var(--amber);
}

#integrity-panel.critical #integrity-fill {
   background: var(--rust);
}

/* ── Ammo Panel ─────────────────────────────────────────── */
#ammo-panel {
   grid-column: 2 / 3;
}

#ammo-track {
   width: 100%;
   height: 12px;
   background: rgba(0, 255, 65, 0.05);
   border: 1px solid var(--phosphor-dim);
   overflow: hidden;
}

#ammo-fill {
   height: 100%;
   width: 100%;
   background: var(--phosphor);
   transition: width 0.05s step-end;
}

#ammo-value {
   font-size: 12px;
   font-weight: bold;
   margin-top: 4px;
   text-align: right;
   letter-spacing: 0.08em;
}

/* ── Threat Grid ─────────────────────────────────────────── */
#threat-grid {
   grid-column: 1 / -1;
   border: var(--border-warn) solid var(--phosphor-dim);
   background:
    repeating-linear-gradient(
      0deg,
     transparent,
     transparent 3px,
     rgba(0, 255, 65, 0.015) 3px,
     rgba(0, 255, 65, 0.015) 6px
    ),
    repeating-linear-gradient(
      90deg,
     transparent,
     transparent 3px,
     rgba(0, 255, 65, 0.015) 3px,
     rgba(0, 255, 65, 0.015) 6px
    );
   position: relative;
   overflow: hidden;
   cursor: crosshair;
   transition: border-color 0.1s step-end;
}

#threat-grid.breach-warning {
   border-color: var(--amber);
}

/* Individual threat marker */
.threat-marker {
   position: absolute;
   width: 28px;
   height: 28px;
   border: 2px solid var(--amber);
   background: rgba(255, 176, 0, 0.1);
   cursor: crosshair;
   image-rendering: pixelated;
   z-index: 3;
   animation: threat-pulse 0.6s step-start infinite;
}

.threat-marker:hover {
   border-color: var(--phosphor);
   background: rgba(0, 255, 65, 0.15);
}

.threat-marker.engaged {
   border-color: #fff;
   background: rgba(255, 255, 255, 0.5);
   animation: none;
   box-shadow: 0 0 1px var(--phosphor), 0 0 0 1px #fff;
}

.threat-marker.breached {
   border-color: var(--rust);
   background: rgba(183, 65, 14, 0.3);
   animation: none;
}

@keyframes threat-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.6; }
}

/* ── Casualties Panel ───────────────────────────────────── */
#casualties-panel {
   grid-column: 1 / 2;
}

#casualties-display {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

#casualties-count {
   color: var(--amber);
   transition: opacity 0.15s step-end;
}

#casualties-count.stagger-fade {
   animation: stagger-fade 0.3s step-end;
}

@keyframes stagger-fade {
   0% { opacity: 1; transform: translateY(0); }
   50% { opacity: 0.3; transform: translateY(-2px); }
   100% { opacity: 1; transform: translateY(0); }
}

#breach-log {
   margin-top: 6px;
   max-height: 60px;
   overflow-y: hidden;
   font-size: 9px;
   color: var(--phosphor-dim);
   letter-spacing: 0.06em;
}

.breach-entry {
   padding: 2px 0;
   border-bottom: 1px solid rgba(0, 255, 65, 0.08);
   animation: breach-appear 0.2s step-end;
}

@keyframes breach-appear {
   0% { opacity: 0; color: #fff; }
   100% { opacity: 1; color: var(--phosphor-dim); }
}

/* ── Fatigue Panel ───────────────────────────────────────── */
#fatigue-panel {
   grid-column: 2 / 3;
}

#fatigue-track {
   width: 100%;
   height: 12px;
   background: rgba(0, 255, 65, 0.05);
   border: 1px solid var(--phosphor-dim);
   overflow: hidden;
}

#fatigue-fill {
   height: 100%;
   width: 0%;
   background: var(--phosphor-dim);
   transition: width 0.06s step-end, background 0.1s step-end;
}

#fatigue-fill.warning {
   background: var(--amber);
}

#fatigue-fill.critical {
   background: var(--rust);
}

#fatigue-value {
   font-size: 12px;
   font-weight: bold;
   margin-top: 4px;
   text-align: right;
   letter-spacing: 0.08em;
}

/* ── Bottom Bar ─────────────────────────────────────────── */
#bottom-bar {
   grid-column: 1 / -1;
   display: flex;
   justify-content: space-between;
   padding-top: 6px;
   border-top: 1px solid var(--phosphor-dim);
   font-size: 9px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--phosphor-dim);
}

#action-prompt {
   color: var(--phosphor);
   animation: prompt-blink 1.2s step-end infinite;
}

@keyframes prompt-blink {
   0%, 66% { opacity: 1; }
   67%, 100% { opacity: 0.3; }
}

/* ── Collapse Overlay (hard cut to black) ───────────────── */
#collapse-overlay {
   position: absolute;
   inset: 0;
   background: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
   cursor: pointer;
}

#collapse-msg {
   font-size: 18px;
   font-weight: 900;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--phosphor);
   animation: hard-cut-in 0.05s step-end;
}

@keyframes hard-cut-in {
   0% { opacity: 0; }
   100% { opacity: 1; }
}

/* ── Scanline artifacts (appear on 3rd breach) ──────────── */
#terminal.scanline-mode::before {
   content: '';
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(255, 176, 0, 0.08) 1px,
    rgba(255, 176, 0, 0.08) 3px
   );
   pointer-events: none;
   z-index: 50;
   animation: scanline-drift 0.4s step-start infinite;
}

@keyframes scanline-drift {
   0% { transform: translateY(0); }
   100% { transform: translateY(3px); }
}

/* ── Phosphor sweep (lock green then bleed amber) ───────── */
#terminal phosphor-lock {
   --phosphor: #00ff41;
}

#terminal.phosphor-bleed {
   --phosphor: var(--amber);
   --phosphor-dim: var(--amber-dim);
}

/* ── Flash effect on impact ─────────────────────────────── */
#terminal .impact-flash {
   animation: flash-impact 0.08s step-end;
}

@keyframes flash-impact {
   0% { filter: brightness(1); }
   50% { filter: brightness(3); }
   100% { filter: brightness(1); }
}

/* ── No rounded corners, hard edges only ─────────────────── */
/* Explicit override: zero border-radius globally */
* {
   border-radius: 0 !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 500px) {
   #hud-frame {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto auto 1fr auto auto auto;
     gap: 4px;
   }
   #casualties-panel, #fatigue-panel {
     grid-column: 1;
   }
   #ammo-panel {
     grid-column: 1;
   }
}