/*  ================================================================
    nw-shell.css  --  Neural Warfare shared game-viewer shell
    Shared layout, theme, and component styles for Risk watch page
    and Hormuz strategic viewer.
    ================================================================ */

/* ── FONT IMPORTS ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Oswald:wght@400;600;700&family=Barlow:wght@300;400;600&family=JetBrains+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&display=swap');


/* ================================================================
   1.  CSS CUSTOM PROPERTIES  --  THEMES
   ================================================================ */

/* Risk theme (default) */
:root,
body.theme-risk {
  --nw-accent:      #00ff41;
  --nw-accent-mid:  #00cc33;
  --nw-accent-dim:  #008f11;
  --nw-bg:          #0a0a0a;
  --nw-surface:     #0d0d0d;
  --nw-border-dim:  rgba(0,255,65,0.12);
  --nw-border-mid:  rgba(0,255,65,0.25);
  --nw-text:        #e0e0e0;
  --nw-text-dim:    #888;
  --nw-red:         #e74c3c;
  --nw-blue:        #3498db;
  --nw-yellow:      #f1c40f;
  --nw-purple:      #9b59b6;
  --nw-orange:      #e67e22;
  --nw-font-mono:   'Share Tech Mono', monospace;
}

/* Hormuz theme */
body.theme-hormuz {
  --nw-accent:      #4a9eff;
  --nw-accent-mid:  #3a7bc7;
  --nw-accent-dim:  #2a5a8a;
  --nw-bg:          #1a1d23;
  --nw-surface:     #22262e;
  --nw-border-dim:  #333944;
  --nw-border-mid:  #444b58;
  --nw-text:        #d4d8e0;
  --nw-text-dim:    #7a8294;
  --nw-red:         #c74a4a;
  --nw-iran:        #c75d3a;
  --nw-coalition:   #3a7bc7;
  --nw-merchant:    #d4a843;
  --nw-font-mono:   'JetBrains Mono', monospace;
}


/* ================================================================
   2.  BASE RESET + BODY
   ================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--nw-bg);
  color: var(--nw-text);
  font-family: 'Barlow', sans-serif;
  height: 100vh;
  overflow: hidden;
}


/* ================================================================
   3.  CRT SCANLINE OVERLAY
   ================================================================ */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 9999;
}


/* ================================================================
   4.  TOP BAR  (.nw-topbar)
   ================================================================ */

.nw-topbar {
  height: 44px;
  background: var(--nw-surface);
  border-bottom: 1px solid var(--nw-border-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  font-family: var(--nw-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 10;
  position: relative;
}

.nw-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--nw-accent);
}

.nw-topbar-center {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nw-topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--nw-accent-dim);
}

/* NW home link */
.nw-topbar-home {
  font-size: 11px;
  color: var(--nw-text-dim);
  text-decoration: none;
  font-family: var(--nw-font-mono);
  padding: 3px 8px;
  border: 1px solid var(--nw-border-dim);
  border-radius: 3px;
  transition: all 0.15s;
}
.nw-topbar-home:hover {
  color: var(--nw-accent);
  border-color: var(--nw-accent);
}

/* Game-type badge */
.nw-topbar-tag {
  font-size: 11px;
  color: var(--nw-text-dim);
  background: var(--nw-surface);
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--nw-font-mono);
  letter-spacing: 0.08em;
}

/* Nav links */
.nw-topbar-link {
  font-size: 0.6rem;
  color: var(--nw-text-dim);
  text-decoration: none;
  font-family: var(--nw-font-mono);
  letter-spacing: 0.15em;
  transition: color 0.15s;
}
.nw-topbar-link:hover {
  color: var(--nw-accent);
}

/* Connection status */
.nw-topbar-status {
  font-family: var(--nw-font-mono);
  font-size: 0.65rem;
  color: var(--nw-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Turn display */
.nw-topbar-turn {
  font-family: var(--nw-font-mono);
  font-size: 12px;
  color: var(--nw-text-dim);
}
.nw-topbar-turn span {
  color: var(--nw-text);
  font-weight: 500;
}
.nw-topbar-phase {
  font-family: var(--nw-font-mono);
  font-size: 12px;
  color: var(--nw-text-dim);
}

/* Connection status dot */
.nw-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.nw-dot-ok,
.nw-dot-on {
  background: var(--nw-accent);
  box-shadow: 0 0 6px var(--nw-accent);
  animation: nw-dot-pulse 2s infinite;
}
.nw-dot-live {
  background: var(--nw-red);
  box-shadow: 0 0 8px var(--nw-red);
  animation: nw-live-pulse 1s infinite;
  width: 10px;
  height: 10px;
}

@keyframes nw-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes nw-live-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 12px var(--nw-red); }
  50%      { opacity: 0.3; box-shadow: 0 0 4px  var(--nw-red); }
}

/* Bright stat in topbar */
.nw-stat-bright {
  color: var(--nw-accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0,255,65,0.4);
}
.nw-stat-dim {
  color: var(--nw-accent-dim);
  font-size: 0.7rem;
}


/* ================================================================
   5.  MAIN LAYOUT  (.nw-main)
   ================================================================ */

.nw-main {
  display: flex;
  height: calc(100vh - 44px);
}

.nw-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nw-map {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.nw-map svg {
  width: 100%;
  height: 100%;
}


/* ================================================================
   6.  BOTTOM PANEL  (.nw-bottom)
   ================================================================ */

.nw-bottom {
  height: 170px;
  background: var(--nw-surface);
  border-top: 1px solid var(--nw-border-mid);
  display: flex;
  z-index: 10;
  position: relative;
}

.nw-panel-section {
  flex: 1;
  padding: 0.5rem 1rem;
  overflow-y: auto;
}
.nw-panel-section + .nw-panel-section {
  border-left: 1px solid var(--nw-border-dim);
}

.nw-panel-title {
  font-family: var(--nw-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--nw-accent-dim);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}


/* ================================================================
   7.  LOG COLUMN  (.nw-log)
   ================================================================ */

.nw-log {
  width: 400px;
  background: var(--nw-surface);
  border-left: 1px solid var(--nw-border-mid);
  display: flex;
  flex-direction: column;
  z-index: 10;
  position: relative;
}

.nw-log .nw-panel-title {
  padding: 0.6rem 1rem 0.4rem;
  border-bottom: 1px solid var(--nw-border-dim);
  flex-shrink: 0;
}

.nw-log-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 1rem;
  font-family: var(--nw-font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--nw-accent-mid);
  scroll-behavior: smooth;
}

.nw-log-entry {
  margin-bottom: 0.25rem;
  word-wrap: break-word;
}
.nw-log-entry .prefix {
  font-weight: 600;
  margin-right: 0.3rem;
}
.nw-log-entry .dim {
  color: var(--nw-accent-dim);
}
.nw-log-entry .alert {
  color: var(--nw-red);
  font-weight: 600;
}
.nw-log-entry .result {
  color: var(--nw-yellow, #f1c40f);
}

.nw-log-divider {
  text-align: center;
  color: #444;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  padding: 0.3rem 0;
  border-top: 1px solid #222;
  margin: 0.4rem 0;
}

/* Scrollbar */
.nw-log-scroll::-webkit-scrollbar { width: 3px; }
.nw-log-scroll::-webkit-scrollbar-track { background: transparent; }
.nw-log-scroll::-webkit-scrollbar-thumb { background: var(--nw-border-mid); border-radius: 2px; }

@media (max-width: 900px) {
  .nw-log { display: none; }
}


/* ================================================================
   8.  CHYRON BAR  (.nw-chyron)
   ================================================================ */

.nw-chyron {
  height: 44px;
  background: var(--nw-surface);
  border-top: 1px solid var(--nw-border-mid);
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 12px;
  padding: 0 14px;
}

.nw-chyron-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nw-chyron-text {
  font-size: 12px;
  color: var(--nw-text);
  white-space: nowrap;
  flex: 1;
  animation: nw-chyron-slide 22s linear infinite;
}
@keyframes nw-chyron-slide {
  0%   { transform: translateX(80%);  }
  100% { transform: translateX(-180%); }
}

.nw-chyron-ticker {
  font-family: var(--nw-font-mono);
  font-size: 10px;
  color: var(--nw-text-dim);
  white-space: nowrap;
  display: flex;
  gap: 12px;
}
.nw-chyron-ticker .up   { color: var(--nw-red); }
.nw-chyron-ticker .down { color: var(--nw-accent); }


/* ================================================================
   9.  PLAYER / SCORE ROWS  (.nw-player-row)
   ================================================================ */

.nw-player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-family: var(--nw-font-mono);
  font-size: 0.8rem;
  position: relative;
}

.nw-player-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.nw-player-name {
  min-width: 80px;
  font-weight: 600;
}

.nw-player-stat {
  color: var(--nw-accent-mid);
  font-size: 0.75rem;
}
.nw-player-stat strong {
  color: var(--nw-accent);
  font-weight: 600;
}

/* Eliminated player */
.nw-player-row.eliminated .nw-player-name {
  text-decoration: line-through;
  opacity: 0.4;
}
.nw-player-row.eliminated .nw-player-dot { opacity: 0.3; }
.nw-player-row.eliminated .nw-player-stat { opacity: 0.3; }
.nw-player-row.eliminated::after {
  content: '\2620';
  position: absolute;
  right: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.6;
}


/* ================================================================
   10. SHARED BUTTON STYLES
   ================================================================ */

.nw-btn {
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--nw-border-mid);
  background: var(--nw-surface);
  color: var(--nw-text);
  cursor: pointer;
  font-family: var(--nw-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: all 0.15s;
}
.nw-btn:hover {
  background: var(--nw-border-dim);
  color: var(--nw-accent);
  border-color: var(--nw-accent-mid);
}

.nw-btn-primary {
  background: var(--nw-accent);
  border-color: var(--nw-accent);
  color: #000;
}
.nw-btn-primary:hover {
  background: var(--nw-accent-mid);
  border-color: var(--nw-accent-mid);
}


/* ================================================================
   11. FORCE READINESS BARS
   ================================================================ */

.nw-bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.nw-bar-label {
  font-size: 9px;
  color: var(--nw-text-dim);
  width: 72px;
  font-family: var(--nw-font-mono);
}

.nw-bar-track {
  flex: 1;
  height: 3px;
  background: var(--nw-border-dim);
  border-radius: 1px;
  overflow: hidden;
}

.nw-bar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.5s ease;
}

.nw-bar-value {
  font-size: 9px;
  color: var(--nw-text-dim);
  width: 34px;
  text-align: right;
  font-family: var(--nw-font-mono);
}


/* ================================================================
   12. MIXER BUTTON / EQ ANIMATION  (mx- prefix)
   ================================================================ */

.mx-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 4px;
  border: 1px solid var(--nw-border-dim);
  background: var(--nw-surface);
  color: var(--nw-text-dim);
  cursor: pointer;
  font-family: var(--nw-font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all 0.15s;
  white-space: nowrap;
}
.mx-btn:hover {
  border-color: var(--nw-accent-mid);
  color: var(--nw-text);
}
.mx-btn.mx-live {
  border-color: var(--nw-accent);
  color: var(--nw-accent);
}

/* Equalizer bars */
.mx-eq {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 10px;
}
.mx-eq span {
  width: 2px;
  border-radius: 1px;
  background: currentColor;
}
.mx-btn.mx-live .mx-eq span:nth-child(1) { animation: mx-eq-bounce 0.7s ease-in-out infinite alternate; }
.mx-btn.mx-live .mx-eq span:nth-child(2) { animation: mx-eq-bounce 0.9s 0.15s ease-in-out infinite alternate; }
.mx-btn.mx-live .mx-eq span:nth-child(3) { animation: mx-eq-bounce 0.6s 0.05s ease-in-out infinite alternate; }
.mx-btn.mx-live .mx-eq span:nth-child(4) { animation: mx-eq-bounce 0.8s 0.2s ease-in-out infinite alternate; }

@keyframes mx-eq-bounce {
  from { height: 2px;  }
  to   { height: 10px; }
}


/* ================================================================
   13. UTILITY / MISC
   ================================================================ */

/* Live badge */
.nw-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ff4444;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px rgba(255,68,68,0.5);
}

/* Tooltip (shared) */
.nw-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--nw-surface);
  border: 1px solid var(--nw-border-mid);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--nw-text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 100;
  display: none;
  max-width: 180px;
}

/* Generic scrollbar for sidebars */
.nw-scroll::-webkit-scrollbar       { width: 3px; }
.nw-scroll::-webkit-scrollbar-track  { background: transparent; }
.nw-scroll::-webkit-scrollbar-thumb  { background: var(--nw-border-mid); border-radius: 2px; }