/* ==========================================================================
   BULLETWAR PRIVATE SERVER — MILITARY GLASSMORPHIC HUD DESIGN SYSTEM
   High-tech tactical FPS interface with backdrop blur, glowing amber/cyan accents
   ========================================================================== */

/* The web fonts are requested by a <link> in the document head, not by an
   @import here. An @import can only start downloading after this stylesheet has
   itself arrived and been parsed, which serialises two round trips onto the
   critical path and shows up directly as a worse Largest Contentful Paint. */

:root {
  --bg: #070c14;
  --bg-secondary: #0b1320;
  --glass-bg: rgba(11, 20, 34, 0.65);
  --glass-bg-hover: rgba(18, 32, 54, 0.82);
  --glass-card: rgba(14, 25, 42, 0.72);
  --glass-border: rgba(0, 240, 255, 0.22);
  --glass-border-amber: rgba(255, 170, 0, 0.35);
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(0, 240, 255, 0.15);
  
  --text: #f0f4f8;
  --muted: #8e9eaf;
  --cyan: #00f0ff;
  --cyan-glow: rgba(0, 240, 255, 0.5);
  --amber: #ffaa00;
  --amber-glow: rgba(255, 170, 0, 0.5);
  --amber2: #ffc857;
  
  --red: #ff3b30;
  --green: #34c759;
  --gold: #ffd700;
  --silver: #e0e6ed;
  --bronze: #cd7f32;
  
  --font-hud: 'Orbitron', -apple-system, sans-serif;
  --font-tactical: 'Rajdhani', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --mono: 'Rajdhani', Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 50% -100px, rgba(0, 240, 255, 0.08), transparent 70%),
    radial-gradient(1000px 600px at 100% 400px, rgba(255, 170, 0, 0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(0, 240, 255, 0.015) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(0, 240, 255, 0.015) 40px 41px);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: clip;
}

a { color: var(--cyan); text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
a:hover { color: #80f7ff; text-shadow: 0 0 10px var(--cyan-glow); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); font-weight: 600; font-size: 0.95em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.dim { opacity: 0.5; }
.strong { font-weight: 700; color: #fff; }
.accent { color: var(--amber); text-shadow: 0 0 12px var(--amber-glow); }

h1, h2, h3, h4 {
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0;
}

/* ---------- Kickers & Headings ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 12px; height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.sec-head { margin-bottom: 20px; }
.sec-head h1, .sec-head h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: 3px; }
.page-head { margin: 40px 0 20px; }
.page-title {
  margin: 8px 0 12px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 25px rgba(0, 240, 255, 0.25);
}
.page-sub { color: var(--muted); margin: 0 0 20px; font-size: 16px; }

/* ---------- Subnav & Tabs ---------- */

.subnav {
  display: flex;
  gap: 10px;
  margin: 16px 0 24px;
  flex-wrap: wrap;
}
.subnav a {
  padding: 8px 18px;
  background: rgba(11, 20, 34, 0.8);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  transition: all 0.2s ease;
}
.subnav a:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
}
.subnav a.active {
  background: rgba(255, 170, 0, 0.15);
  border-color: var(--amber);
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}

/* ---------- Top Bar & Header Nav ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 12, 20, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-hud);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
}
.logo-emblem {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px var(--amber-glow));
}
.logo small {
  display: block;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.pulse-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.pulse-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.pulse-chip.online { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.08); }
.pulse-chip.online .dot { background: #4ade80; box-shadow: 0 0 12px #4ade80; animation: pulse 2s infinite; }
.pulse-chip.offline { color: var(--red); border-color: rgba(255, 59, 48, 0.3); }
.pulse-chip.offline .dot { background: var(--red); box-shadow: 0 0 12px var(--red); }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }

.topbar nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar nav a {
  position: relative;
  color: var(--text);
  padding: 10px 16px;
  text-transform: uppercase;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.topbar nav a:hover {
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.08);
  text-shadow: 0 0 8px var(--cyan-glow);
}
.topbar nav a.active {
  color: var(--amber);
  background: rgba(255, 170, 0, 0.1);
  border-bottom: 2px solid var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}

.inline { display: inline; }
.linklike {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.linklike:hover { color: #fff; border-color: var(--cyan); background: rgba(0, 240, 255, 0.1); }

/* ---------- Tactically Styled Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.9), rgba(220, 130, 0, 0.9));
  color: #070c14;
  border: 1px solid var(--amber2);
  padding: 12px 28px;
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
  background: linear-gradient(135deg, #ffbb1a, #ffaa00);
  color: #000;
  box-shadow: 0 0 35px rgba(255, 170, 0, 0.7);
  transform: translateY(-2px);
}
.btn.big { padding: 16px 38px; font-size: 15px; letter-spacing: 3px; }
.btn.small { padding: 7px 16px; font-size: 11px; }
.btn.full { width: 100%; }

.btn.ghost {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}
.btn.ghost:hover {
  background: var(--cyan);
  color: #070c14;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
  transform: translateY(-2px);
}

/* ---------- Hero Landing Section ---------- */

.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 60px 0 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, #070c14 0%, rgba(7, 12, 20, 0.85) 100%);
}

.landing-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('/static/bulletwar_hero.png');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.55;
  filter: saturate(1.25) contrast(1.15);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 75%, transparent 100%);
  animation: heroPanZoom 20s infinite alternate ease-in-out;
}

@keyframes heroPanZoom {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.05) translateY(-8px); }
  100% { transform: scale(1.02) translateY(5px); }
}

.landing-hud-reticle {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 75% 35%, transparent 140px, rgba(0, 240, 255, 0.15) 141px, transparent 143px),
    radial-gradient(circle at 75% 35%, transparent 200px, rgba(255, 170, 0, 0.1) 201px, transparent 202px);
  animation: reticlePulse 4s infinite ease-in-out alternate;
}

@keyframes reticlePulse {
  0% { opacity: 0.6; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1.02); }
}

.landing-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(800px 500px at 20% 40%, rgba(0, 240, 255, 0.18), transparent 70%),
    radial-gradient(800px 500px at 80% 60%, rgba(255, 170, 0, 0.15), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 255, 255, 0.02) 30px 31px);
}

.landing-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.landing-copy { padding-bottom: 40px; }

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
  margin-bottom: 16px;
}

.landing-title {
  margin: 0;
  font-family: var(--font-hud);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0,0,0,0.8);
}

.landing-tag {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--amber);
  margin: 16px 0 14px;
  text-shadow: 0 0 12px var(--amber-glow);
}

.landing-lead {
  max-width: 580px;
  font-size: 16px;
  color: #cbd5e1;
  margin-bottom: 28px;
  line-height: 1.7;
}

.landing-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.landing-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Dossier Live Intel Card */

.dossier {
  position: relative;
  background: var(--glass-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-top: 2px solid var(--cyan);
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 240, 255, 0.05);
}
.dossier::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}
.dossier::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.dossier h2 { font-size: 17px; margin: 4px 0 16px; }
.dossier-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dossier-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-tactical);
  font-size: 14px;
  letter-spacing: 1px;
}
.dossier-row b { color: #fff; }

.xp-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 16px;
}
.xp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), #38ef7d);
  box-shadow: 0 0 10px var(--cyan);
}

.dossier-top { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.dossier-sub { display: block; font-size: 13px; color: var(--muted); font-family: var(--font-tactical); }

/* Landing Figures Stats Counter Bar */

.landing-figures {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(7, 12, 20, 0.85);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
  margin-top: 20px;
}
.figure {
  padding: 24px 16px;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background 0.2s ease;
}
.figure:last-child { border-right: none; }
.figure:hover { background: rgba(0, 240, 255, 0.05); }
.figure b {
  display: block;
  font-family: var(--font-hud);
  font-size: 32px;
  font-weight: 800;
  color: var(--amber);
  text-shadow: 0 0 18px var(--amber-glow);
}
.figure span {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Player Profile & Service Record Hero Header ---------- */

.card.board.hero {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(14, 25, 42, 0.88) 100%);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--cyan);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 240, 255, 0.05);
  margin-bottom: 30px;
}

.hero-insignia img {
  width: 90px;
  height: 115px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px var(--cyan-glow));
}

.hero-id { flex: 1; }

.hero-rank {
  display: block;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
}

.hero-name {
  font-family: var(--font-hud);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  margin: 4px 0 8px;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.25);
}

.hero-tags {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.clantag {
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 800;
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber-glow);
}

.xp-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.xp-level b { color: var(--amber); }

.xp-foot {
  font-size: 12px;
  margin-top: 4px;
}

/* ---------- Combat Statistics Grid (.statgrid & .stat) ---------- */

.statgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 20px 0 30px;
}
@media (max-width: 960px) { .statgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 20px 12px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.25s ease;
}
.stat:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  transform: translateY(-3px);
}

/* Standalone figures use Rajdhani rather than Orbitron. Orbitron draws its
   zero as a barred rectangle, which reads as a missing-glyph box when a counter
   sits at 0 — and a kill count nobody can read is a broken counter. Rajdhani
   keeps the tactical register with a conventional zero. Headings stay on
   Orbitron, where the effect is part of the look. */
.stat-value, .figure b, .dossier-row b, .t-row strong, .about-stat .stat-num {
  font-family: var(--font-tactical);
}

.stat-value {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  display: block;
}
.stat-value.accent {
  color: var(--amber);
  text-shadow: 0 0 15px var(--amber-glow);
}

.stat-label {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ---------- Loadout & Inventory Tile Grid (.invgrid & .invtile) ---------- */

.invgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 20px 0;
}
@media (max-width: 1200px) { .invgrid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 960px) { .invgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .invgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .invgrid { grid-template-columns: repeat(2, 1fr); } }

.invtile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.invtile:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  transform: translateY(-3px);
}

.invtile-art {
  position: relative;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.12), transparent 70%), rgba(7, 12, 20, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
}
.invtile-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
  transition: transform 0.25s ease;
}
.invtile:hover .invtile-art img {
  transform: scale(1.08);
}

.invtile-qty {
  position: absolute;
  top: 4px; right: 6px;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  color: var(--amber);
  background: rgba(7, 12, 20, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
}

.invtile-code {
  font-family: var(--font-hud);
  font-size: 16px;
  font-weight: 800;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
}

.invtile-name {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invtile-meta {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.invtile-expiry {
  margin-top: auto;
}
.invtile-expiry .badge { font-size: 10px; padding: 2px 6px; width: 100%; text-align: center; }

/* ---------- Description Lists (Service & Field Data Cards) ---------- */

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 20px;
  align-items: center;
  margin: 16px 0;
}
dt {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}
dd {
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
  margin: 0;
  text-align: right;
}

/* ---------- Glass HUD Cards & Container Grids ---------- */

.card {
  position: relative;
  background: var(--glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 28px;
  margin: 20px 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid var(--cyan);
  opacity: 0.6;
}
.card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0; }
.cols .card, .grid2 .card, .grid3 .card { margin: 0; }

/* ---------- Armory (Shop Grid & Item Cards) ---------- */

.shop-sec { margin-top: 30px; }

.shopgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px 0 30px;
}
@media (max-width: 1100px) { .shopgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .shopgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shopgrid { grid-template-columns: 1fr; } }

.shopgrid.featured {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .shopgrid.featured { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .shopgrid.featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shopgrid.featured { grid-template-columns: 1fr; } }

.shopcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.shopcard:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35), 0 15px 35px rgba(0, 0, 0, 0.6);
  transform: translateY(-4px);
  color: var(--text);
}
.shopgrid.featured .shopcard {
  border-color: var(--glass-border-amber);
  background: linear-gradient(180deg, rgba(255, 170, 0, 0.08), rgba(14, 25, 42, 0.72));
}
.shopgrid.featured .shopcard:hover {
  border-color: var(--amber);
  box-shadow: 0 0 30px rgba(255, 170, 0, 0.45), 0 15px 35px rgba(0, 0, 0, 0.6);
}

.shopcard-art {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.12), transparent 70%), rgba(7, 12, 20, 0.7);
  border-bottom: 1px solid var(--glass-border);
  padding: 12px;
}
.shopcard-art.big { height: 180px; }

.shopcard-art .itemimg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4));
  transition: transform 0.25s ease;
}
.shopcard:hover .shopcard-art .itemimg {
  transform: scale(1.08);
}

.shopcode {
  font-family: var(--font-hud);
  font-size: 24px;
  font-weight: 800;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
}
.shopcard-art.big .shopcode { font-size: 36px; }

.shopcard-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shopcat {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.shopname {
  font-family: var(--font-hud);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
}

.shopprices {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.price {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}
.price.dinar {
  background: rgba(255, 170, 0, 0.12);
  color: var(--amber);
  border: 1px solid rgba(255, 170, 0, 0.35);
  text-shadow: 0 0 8px var(--amber-glow);
}
.price.cash {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.35);
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* Tabs & Sortbar & Pager */

.sortbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 16px;
}

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 18px;
  background: rgba(11, 20, 34, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.tabs a:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}
.tabs a.active {
  background: rgba(255, 170, 0, 0.15);
  border-color: var(--amber);
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}

.searchbox { display: flex; gap: 8px; align-items: center; }
.searchbox input[type="search"] {
  width: 240px;
  padding: 8px 14px;
  background: rgba(7, 12, 20, 0.8);
  border: 1px solid var(--glass-border);
  color: #fff;
  border-radius: 4px;
}
.searchbox input[type="search"]:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
  outline: none;
}

.wallet-chips { display: flex; gap: 10px; margin-top: 10px; }
.wallet-chips .chip {
  padding: 6px 14px;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid var(--amber);
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: var(--amber);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 30px 0;
}

/* ---------- Item Detail Page ---------- */

.shop-detail .itemdesc {
  font-size: 15px;
  color: #cbd5e1;
  margin: 16px 0;
  line-height: 1.6;
}
.shop-detail .delivery-note {
  padding: 12px 16px;
  background: rgba(0, 240, 255, 0.05);
  border-left: 3px solid var(--cyan);
  font-size: 13px;
  margin: 16px 0;
}
.table.offers td.right { text-align: right; }

/* ---------- Tables (Leaderboards & Intel) ---------- */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th {
  color: var(--muted);
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--glass-border);
}
th.center, td.center { text-align: center; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(0, 240, 255, 0.06); }

.plink { color: #fff; font-family: var(--font-tactical); font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.plink:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }

.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 800;
  border-radius: 4px;
  color: var(--muted);
}
.rank.r1 { color: #000; background: var(--gold); box-shadow: 0 0 15px var(--gold); }
.rank.r2 { color: #000; background: var(--silver); box-shadow: 0 0 12px var(--silver); }
.rank.r3 { color: #fff; background: var(--bronze); box-shadow: 0 0 10px var(--bronze); }

.lvlicon {
  width: 36px;
  height: 46px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3));
}

/* ---------- Streamlined Clean-Cut Installation Pipeline ---------- */

.install-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0;
  position: relative;
}
@media (max-width: 960px) { .install-pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .install-pipeline { grid-template-columns: 1fr; } }

.install-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--amber);
  border-radius: 6px;
  padding: 18px 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.install-step:hover {
  border-color: var(--cyan);
  border-top-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  transform: translateY(-3px);
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid var(--amber);
  border-radius: 4px;
  font-family: var(--font-hud);
  font-size: 16px;
  font-weight: 900;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
  margin-bottom: 12px;
}
.install-step:hover .step-badge {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
}

.step-content h3 {
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 6px;
}

.step-content p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Interactive Modern Glass Accordion FAQ ---------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.faq-item {
  background: rgba(11, 20, 34, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.faq-item[open] {
  background: rgba(14, 25, 42, 0.88);
  border-color: var(--cyan);
  border-left: 4px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
}

.faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  transition: transform 0.25s ease;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }

.faq-answer {
  padding: 0 20px 18px;
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.6;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 14px;
}
.faq-answer p { margin: 0; }

/* ---------- Badges & Alerts ---------- */

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 3px;
}
.b-ok { background: rgba(52, 199, 89, 0.15); color: #34c759; border: 1px solid rgba(52, 199, 89, 0.4); }
.b-danger { background: rgba(255, 59, 48, 0.15); color: #ff3b30; border: 1px solid rgba(255, 59, 48, 0.4); }
.b-muted { background: rgba(142, 158, 175, 0.15); color: var(--muted); border: 1px solid var(--glass-border); }
.b-warn { background: rgba(255, 170, 0, 0.15); color: var(--amber); border: 1px solid rgba(255, 170, 0, 0.4); }

.alert {
  padding: 14px 20px;
  margin: 20px 0;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}
.alert.error { background: rgba(255, 59, 48, 0.15); border: 1px solid var(--red); color: #ff8882; }
.alert.notice { background: rgba(52, 199, 89, 0.15); border: 1px solid var(--green); color: #88ffab; }

/* ---------- Forms & Inputs ---------- */

label {
  display: block;
  margin: 16px 0 6px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}

input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(7, 12, 20, 0.8);
  color: #fff;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  transition: all 0.2s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 15px var(--cyan-glow);
}

/* ---------- Download & Specs Page ---------- */

.download-hero-card {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: center;
}

.download-art-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.spec-box {
  background: rgba(7, 12, 20, 0.6);
  border: 1px solid var(--glass-border);
  padding: 16px;
  border-radius: 4px;
}
.spec-box span { display: block; font-family: var(--font-tactical); font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.spec-box strong { font-family: var(--font-hud); font-size: 14px; color: #fff; margin-top: 4px; display: block; }

/* ---------- Footer ---------- */

footer {
  margin-top: 60px;
  background: rgba(7, 12, 20, 0.95);
  border-top: 1px solid var(--glass-border);
  padding: 40px 0;
  color: var(--muted);
}
.foot { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-logo { font-family: var(--font-hud); font-size: 20px; color: #fff; letter-spacing: 3px; }
.foot-nav { display: flex; flex-direction: column; gap: 8px; }
.foot-nav a { font-family: var(--font-tactical); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Mobile Responsive ---------- */

@media (max-width: 960px) {
  .landing-inner { grid-template-columns: 1fr; }
  .landing-figures { grid-template-columns: repeat(2, 1fr); }
  .cols, .grid2, .grid3, .download-hero-card, .specs-grid { grid-template-columns: 1fr; }
  .bar { flex-direction: column; align-items: flex-start; padding: 12px 0; }
  .topbar nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

/* ---------- High-Impact Auth Suite (Login & Register) ---------- */

.auth-wrapper {
  max-width: 1040px;
  margin: 30px auto;
}

.auth-banner {
  position: relative;
  height: 240px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-bottom: 3px solid var(--amber);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.auth-heli-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.2) contrast(1.1);
}

.auth-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 12, 20, 0.4) 0%, rgba(7, 12, 20, 0.92) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.auth-logo-emblem {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 15px var(--amber-glow));
  margin-bottom: 8px;
}

.auth-banner-title {
  font-family: var(--font-hud);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
@media (max-width: 768px) { .auth-grid { grid-template-columns: 1fr; } }

.auth-intel-card, .auth-form-card {
  margin: 0 !important;
  border-radius: 0 !important;
  height: 100%;
}
.auth-intel-card {
  border-right: none !important;
  background: rgba(11, 20, 34, 0.85) !important;
}

.auth-features {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-features li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.feat-icon {
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.auth-features strong {
  display: block;
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--amber);
  margin-bottom: 2px;
}

.auth-features p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-top: 0;
}

.hint {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
  font-family: var(--font-tactical);
  letter-spacing: 1px;
}

.auth-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-tactical);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- High-Impact 4-Column Studio Footer ---------- */

.site-footer {
  position: relative;
  margin-top: 80px;
  background: rgba(7, 12, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.6);
  isolation: isolate;
  overflow: hidden;
}

.footer-scanner-line {
  position: absolute;
  top: 0; left: 0;
  width: 300px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--amber), transparent);
  box-shadow: 0 0 12px var(--cyan-glow), 0 0 20px var(--amber-glow);
  animation: laserScanner 6s infinite ease-in-out;
}

@keyframes laserScanner {
  0% { left: -300px; }
  50% { left: calc(100% + 300px); }
  100% { left: -300px; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
  gap: 36px;
  padding: 50px 0 40px;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }

.foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.foot-logo-emblem {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--amber-glow));
}

.foot-title {
  font-family: var(--font-hud);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  display: block;
  line-height: 1;
}

.foot-sub {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.foot-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 16px;
}

.foot-heading {
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
}

.foot-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--muted);
  transition: all 0.2s ease;
}
.foot-links a::before {
  content: "›";
  margin-right: 8px;
  color: var(--cyan);
  font-weight: 800;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}
.foot-links a:hover {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
  transform: translateX(4px);
}
.foot-links a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.telemetry-card {
  background: rgba(14, 25, 42, 0.75);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.t-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-tactical);
  font-size: 12px;
  letter-spacing: 1px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
}
.t-row:last-child { border-bottom: none; padding-bottom: 0; }
.t-row span { color: var(--muted); }
.t-row strong { color: #fff; font-size: 11px; }
.t-ok { color: #34c759 !important; text-shadow: 0 0 8px rgba(52, 199, 89, 0.4); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  background: rgba(4, 8, 14, 0.98);
}

.foot-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-tactical);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
}
.foot-bottom-inner p { margin: 0; }
.foot-legal { max-width: 500px; text-align: right; opacity: 0.7; }
@media (max-width: 768px) { .foot-legal { text-align: left; } }

/* ---------- Global High-Tech Micro-Animations & Glows ---------- */

.card, .shopcard, .invtile, .stat, .install-step, .faq-item {
  animation: cardFadeIn 0.4s ease-out forwards;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn:hover, .btn.big:hover {
  animation: buttonPulse 1.5s infinite ease-in-out alternate;
}

@keyframes buttonPulse {
  0% { box-shadow: 0 0 20px rgba(255, 170, 0, 0.4); }
  100% { box-shadow: 0 0 35px rgba(255, 170, 0, 0.8), 0 0 15px rgba(0, 240, 255, 0.4); }
}

/* ---------- High-Impact Trade & Exchange Office Suite ---------- */

.tradebar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px 24px;
}
.tradebar p { margin: 0; font-size: 14px; line-height: 1.4; }

.trade-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.tradeoffer-card {
  position: relative;
  background: rgba(11, 20, 34, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}
.tradeoffer-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.25);
}

.tradeoffer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 14px;
}

.tradeoffer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-hud);
  font-size: 15px;
  color: #fff;
}

.tradeoffer-avatar {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
}

.tradeoffer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trade-time {
  font-family: var(--font-tactical);
  font-size: 12px;
  color: var(--muted);
}

.trade-msg {
  background: rgba(0, 240, 255, 0.05);
  border-left: 3px solid var(--cyan);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  font-style: italic;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.trade-sides {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .trade-sides { flex-direction: column; } }

.trade-side {
  flex: 1;
  width: 100%;
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 12px 14px;
}
.trade-side.side-receive {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.05);
}
.trade-side.side-give {
  border-color: rgba(255, 170, 0, 0.3);
  box-shadow: inset 0 0 15px rgba(255, 170, 0, 0.05);
}

.side-label {
  display: block;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.side-receive .side-label { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }
.side-give .side-label { color: var(--amber); text-shadow: 0 0 8px var(--amber-glow); }

.side-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trade-arrow {
  font-family: var(--font-hud);
  font-size: 22px;
  font-weight: 900;
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber-glow);
  padding: 0 4px;
}

.tradechip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 25, 42, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 6px 10px;
  transition: all 0.2s ease;
}
.tradechip:hover {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.08);
}

.tradechip-thumb {
  width: 44px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 12, 20, 0.8);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  flex-shrink: 0;
}
.tradechip-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tradechip-code {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 800;
  color: var(--cyan);
}

.tradechip-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.tradechip-name {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tradechip-sub {
  font-family: var(--font-tactical);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

.tradechip-qty {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 800;
  color: var(--amber);
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid var(--amber);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.trade-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* ---------- Document & Legal Pages (TOS, Privacy, About, Contact) ---------- */

.doc-card {
  max-width: 1050px;
  width: 100%;
  margin: 0 auto 40px auto;
  padding: 36px 44px;
  background: rgba(11, 20, 34, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.doc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 24px;
}

.doc-sec {
  margin-bottom: 28px;
}
.doc-sec:last-child { margin-bottom: 0; }

.doc-sec h3 {
  font-family: var(--font-hud);
  font-size: 16px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.doc-sec p {
  font-size: 14px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.doc-sec p a {
  color: var(--amber);
  text-decoration: underline;
}
.doc-sec p a:hover {
  color: var(--cyan);
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.5;
}
.doc-list li::before {
  content: "❯";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 11px;
}

.glass-box {
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

/* About Page Hero & Grid Layout */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 48px;
  margin-bottom: 32px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(11, 20, 34, 0.9);
}

.about-hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* Declared here rather than as an inline style attribute: the
     Content-Security-Policy has no 'unsafe-inline' in style-src, so an inline
     style would simply be dropped and the artwork would never appear. */
  background-image: url('/static/bulletwar_heli.png');
  background-size: cover;
  background-position: center right;
  opacity: 0.35;
  filter: contrast(1.2) brightness(0.9);
  pointer-events: none;
}

.about-hero-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(7, 12, 20, 0.95) 0%, rgba(7, 12, 20, 0.75) 50%, rgba(7, 12, 20, 0.4) 100%);
  pointer-events: none;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 32px;
}

.about-emblem-badge {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  background: rgba(0, 240, 255, 0.05);
  border: 2px solid var(--cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px var(--cyan-glow);
}

.about-emblem-badge img {
  width: 75px;
  height: 75px;
  object-fit: contain;
}

.about-title {
  font-family: var(--font-hud);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  margin: 6px 0 10px 0;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.about-subtitle {
  font-size: 16px;
  color: #94a3b8;
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.about-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.about-card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.about-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 8px 30px var(--cyan-glow);
}

.about-card-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.about-card-icon-wrap {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.about-card-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}


.about-card h3 {
  font-family: var(--font-hud);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 8px 0 12px 0;
  letter-spacing: 1px;
}

.about-card p {
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.6;
}

.about-stats-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px 24px;
  margin-bottom: 32px;
  text-align: center;
  background: rgba(11, 20, 34, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.about-stat .stat-num {
  display: block;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.about-stat .stat-label {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
}

.about-disclaimer {
  padding: 28px 32px;
  margin-bottom: 40px;
  background: rgba(7, 12, 20, 0.9);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.disclaimer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 16px;
}

.disclaimer-body p {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 10px;
}
.disclaimer-body p:last-child { margin-bottom: 0; }
.disclaimer-body a {
  color: var(--amber);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-stats-banner { grid-template-columns: repeat(2, 1fr); }
  .about-hero-content { flex-direction: column; text-align: center; }
  .about-chips { justify-content: center; }
}







/* ==========================================================================
   UTILITIES INTRODUCED WITH THE STRICT CONTENT-SECURITY-POLICY
   style-src is 'self' with no 'unsafe-inline', so every value that used to be
   written as a style="" attribute lives here as a class instead.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--amber);
  color: #07101c;
  padding: 10px 18px;
  font-family: var(--font-hud);
  font-weight: 700;
  letter-spacing: 2px;
}
.skip-link:focus { left: 0; }

.spaced { margin-top: 16px; }
.spaced-lg { margin-top: 32px; }
.small-note { font-size: 13px; margin-top: 12px; }

.k-cyan { color: var(--cyan); }
.k-amber { color: var(--amber); }
.n-cyan { color: var(--cyan); }
.n-amber { color: var(--amber); }

.sec-head.divided {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.dossier-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  font-family: var(--font-tactical);
  letter-spacing: 0.5px;
}

.foot-muted-link { color: var(--muted); }
.foot-note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.legal-consent { margin-top: 14px; text-align: center; }

.download-cta {
  margin: 20px 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Contact cards ---------- */

.contact-grid { margin-top: 24px; }
.contact-box {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-h {
  margin: 10px 0;
  color: #fff;
  font-family: var(--font-hud);
  font-size: 17px;
  letter-spacing: 1.5px;
}
.contact-p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.contact-action { margin-top: 20px; }
.contact-mail {
  margin-top: 20px;
  background: rgba(7, 12, 20, 0.8);
  border: 1px solid var(--glass-border);
  padding: 12px 16px;
  border-radius: 6px;
  text-align: center;
}
.contact-mail span {
  font-family: var(--font-hud);
  color: var(--amber);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Cloudflare Turnstile ---------- */

.challenge {
  margin: 18px 0 4px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.challenge .cf-turnstile { display: block; }

/* ---------- Discord community ---------- */

.discord-btn {
  background: linear-gradient(135deg, #5865f2, #7b86ff);
  border-color: rgba(88, 101, 242, 0.7);
  color: #fff;
}
.discord-btn:hover {
  background: linear-gradient(135deg, #6b77ff, #94a0ff);
  color: #fff;
  box-shadow: 0 0 22px rgba(88, 101, 242, 0.55);
}
.discord-glyph { margin-right: 6px; }
.discord-live { margin: 14px 0 18px; }

.discord-band {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
.discord-band-copy p { color: var(--muted); line-height: 1.6; }

.discord-embed {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(7, 12, 20, 0.75);
}
.discord-embed iframe { display: block; border: 0; width: 100%; }
.discord-embed .hint { padding: 10px 14px; margin: 0; }

.community-hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}
.community-copy p { color: var(--muted); line-height: 1.6; }
.community-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.community-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
  line-height: 1.55;
}
.community-list li:last-child { border-bottom: 0; }
.community-list li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-family: var(--mono);
  font-weight: 700;
}
.community-list strong { color: var(--text); }

@media (max-width: 980px) {
  .discord-band, .community-hero { grid-template-columns: 1fr; }
}

/* ---------- Progress-bar widths ----------
   .xp-fill takes its width from a p<N> class rather than an inline style, for
   the same CSP reason as everything above. barClass in funcs.go clamps the
   percentage to 0-100 and picks the matching rule. */
.xp-fill.p0 { width: 0%; }
.xp-fill.p1 { width: 1%; }
.xp-fill.p2 { width: 2%; }
.xp-fill.p3 { width: 3%; }
.xp-fill.p4 { width: 4%; }
.xp-fill.p5 { width: 5%; }
.xp-fill.p6 { width: 6%; }
.xp-fill.p7 { width: 7%; }
.xp-fill.p8 { width: 8%; }
.xp-fill.p9 { width: 9%; }
.xp-fill.p10 { width: 10%; }
.xp-fill.p11 { width: 11%; }
.xp-fill.p12 { width: 12%; }
.xp-fill.p13 { width: 13%; }
.xp-fill.p14 { width: 14%; }
.xp-fill.p15 { width: 15%; }
.xp-fill.p16 { width: 16%; }
.xp-fill.p17 { width: 17%; }
.xp-fill.p18 { width: 18%; }
.xp-fill.p19 { width: 19%; }
.xp-fill.p20 { width: 20%; }
.xp-fill.p21 { width: 21%; }
.xp-fill.p22 { width: 22%; }
.xp-fill.p23 { width: 23%; }
.xp-fill.p24 { width: 24%; }
.xp-fill.p25 { width: 25%; }
.xp-fill.p26 { width: 26%; }
.xp-fill.p27 { width: 27%; }
.xp-fill.p28 { width: 28%; }
.xp-fill.p29 { width: 29%; }
.xp-fill.p30 { width: 30%; }
.xp-fill.p31 { width: 31%; }
.xp-fill.p32 { width: 32%; }
.xp-fill.p33 { width: 33%; }
.xp-fill.p34 { width: 34%; }
.xp-fill.p35 { width: 35%; }
.xp-fill.p36 { width: 36%; }
.xp-fill.p37 { width: 37%; }
.xp-fill.p38 { width: 38%; }
.xp-fill.p39 { width: 39%; }
.xp-fill.p40 { width: 40%; }
.xp-fill.p41 { width: 41%; }
.xp-fill.p42 { width: 42%; }
.xp-fill.p43 { width: 43%; }
.xp-fill.p44 { width: 44%; }
.xp-fill.p45 { width: 45%; }
.xp-fill.p46 { width: 46%; }
.xp-fill.p47 { width: 47%; }
.xp-fill.p48 { width: 48%; }
.xp-fill.p49 { width: 49%; }
.xp-fill.p50 { width: 50%; }
.xp-fill.p51 { width: 51%; }
.xp-fill.p52 { width: 52%; }
.xp-fill.p53 { width: 53%; }
.xp-fill.p54 { width: 54%; }
.xp-fill.p55 { width: 55%; }
.xp-fill.p56 { width: 56%; }
.xp-fill.p57 { width: 57%; }
.xp-fill.p58 { width: 58%; }
.xp-fill.p59 { width: 59%; }
.xp-fill.p60 { width: 60%; }
.xp-fill.p61 { width: 61%; }
.xp-fill.p62 { width: 62%; }
.xp-fill.p63 { width: 63%; }
.xp-fill.p64 { width: 64%; }
.xp-fill.p65 { width: 65%; }
.xp-fill.p66 { width: 66%; }
.xp-fill.p67 { width: 67%; }
.xp-fill.p68 { width: 68%; }
.xp-fill.p69 { width: 69%; }
.xp-fill.p70 { width: 70%; }
.xp-fill.p71 { width: 71%; }
.xp-fill.p72 { width: 72%; }
.xp-fill.p73 { width: 73%; }
.xp-fill.p74 { width: 74%; }
.xp-fill.p75 { width: 75%; }
.xp-fill.p76 { width: 76%; }
.xp-fill.p77 { width: 77%; }
.xp-fill.p78 { width: 78%; }
.xp-fill.p79 { width: 79%; }
.xp-fill.p80 { width: 80%; }
.xp-fill.p81 { width: 81%; }
.xp-fill.p82 { width: 82%; }
.xp-fill.p83 { width: 83%; }
.xp-fill.p84 { width: 84%; }
.xp-fill.p85 { width: 85%; }
.xp-fill.p86 { width: 86%; }
.xp-fill.p87 { width: 87%; }
.xp-fill.p88 { width: 88%; }
.xp-fill.p89 { width: 89%; }
.xp-fill.p90 { width: 90%; }
.xp-fill.p91 { width: 91%; }
.xp-fill.p92 { width: 92%; }
.xp-fill.p93 { width: 93%; }
.xp-fill.p94 { width: 94%; }
.xp-fill.p95 { width: 95%; }
.xp-fill.p96 { width: 96%; }
.xp-fill.p97 { width: 97%; }
.xp-fill.p98 { width: 98%; }
.xp-fill.p99 { width: 99%; }
.xp-fill.p100 { width: 100%; }

/* Pre-launch state on the download page: the client is not published yet, so
   the page states that instead of rendering a button that leads nowhere. */
.launch-lead {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--amber);
  margin-bottom: 12px;
}