/* =================================================================
   STARKY'S BIG BUCK HUNTER  —  futuristic arcade HUD
   ================================================================= */

:root {
  --bg-deep:      #050807;
  --bg-1:         #0a1410;
  --bg-2:         #0e1d18;
  --line:         rgba(77, 255, 184, 0.18);
  --line-strong:  rgba(77, 255, 184, 0.40);
  --text:         #d8efe4;
  --text-dim:     #7a9a8c;
  --orange:       #ff5a1f;
  --orange-soft:  #ffb14d;
  --green:        #4dffb8;
  --green-deep:   #1e5c43;
  --cyan:         #5cf0ff;
  --danger:       #ff2a4a;
  --shadow-glow:  0 0 24px rgba(77, 255, 184, 0.25);
  --shadow-orange:0 0 24px rgba(255, 90, 31, 0.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-deep); }
body {
  font-family: 'Rajdhani', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse at top, rgba(30, 92, 67, 0.25), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 90, 31, 0.10), transparent 50%),
    var(--bg-deep);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
}
button, input, select, textarea { font-family: inherit; color: inherit; }

/* ----------- CRT FX ----------- */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.018) 0,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 998;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ----------- HUD TOP ----------- */
.hud-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background:
    linear-gradient(to bottom, rgba(5,8,7,0.96), rgba(5,8,7,0.78));
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-antler {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 90, 31, 0.7));
  flex-shrink: 0;
}
.brand-text { min-width: 0; line-height: 1.05; }
.brand-prefix {
  font-family: 'VT323', monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--orange);
  margin: 0 0 1px;
  text-shadow: 0 0 6px rgba(255,90,31,0.5);
}
.brand-text h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 4.4vw, 22px);
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--text);
  text-shadow: 0 0 12px rgba(77, 255, 184, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.locale {
  font-family: 'VT323', monospace;
  font-size: 12px;
  color: var(--green);
  letter-spacing: 0.18em;
  margin: 2px 0 0;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.net-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'VT323', monospace;
  font-size: 13px; letter-spacing: 0.1em;
  color: var(--green);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(77, 255, 184, 0.05);
}
.net-indicator .net-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse-dot 2.4s infinite;
}
.net-indicator.is-offline { color: var(--orange); border-color: rgba(255,90,31,0.4); background: rgba(255,90,31,0.08); }
.net-indicator.is-offline .net-dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.net-indicator.is-syncing .net-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation-duration: 0.8s; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.hunter-chip {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  font-family: 'VT323', monospace;
  font-size: 14px; line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(77, 255, 184, 0.05);
}
.hunter-chip-label { font-size: 9px; letter-spacing: 0.15em; color: var(--text-dim); }
.hunter-chip span:last-child { color: var(--text); }

/* ----------- TABS ----------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(5,8,7,0.92);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tab {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 10px 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 120ms ease;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
}
.tab:hover { color: var(--text); }
.tab-active {
  color: var(--green);
  border-color: var(--line-strong);
  background: linear-gradient(to bottom, rgba(77,255,184,0.10), rgba(77,255,184,0.02));
  box-shadow: var(--shadow-glow);
}
.tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  background: var(--orange);
  color: #1a0500;
  border-radius: 2px;
  font-family: 'VT323', monospace;
  font-size: 12px;
  font-weight: 700;
}

/* ----------- VIEWS ----------- */
.view { padding: 12px 12px 80px; max-width: 1200px; margin: 0 auto; }
.view-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.view-head h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  margin: 0;
  color: var(--text);
}
.view-sub { margin: 2px 0 0; color: var(--text-dim); font-size: 13px; }
.view-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.select-sm, .btn-sm {
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 13px;
}
.btn-sm { cursor: pointer; }

/* ----------- ARCADE STAGE (replaces map) ----------- */
.view-map { padding: 0; }
.arcade-stage {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 14px 32px;
  isolation: isolate;
  overflow: hidden;
}
.arcade-bg {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(255,90,31,0.16), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(77,255,184,0.10), transparent 60%),
    linear-gradient(180deg, #050807 0%, #060f0c 60%, #050807 100%);
}
.arcade-bg::before {
  /* horizontal scanlines specific to the arcade view */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(77,255,184,0.05) 0,
      rgba(77,255,184,0.05) 1px,
      transparent 1px,
      transparent 4px);
  pointer-events: none;
}
.arcade-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background:
    /* layered tree silhouettes in HUD green at the bottom horizon */
    linear-gradient(to top, rgba(77,255,184,0.12), transparent 70%);
  mask-image:
    linear-gradient(to top, black 0%, black 25%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(to top, black 0%, black 25%, transparent 100%);
}
.arcade-trees {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'><path fill='%23142a20' d='M0 60 L10 30 L18 42 L24 22 L32 38 L40 18 L48 34 L56 24 L64 12 L72 28 L80 18 L88 30 L96 14 L104 32 L112 22 L120 8 L128 26 L136 16 L144 30 L152 20 L160 34 L168 22 L176 12 L184 28 L192 18 L200 32 L208 22 L216 36 L224 26 L232 18 L240 30 L240 60 Z'/></svg>");
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.85;
}

/* ----------- ARCADE HUD HEADER ----------- */
.arcade-hud {
  position: relative;
  text-align: center;
  margin-bottom: 18px;
}
.arcade-hud-row {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.arcade-hud-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  border: 1px solid var(--line);
  background: rgba(5,8,7,0.55);
  border-radius: 3px;
  padding: 4px 12px;
  min-width: 76px;
}
.arcade-hud-label {
  font-family: 'VT323', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.arcade-hud-value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--green);
  text-shadow: 0 0 6px rgba(77,255,184,0.6);
  letter-spacing: 0.08em;
}
.arcade-title {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 6vw, 32px);
  letter-spacing: 0.18em;
  color: var(--orange);
  text-shadow:
    0 0 8px rgba(255,90,31,0.7),
    0 0 18px rgba(255,90,31,0.35);
}
.arcade-sub {
  margin: 6px 0 0;
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--green);
  opacity: 0.9;
  animation: blink-soft 2s infinite;
}
@keyframes blink-soft {
  0%, 70%, 100% { opacity: 0.9; }
  85% { opacity: 0.45; }
}

/* ----------- STAND CARD GRID ----------- */
.stands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .stands-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

.stand-card {
  position: relative;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(180deg, rgba(14,29,24,0.85), rgba(7,18,14,0.75));
  border: 1px solid rgba(77,255,184,0.30);
  border-radius: 5px;
  padding: 14px 12px 12px;
  color: var(--text);
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  overflow: hidden;
  /* subtle entrance stagger */
  animation: card-in 420ms cubic-bezier(0.25, 0.85, 0.35, 1.05) both;
  animation-delay: calc(var(--stagger, 0) * 60ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.stand-card:hover,
.stand-card:focus-visible {
  border-color: var(--orange);
  box-shadow:
    0 0 14px rgba(255,90,31,0.5),
    inset 0 0 14px rgba(255,90,31,0.10);
  transform: translateY(-2px);
  outline: none;
}
.stand-card:active { transform: translateY(0); }

/* corner brackets give arcade-frame feel */
.stand-card-corner {
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid var(--orange);
  opacity: 0.85;
}
.stand-card-corner-tl { top: 4px;    left: 4px;    border-right: none; border-bottom: none; }
.stand-card-corner-tr { top: 4px;    right: 4px;   border-left:  none; border-bottom: none; }
.stand-card-corner-bl { bottom: 4px; left: 4px;    border-right: none; border-top:    none; }
.stand-card-corner-br { bottom: 4px; right: 4px;   border-left:  none; border-top:    none; }

.stand-card-num {
  font-family: 'VT323', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--green);
  margin-top: 2px;
}
.stand-card-count {
  position: absolute;
  top: 8px; right: 8px;
  min-width: 22px;
  background: var(--orange);
  color: #1a0500;
  font-family: 'VT323', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  z-index: 1;
  box-shadow: 0 0 8px rgba(255,90,31,0.5);
}
.stand-card-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--orange);
  filter: drop-shadow(0 0 6px rgba(255,90,31,0.55));
  margin: 4px 0 2px;
}
.stand-card-icon svg { width: 100%; height: 100%; }
.stand-card-name {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  text-shadow: 0 0 8px rgba(77,255,184,0.35);
  line-height: 1.2;
}
.stand-card-cta {
  font-family: 'VT323', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--green);
  opacity: 0.85;
}

.stand-card.is-recent { border-color: var(--green); }
.stand-card.is-recent .stand-card-icon { color: var(--green); filter: drop-shadow(0 0 6px rgba(77,255,184,0.65)); }
.stand-card.is-hot    { border-color: var(--cyan); box-shadow: 0 0 14px rgba(92,240,255,0.45), inset 0 0 12px rgba(92,240,255,0.08); }
.stand-card.is-hot .stand-card-icon { color: var(--cyan); filter: drop-shadow(0 0 8px rgba(92,240,255,0.7)); }
.stand-card.is-hot .stand-card-corner { border-color: var(--cyan); }

/* arcade crosshair centers on the viewport when triggered */
.arcade-crosshair {
  position: fixed;
  left: 50%; top: 50%;
}

/* ----------- STAND MARKER ----------- */
.stand {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.stand-ring {
  position: relative;
  width: 30px; height: 30px;
  border: 2px solid #ff8a4a;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.9), inset 0 0 4px rgba(255, 200, 100, 0.5);
  /* Solid fill so the underlying red X is fully hidden */
  background:
    radial-gradient(circle,
      #ff5a1f 0%,
      #ff5a1f 70%,
      rgba(255, 90, 31, 0.55) 100%);
}
.stand-ring::before,
.stand-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0.55;
  animation: ring-pulse 2.4s infinite;
}
.stand-ring::after { animation-delay: 1.2s; }
@keyframes ring-pulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.stand-ring .stand-dot {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--orange);
}
.stand-label {
  margin-top: 4px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(5,8,7,0.88);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 2px 5px;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(77, 255, 184, 0.6);
  display: inline-flex; align-items: center; gap: 4px;
}
.stand-label small {
  font-family: 'VT323', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: #1a0500;
  background: var(--orange);
  padding: 0 4px;
  border-radius: 2px;
}
.stand.is-recent .stand-ring { border-color: var(--green); box-shadow: 0 0 14px var(--green); }
.stand.is-recent .stand-ring::before, .stand.is-recent .stand-ring::after { border-color: var(--green); }
.stand.is-recent .stand-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.stand.is-hot .stand-ring { border-color: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.stand.is-hot .stand-ring::before, .stand.is-hot .stand-ring::after { border-color: var(--cyan); }
.stand.is-hot .stand-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ----------- LANDMARK (cabin) ----------- */
.landmark {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  z-index: 3;   /* above stand labels (z:2) so the cabin always shows */
}
.landmark-glyph {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(5,8,7,0.92);
  border: 2px solid var(--green);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(77,255,184,0.65), inset 0 0 4px rgba(77,255,184,0.3);
  padding: 3px;
}
.landmark-glyph svg {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 0 2px rgba(77,255,184,0.6));
}
.landmark-label {
  margin-top: 4px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--green);
  background: rgba(5,8,7,0.88);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 2px 5px;
  text-shadow: 0 0 6px rgba(77,255,184,0.5);
}

/* ----------- CROSSHAIR OVERLAY ----------- */
.crosshair {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  max-width: 80vmin; max-height: 80vmin;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.3, 1.1), opacity 280ms ease;
  filter: drop-shadow(0 0 18px rgba(77, 255, 184, 0.7));
}
.crosshair.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.crosshair svg { width: 100%; height: 100%; display: block; }
.ch-ring, .ch-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
}
.ch-ring-2 { stroke: var(--orange); stroke-width: 1; opacity: 0.85; }
.ch-dot { fill: var(--orange); }
.ch-label {
  position: absolute;
  left: 50%; top: 8%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.25em;
  color: var(--orange);
  text-shadow: 0 0 8px rgba(255,90,31,0.8);
  white-space: nowrap;
}

/* ----------- MAP LEGEND ----------- */
.map-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 10px 14px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: rgba(5,8,7,0.7);
  border-bottom: 1px solid var(--line);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-active { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.dot-recent { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-hot    { background: var(--cyan);   box-shadow: 0 0 6px var(--cyan); }

/* ----------- LOG BOOK LIST ----------- */
.logbook-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.logbook-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.log-card {
  background: linear-gradient(180deg, rgba(14,29,24,0.7), rgba(10,20,16,0.5));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
}
.log-card-stand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--orange);
  padding: 4px 6px;
  background: rgba(255,90,31,0.08);
  border: 1px solid rgba(255,90,31,0.3);
  border-radius: 3px;
  white-space: nowrap;
}
.log-card-main { min-width: 0; }
.log-card-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.log-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.log-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.log-card-meta strong { color: var(--green); font-weight: normal; }
.log-card-notes {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.log-card-time {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--text-dim);
  text-align: right;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.log-card.is-pending { border-style: dashed; opacity: 0.85; }
.log-card.is-pending .log-card-time::after { content: ' • QUEUED'; color: var(--orange); }

/* ----------- STAT CARDS ----------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.stat-card {
  background: linear-gradient(180deg, rgba(14,29,24,0.7), rgba(10,20,16,0.5));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 14px 18px;
}
.stat-card-wide { grid-column: span 2; }
@media (max-width: 720px) { .stat-card-wide { grid-column: span 1; } }
.stat-card h3 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
}
.stat-sub { margin: 2px 0 12px; font-size: 12px; color: var(--text-dim); }
.chart { width: 100%; min-height: 160px; }
.chart svg { width: 100%; height: 100%; display: block; }

/* chart parts */
.bar-rect { fill: url(#bar-grad); }
.bar-label, .bar-value {
  font-family: 'VT323', monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  fill: var(--text);
}
.bar-value { fill: var(--orange); }
.axis-line { stroke: var(--line); stroke-width: 1; }
.tick-label { font-family: 'VT323', monospace; font-size: 12px; fill: var(--text-dim); }

/* ----------- MODAL ----------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 200ms ease;
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(14,29,24,0.98), rgba(10,20,16,0.98));
  border: 1px solid var(--line-strong);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(77,255,184,0.1);
  padding-bottom: env(safe-area-inset-bottom);
  animation: slide-up 280ms cubic-bezier(0.2, 0.7, 0.3, 1.1);
}
@media (min-width: 640px) {
  .modal { align-items: center; padding: 20px; }
  .modal-panel { border-radius: 8px; }
}
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 18px 8px;
  border-bottom: 1px solid var(--line);
}
.modal-eyebrow {
  margin: 0 0 4px;
  font-family: 'VT323', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.modal-head h2 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--orange);
  text-shadow: 0 0 10px rgba(255,90,31,0.5);
}
.modal-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 14px 18px 20px; display: grid; gap: 12px; }

.field { display: grid; gap: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-label {
  font-family: 'VT323', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--green);
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  width: 100%;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(77,255,184,0.18);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field textarea { resize: vertical; min-height: 60px; }

.action-row { display: flex; gap: 10px; margin-top: 4px; }
.btn-primary, .btn-ghost {
  flex: 1;
  appearance: none;
  border: none;
  border-radius: 3px;
  padding: 14px 16px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 13px;
  cursor: pointer;
  transition: transform 80ms, box-shadow 120ms;
}
.btn-primary {
  background: linear-gradient(180deg, #ff7a3e, var(--orange));
  color: #1a0500;
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(255,90,31,0.6); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(77,255,184,0.08); }
.form-msg {
  margin: 0;
  font-family: 'VT323', monospace;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 3px;
}
.form-msg.is-error { background: rgba(255,42,74,0.12); color: var(--danger); border: 1px solid rgba(255,42,74,0.3); }
.form-msg.is-ok { background: rgba(77,255,184,0.12); color: var(--green); border: 1px solid var(--line-strong); }

/* ----------- LOGIN OVERLAY ----------- */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at center, rgba(30, 92, 67, 0.3), transparent 60%),
    rgba(5,8,7,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, rgba(14,29,24,0.95), rgba(10,20,16,0.95));
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 28px 22px 22px;
  display: grid;
  gap: 12px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), var(--shadow-glow);
}
.login-antler {
  width: 72px; height: 72px;
  margin: 0 auto 4px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,90,31,0.7));
}
.login-card h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--text);
}
.login-sub { margin: 0; color: var(--text-dim); font-size: 14px; }
.login-card .field { text-align: left; }
.login-hint {
  margin: 4px 0 0;
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.login-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

/* ----------- TIGHTENINGS ----------- */
@media (max-width: 400px) {
  .field-row { grid-template-columns: 1fr; }
  .brand-text h1 { font-size: 15px; }
  .brand-antler { width: 36px; height: 36px; }
}