/* ============================================================
   TacticalNeuronics.com — Modern CSS Design
   High-tech dark theme with electric blue/cyan accents
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-page:         #080c14;
  --bg-sidebar:      #06090f;
  --bg-topbar:       #09101e;
  --bg-footer:       #06090f;
  --bg-nav-inactive: #0c1220;
  --bg-nav-active:   #0a2a5e;
  --bg-nav-hover:    #7a0000;

  /* Accent Colors */
  --accent-cyan:     #00c8f0;
  --accent-gold:     #ffd700;
  --accent-red:      #cc0000;

  /* Text Colors */
  --text-nav:        #9bbdd4;
  --text-nav-active: #c8e4ff;
  --text-hover:      #ffd700;
  --text-label:      #ffd700;
  --text-topbar:     #a8c4d8;
  --text-footer:     #556b7a;
  --text-white:      #ffffff;

  /* Borders */
  --border-nav:      #1a3a5c;
  --border-accent:   #00c8f0;

  /* Glow Effects */
  --glow-cyan:       0 0 6px rgba(0, 200, 240, 0.35);
  --glow-active:     0 0 8px rgba(10, 42, 94, 0.6);

  /* Layout */
  --nav-width:       108px;
  --font-ui:         Verdana, Arial, sans-serif;
  --font-size-nav:   10px;
  --font-size-label: 9px;
  --transition:      0.15s ease;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-page);
  color: var(--text-nav);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
}

/* ============================================================
   Site Layout — Flexbox Column
   ============================================================ */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Top Bar ── */
.site-topbar {
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-nav);
  /* Subtle cyan glow line at top */
  box-shadow: inset 0 1px 0 rgba(0, 200, 240, 0.18),
              0 1px 4px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 10;
}

/* ── Body Row: left sidebar + content + right sidebar ── */
.site-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sidebars ── */
.site-sidebar-left,
.site-sidebar-right {
  width: var(--nav-width);
  min-width: var(--nav-width);
  max-width: var(--nav-width);
  overflow-y: auto;
  overflow-x: hidden;
  /* Circuit-board grid pattern */
  background-color: var(--bg-sidebar);
  background-image:
    linear-gradient(rgba(0, 200, 240, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 240, 0.03) 1px, transparent 1px);
  background-size: 10px 10px;
}

.site-sidebar-left  { border-right: 1px solid var(--border-nav); }
.site-sidebar-right { border-left:  1px solid var(--border-nav); }

/* Thin scrollbar for sidebars */
.site-sidebar-left::-webkit-scrollbar,
.site-sidebar-right::-webkit-scrollbar { width: 4px; }

.site-sidebar-left::-webkit-scrollbar-track,
.site-sidebar-right::-webkit-scrollbar-track { background: var(--bg-sidebar); }

.site-sidebar-left::-webkit-scrollbar-thumb,
.site-sidebar-right::-webkit-scrollbar-thumb {
  background: var(--border-nav);
  border-radius: 2px;
}

.site-sidebar-left::-webkit-scrollbar-thumb:hover,
.site-sidebar-right::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

/* ── Main Content ── */
.site-content {
  flex: 1;
  background: #0d1525;
  overflow: auto;
  min-width: 0;
}

/* ── Footer ── */
.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-nav);
  padding: 8px 16px;
  text-align: center;
  color: var(--text-footer);
  font-size: 11px;
}

.site-footer a            { color: var(--text-footer); text-decoration: none; }
.site-footer a:hover      { color: var(--accent-cyan); }
.site-footer .copyright   { color: rgba(255,255,255,0.5); font-size: 11px; }

/* ============================================================
   Top Bar Content
   ============================================================ */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  min-height: 28px;
}

.topbar-logo img {
  vertical-align: middle;
  height: 20px;
  width: auto;
  opacity: 0.85;
}

.topbar-nav a {
  color: var(--text-topbar);
  font-size: 11px;
  font-family: var(--font-ui);
  text-decoration: none;
  padding: 2px 5px;
  transition: color var(--transition);
}

.topbar-nav a:hover { color: var(--accent-cyan); }

.topbar-sep    { color: var(--border-nav); padding: 0 1px; }
.topbar-brand  { color: var(--text-white); font-size: 12px; font-weight: bold; }
.topbar-updated {
  color: var(--accent-gold);
  font-size: 10px;
  margin-left: auto;
}

/* ============================================================
   Sidebar Navigation
   ============================================================ */

/* Logo / image link block */
.nav-logo {
  text-align: center;
  padding: 6px 2px 2px;
}

.nav-logo a    { display: block; }
.nav-logo img  { display: block; margin: 0 auto; max-width: 100px; }

/* Section category label */
.nav-label {
  font-family: var(--font-ui);
  font-size: var(--font-size-label);
  font-weight: bold;
  color: var(--text-label);
  text-align: center;
  padding: 5px 2px 2px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Navigation group — block of links */
.nav-group {
  background: var(--bg-nav-inactive);
  border: 1px solid var(--border-nav);
  margin: 2px 3px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Active / expanded section */
.nav-group.nav-active {
  background: var(--bg-nav-active);
  border-color: var(--border-accent);
  box-shadow: var(--glow-cyan);
  animation: activeGlow 3s ease-in-out infinite;
}

/* Individual nav links */
.nav-group a {
  display: block;
  padding: 3px 5px;
  font-family: var(--font-ui);
  font-size: var(--font-size-nav);
  font-weight: bold;
  color: var(--text-nav);
  text-decoration: none;
  text-align: center;
  border-top: 1px solid rgba(26, 58, 92, 0.5);
  transition: background-color var(--transition), color var(--transition);
  line-height: 1.35;
}

.nav-group a:first-child              { border-top: none; }
.nav-group a:hover,
.nav-group a:active                   { background-color: var(--bg-nav-hover); color: var(--text-hover); }
.nav-group.nav-active a               { color: var(--text-nav-active); }
.nav-group.nav-active a:hover,
.nav-group.nav-active a:active        { background-color: var(--bg-nav-hover); color: var(--text-hover); }

/* Small vertical spacer between groups */
.nav-spacer { height: 4px; }

/* Award / badge image boxes */
.nav-award {
  background: #0d1525;
  border: 1px solid var(--border-nav);
  margin: 3px 3px;
  text-align: center;
  padding: 3px;
}

.nav-award img { max-width: 97px; display: block; margin: 0 auto; }

/* ============================================================
   Glow animation for active nav section
   ============================================================ */
@keyframes activeGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 200, 240, 0.35); }
  50%       { box-shadow: 0 0 10px rgba(0, 200, 240, 0.55); }
}

/* ============================================================
   Content Area — Legacy Page Support
   (These rules improve content pages without touching them)
   ============================================================ */

/* Base content styles */
.site-content {
  color: #c0d8f0;
  font-family: var(--font-ui);
  font-size: 13px;
}

/* Normalize <font> tags — they still render in HTML5 */
.site-content font { font-family: Verdana, Arial, sans-serif; color: inherit; }

/* Map legacy size= attributes to readable modern sizes */
.site-content font[size="1"] { font-size: 11px; }
.site-content font[size="2"] { font-size: 12px; }
.site-content font[size="3"] { font-size: 13px; }
.site-content font[size="4"] { font-size: 16px; }
.site-content font[size="5"] { font-size: 20px; }
.site-content font[size="6"] { font-size: 24px; }

/* ── Legacy <font color> overrides for dark background ── */
/* Black/dark → readable light text */
.site-content font[color="#000000"],
.site-content font[color="black"],
.site-content font[color="#000"],
.site-content font[color="#1a1a1a"],
.site-content font[color="#333333"],
.site-content font[color="#333"]      { color: #c0d8f0 !important; }

/* Blue links → lighter blue readable on dark */
.site-content font[color="#0000FF"],
.site-content font[color="#0000ff"],
.site-content font[color="blue"],
.site-content font[color="#0000CC"],
.site-content font[color="#0000cc"],
.site-content font[color="#000066"],
.site-content font[color="#00008B"]   { color: #5ba3f5 !important; }

/* Red highlights → softer red on dark */
.site-content font[color="#FF0000"],
.site-content font[color="#ff0000"],
.site-content font[color="red"],
.site-content font[color="#CC0000"],
.site-content font[color="#cc0000"]   { color: #ff7070 !important; }

/* Green → lighter green */
.site-content font[color="#008000"],
.site-content font[color="green"],
.site-content font[color="#00AA00"]   { color: #4dcc7a !important; }

/* White/light → stays white */
.site-content font[color="#FFFFFF"],
.site-content font[color="#ffffff"],
.site-content font[color="white"]     { color: #ffffff !important; }

/* Gold/yellow → stays gold */
.site-content font[color="#FFD700"],
.site-content font[color="#ffd700"],
.site-content font[color="yellow"]    { color: var(--accent-gold) !important; }

/* ── Legacy table/td background overrides for dark theme ── */
/* White cell backgrounds */
.site-content td[bgcolor="white"],
.site-content td[bgcolor="#ffffff"],
.site-content td[bgcolor="#FFFFFF"],
.site-content td[bgcolor="ffffff"]    { background: #111e33 !important; color: #c0d8f0 !important; }

/* Light gray cells */
.site-content td[bgcolor="#f0f0f0"],
.site-content td[bgcolor="#eeeeee"],
.site-content td[bgcolor="#dddddd"],
.site-content td[bgcolor="#cccccc"],
.site-content td[bgcolor="#d0d0d0"]   { background: #162035 !important; color: #c0d8f0 !important; }

/* Medium gray cells */
.site-content td[bgcolor="494949"],
.site-content td[bgcolor="#494949"]   { background: #0c1525 !important; }

/* Black/near-black title cells */
.site-content td[bgcolor="#000000"],
.site-content td[bgcolor="000000"],
.site-content td[bgcolor="#000"]      {
  background: linear-gradient(135deg, #000814 0%, #001a38 55%, #000814 100%) !important;
  border-top: 2px solid var(--accent-cyan) !important;
  border-bottom: 2px solid var(--accent-cyan) !important;
}

/* Dark blue cells */
.site-content td[bgcolor="000066"],
.site-content td[bgcolor="#000066"]   { background: #0a1a3e !important; }

/* Table backgrounds */
.site-content table[bgcolor="white"],
.site-content table[bgcolor="#ffffff"],
.site-content table[bgcolor="ffffff"] { background: #111e33 !important; }

.site-content table[bgcolor="494949"],
.site-content table[bgcolor="#494949"] { background: #0c1525 !important; }

/* Links in content — bright on dark */
.site-content a          { color: #5ba3f5; text-decoration: none; }
.site-content a:visited  { color: #4488cc; }
.site-content a:hover    { color: var(--accent-cyan); text-decoration: underline; }

/* Responsive images in content */
.site-content img { max-width: 100%; height: auto; }

/* ============================================================
   Reusable CSS classes for modernized content pages
   ============================================================ */

/* Page title bar */
.page-title {
  background: linear-gradient(135deg, #000814 0%, #001f3f 55%, #000814 100%);
  color: #ffffff;
  text-align: center;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: bold;
  font-family: var(--font-ui);
  border-top: 2px solid var(--accent-cyan);
  border-bottom: 2px solid var(--accent-cyan);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* Content wrapper */
.content-wrap {
  max-width: 100%;
  padding: 8px 12px;
  color: #c0d8f0;
  text-align: center;
}

/* Lists inside content area: left-align text so bullets don't split from content */
.content-wrap ul,
.content-wrap ol {
  text-align: left;
  display: inline-block;
  min-width: 40%;
  max-width: 100%;
  margin: 0.4em 0 0.8em 0;
}

.content-wrap li {
  text-align: left;
}

/* Download / CTA button style */
.btn-download {
  display: inline-block;
  background: linear-gradient(135deg, #0a2a5e, #0d3a7e);
  color: var(--accent-cyan) !important;
  border: 1px solid var(--accent-cyan);
  padding: 7px 18px;
  margin: 4px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none !important;
  transition: all var(--transition);
  cursor: pointer;
  line-height: 1.5;
}

.btn-download img {
  vertical-align: middle;
  margin-right: 6px;
}

.btn-download:hover {
  background: var(--accent-cyan);
  color: #000814 !important;
  box-shadow: 0 0 8px rgba(0, 200, 240, 0.5);
}

.btn-download:hover img {
  filter: invert(1);
}

/* ============================================================
   Content area extras
   ============================================================ */

/* HR styling in content pages */
.site-content hr {
  border: none;
  border-top: 1px solid #1a3a5c;
  margin: 12px 0;
}

/* Dark-background tournament result tables (bgcolor=222222) */
.site-content table[bgcolor="222222"] td,
.site-content table[bgcolor="#222222"] td {
  border-bottom: 1px solid #333;
}

/* Player feedback quote blocks in aiw3dnew */
.site-content address {
  font-style: italic;
  color: #333;
  margin-top: 4px;
}

/* ============================================================
   General content-area table defaults (markdown + legacy)
   Applies to plain <table> elements without an explicit class
   so it doesn't interfere with dl-table, mnavbar, etc.
   ============================================================ */
.content-wrap table:not([class]) {
  margin: 0 auto 1.2em auto;
  max-width: 960px;
  width: auto;
  border-collapse: collapse;
  font-size: 13px;
  word-break: break-word;
}

.content-wrap table:not([class]) th {
  background: #1a2a6e;
  color: #ffffff;
  padding: 6px 12px;
  text-align: left;
  border: 1px solid #2a4a8c;
  white-space: nowrap;
}

.content-wrap table:not([class]) td {
  padding: 5px 12px;
  border: 1px solid #1a3a5c;
  color: #c0d8f0;
  vertical-align: top;
  word-wrap: break-word;
}

.content-wrap table:not([class]) tr:nth-child(odd)  td { background: #0e1a2e; }
.content-wrap table:not([class]) tr:nth-child(even) td { background: #0a1422; }
.content-wrap table:not([class]) tr:hover td { background: #122040; }

/* ============================================================
   Download table styling (downloads.asp)
   ============================================================ */
table.dl-table {
  width: 469px;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 auto 16px;
  font-family: var(--font-ui);
  font-size: 12px;
}

table.dl-table th {
  background: #1a2a6e;
  color: #ffffff;
  padding: 5px 8px;
  text-align: left;
  border-bottom: 2px solid var(--accent-cyan);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

table.dl-table tr:nth-child(odd)  td { background: #111e33; }
table.dl-table tr:nth-child(even) td { background: #0d1828; }

table.dl-table td {
  padding: 5px 8px;
  color: #c0d8f0;
  border-bottom: 1px solid #1a3a5c;
  vertical-align: middle;
}

table.dl-table td.dl-name  { width: 340px; }
table.dl-table td.dl-size  { width: 60px;  text-align: center; }
table.dl-table td.dl-ver   { width: 70px;  text-align: center; }

table.dl-table td a        { color: #5ba3f5; font-weight: bold; }
table.dl-table td a:hover  { color: var(--accent-cyan); text-decoration: underline; }

table.dl-table img.dl-icon { vertical-align: middle; margin-right: 4px; }

.dl-section-banner {
  display: block;
  margin: 12px auto 6px;
  max-width: 100%;
}

/* ============================================================
   MainSelect iframe — selection panel grids
   ============================================================ */

/* Section header rows in selection panels */
.sel-panel table td[bgcolor="black"],
.sel-panel table td[bgcolor="000000"],
.sel-panel table td[bgcolor="#000000"] {
  background: linear-gradient(135deg, #000814, #001a38) !important;
  border-bottom: 1px solid #1a3a5c;
}

.sel-panel table td[bgcolor="000066"],
.sel-panel table td[bgcolor="#000066"] {
  background: #0a1a3e !important;
  border-bottom: 1px solid #1a3a5c;
}

.sel-panel table td[bgcolor="white"],
.sel-panel table td[bgcolor="#ffffff"],
.sel-panel table td[bgcolor="ffffff"] {
  background: #111e33 !important;
  color: #c0d8f0 !important;
}

.sel-panel table td[bgcolor="494949"],
.sel-panel table td[bgcolor="#494949"] {
  background: #0c1220 !important;
}

.sel-panel a { text-decoration: none; transition: color 0.15s; }
.sel-panel a:hover { color: #ffd700 !important; }
table.mnavbar td a { color: #9bbdd4; font-size: 9px; }
table.mnavbar td a:hover { color: #ffd700; background: #7a0000; }

/* ── Font color overrides inside sel-panel iframe ──
   (same logic as .site-content overrides but scoped for iframe context
   where .site-content wrapper doesn't exist) */
.sel-panel font[color="black"],
.sel-panel font[color="#000000"],
.sel-panel font[color="000000"],
.sel-panel font[color="#000"],
.sel-panel font[color="000006"]     { color: #c0d8f0 !important; }

.sel-panel font[color="#0000FF"],
.sel-panel font[color="#0000ff"],
.sel-panel font[color="blue"],
.sel-panel font[color="000066"],
.sel-panel font[color="#000066"]    { color: #5ba3f5 !important; }

.sel-panel font[color="#FF0000"],
.sel-panel font[color="#ff0000"],
.sel-panel font[color="red"]        { color: #ff7070 !important; }

.sel-panel font[color="white"],
.sel-panel font[color="#ffffff"],
.sel-panel font[color="#FFFFFF"]    { color: #ffffff !important; }

/* Normalize font sizes in sel-panel */
.sel-panel font { font-family: Verdana, Arial, sans-serif; }
.sel-panel font[size="1"] { font-size: 11px; }
.sel-panel font[size="2"] { font-size: 12px; }
.sel-panel font[size="3"] { font-size: 13px; }

/* ============================================================
   Content Structure Classes (#3 — Info Cards, Screenshot Grid,
   Feature Lists, Blockquotes, Section Sub-headers)
   ============================================================ */

/* Info card — highlighted panel for key features/descriptions */
.info-card {
  background: #0a1a3a;
  border: 1px solid #1a3a5c;
  border-left: 3px solid var(--accent-cyan);
  padding: 12px 16px;
  margin: 10px 0;
  color: #c0d8f0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
}

.info-card p { margin: 0 0 8px; }
.info-card p:last-child { margin-bottom: 0; }

/* Accent card variant — gold border for important notices */
.info-card.accent {
  border-left-color: var(--accent-gold);
  background: #0f1a08;
}

/* Warning/update card — red border */
.info-card.update {
  border-left-color: #ff7070;
  background: #1a0a0a;
}

/* Screenshot grid — wrapping flex layout for thumbnail images */
.screenshot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0;
}

.screenshot-grid a {
  display: inline-block;
  border: 1px solid #1a3a5c;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.screenshot-grid a:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(0, 200, 240, 0.35);
}

.screenshot-grid img {
  display: block;
  height: 112px;
  width: 150px;
  object-fit: cover;
}

/* Screenshot caption row */
.screenshot-grid .caption {
  display: block;
  font-size: 10px;
  color: #7aa8c8;
  text-align: center;
  padding: 2px 4px;
  background: #060e1c;
  max-width: 150px;
}

/* Section sub-header within content pages */
.site-content h3 {
  color: var(--accent-cyan);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: bold;
  margin: 16px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #1a3a5c;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.feature-list li {
  padding: 5px 8px 5px 20px;
  border-bottom: 1px solid #1a3a5c;
  color: #9bbdd4;
  font-family: var(--font-ui);
  font-size: 12px;
  position: relative;
}

.feature-list li::before {
  content: "›";
  color: var(--accent-cyan);
  font-weight: bold;
  position: absolute;
  left: 6px;
}

.feature-list li:last-child { border-bottom: none; }

/* Player feedback quote blocks */
.player-quote {
  background: #080f1e;
  border-left: 3px solid #1a3a5c;
  margin: 0 0 8px;
  padding: 8px 12px;
  color: #9bbdd4;
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
}

.player-quote address {
  font-style: normal;
  color: var(--accent-cyan);
  font-size: 11px;
  margin-top: 4px;
}

/* ============================================================
   Legacy table.navbar compatibility
   (keeps old-style nav tables working on pages not yet updated)
   ============================================================ */
table.navbar td a {
  color: var(--text-nav);
}

table.navbar td a:hover,
table.navbar td a:active {
  color: var(--text-hover);
  background-color: var(--bg-nav-hover);
}