/*
 * HACKERS THEME — a reusable 1995 cyberspace / data-city visual theme.
 *
 * Inspired by the translucent data towers, circuit-board floors, and
 * glowing terminal interfaces of early-90s cyberpunk cinema — the feeling
 * of flying through a neon metropolis made of pure information.
 *
 * Usage:
 *   <link rel="stylesheet" href="hackers-theme.css">
 *   <canvas id="hk-canvas"></canvas>         <!-- optional: data city -->
 *   <script src="data-city.js"></script>     <!-- optional: powers canvas -->
 *
 * Then use the CSS classes and variables documented below.
 * All prefixed with `hk-` to avoid collisions.
 *
 * Everything is namespaced under :root variables so you can override
 * colors without touching this file.
 */

/* ═══════════════════════════════════════════════════════════════
   FONTS — self-hosted, no external dependencies
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/orbitron-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/share-tech-mono-latin.woff2) format('woff2');
}


/* ═══════════════════════════════════════════════════════════════
   COLOR PALETTE — override any of these in your own stylesheet
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary cyan (the data-tower glow) ───────────────────── */
  --hk-cyan:            #00D4FF;
  --hk-cyan-bright:     #66E8FF;
  --hk-cyan-dim:        #0098BB;
  --hk-cyan-dark:       #002840;

  /* ── Purple (circuit traces, ambient light) ───────────────── */
  --hk-purple:          #9B6DFF;
  --hk-purple-dim:      #6B40CC;

  /* ── Orange (data blocks, warm highlights) ────────────────── */
  --hk-orange:          #FF7B00;
  --hk-orange-dim:      #CC6200;

  /* ── Green (terminal text, success) ───────────────────────── */
  --hk-green:           #00FF88;
  --hk-green-dim:       #00BB66;

  /* ── Backgrounds ───────────────────────────────────────────── */
  --hk-bg:              #000810;
  --hk-bg-2:            #001020;
  --hk-bg-3:            #001830;
  --hk-panel:           #000C18;
  --hk-panel-tint:      rgba(0, 212, 255, 0.04);

  /* ── Borders ───────────────────────────────────────────────── */
  --hk-border:          rgba(0, 212, 255, 0.2);
  --hk-border-bright:   rgba(0, 212, 255, 0.5);
  --hk-border-purple:   rgba(155, 109, 255, 0.3);

  /* ── Text ──────────────────────────────────────────────────── */
  --hk-text:            #B0D8F0;
  --hk-text-dim:        #4A7090;

  /* ── Semantic (override per-app) ───────────────────────────── */
  --hk-success:         #00FF88;
  --hk-danger:          #FF3333;
  --hk-warning:         #FF9900;
  --hk-info:            #00D4FF;
  --hk-muted:           #556688;

  /* ── Typography ────────────────────────────────────────────── */
  --hk-font-display:    'Orbitron', sans-serif;
  --hk-font-mono:       'Share Tech Mono', monospace;

  /* ── Effects ───────────────────────────────────────────────── */
  --hk-glow-cyan:       0 0 15px rgba(0, 212, 255, 0.6), 0 0 40px rgba(0, 212, 255, 0.15);
  --hk-glow-purple:     0 0 15px rgba(155, 109, 255, 0.6), 0 0 40px rgba(155, 109, 255, 0.15);
  --hk-glow-orange:     0 0 15px rgba(255, 123, 0, 0.6), 0 0 40px rgba(255, 123, 0, 0.15);
  --hk-glow-green:      0 0 15px rgba(0, 255, 136, 0.6), 0 0 40px rgba(0, 255, 136, 0.15);
  --hk-scanline-opacity: 0.06;
  --hk-city-opacity:    0.50;
}


/* ═══════════════════════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════════════════════ */

.hk-reset *,
.hk-reset *::before,
.hk-reset *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hk-base {
  background: var(--hk-bg);
  color: var(--hk-text);
  font-family: var(--hk-font-mono);
  min-height: 100vh;
  overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   DATA CITY CANVAS
   Apply to a <canvas id="hk-canvas"> behind your content.
   ═══════════════════════════════════════════════════════════════ */

.hk-city-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: var(--hk-city-opacity);
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SCANLINE OVERLAY
   Add class="hk-scanlines" to <body> or a wrapper element.
   ═══════════════════════════════════════════════════════════════ */

.hk-scanlines::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--hk-scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--hk-scanline-opacity)) 4px
  );
  pointer-events: none;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   CONTENT CONTAINER
   ═══════════════════════════════════════════════════════════════ */

.hk-app {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px 40px;
}


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.hk-display {
  font-family: var(--hk-font-display);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--hk-cyan);
}

.hk-title {
  font-family: var(--hk-font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--hk-cyan);
  text-shadow: var(--hk-glow-cyan);
  letter-spacing: 4px;
  line-height: 1;
}

.hk-title .hk-accent  { color: var(--hk-purple); text-shadow: var(--hk-glow-purple); }
.hk-title .hk-orange   { color: var(--hk-orange); text-shadow: var(--hk-glow-orange); }
.hk-title .hk-green    { color: var(--hk-green);  text-shadow: var(--hk-glow-green); }

.hk-subtitle {
  font-size: 10px;
  color: var(--hk-cyan-dim);
  letter-spacing: 6px;
  text-transform: uppercase;
}

.hk-heading {
  font-family: var(--hk-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--hk-cyan);
}

.hk-dim { color: var(--hk-text-dim); }


/* ═══════════════════════════════════════════════════════════════
   PANELS + CARDS
   Multi-color top glow + circuit node accent for data-city feel.
   ═══════════════════════════════════════════════════════════════ */

.hk-panel {
  background: var(--hk-panel);
  border: 1px solid var(--hk-border);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.hk-panel:hover {
  border-color: var(--hk-border-bright);
}

/* Multi-color data-stream glow on top edge */
.hk-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hk-cyan), var(--hk-purple), var(--hk-orange), transparent);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}

.hk-panel:hover::before,
.hk-panel.hk-active::before { opacity: 1; }

/* Circuit node dot — bottom-right corner */
.hk-panel::after {
  content: '';
  position: absolute;
  bottom: 5px; right: 5px;
  width: 4px; height: 4px;
  background: var(--hk-purple);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 0 8px var(--hk-purple);
  z-index: 1;
}

.hk-panel:hover::after,
.hk-panel.hk-active::after { opacity: 0.6; }

/* Red / alert variant */
.hk-panel.hk-red {
  border-color: rgba(255, 51, 51, 0.3);
}

.hk-panel.hk-red::before {
  background: linear-gradient(90deg, transparent, var(--hk-danger), var(--hk-orange), var(--hk-danger), transparent);
}

.hk-panel.hk-red::after {
  background: var(--hk-danger);
  box-shadow: 0 0 8px var(--hk-danger);
}

.hk-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(0, 212, 255, 0.04);
  border-bottom: 1px solid var(--hk-border);
  flex-wrap: wrap;
  gap: 8px;
}

.hk-panel-body {
  padding: 16px;
}

/* Glass-effect panel (frosted overlay) */
.hk-glass {
  background: rgba(0, 12, 24, 0.88);
  backdrop-filter: blur(3px);
  border: 1px solid var(--hk-border);
}


/* ═══════════════════════════════════════════════════════════════
   DATA TOWERS — vertical glowing data-column elements
   Inspired by the translucent data skyscrapers of the Gibson.
   ═══════════════════════════════════════════════════════════════ */

.hk-tower {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 48px;
  height: 80px;
  border: 1px solid var(--hk-cyan);
  border-radius: 2px;
  background: rgba(0, 212, 255, 0.06);
  position: relative;
  overflow: hidden;
  box-shadow: var(--hk-glow-cyan), inset 0 0 20px rgba(0, 212, 255, 0.06);
}

/* Scrolling data lines inside the tower */
.hk-tower::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(0, 212, 255, 0.12) 1px,
    transparent 2px,
    transparent 6px
  );
  animation: hk-data-scroll 3s linear infinite;
}

/* Top cap glow */
.hk-tower::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hk-cyan);
  box-shadow: 0 0 10px var(--hk-cyan), 0 2px 20px rgba(0, 212, 255, 0.3);
}

.hk-tower.hk-orange {
  border-color: var(--hk-orange);
  background: rgba(255, 123, 0, 0.06);
  box-shadow: var(--hk-glow-orange), inset 0 0 20px rgba(255, 123, 0, 0.06);
}

.hk-tower.hk-orange::before {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(255, 123, 0, 0.12) 1px,
    transparent 2px,
    transparent 6px
  );
}

.hk-tower.hk-orange::after {
  background: var(--hk-orange);
  box-shadow: 0 0 10px var(--hk-orange), 0 2px 20px rgba(255, 123, 0, 0.3);
}

.hk-tower.hk-purple {
  border-color: var(--hk-purple);
  background: rgba(155, 109, 255, 0.06);
  box-shadow: var(--hk-glow-purple), inset 0 0 20px rgba(155, 109, 255, 0.06);
}

.hk-tower.hk-purple::before {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(155, 109, 255, 0.12) 1px,
    transparent 2px,
    transparent 6px
  );
}

.hk-tower.hk-purple::after {
  background: var(--hk-purple);
  box-shadow: 0 0 10px var(--hk-purple), 0 2px 20px rgba(155, 109, 255, 0.3);
}

.hk-tower-label {
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 4px currentColor;
  padding: 4px 0;
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   TERMINAL — retro hacker terminal window
   ═══════════════════════════════════════════════════════════════ */

.hk-terminal {
  background: #020810;
  border: 2px solid #1a2a40;
  border-radius: 3px;
  padding: 16px;
  font-family: var(--hk-font-mono);
  font-size: 13px;
  color: var(--hk-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
  line-height: 1.6;
  position: relative;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* CRT curvature vignette */
.hk-terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

/* Green phosphor variant */
.hk-terminal.hk-green-screen {
  color: var(--hk-green);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Blinking block cursor */
.hk-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--hk-cyan);
  animation: hk-cursor-blink 1s step-end infinite;
  vertical-align: text-bottom;
}

.hk-green-screen .hk-cursor {
  background: var(--hk-green);
}


/* ═══════════════════════════════════════════════════════════════
   SIGNAL BARS — phreaking signal-strength indicator
   ═══════════════════════════════════════════════════════════════ */

.hk-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
}

.hk-bar {
  width: 5px;
  background: var(--hk-cyan);
  border-radius: 1px 1px 0 0;
  box-shadow: 0 0 4px rgba(0, 212, 255, 0.5);
  transition: opacity 0.3s;
}

.hk-bar:nth-child(1) { height: 20%; }
.hk-bar:nth-child(2) { height: 40%; }
.hk-bar:nth-child(3) { height: 60%; }
.hk-bar:nth-child(4) { height: 80%; }
.hk-bar:nth-child(5) { height: 100%; }

.hk-signal.hk-weak .hk-bar:nth-child(n+3) { opacity: 0.12; }
.hk-signal.hk-medium .hk-bar:nth-child(n+4) { opacity: 0.12; }

.hk-signal.hk-orange .hk-bar { background: var(--hk-orange); box-shadow: 0 0 4px rgba(255, 123, 0, 0.5); }
.hk-signal.hk-green .hk-bar  { background: var(--hk-green);  box-shadow: 0 0 4px rgba(0, 255, 136, 0.5); }
.hk-signal.hk-purple .hk-bar { background: var(--hk-purple); box-shadow: 0 0 4px rgba(155, 109, 255, 0.5); }


/* ═══════════════════════════════════════════════════════════════
   BADGES + CHIPS
   Chip-notch shape — like an IC orientation mark.
   ═══════════════════════════════════════════════════════════════ */

.hk-badge {
  font-family: var(--hk-font-display);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 12px;
  letter-spacing: 1px;
  display: inline-block;
  /* Chip notch — top-right and bottom-left corners clipped */
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.hk-badge-cyan   { background: var(--hk-cyan);   color: #000; }
.hk-badge-purple { background: var(--hk-purple); color: #000; }
.hk-badge-orange { background: var(--hk-orange); color: #000; }
.hk-badge-green  { background: var(--hk-green);  color: #000; }
.hk-badge-red    { background: var(--hk-danger); color: #fff; }

.hk-badge-lg {
  font-size: 11px;
  padding: 4px 16px;
  letter-spacing: 2px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.hk-chip {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--hk-text-dim);
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.15);
  padding: 2px 8px;
  display: inline-block;
}

.hk-chip.hk-purple {
  color: var(--hk-purple-dim);
  border-color: rgba(155, 109, 255, 0.15);
}

.hk-chip.hk-orange {
  color: var(--hk-orange-dim);
  border-color: rgba(255, 123, 0, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

.hk-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--hk-border);
  flex-wrap: wrap;
}

.hk-tab {
  font-family: var(--hk-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
  color: var(--hk-text-dim);
  background: transparent;
  position: relative;
  bottom: -1px;
  /* Notched top-right corner — data-block angular */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.hk-tab:hover {
  color: var(--hk-cyan);
  border-color: var(--hk-border);
  background: var(--hk-panel-tint);
}

.hk-tab.hk-active {
  color: #000;
  background: var(--hk-cyan);
  border-color: var(--hk-cyan);
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.hk-btn {
  display: inline-block;
  font-family: var(--hk-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--hk-border);
  background: transparent;
  color: var(--hk-text-dim);
}

.hk-btn:hover {
  color: var(--hk-cyan);
  background: var(--hk-panel-tint);
  border-color: var(--hk-border-bright);
  box-shadow: var(--hk-glow-cyan);
}

.hk-btn.hk-primary {
  background: var(--hk-cyan);
  color: #000;
  border-color: var(--hk-cyan);
}

.hk-btn.hk-primary:hover {
  background: var(--hk-cyan-bright);
  box-shadow: var(--hk-glow-cyan);
}

.hk-btn.hk-danger {
  border-color: rgba(255, 51, 51, 0.3);
  color: rgba(255, 51, 51, 0.6);
}

.hk-btn.hk-danger:hover {
  color: var(--hk-danger);
  background: rgba(255, 51, 51, 0.08);
  border-color: var(--hk-danger);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.6), 0 0 40px rgba(255, 51, 51, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */

.hk-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.08), transparent);
  border-left: 3px solid var(--hk-cyan);
}

/* Purple variant */
.hk-section-header.hk-purple {
  background: linear-gradient(90deg, rgba(155, 109, 255, 0.08), transparent);
  border-left-color: var(--hk-purple);
}

/* Section title with trailing line */
.hk-section-title {
  font-family: var(--hk-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--hk-cyan-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hk-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hk-border);
}


/* ═══════════════════════════════════════════════════════════════
   DATA FIELDS
   ═══════════════════════════════════════════════════════════════ */

.hk-field {
  background: rgba(0, 212, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.1);
  padding: 8px 10px;
}

.hk-field-label {
  font-size: 10px;
  color: var(--hk-text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}

.hk-field-value {
  font-size: 12px;
  color: var(--hk-text);
  font-weight: 600;
}

.hk-field-value.hk-cyan {
  color: var(--hk-cyan);
  font-family: var(--hk-font-display);
  font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════
   STAT BARS
   ═══════════════════════════════════════════════════════════════ */

.hk-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.hk-stat-label {
  font-size: 11px;
  color: var(--hk-text-dim);
  letter-spacing: 1px;
  width: 90px;
  flex-shrink: 0;
  text-align: right;
}

.hk-stat-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.hk-stat-fill {
  height: 100%;
  background: var(--hk-cyan);
  transition: width 0.5s ease;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
}

.hk-stat-fill.hk-purple { background: var(--hk-purple); box-shadow: 0 0 6px rgba(155, 109, 255, 0.4); }
.hk-stat-fill.hk-orange { background: var(--hk-orange); box-shadow: 0 0 6px rgba(255, 123, 0, 0.4); }
.hk-stat-fill.hk-green  { background: var(--hk-green);  box-shadow: 0 0 6px rgba(0, 255, 136, 0.4); }

.hk-stat-value {
  font-family: var(--hk-font-display);
  font-size: 9px;
  color: var(--hk-cyan);
  width: 50px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.hk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.hk-table th {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--hk-text-dim);
  text-transform: uppercase;
  padding: 5px 6px;
  text-align: left;
  border-bottom: 1px solid var(--hk-border);
  font-weight: 400;
}

.hk-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.05);
  vertical-align: top;
  line-height: 1.4;
}

.hk-table tr:hover td {
  background: rgba(0, 212, 255, 0.03);
}


/* ═══════════════════════════════════════════════════════════════
   STATUS INDICATORS
   ═══════════════════════════════════════════════════════════════ */

.hk-status-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
  font-size: 10px;
  color: var(--hk-text-dim);
  letter-spacing: 2px;
  flex-wrap: wrap;
}

.hk-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hk-cyan);
  box-shadow: 0 0 8px var(--hk-cyan);
  animation: hk-blink 1.5s ease-in-out infinite;
}

.hk-status-dot.hk-purple { background: var(--hk-purple); box-shadow: 0 0 8px var(--hk-purple); }
.hk-status-dot.hk-orange { background: var(--hk-orange); box-shadow: 0 0 8px var(--hk-orange); }
.hk-status-dot.hk-green  { background: var(--hk-green);  box-shadow: 0 0 8px var(--hk-green); }
.hk-status-dot.hk-danger { background: var(--hk-danger); box-shadow: 0 0 8px var(--hk-danger); }


/* ═══════════════════════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════════════════════ */

.hk-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hk-cyan), var(--hk-purple), var(--hk-cyan), transparent);
  margin: 20px 0;
}

.hk-divider-dim {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hk-cyan-dim), transparent);
  margin: 20px 0;
  opacity: 0.3;
}

/* Purple variant */
.hk-divider.hk-purple {
  background: linear-gradient(90deg, transparent, var(--hk-purple), var(--hk-orange), var(--hk-purple), transparent);
}

/* Circuit trace divider — PCB-style with node endpoints */
.hk-divider-trace {
  height: 1px;
  background: var(--hk-border-purple);
  margin: 20px 0;
  position: relative;
}

.hk-divider-trace::before,
.hk-divider-trace::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--hk-purple);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--hk-purple);
}

.hk-divider-trace::before { left: 0; }
.hk-divider-trace::after  { right: 0; }


/* ═══════════════════════════════════════════════════════════════
   COUNTDOWN / NUMERIC DISPLAYS
   ═══════════════════════════════════════════════════════════════ */

.hk-countdown {
  display: flex;
  gap: 8px;
}

.hk-cd-unit {
  text-align: center;
  background: var(--hk-panel-tint);
  border: 1px solid var(--hk-border);
  padding: 6px 12px;
  position: relative;
}

/* Circuit node accent in corner */
.hk-cd-unit::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 3px; height: 3px;
  background: var(--hk-purple);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--hk-purple);
}

.hk-cd-num {
  font-family: var(--hk-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hk-cyan);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  display: block;
  line-height: 1;
}

.hk-cd-label {
  font-size: 7px;
  color: var(--hk-text-dim);
  letter-spacing: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */

.hk-base::-webkit-scrollbar,
.hk-scrollbar::-webkit-scrollbar { width: 6px; }

.hk-base::-webkit-scrollbar-track,
.hk-scrollbar::-webkit-scrollbar-track { background: var(--hk-bg); }

.hk-base::-webkit-scrollbar-thumb,
.hk-scrollbar::-webkit-scrollbar-thumb { background: var(--hk-cyan-dim); }

.hk-base::-webkit-scrollbar-thumb:hover,
.hk-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--hk-cyan); }


/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes hk-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

@keyframes hk-pulse {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}

/* "Hack" glitch — data corruption / signal intercept */
@keyframes hk-hack {
  0%, 85%, 100% { transform: translate(0); filter: none; }
  87%  { transform: translate(-2px, 1px) skewX(1deg); filter: hue-rotate(40deg) brightness(1.5); }
  89%  { transform: translate(1px, -1px); filter: hue-rotate(-30deg); }
  91%  { transform: translate(-1px, 0) skewX(-0.5deg); filter: hue-rotate(60deg) brightness(1.8); }
  93%  { transform: translate(2px, 1px); filter: hue-rotate(-40deg) brightness(1.3); }
  95%  { transform: translate(0); filter: none; }
}

/* Data scrolling upward (for tower internals) */
@keyframes hk-data-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 -60px; }
}

/* Cursor blink */
@keyframes hk-cursor-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes hk-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hk-hack     { animation: hk-hack 8s ease-in-out infinite; }
.hk-pulse    { animation: hk-pulse 4s linear infinite; }
.hk-slide-in { animation: hk-slide-down 0.2s ease; }
.hk-fade-in  { animation: hk-fade-in 0.4s ease; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hk-title { font-size: 20px; }
  .hk-heading { font-size: 11px; letter-spacing: 2px; }
}