/* ==========================================================================
   ELITE SNIPER — PREMIUM TACTICAL DIGITAL EXPERIENCE
   OFFICIAL MILITARY-GRADE TECHNOLOGY DESIGN SYSTEM
   ========================================================================== */

:root {
  /* Core Elite Tactical Palette (Official Specification) */
  --bg-deep-black: #080D13;
  --bg-dark-graphite: #101923;
  --bg-surface: #142331;
  --bg-surface-elevated: #1C2E42;
  --bg-surface-hover: #22374F;
  --bg-glass: rgba(16, 25, 35, 0.88);
  --bg-glass-card: rgba(20, 35, 49, 0.78);
  --bg-glass-elevated: rgba(28, 46, 66, 0.82);

  /* Primary Military Accents */
  --premium-gold: #D6B46A;
  --gold-primary: #D6B46A;
  --gold-amber: #E5A93C;
  --gold-glow: rgba(214, 180, 106, 0.45);
  --gold-subtle: rgba(214, 180, 106, 0.12);

  --electric-blue: #24B8FF;
  --cyber-blue: #24B8FF;
  --steel-blue: #1C3347;
  --steel-blue-bright: #24B8FF;
  --blue-glow: rgba(36, 184, 255, 0.45);
  --blue-subtle: rgba(36, 184, 255, 0.12);

  --neon-green: #21E6A1;
  --military-green: #123326;
  --military-green-bright: #21E6A1;
  --color-success: #21E6A1;
  --green-glow: rgba(33, 230, 161, 0.45);
  --green-subtle: rgba(33, 230, 161, 0.12);

  --energetic-orange: #FF781F;
  --color-danger: #EF4444;
  --color-warning: #D6B46A;
  --orange-glow: rgba(255, 120, 31, 0.45);
  --orange-subtle: rgba(255, 120, 31, 0.12);

  /* Text & Typography Hierarchy */
  --pure-white: #F4F7FB;
  --text-main: #F4F7FB;
  --text-muted: #9AABBF;
  --text-dark: #6C8299;
  --text-dim: #4B5E73;

  /* Borders & Depth */
  --border-color: rgba(154, 171, 191, 0.14);
  --border-subtle: rgba(154, 171, 191, 0.08);
  --border-glow: rgba(214, 180, 106, 0.4);
  --border-focus: rgba(36, 184, 255, 0.5);

  /* 1v1 Battle Esports Themes */
  --p1-color: #24B8FF;
  --p1-border: rgba(36, 184, 255, 0.45);
  --p1-glow: rgba(36, 184, 255, 0.35);
  --p1-bg: rgba(36, 184, 255, 0.12);

  --p2-color: #FF781F;
  --p2-border: rgba(255, 120, 31, 0.45);
  --p2-glow: rgba(255, 120, 31, 0.35);
  --p2-bg: rgba(255, 120, 31, 0.12);

  /* 5-Variant TTT Distinct Theme */
  --ttt-gold: #D6B46A;
  --ttt-border-gold: rgba(214, 180, 106, 0.5);
  --ttt-glow-gold: rgba(214, 180, 106, 0.35);
  --ttt-bg-card: rgba(20, 35, 49, 0.88);

  /* Typography */
  --font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Dimensions & Geometry */
  --sidebar-width: 292px;
  --sidebar-collapsed-width: 78px;
  --topbar-height: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-elevated: 0 20px 45px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   RESET & GLOBAL TACTICAL STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

body {
  background-color: var(--bg-deep-black);
  color: var(--text-main);
  font-family: var(--font-family);
  min-height: 100vh;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
  background-image: 
    radial-gradient(circle at 12% 15%, rgba(36, 184, 255, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(214, 180, 106, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(33, 230, 161, 0.03) 0%, transparent 60%),
    radial-gradient(rgba(154, 171, 191, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(154, 171, 191, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 171, 191, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 64px 64px, 64px 64px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Tactical Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep-black);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-surface-elevated);
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--premium-gold);
  box-shadow: 0 0 10px var(--gold-glow);
}

/* ==========================================================================
   APP SHELL LAYOUT: SIDEBAR + MAIN VIEWPORT
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* SIDEBAR */

/* Tactical Mobile Sidebar Backdrop */
.sidebar-backdrop {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  background: rgba(8, 13, 19, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-backdrop.active,
.app-sidebar.mobile-open ~ .sidebar-backdrop {
  display: block !important;
  opacity: 1;
  pointer-events: auto !important;
}

.app-sidebar {
  width: var(--sidebar-width);
  background: var(--bg-dark-graphite);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.app-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(8, 13, 18, 0.5);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.brand-crest {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: rgba(8, 13, 18, 0.9);
  border: 2px solid var(--premium-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px var(--gold-glow), 0 2px 10px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  cursor: pointer;
}

.brand-crest:hover {
  transform: scale(1.08);
  box-shadow: 0 0 24px var(--gold-glow), 0 0 10px var(--premium-gold);
  border-color: #fde047;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.brand-title {
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease;
}

.brand-main {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--pure-white);
  line-height: 1.2;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--premium-gold);
  letter-spacing: 1.5px;
}

.app-sidebar.collapsed .brand-title {
  opacity: 0;
  pointer-events: none;
  width: 0;
}

.sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar-toggle-btn:hover {
  background: rgba(214, 180, 106, 0.15);
  color: var(--premium-gold);
  border-color: var(--premium-gold);
}

.toggle-icon {
  width: 18px;
  height: 18px;
  fill: none !important;
  stroke: currentColor !important;
}

/* Sidebar Nav */
.sidebar-nav {
  flex: 1;
  padding: 18px 12px 24px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.sidebar-nav-item:hover {
  background: rgba(38, 63, 85, 0.35);
  color: var(--pure-white);
  border-color: rgba(154, 171, 191, 0.15);
  transform: translateX(3px);
}

.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(36, 60, 50, 0.7), rgba(38, 63, 85, 0.7));
  color: var(--pure-white);
  border-color: var(--premium-gold);
  box-shadow: inset 0 0 14px rgba(214, 180, 106, 0.2);
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--premium-gold);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px var(--premium-gold);
}

.sidebar-nav-item.item-ttt {
  border: 1px solid rgba(214, 180, 106, 0.25);
  background: rgba(214, 180, 106, 0.05);
}

.sidebar-nav-item.item-ttt:hover {
  background: rgba(214, 180, 106, 0.15);
  border-color: var(--premium-gold);
}

.nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--silver);
  transition: var(--transition);
}

.sidebar-nav-item:hover .nav-icon {
  color: #ffffff;
  transform: scale(1.1);
}

.sidebar-nav-item.active .nav-icon {
  color: var(--premium-gold);
  filter: drop-shadow(0 0 8px rgba(214, 180, 106, 0.6));
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.15px;
  transition: opacity 0.2s ease;
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--silver);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-badge.badge-duel {
  background: rgba(255, 120, 31, 0.2);
  color: #fb923c;
  border-color: rgba(255, 120, 31, 0.35);
}

.nav-badge.badge-gold {
  background: rgba(214, 180, 106, 0.2);
  color: var(--premium-gold);
  border-color: var(--premium-gold);
}

.app-sidebar.collapsed .nav-label,
.app-sidebar.collapsed .nav-badge {
  opacity: 0;
  pointer-events: none;
  width: 0;
  display: none;
}

.app-sidebar.collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 12px 0;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  background: rgba(8, 13, 18, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-profile-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.avatar-ring {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--steel-blue), #1C2E42);
  border: 1.5px solid var(--steel-blue-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--pure-white);
  box-shadow: 0 0 10px var(--steel-blue-glow);
}

.user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
}

.user-callsign {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pure-white);
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--premium-gold);
  letter-spacing: 0.5px;
}

.app-sidebar.collapsed .user-info {
  display: none;
}

.tactical-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--military-green-bright);
  box-shadow: 0 0 8px var(--military-green-bright);
  animation: pulse-dot 2s infinite ease-in-out;
}

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

.status-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.app-sidebar.collapsed .tactical-status-pill {
  justify-content: center;
}

.app-sidebar.collapsed .status-text {
  display: none;
}

/* ==========================================================================
   MAIN VIEWPORT & TOP COMMAND HEADER BAR
   ========================================================================== */
.main-viewport {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: calc(100% - var(--sidebar-width));
}

.app-sidebar.collapsed ~ .main-viewport {
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100% - var(--sidebar-collapsed-width));
}

.tactical-top-bar {
  height: var(--topbar-height);
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-btn {
  display: none !important;
  background: transparent;
  border: none;
  color: var(--pure-white);
  font-size: 22px;
  cursor: pointer;
}

.tactical-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.bc-sector {
  color: var(--text-muted);
  letter-spacing: 1px;
}

.bc-sep {
  color: var(--border-color);
}

.bc-active {
  color: var(--premium-gold);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.top-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.digital-military-clock {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 5px 14px;
  background: rgba(8, 13, 18, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.clock-date {
  color: var(--silver);
}

.clock-time {
  color: var(--steel-blue-bright);
  font-weight: 800;
  letter-spacing: 1px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tactical-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--silver);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-mono);
}

.tactical-action-btn:hover {
  background: rgba(214, 180, 106, 0.12);
  border-color: var(--premium-gold);
  color: var(--premium-gold);
}

/* SCREENS CONTAINER */
.screens-container {
  flex: 1;
  padding: 28px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.screen {
  display: none;
  animation: screenFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.screen.active {
  display: block !important;
}

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

/* ==========================================================================
   BUTTONS & TACTICAL INTERACTIVE CONTROLS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, #1e3a8a, var(--steel-blue));
  border-color: var(--steel-blue-bright);
  color: var(--pure-white);
  box-shadow: 0 4px 18px var(--steel-blue-glow);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1E97D4);
  box-shadow: 0 6px 24px rgba(36, 184, 255, 0.5);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
  color: var(--silver);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--silver);
  color: var(--pure-white);
}

.btn-battle {
  background: linear-gradient(135deg, #E56510, #c2410c);
  border-color: #FF781F;
  color: var(--pure-white);
  box-shadow: 0 4px 18px var(--p2-glow);
}

.btn-battle:hover {
  background: linear-gradient(135deg, #FF781F, #E56510);
  box-shadow: 0 6px 24px rgba(255, 120, 31, 0.5);
  transform: translateY(-2px);
}

.btn-ttt {
  background: linear-gradient(135deg, #b45309, #78350f);
  border-color: var(--premium-gold);
  color: var(--pure-white);
  box-shadow: 0 4px 18px var(--gold-glow);
}

.btn-ttt:hover {
  background: linear-gradient(135deg, #d97706, #92400e);
  box-shadow: 0 6px 24px rgba(214, 180, 106, 0.6);
  transform: translateY(-2px);
}

/* ==========================================================================
   CIRCULAR COUNTDOWN TIMER (SECTION 9)
   ========================================================================== */
.circular-timer-box {
  position: relative;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
}

.timer-circle-progress {
  fill: none;
  stroke: var(--military-green-bright);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s linear, stroke 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(33, 230, 161, 0.6));
}

.timer-circle-progress.warning {
  stroke: var(--gold-amber);
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
}

.timer-circle-progress.danger {
  stroke: var(--color-danger);
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.9));
  animation: urgent-pulse 1s infinite alternate ease-in-out;
}

@keyframes urgent-pulse {
  from { stroke-width: 6; }
  to { stroke-width: 8; }
}

.timer-digital-readout {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.timer-digits {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--pure-white);
  line-height: 1;
}

.timer-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* ==========================================================================
   BOSH SAHIFA: HERO SECTION & 6 MASTER CARDS (SECTION 4)
   ========================================================================== */
.hero-command-banner {
  background: 
    radial-gradient(circle at 90% 25%, rgba(36, 60, 50, 0.45) 0%, transparent 60%),
    radial-gradient(circle at 10% 85%, rgba(38, 63, 85, 0.4) 0%, transparent 50%),
    linear-gradient(135deg, #101923 0%, #101923 55%, #080D13 100%);
  border: 1px solid rgba(214, 180, 106, 0.28);
  border-radius: var(--radius-xl);
  padding: 38px 40px 32px 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-command-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #21E6A1, var(--premium-gold), #24B8FF, transparent);
  box-shadow: 0 0 12px var(--premium-gold);
}

.hero-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}
.hero-corner.top-left {
  top: 10px;
  left: 10px;
  border-top: 2px solid var(--premium-gold);
  border-left: 2px solid var(--premium-gold);
}
.hero-corner.top-right {
  top: 10px;
  right: 10px;
  border-top: 2px solid var(--premium-gold);
  border-right: 2px solid var(--premium-gold);
}
.hero-corner.bottom-left {
  bottom: 10px;
  left: 10px;
  border-bottom: 2px solid var(--premium-gold);
  border-left: 2px solid var(--premium-gold);
}
.hero-corner.bottom-right {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid var(--premium-gold);
  border-right: 2px solid var(--premium-gold);
}

.hero-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
  padding: 6px 0;
}

.hero-content-col {
  flex: 1;
}

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(214, 180, 106, 0.12);
  border: 1px solid rgba(214, 180, 106, 0.4);
  color: var(--premium-gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
  box-shadow: 0 0 14px rgba(214, 180, 106, 0.15);
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #21E6A1;
  box-shadow: 0 0 8px #21E6A1;
  animation: pulse-dot 1.8s infinite ease-in-out;
}

.hero-title-grand {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.gold-gradient-title {
  background: linear-gradient(135deg, #FFF2CC 0%, #D6B46A 45%, #D6B46A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 14px rgba(214, 180, 106, 0.45));
}

.hero-subtitle-motto {
  font-size: 17px;
  font-weight: 700;
  color: var(--premium-gold);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.hero-description-text {
  font-size: 14.5px;
  color: var(--silver);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 720px;
}

.hero-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(38, 63, 85, 0.35);
  border: 1px solid rgba(154, 171, 191, 0.15);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #C5D2E0;
}

.tag-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyber-blue);
}

/* Right Column: Tactical Crest / Target Radar */
.hero-badge-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-tactical-display {
  background: rgba(8, 13, 18, 0.65);
  border: 1px solid rgba(214, 180, 106, 0.25);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
}

.tactical-target-radar {
  width: 110px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.radar-outer-ring {
  position: absolute;
  inset: -6px;
  border: 1.5px dashed rgba(214, 180, 106, 0.35);
  border-radius: 50%;
  animation: spin-radar 24s linear infinite;
}

.radar-reticle-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.radar-reticle-cross::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 50%;
  width: 1px;
  background: rgba(36, 184, 255, 0.25);
}
.radar-reticle-cross::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 1px;
  background: rgba(36, 184, 255, 0.25);
}

@keyframes spin-radar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-crest-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(214, 180, 106, 0.35));
  position: relative;
  z-index: 2;
}

.tactical-display-caption .caption-unit {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--premium-gold);
  letter-spacing: 0.8px;
}

.tactical-display-caption .caption-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #9AABBF;
  margin-top: 4px;
}

.status-indicator-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #21E6A1;
  box-shadow: 0 0 6px #21E6A1;
}

/* ==================== Key Metrics HUD Bar ==================== */
.hero-metrics-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(154, 171, 191, 0.12);
  position: relative;
  z-index: 2;
}

.metric-hud-item {
  background: rgba(11, 18, 25, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.metric-hud-item:hover {
  transform: translateY(-3px);
  background: rgba(17, 26, 36, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.metric-hud-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.metric-hud-item.metric-hud-blue::before { background: #24B8FF; box-shadow: 0 0 8px #24B8FF; }
.metric-hud-item.metric-hud-green::before { background: #21E6A1; box-shadow: 0 0 8px #21E6A1; }
.metric-hud-item.metric-hud-amber::before { background: #eab308; box-shadow: 0 0 8px #eab308; }
.metric-hud-item.metric-hud-gold::before { background: #D6B46A; box-shadow: 0 0 8px #D6B46A; }
.metric-hud-item.metric-hud-orange::before { background: #FF781F; box-shadow: 0 0 8px #FF781F; }

.metric-hud-item.metric-hud-blue:hover { border-color: rgba(36, 184, 255, 0.4); }
.metric-hud-item.metric-hud-green:hover { border-color: rgba(33, 230, 161, 0.4); }
.metric-hud-item.metric-hud-amber:hover { border-color: rgba(234, 179, 8, 0.4); }
.metric-hud-item.metric-hud-gold:hover { border-color: rgba(214, 180, 106, 0.5); }
.metric-hud-item.metric-hud-orange:hover { border-color: rgba(255, 120, 31, 0.5); }

.metric-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.metric-hud-icon {
  font-size: 20px;
}

.metric-hud-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.tag-blue { background: rgba(36, 184, 255, 0.15); color: #24B8FF; }
.tag-green { background: rgba(33, 230, 161, 0.15); color: #34D399; }
.tag-amber { background: rgba(234, 179, 8, 0.15); color: #facc15; }
.tag-gold { background: rgba(214, 180, 106, 0.15); color: #D6B46A; }
.tag-orange { background: rgba(255, 120, 31, 0.15); color: #fb923c; }

.metric-hud-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}
.val-blue { color: #24B8FF; text-shadow: 0 0 12px rgba(36, 184, 255, 0.35); }
.val-green { color: #34D399; text-shadow: 0 0 12px rgba(33, 230, 161, 0.35); }
.val-amber { color: #facc15; text-shadow: 0 0 12px rgba(234, 179, 8, 0.35); }
.val-gold { color: #f5d794; text-shadow: 0 0 12px rgba(214, 180, 106, 0.35); }
.val-orange { color: #fb923c; text-shadow: 0 0 12px rgba(255, 120, 31, 0.35); }

.metric-hud-label {
  font-size: 13px;
  font-weight: 700;
  color: #F4F7FB;
  margin-bottom: 2px;
  white-space: nowrap;
}

.metric-hud-sub {
  font-size: 11px;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1200px) {
  .hero-metrics-hud {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .hero-main-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-badge-col {
    align-self: center;
  }
  .hero-metrics-hud {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-title-grand {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .hero-metrics-hud {
    grid-template-columns: 1fr;
  }
}

/* 6 MASTER COMMAND CARDS */
.command-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 22px;
  margin-bottom: 32px;
}

.command-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.command-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--steel-blue-bright), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.command-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 184, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(36, 184, 255, 0.15);
  background: var(--bg-surface-elevated);
}

.command-card:hover::before {
  opacity: 1;
}

/* Card Variants */
.command-card.card-curriculum:hover {
  border-color: var(--military-green-bright);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--military-green-glow);
}
.command-card.card-curriculum::before {
  background: linear-gradient(90deg, transparent, var(--military-green-bright), transparent);
}

.command-card.card-battle:hover {
  border-color: #FF781F;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--p2-glow);
}
.command-card.card-battle::before {
  background: linear-gradient(90deg, transparent, #FF781F, transparent);
}

.command-card.card-ttt {
  border-color: rgba(214, 180, 106, 0.3);
  background: linear-gradient(135deg, rgba(21, 34, 46, 0.9), rgba(45, 35, 20, 0.4));
}
.command-card.card-ttt:hover {
  border-color: var(--premium-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px var(--gold-glow);
}
.command-card.card-ttt::before {
  background: linear-gradient(90deg, transparent, var(--premium-gold), transparent);
}

.command-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.command-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
}

.command-icon-box.icon-box-solo {
  background: rgba(36, 184, 255, 0.12);
  border: 1.5px solid rgba(36, 184, 255, 0.35);
  color: #24B8FF;
  box-shadow: 0 0 20px rgba(36, 184, 255, 0.22);
}

.command-icon-box.icon-box-battle {
  background: rgba(255, 120, 31, 0.12);
  border: 1.5px solid rgba(255, 120, 31, 0.35);
  color: #fb923c;
  box-shadow: 0 0 20px rgba(255, 120, 31, 0.22);
}

.command-icon-box.icon-box-curriculum {
  background: rgba(33, 230, 161, 0.12);
  border: 1.5px solid rgba(33, 230, 161, 0.35);
  color: #34D399;
  box-shadow: 0 0 20px rgba(33, 230, 161, 0.22);
}

.command-icon-box.icon-box-results {
  background: rgba(214, 180, 106, 0.12);
  border: 1.5px solid rgba(214, 180, 106, 0.35);
  color: var(--premium-gold);
  box-shadow: 0 0 20px rgba(214, 180, 106, 0.22);
}

.command-icon-box.icon-box-admin {
  background: rgba(148, 163, 184, 0.12);
  border: 1.5px solid rgba(148, 163, 184, 0.3);
  color: #C5D2E0;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.18);
}

.command-card:hover .command-icon-box {
  transform: scale(1.08);
}

.command-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--silver);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.command-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--pure-white);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.command-card-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.command-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(154, 171, 191, 0.08);
}

.command-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dark);
}

.command-card-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--steel-blue-bright);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease;
}

.command-card:hover .command-card-btn {
  transform: translateX(4px);
  color: var(--premium-gold);
}

/* ==========================================================================
   BOBLAR VA MASHG'ULOTLAR MUNDARIJASI (SECTION 6 - SCREEN CURRICULUM)
   ========================================================================== */
.curriculum-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.curriculum-chapter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.curriculum-chapter-card:hover {
  border-color: rgba(154, 171, 191, 0.25);
}

.curriculum-chapter-header {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: rgba(17, 25, 35, 0.6);
  transition: background 0.2s ease;
}

.curriculum-chapter-header:hover {
  background: rgba(28, 45, 61, 0.6);
}

.chapter-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.chapter-number-badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--military-green), var(--steel-blue));
  color: var(--pure-white);
  border: 1px solid var(--premium-gold);
  letter-spacing: 1px;
}

.chapter-title-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--pure-white);
}

.chapter-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chapter-meta-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.chapter-progress-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(33, 230, 161, 0.15);
  color: var(--military-green-bright);
  border: 1px solid rgba(33, 230, 161, 0.3);
}

.chapter-toggle-arrow {
  font-size: 16px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.curriculum-chapter-card.expanded .chapter-toggle-arrow {
  transform: rotate(180deg);
  color: var(--premium-gold);
}

.curriculum-sessions-list {
  padding: 16px 26px 24px;
  border-top: 1px solid var(--border-color);
  background: rgba(8, 13, 18, 0.4);
  display: none;
  flex-direction: column;
  gap: 12px;
}

.curriculum-chapter-card.expanded .curriculum-sessions-list {
  display: flex;
}

.session-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(21, 34, 46, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.session-row-item:hover {
  background: rgba(28, 45, 61, 0.85);
  border-color: var(--steel-blue-bright);
}

.session-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pure-white);
}

.session-code-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--premium-gold);
}

.session-actions {
  display: flex;
  gap: 10px;
}

/* ==========================================================================
   TEST OYNASI: YAKKA TARTIBDAGI TEST (SECTION 7 - PREMIUM MILITARY HUD)
   ========================================================================== */
.quiz-top-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(145deg, rgba(17, 25, 35, 0.9) 0%, rgba(8, 13, 18, 0.96) 100%);
  border: 1.5px solid rgba(154, 171, 191, 0.16);
  border-radius: 14px;
  padding: 10px 20px;
  margin-bottom: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  gap: 16px;
}

.quiz-top-hud::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyber-blue) 0%, var(--premium-gold) 50%, var(--military-green-bright) 100%);
}

.hud-meta-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.hud-pills-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid;
  letter-spacing: 0.4px;
}

.hud-pill.pill-cyan {
  background: rgba(36, 184, 255, 0.12);
  color: var(--cyber-blue);
  border-color: rgba(36, 184, 255, 0.35);
}

.hud-pill.pill-gold {
  background: rgba(214, 180, 106, 0.14);
  color: var(--premium-gold);
  border-color: rgba(214, 180, 106, 0.4);
  box-shadow: 0 0 12px rgba(214, 180, 106, 0.15);
}

.hud-pill.pill-green {
  background: rgba(33, 230, 161, 0.12);
  color: var(--military-green-bright);
  border-color: rgba(33, 230, 161, 0.35);
}

.hud-session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.hud-reticle-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(36, 184, 255, 0.1);
  border: 1px solid rgba(36, 184, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hud-session-title {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 800;
  color: var(--pure-white);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-right-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.btn-abort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  background: rgba(239, 68, 68, 0.1);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
}

.btn-abort:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

/* Progress Track Section */
.quiz-progress-section {
  margin-bottom: 22px;
}

.quiz-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.progress-info-label {
  color: var(--cyber-blue);
  font-weight: 800;
  letter-spacing: 0.6px;
}

.progress-info-time {
  color: var(--text-dark);
}

.quiz-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24B8FF 0%, #21E6A1 100%);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(36, 184, 255, 0.6);
  transition: width 0.35s ease;
}

/* Question Presentation Card */
.quiz-question-card {
  position: relative;
  background: radial-gradient(130% 120% at 50% 0%, rgba(18,28,42,0.97) 0%, rgba(9,15,24,0.99) 100%);
  border: 1.5px solid rgba(36,184,255,0.22);
  border-radius: 16px;
  padding: 18px 24px 14px;
  margin-bottom: 12px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.card-corner-bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.card-corner-bracket.top-left {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--cyber-blue);
  border-left: 2px solid var(--cyber-blue);
}
.card-corner-bracket.top-right {
  top: 8px;
  right: 8px;
  border-top: 2px solid var(--cyber-blue);
  border-right: 2px solid var(--cyber-blue);
}
.card-corner-bracket.bottom-left {
  bottom: 8px;
  left: 8px;
  border-bottom: 2px solid var(--cyber-blue);
  border-left: 2px solid var(--cyber-blue);
}
.card-corner-bracket.bottom-right {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid var(--cyber-blue);
  border-right: 2px solid var(--cyber-blue);
}

.question-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.q-seq-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(36, 184, 255, 0.12);
  color: var(--cyber-blue);
  border: 1.5px solid rgba(36, 184, 255, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.pulse-radar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyber-blue);
  box-shadow: 0 0 8px var(--cyber-blue);
  animation: radar-pulse 1.6s infinite ease-in-out;
}

@keyframes radar-pulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.q-diff-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--premium-gold);
  background: rgba(214, 180, 106, 0.12);
  border: 1px solid rgba(214, 180, 106, 0.35);
  padding: 3px 8px;
  border-radius: 4px;
}

.quiz-question-text {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.45;
  color: #FFFFFF;
  border-left: 3.5px solid var(--cyber-blue);
  padding-left: 14px;
  margin-bottom: 14px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 4 Large Tactical Options (ESPORTS COMMAND BARS) */
.quiz-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.quiz-opt-btn,
.option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(21, 34, 46, 0.65) 0%, rgba(14, 23, 33, 0.85) 100%);
  border: 1.5px solid rgba(154, 171, 191, 0.16);
  border-radius: 12px;
  color: #F4F7FB;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.quiz-opt-btn:hover:not(:disabled):not(.disabled),
.option-btn:hover:not(:disabled):not(.disabled) {
  background: linear-gradient(135deg, rgba(38, 63, 85, 0.7) 0%, rgba(20, 36, 52, 0.9) 100%);
  border-color: var(--cyber-blue);
  transform: translateX(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(36, 184, 255, 0.25);
}

.opt-btn-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.opt-key-badge {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 9px;
  background: rgba(8, 13, 18, 0.85);
  border: 1.5px solid rgba(36, 184, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--cyber-blue);
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.quiz-opt-btn:hover:not(:disabled):not(.disabled) .opt-key-badge,
.option-btn:hover:not(:disabled):not(.disabled) .opt-key-badge {
  background: var(--cyber-blue);
  color: #080D13;
  border-color: var(--cyber-blue);
  box-shadow: 0 0 14px rgba(36, 184, 255, 0.6);
}

.opt-shortcut-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 6px;
  border-radius: 4px;
}

.opt-text-content {
  font-size: 16.5px;
  font-weight: 600;
  color: #F4F7FB;
  line-height: 1.45;
}

.opt-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.opt-indicator-ring {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(154, 171, 191, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  transition: all 0.2s ease;
}

.quiz-opt-btn:hover:not(:disabled):not(.disabled) .opt-indicator-ring,
.option-btn:hover:not(:disabled):not(.disabled) .opt-indicator-ring {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 10px rgba(36, 184, 255, 0.5);
}

/* Option Selected States */
.quiz-opt-btn.correct,
.option-btn.correct {
  background: linear-gradient(135deg, rgba(33, 230, 161, 0.22) 0%, rgba(20, 83, 45, 0.45) 100%) !important;
  border-color: #21E6A1 !important;
  box-shadow: 0 0 24px rgba(33, 230, 161, 0.4), inset 0 0 12px rgba(33, 230, 161, 0.15) !important;
  color: #fff !important;
}

.quiz-opt-btn.correct .opt-key-badge,
.option-btn.correct .opt-key-badge {
  background: #21E6A1 !important;
  color: #080D13 !important;
  border-color: #21E6A1 !important;
  box-shadow: 0 0 14px rgba(33, 230, 161, 0.6) !important;
}

.quiz-opt-btn.correct .opt-indicator-ring,
.option-btn.correct .opt-indicator-ring {
  background: #21E6A1 !important;
  border-color: #21E6A1 !important;
  color: #080D13 !important;
}

.quiz-opt-btn.wrong,
.option-btn.wrong {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0%, rgba(127, 29, 29, 0.45) 100%) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.4), inset 0 0 12px rgba(239, 68, 68, 0.15) !important;
  color: #fff !important;
}

.quiz-opt-btn.wrong .opt-key-badge,
.option-btn.wrong .opt-key-badge {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6) !important;
}

.quiz-opt-btn.wrong .opt-indicator-ring,
.option-btn.wrong .opt-indicator-ring {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

.quiz-opt-btn.disabled,
.option-btn.disabled {
  cursor: default;
  pointer-events: none;
}

.quiz-opt-btn.disabled:not(.correct):not(.wrong),
.option-btn.disabled:not(.correct):not(.wrong) {
  opacity: 0.45;
}

/* Explanation Box */
.explanation-box {
  display: none;
  margin-top: 22px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(36, 60, 50, 0.5) 0%, rgba(17, 30, 24, 0.7) 100%);
  border: 1.5px solid rgba(33, 230, 161, 0.5);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  animation: screenFadeIn 0.3s ease;
}

.explanation-box.show {
  display: block !important;
}

.explanation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--military-green-bright);
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.explanation-text-content {
  font-size: 14.5px;
  color: #F4F7FB;
  line-height: 1.55;
}

/* Question Card Footer */
.question-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(154, 171, 191, 0.1);
  flex-wrap: wrap;
  gap: 14px;
}

.keyboard-controls-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.kbd-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dark);
}

.kbd-keys-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.key-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(154, 171, 191, 0.25);
  border-radius: 5px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.kbd-divider {
  font-size: 11.5px;
  color: var(--text-dark);
  margin: 0 2px;
}

.btn-next-action {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 10px;
  background: linear-gradient(135deg, #21E6A1, #18B77E);
  color: #080D13;
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(33, 230, 161, 0.4);
  transition: all 0.25s ease;
}

.btn-next-action:hover {
  box-shadow: 0 6px 24px rgba(33, 230, 161, 0.6);
  transform: translateY(-2px);
}

/* ==========================================================================
   IKKI KISHILIK MUSOBAQA EKRANI (SECTION 8 - 1v1 ESPORTS ARENA)
   ========================================================================== */
.battle-match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(17, 25, 35, 0.95), rgba(8, 13, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 14px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.battle-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.battle-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 120, 31, 0.15);
  color: #FF781F;
  border: 1px solid rgba(255, 120, 31, 0.4);
  box-shadow: 0 0 12px rgba(255, 120, 31, 0.2);
}

.battle-session-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #F4F7FB;
}

.battle-center-scoreboard {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.score-team-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.score-team-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.p1-team-box .score-team-label {
  color: #24B8FF;
}

.p2-team-box .score-team-label {
  color: #FF781F;
}

.score-digit {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.p1-score-digit {
  color: #24B8FF;
  text-shadow: 0 0 10px rgba(36, 184, 255, 0.5);
}

.p2-score-digit {
  color: #FF781F;
  text-shadow: 0 0 10px rgba(255, 120, 31, 0.5);
}

.battle-vs-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.battle-vs-glow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fbbf24;
  line-height: 1;
}

.battle-vs-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(251, 191, 36, 0.7);
  margin-top: 2px;
}

.battle-arena-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
}

.battle-arena-split::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-color), transparent);
  pointer-events: none;
}

/* Player Cockpit Box */
.player-cockpit {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  position: relative;
  transition: var(--transition);
}

.player-cockpit.p1-side {
  border-color: var(--p1-border);
  background: linear-gradient(180deg, rgba(38, 63, 85, 0.25), rgba(21, 34, 46, 0.8));
}

.player-cockpit.p2-side {
  border-color: var(--p2-border);
  background: linear-gradient(180deg, rgba(255, 120, 31, 0.12), rgba(21, 34, 46, 0.8));
}

.cockpit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(154, 171, 191, 0.08);
}

.player-id-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
  transition: all 0.2s ease;
}

.p1-side .player-avatar-badge {
  background: rgba(36, 184, 255, 0.15);
  border-color: var(--p1-color);
  box-shadow: 0 0 15px rgba(36, 184, 255, 0.2);
}

.p2-side .player-avatar-badge {
  background: rgba(255, 120, 31, 0.15);
  border-color: var(--p2-color);
  box-shadow: 0 0 15px rgba(255, 120, 31, 0.2);
}

.player-name-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--pure-white);
}

.player-variant-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.cockpit-score-display {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.p1-side .cockpit-score-display {
  color: var(--p1-color);
  text-shadow: 0 0 12px var(--p1-glow);
}

.p2-side .cockpit-score-display {
  color: var(--p2-color);
  text-shadow: 0 0 12px var(--p2-glow);
}

/* Question Presentation Inside Cockpit */
.cockpit-question-card {
  background: rgba(8, 13, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.p1-question-card {
  border-left: 3.5px solid var(--p1-color);
}

.p2-question-card {
  border-left: 3.5px solid var(--p2-color);
}

.cockpit-q-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cockpit-q-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
}

.p1-q-pill {
  background: rgba(36, 184, 255, 0.15);
  color: #24B8FF;
  border: 1px solid rgba(36, 184, 255, 0.3);
}

.p2-q-pill {
  background: rgba(255, 120, 31, 0.15);
  color: #FF781F;
  border: 1px solid rgba(255, 120, 31, 0.3);
}

.cockpit-speed-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.cockpit-q-text {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  min-height: 48px;
}

/* Battle Options Container & Cards */
.battle-options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.battle-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(17, 25, 35, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.battle-opt-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.battle-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #E2EAF2;
  transition: all 0.2s ease;
}

.p1-side .battle-keycap {
  background: rgba(36, 184, 255, 0.12);
  border-color: rgba(36, 184, 255, 0.35);
  color: #24B8FF;
}

.p2-side .battle-keycap {
  background: rgba(255, 120, 31, 0.12);
  border-color: rgba(255, 120, 31, 0.35);
  color: #FF781F;
}

.battle-letter-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #9AABBF;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.battle-opt-text {
  font-size: 14.5px;
  font-weight: 600;
  color: #F4F7FB;
  line-height: 1.45;
  flex: 1;
}

.battle-opt-indicator {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.battle-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  transition: all 0.2s ease;
  color: transparent;
}

/* Hover States */
.p1-side .battle-option-item:hover {
  background: rgba(36, 184, 255, 0.12);
  border-color: rgba(36, 184, 255, 0.5);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(36, 184, 255, 0.18);
}

.p1-side .battle-option-item:hover .battle-ring {
  border-color: #24B8FF;
  background: rgba(36, 184, 255, 0.15);
}

.p2-side .battle-option-item:hover {
  background: rgba(255, 120, 31, 0.12);
  border-color: rgba(255, 120, 31, 0.5);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(255, 120, 31, 0.18);
}

.p2-side .battle-option-item:hover .battle-ring {
  border-color: #FF781F;
  background: rgba(255, 120, 31, 0.15);
}

/* Correct & Wrong Feedback States */
.battle-option-item.correct {
  background: rgba(33, 230, 161, 0.18) !important;
  border-color: #21E6A1 !important;
  box-shadow: 0 0 20px rgba(33, 230, 161, 0.3) !important;
}

.battle-option-item.correct .battle-letter-tag {
  background: #21E6A1;
  color: #fff;
  border-color: #21E6A1;
}

.battle-option-item.correct .battle-ring {
  border-color: #21E6A1;
  background: #21E6A1;
  color: #fff;
}

.battle-option-item.wrong {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3) !important;
}

.battle-option-item.wrong .battle-letter-tag {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.battle-option-item.wrong .battle-ring {
  border-color: #ef4444;
  background: #ef4444;
  color: #fff;
}

/* Battle Cockpit Footer */
.player-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.player-stats-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
}

.correct-stat {
  background: rgba(33, 230, 161, 0.15);
  color: #21E6A1;
  border: 1px solid rgba(33, 230, 161, 0.3);
}

.wrong-stat {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   5-VARIANT TTX DUELL ARENA (SECTION 10 & 14)
   ========================================================================== */
.ttt-arena-wrapper {
  background: linear-gradient(180deg, rgba(28, 45, 61, 0.9), rgba(17, 25, 35, 0.95));
  border: 1.5px solid var(--ttt-border-gold);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.5), 0 0 25px var(--gold-glow);
}

.ttt-central-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 13, 18, 0.65);
  border: 1px solid var(--ttt-border-gold);
  border-radius: var(--radius-lg);
  padding: 18px 28px;
  margin-bottom: 24px;
}

.badge-ttt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(214, 180, 106, 0.2);
  color: var(--premium-gold);
  border: 1px solid var(--premium-gold);
  letter-spacing: 1px;
}

.ttt-status-alert {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  animation: fadeInAlert 0.2s ease;
}

.ttt-status-alert.alert-locked {
  background: rgba(36, 184, 255, 0.12);
  border: 1px solid var(--steel-blue-bright);
  color: var(--steel-blue-bright);
}

.ttt-status-alert.alert-success {
  background: rgba(33, 230, 161, 0.15);
  border: 1px solid var(--military-green-bright);
  color: var(--military-green-bright);
}

.ttt-status-alert.alert-wrong {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.ttt-status-alert.alert-timeout {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--gold-amber);
  color: var(--gold-amber);
}

@keyframes fadeInAlert {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ttt-speed-bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--premium-gold);
  color: #000;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   NATIJALAR VA REYTING: KIBERSPORT SHOHSUPASI (SECTION 11)
   ========================================================================== */
.results-podium-card {
  background: linear-gradient(180deg, rgba(28, 45, 61, 0.95), rgba(17, 25, 35, 0.95));
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 38px 32px;
  text-align: center;
  margin-bottom: 28px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  position: relative;
}

.trophy-winner-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 24px rgba(214, 180, 106, 0.6));
  animation: trophy-bounce 1s ease;
}

@keyframes trophy-bounce {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.winner-name-grand {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--pure-white);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.winner-reason-text {
  font-size: 15px;
  color: var(--premium-gold);
  margin-bottom: 24px;
}

/* Comparative Table */
.results-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.results-comparison-table th {
  background: rgba(8, 13, 18, 0.6);
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--pure-white);
  border-bottom: 1px solid var(--border-color);
}

.results-comparison-table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(154, 171, 191, 0.06);
  font-size: 14px;
}

.results-comparison-table tr:last-child td {
  border-bottom: none;
}

.highlight-win {
  color: var(--military-green-bright) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   4 KİŞİLİK JAMOA BELLAŞUVI NATIJALARI (2v2 COCKPIT RESULTS)
   ========================================================================== */
.team-results-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .team-results-cockpit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .team-results-cockpit-grid {
    grid-template-columns: 1fr;
  }
}
.team-cockpit-card {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(8, 14, 24, 0.95));
  border-radius: var(--radius-lg, 12px);
  padding: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-cockpit-card:hover {
  transform: translateY(-2px);
}
.team-card-t1 {
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.1);
}
.team-card-t2 {
  border: 1.5px solid rgba(249, 115, 22, 0.45);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.1);
}
.cockpit-role-badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.badge-sniper {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: var(--cyber-blue);
}
.badge-spotter {
  background: rgba(45, 212, 191, 0.15);
  border: 1px solid rgba(45, 212, 191, 0.4);
  color: #2dd4bf;
}
.badge-sniper-orange {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fb923c;
}
.badge-spotter-orange {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #facc15;
}
.cockpit-player-name {
  font-size: 15.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cockpit-player-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.cockpit-grade-stamp {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 12px;
  border: 1px solid;
}
.cockpit-grade-stamp.stamp-grade-5, .cockpit-grade-stamp.stamp-5 {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #22c55e;
}
.cockpit-grade-stamp.stamp-grade-4, .cockpit-grade-stamp.stamp-4 {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}
.cockpit-grade-stamp.stamp-grade-3, .cockpit-grade-stamp.stamp-3 {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
  color: #eab308;
}
.cockpit-grade-stamp.stamp-grade-2, .cockpit-grade-stamp.stamp-2 {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}
.cockpit-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
}
.cockpit-stats-grid .stat-mini {
  display: flex;
  flex-direction: column;
}
.cockpit-stats-grid .stat-mini .lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.cockpit-stats-grid .stat-mini .val {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
}

/* ==========================================================================
   ALOHIDA SHAXSIY HARBIY BAYONNOMALAR (.PDF) TUGMALARI VA KARTALARI
   ========================================================================== */
.fighter-pdfs-section {
  max-width: 960px;
  margin: 22px auto 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.8));
  border: 1.5px solid rgba(214, 181, 109, 0.5);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
}

.fighter-pdfs-header {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 14px;
  font-weight: 900;
  color: var(--premium-gold, #d6b56d);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fighter-pdfs-sub {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.5;
}

.fighter-pdfs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.fighter-pdfs-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 992px) {
  .fighter-pdfs-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .fighter-pdfs-grid-2,
  .fighter-pdfs-grid-4 {
    grid-template-columns: 1fr;
  }
}

.btn-fighter-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-fighter-pdf:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

.btn-fighter-pdf.p1,
.btn-fighter-pdf.t1s {
  border: 1.5px solid #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
}

.btn-fighter-pdf.p1:hover,
.btn-fighter-pdf.t1s:hover {
  background: rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.4);
}

.btn-fighter-pdf.t1p {
  border: 1.5px solid #0284c7;
  background: rgba(2, 132, 199, 0.15);
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.2);
}

.btn-fighter-pdf.t1p:hover {
  background: rgba(2, 132, 199, 0.25);
  box-shadow: 0 0 24px rgba(2, 132, 199, 0.4);
}

.btn-fighter-pdf.p2,
.btn-fighter-pdf.t2s {
  border: 1.5px solid #fb923c;
  background: rgba(251, 146, 60, 0.15);
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.2);
}

.btn-fighter-pdf.p2:hover,
.btn-fighter-pdf.t2s:hover {
  background: rgba(251, 146, 60, 0.25);
  box-shadow: 0 0 24px rgba(251, 146, 60, 0.4);
}

.btn-fighter-pdf.t2p {
  border: 1.5px solid #f97316;
  background: rgba(249, 115, 22, 0.15);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.2);
}

.btn-fighter-pdf.t2p:hover {
  background: rgba(249, 115, 22, 0.25);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.4);
}

/* ==========================================================================
   ADMINISTRATOR PANELI (SECTION 12)
   ========================================================================== */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.admin-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.kpi-icon-box {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.kpi-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  color: var(--pure-white);
}

.kpi-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* Tab Navigation */
.admin-tab-nav {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.admin-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.admin-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pure-white);
}

.admin-tab-btn.active {
  background: var(--steel-blue);
  border-color: var(--steel-blue-bright);
  color: var(--pure-white);
  box-shadow: 0 0 14px var(--steel-blue-glow);
}

/* Tables */
.admin-table-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background: rgba(8, 13, 18, 0.7);
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--silver);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.admin-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(154, 171, 191, 0.06);
  font-size: 13.5px;
  vertical-align: middle;
}

.admin-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   RESPONSIVENESS (SECTION 16)
   ========================================================================== */
@media (max-width: 1100px) {
  .battle-arena-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .battle-arena-split::after {
    display: none;
  }
}

@media (max-width: 768px) {
  
/* Tactical Mobile Sidebar Backdrop */
.sidebar-backdrop {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  background: rgba(8, 13, 19, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-backdrop.active,
.app-sidebar.mobile-open ~ .sidebar-backdrop {
  display: block !important;
  opacity: 1;
  pointer-events: auto !important;
}

.app-sidebar {
    transform: translateX(-100%);
    width: 260px !important;
  }
  .app-sidebar.mobile-open {
    transform: translateX(0);
  }
  .main-viewport {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .mobile-menu-btn {
    display: block;
  }
  .hero-title-grand {
    font-size: 28px;
  }
  .command-cards-grid {
    grid-template-columns: 1fr;
  }
  .screens-container {
    padding: 16px;
  }
}

/* ==========================================================================
   TACTICAL BOXES, BADGES & INTERACTIVE CONTROLS
   ========================================================================== */
.tactical-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
}

/* Badges */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.badge-solo {
  background: rgba(33, 230, 161, 0.15);
  color: var(--military-green-bright);
  border: 1px solid rgba(33, 230, 161, 0.35);
}

.badge-battle {
  background: rgba(255, 120, 31, 0.15);
  color: #fb923c;
  border: 1px solid rgba(255, 120, 31, 0.35);
}

/* ==========================================================================
   ELITE TACTICAL STEPPER & SELECTOR NAVIGATION
   ========================================================================== */
.selector-steps-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  background: rgba(17, 25, 35, 0.65);
  border: 1px solid rgba(154, 171, 191, 0.12);
  border-radius: 14px;
  padding: 10px 16px;
  backdrop-filter: blur(12px);
}

.step-badge {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(8, 13, 18, 0.5);
  border: 1px solid rgba(154, 171, 191, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.step-badge:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(154, 171, 191, 0.22);
}

.step-badge.active {
  background: linear-gradient(135deg, rgba(38, 63, 85, 0.65), rgba(17, 25, 35, 0.9));
  border-color: var(--cyber-blue);
  box-shadow: 0 0 18px rgba(36, 184, 255, 0.25);
}

.step-badge.completed {
  background: rgba(36, 60, 50, 0.4);
  border-color: rgba(33, 230, 161, 0.35);
}

.step-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(154, 171, 191, 0.15);
  color: var(--text-dark);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.step-check {
  display: none;
}

.step-badge.active .step-indicator {
  background: var(--cyber-blue);
  border-color: var(--cyber-blue);
  color: #080D13;
  box-shadow: 0 0 16px rgba(36, 184, 255, 0.6);
}

.step-badge.completed .step-indicator {
  background: var(--military-green-bright);
  border-color: var(--military-green-bright);
  color: #080D13;
}

.step-badge.completed .step-number {
  display: none;
}

.step-badge.completed .step-check {
  display: inline-block;
  font-weight: 900;
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.step-num-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-dark);
}

.step-badge.active .step-num-label {
  color: var(--cyber-blue);
}

.step-badge.completed .step-num-label {
  color: var(--military-green-bright);
}

.step-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--pure-white);
  white-space: nowrap;
}

.step-connector {
  width: 20px;
  height: 2px;
  background: rgba(154, 171, 191, 0.12);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ==========================================================================
   SELECTOR STEP HEADERS
   ========================================================================== */
.selector-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(154, 171, 191, 0.1);
}

.selector-step-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--premium-gold);
  background: rgba(214, 180, 106, 0.12);
  border: 1px solid rgba(214, 180, 106, 0.35);
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.8px;
  display: inline-block;
  margin-bottom: 6px;
}

.selector-step-title {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
}

.selector-step-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

.selector-stat-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--silver);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--military-green-bright);
  box-shadow: 0 0 8px var(--military-green-bright);
}

/* ==========================================================================
   STEP 1: ELITE TOPIC CARDS
   ========================================================================== */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.topic-card {
  position: relative;
  background: linear-gradient(150deg, rgba(17, 25, 35, 0.85) 0%, rgba(10, 16, 23, 0.95) 100%);
  border: 1.5px solid rgba(154, 171, 191, 0.14);
  border-radius: 14px;
  padding: 22px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.topic-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 184, 255, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(36, 184, 255, 0.2);
}

.topic-card.selected {
  border-color: var(--cyber-blue);
  background: linear-gradient(150deg, rgba(38, 63, 85, 0.45) 0%, rgba(17, 25, 35, 0.95) 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(36, 184, 255, 0.35);
}

.topic-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.topic-card:hover .topic-card-glow {
  opacity: 1;
}

.topic-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.topic-badge-cluster {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topic-tactical-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid;
  display: inline-block;
}

.topic-count-pill {
  font-size: 12px;
  color: var(--silver);
  font-weight: 600;
}

.topic-icon-frame {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.topic-card:hover .topic-icon-frame {
  transform: scale(1.08);
}

.topic-card-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 8px;
}

.topic-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.topic-card-sessions-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.session-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.session-code-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--cyber-blue);
  background: rgba(36, 184, 255, 0.12);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.session-name-text {
  color: var(--silver);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.topic-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(154, 171, 191, 0.08);
}

.topic-stat-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.topic-btn-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyber-blue);
  transition: transform 0.2s;
}

.topic-card:hover .topic-btn-action {
  transform: translateX(4px);
}

/* ==========================================================================
   STEP 2: ELITE SESSION CARDS
   ========================================================================== */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.session-select-card {
  position: relative;
  background: linear-gradient(150deg, rgba(17, 25, 35, 0.85) 0%, rgba(10, 16, 23, 0.95) 100%);
  border: 1.5px solid rgba(154, 171, 191, 0.14);
  border-radius: 14px;
  padding: 22px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.session-select-card:hover {
  transform: translateY(-3px);
  border-color: rgba(36, 184, 255, 0.45);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(36, 184, 255, 0.2);
}

.session-select-card.selected {
  border-color: var(--cyber-blue);
  background: linear-gradient(150deg, rgba(38, 63, 85, 0.45) 0%, rgba(17, 25, 35, 0.95) 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(36, 184, 255, 0.35);
}

.session-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.session-code-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--cyber-blue);
  background: rgba(36, 184, 255, 0.14);
  border: 1px solid rgba(36, 184, 255, 0.35);
  padding: 3px 9px;
  border-radius: 4px;
}

.session-badge-alt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dark);
  font-weight: 700;
}

.session-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 8px;
}

.session-card-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
  flex: 1;
}

.session-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.session-chip {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--silver);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
}

.session-chip.chip-gold {
  background: rgba(214, 180, 106, 0.12);
  color: var(--premium-gold);
  border-color: rgba(214, 180, 106, 0.35);
}

.session-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(154, 171, 191, 0.08);
}

.session-mode-note {
  font-size: 12px;
  color: var(--text-dark);
}

.session-select-btn {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cyber-blue);
}

/* Select Cards on Selector */
.select-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.select-card:hover {
  background: var(--bg-surface-elevated);
  border-color: rgba(154, 171, 191, 0.3);
  transform: translateY(-2px);
}

.select-card.selected {
  background: linear-gradient(135deg, rgba(38, 63, 85, 0.4), rgba(21, 34, 46, 0.9));
  border-color: var(--steel-blue-bright);
  box-shadow: 0 0 16px var(--steel-blue-glow);
}

.select-card-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

.select-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--pure-white);
  margin-bottom: 4px;
}

.select-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 5-Variant Option Buttons */
.ttt-option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(21, 34, 46, 0.7);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--pure-white);
  font-family: var(--font-family);
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 12px;
}

.ttt-option-btn:hover:not(:disabled) {
  background: rgba(45, 35, 20, 0.4);
  border-color: var(--premium-gold);
  transform: translateX(4px);
  box-shadow: 0 0 14px var(--gold-glow);
}

.ttt-option-letter {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 6px;
  background: rgba(8, 13, 18, 0.7);
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--premium-gold);
}

.ttt-option-btn.locked-chosen {
  background: rgba(214, 180, 106, 0.15) !important;
  border-color: var(--premium-gold) !important;
  box-shadow: 0 0 14px var(--gold-glow) !important;
}

.ttt-option-btn.correct {
  background: rgba(33, 230, 161, 0.2) !important;
  border-color: var(--military-green-bright) !important;
  box-shadow: 0 0 16px var(--military-green-glow) !important;
}
.ttt-option-btn.correct .ttt-option-letter {
  background: var(--military-green-bright);
  color: #000;
  border-color: var(--military-green-bright);
}

.ttt-option-btn.wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.3) !important;
}
.ttt-option-btn.wrong .ttt-option-letter {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

/* Key Pills */
.keyboard-hints {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dark);
}

.key-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--silver);
}

.player-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(154, 171, 191, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player-stats-mini {
  display: flex;
  gap: 12px;
}

.mini-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.mini-stat.correct-stat { color: var(--military-green-bright); }
.mini-stat.wrong-stat { color: var(--color-danger); }

/* Review Items & Answer Pills */
.review-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 14px;
}

.review-q-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: 12px;
  line-height: 1.45;
}

.review-answers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.review-answer-pill {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}

.pill-correct {
  background: rgba(33, 230, 161, 0.15);
  border: 1px solid var(--military-green-bright);
  color: var(--military-green-bright);
}

.pill-wrong {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

/* Forms & Modals */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--silver);
  margin-bottom: 7px;
  letter-spacing: 0.5px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(8, 13, 18, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--pure-white);
  font-family: var(--font-family);
  font-size: 14px;
  transition: var(--transition);
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--steel-blue-bright);
  box-shadow: 0 0 12px var(--steel-blue-glow);
}

.form-textarea {
  min-height: 90px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Modal Dialog */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--bg-dark-graphite);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  z-index: 2010;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalPop 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--pure-white);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  color: var(--pure-white);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.modal-body { padding: 4px 0; }
.select-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.step-label { font-size: 13px; font-weight: 700; }
.ttt-option-text { flex: 1; line-height: 1.4; }

.metric-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.metric-icon-wrap.hud-blue {
  background: rgba(36, 184, 255, 0.12);
  border: 1px solid rgba(36, 184, 255, 0.28);
  color: #24B8FF;
  box-shadow: 0 0 12px rgba(36, 184, 255, 0.2);
}

.metric-icon-wrap.hud-green {
  background: rgba(33, 230, 161, 0.12);
  border: 1px solid rgba(33, 230, 161, 0.28);
  color: #34D399;
  box-shadow: 0 0 12px rgba(33, 230, 161, 0.2);
}

.metric-icon-wrap.hud-amber {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.28);
  color: #facc15;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.2);
}

.metric-icon-wrap.hud-gold {
  background: rgba(214, 180, 106, 0.12);
  border: 1px solid rgba(214, 180, 106, 0.28);
  color: #D6B46A;
  box-shadow: 0 0 12px rgba(214, 180, 106, 0.2);
}

.metric-icon-wrap.hud-orange {
  background: rgba(255, 120, 31, 0.12);
  border: 1px solid rgba(255, 120, 31, 0.28);
  color: #fb923c;
  box-shadow: 0 0 12px rgba(255, 120, 31, 0.2);
}

.metric-hud-item:hover .metric-icon-wrap {
  transform: scale(1.1);
}


/* ==========================================================================
   BAHOLASH MEZONI VA PDF HISOBOTI STILLARI (OFFICIAL MILITARY GRADING & PDF)
   ========================================================================== */

.grade-evaluation-card {
  background: linear-gradient(135deg, rgba(24, 38, 54, 0.95), rgba(13, 22, 32, 0.95));
  border: 1.5px solid rgba(214, 180, 106, 0.35);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 28px;
  text-align: left;
}

@media (max-width: 768px) {
  .grade-evaluation-card {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
}

.grade-stamp-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grade-badge {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  position: relative;
  text-transform: uppercase;
}

.grade-badge::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  pointer-events: none;
}

.grade-badge.grade-5 {
  background: radial-gradient(circle, rgba(33, 230, 161, 0.25), rgba(20, 83, 45, 0.4));
  border: 2.5px solid #21E6A1;
  color: #34D399;
  box-shadow: 0 0 28px rgba(33, 230, 161, 0.4);
}

.grade-badge.grade-4 {
  background: radial-gradient(circle, rgba(36, 184, 255, 0.25), rgba(12, 74, 110, 0.4));
  border: 2.5px solid #24B8FF;
  color: #24B8FF;
  box-shadow: 0 0 28px rgba(36, 184, 255, 0.4);
}

.grade-badge.grade-3 {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.25), rgba(113, 63, 18, 0.4));
  border: 2.5px solid #eab308;
  color: #facc15;
  box-shadow: 0 0 28px rgba(234, 179, 8, 0.4);
}

.grade-badge.grade-2 {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25), rgba(127, 29, 29, 0.4));
  border: 2.5px solid #ef4444;
  color: #f87171;
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.4);
}

.grade-badge .grade-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}

.grade-badge .grade-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.grade-info-body {
  flex-grow: 1;
}

.grade-participant-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--pure-white);
  margin-bottom: 4px;
}

.grade-group-pill {
  display: inline-block;
  background: rgba(214, 180, 106, 0.15);
  border: 1px solid rgba(214, 180, 106, 0.35);
  color: var(--premium-gold);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}

.grade-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.grade-metric-box {
  background: rgba(8, 13, 18, 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.grade-metric-box .metric-lbl {
  font-size: 11px;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grade-metric-box .metric-val {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.grade-scale-footer {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.grade-scale-footer span b {
  color: #fff;
}

/* Dual battle grades grid */
.battle-grades-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .battle-grades-wrapper {
    grid-template-columns: 1fr;
  }
}

/* History table PDF button */
.btn-pdf-action {
  background: rgba(214, 180, 106, 0.12);
  border: 1px solid rgba(214, 180, 106, 0.35);
  color: var(--premium-gold);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-pdf-action:hover {
  background: rgba(214, 180, 106, 0.25);
  border-color: var(--premium-gold);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(214, 180, 106, 0.3);
}

.btn-pdf-action.btn-pdf-delete {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid #ef4444 !important;
  color: #fca5a5 !important;
}

.btn-pdf-action.btn-pdf-delete:hover {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}



/* ==================== MODAL DISPLAY FIX & PIN KEYPAD STYLES ==================== */
.modal.active, .modal.show {
  display: flex !important;
}

.admin-pin-dialog {
  max-width: 440px !important;
  background: #101923 !important;
  border: 1px solid #1C2E42 !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 25px rgba(14, 165, 233, 0.25) !important;
  padding: 26px !important;
  border-radius: 12px !important;
  text-align: center;
}

.admin-pin-badge {
  display: inline-block;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid #eab308;
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.admin-pin-title {
  color: #F4F7FB;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  font-family: var(--font-display);
}

.admin-pin-desc {
  color: #9AABBF;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.pin-display-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  padding: 12px;
  background: #030712;
  border: 1px solid #1f2937;
  border-radius: 8px;
}

.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #475569;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-dot.filled {
  background: #24B8FF;
  border-color: #24B8FF;
  box-shadow: 0 0 12px #24B8FF;
}

.pin-error-box {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  animation: pinShake 0.4s ease-in-out;
}

@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.pin-shake {
  animation: pinShake 0.4s ease-in-out;
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.pin-key {
  background: #101923;
  border: 1px solid #1f2937;
  color: #F4F7FB;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.pin-key:hover {
  background: #1f2937;
  border-color: #24B8FF;
  color: #24B8FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(36, 184, 255, 0.2);
}

.pin-key:active {
  transform: translateY(1px);
}

.pin-key-clear {
  color: #ef4444 !important;
}

.pin-key-back {
  color: #fbbf24 !important;
}

.admin-pin-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ==================== CURRICULUM MANAGEMENT STYLES ==================== */
.curriculum-mgmt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: #101923;
  border: 1px solid #1C2E42;
  border-radius: 8px;
}

.curriculum-topic-box {
  background: #101923;
  border: 1px solid #1C2E42;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.curriculum-topic-box:hover {
  border-color: #334155;
}

.curriculum-topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #101923;
  border-bottom: 1px solid #1C2E42;
}

.curriculum-topic-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.curriculum-topic-badge {
  background: rgba(36, 184, 255, 0.15);
  border: 1px solid #1E97D4;
  color: #24B8FF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.curriculum-topic-title {
  color: #F4F7FB;
  font-size: 15px;
  font-weight: 700;
}

.curriculum-topic-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.curriculum-sessions-list {
  padding: 8px 16px;
}

.curriculum-session-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

.curriculum-session-row:last-child {
  border-bottom: none;
}

.curriculum-session-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.curriculum-session-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.curriculum-session-code {
  background: #1C2E42;
  color: #9AABBF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid #334155;
}

.curriculum-session-name {
  color: #E2EAF2;
  font-size: 13.5px;
  font-weight: 600;
}

.curriculum-session-stats {
  font-size: 11.5px;
  color: #6C8299;
  margin-left: 8px;
}

.curriculum-session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}



/* ==========================================================================
   ADVANCED MOBILE-FIRST RESPONSIVE DESIGN SYSTEM (320px — 4K)
   ========================================================================== */

/* 1. Large Laptops and Standard Desktops (<= 1200px) */
@media (max-width: 1200px) {
  .hero-main-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .hero-metrics-hud {
    grid-template-columns: repeat(3, 1fr);
  }
  .curriculum-grid {
    grid-template-columns: 1fr;
  }
  .command-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .battle-arena-split {
    gap: 20px;
  }
}

/* 2. Tablets and Small Laptops (<= 992px) */
@media (max-width: 992px) {
  .battle-arena-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .battle-arena-split::after {
    display: none;
  }
  .battle-match-header {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  .topics-grid,
  .sessions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .results-podium-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3. Universal Mobile & Small Tablet (<= 768px) */
@media (max-width: 768px) {
  /* Layout & Viewport Anti-Overflow */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .app-layout, .main-viewport, .screens-container, .screen {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Off-canvas sliding drawer sidebar */
  .app-sidebar {
    transform: translateX(-100%) !important;
    width: 280px !important;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000 !important;
    box-shadow: 12px 0 45px rgba(0, 0, 0, 0.85) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  .main-viewport {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Top Tactical Command Bar */
  .tactical-top-bar {
    padding: 0 10px !important;
    height: 54px !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
    background: rgba(36, 184, 255, 0.12) !important;
    border: 1px solid rgba(36, 184, 255, 0.35) !important;
    color: var(--electric-blue) !important;
    font-size: 19px !important;
    cursor: pointer;
    flex-shrink: 0 !important;
  }

  .top-bar-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  .tactical-breadcrumbs {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .tactical-breadcrumbs .bc-sector,
  .tactical-breadcrumbs .bc-sep {
    display: none !important;
  }

  .tactical-breadcrumbs .bc-active {
    font-size: 13px !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .top-bar-center {
    display: none !important;
  }

  .top-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .tactical-action-btn {
    padding: 6px 8px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .tactical-action-btn .btn-label {
    display: none !important;
  }

  /* Screens Container */
  .screens-container {
    padding: 12px 10px 28px 10px !important;
  }

  /* Screen Header Row */
  .screen-header-row,
  section.screen > div[style*="display:flex"][style*="justify-content:space-between"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .screen-header-row > div,
  section.screen > div[style*="display:flex"][style*="justify-content:space-between"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  .screen-header-row h2,
  section.screen > div[style*="display:flex"][style*="justify-content:space-between"] h2 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .screen-header-row p,
  section.screen > div[style*="display:flex"][style*="justify-content:space-between"] p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .screen-header-row .btn,
  section.screen > div[style*="display:flex"][style*="justify-content:space-between"] .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  /* Hero Section Mobile */
  .hero-command-banner {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .hero-title-grand {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.3 !important;
  }

  .hero-emblem-img {
    max-width: 120px !important;
    height: auto !important;
  }

  .hero-metrics-hud {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .hero-hud-card {
    padding: 10px 8px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }

  .hud-badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
  }

  .hud-val {
    font-size: 18px !important;
  }

  .hud-val-sub {
    font-size: 11px !important;
  }

  .hud-title {
    font-size: 11px !important;
  }

  .hud-desc {
    font-size: 9.5px !important;
  }

  /* Grids & Cards */
  .command-cards-grid,
  .topics-grid,
  .sessions-grid,
  .curriculum-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .command-card,
  .topic-card,
  .session-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  .command-card-title {
    font-size: 16px !important;
  }

  .command-card-desc {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  /* Stepper on Mobile */
  .selector-steps-nav {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .step-connector {
    display: none !important;
  }

  .step-badge {
    width: 100% !important;
    padding: 10px 12px !important;
  }

  /* Curriculum Cards */
  .curriculum-chapter-header {
    padding: 14px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .chapter-header-left {
    gap: 10px !important;
    width: 100% !important;
  }

  .chapter-title-text {
    font-size: 15px !important;
  }

  .chapter-header-right {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .curriculum-sessions-list {
    padding: 12px 10px !important;
  }

  .session-row-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 10px !important;
  }

  .session-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .session-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Solo Quiz on Mobile */
  .quiz-top-hud {
    flex-direction: column !important;
    padding: 12px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .hud-meta-left {
    width: 100% !important;
  }

  .hud-pills-row {
    gap: 6px !important;
  }

  .hud-pill {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
  }

  .hud-session-title {
    font-size: 13.5px !important;
    white-space: normal !important;
  }

  .hud-right-group {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .circular-timer-box {
    width: 58px !important;
    height: 58px !important;
  }

  .timer-digits {
    font-size: 18px !important;
  }

  .timer-label {
    font-size: 7.5px !important;
  }

  .btn-abort {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .quiz-question-card {
    padding: 16px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .quiz-question-text {
    font-size: clamp(14.5px, 4.2vw, 17px) !important;
    padding-left: 10px !important;
    border-left-width: 3px !important;
    margin-bottom: 16px !important;
    line-height: 1.45 !important;
  }

  .quiz-options-grid {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .quiz-opt-btn,
  .option-btn {
    padding: 12px 10px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    gap: 10px !important;
  }

  .opt-key-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  .opt-text-content {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  /* Hide physical keyboard guides on mobile */
  .keyboard-hints,
  .keyboard-controls-guide {
    display: none !important;
  }

  /* 1v1 Battle Arena on Mobile */
  .battle-match-header {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    align-items: center !important;
    border-radius: 12px !important;
  }

  .battle-header-info {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .battle-session-title {
    font-size: 13px !important;
    text-align: center !important;
  }

  .battle-center-scoreboard {
    padding: 4px 14px !important;
    gap: 10px !important;
  }

  .score-digit {
    font-size: 22px !important;
  }

  .battle-header-actions {
    width: 100% !important;
  }

  .battle-header-actions .btn-abort {
    width: 100% !important;
    justify-content: center !important;
  }

  .battle-arena-split {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .battle-arena-split::after {
    display: none !important;
  }

  .player-cockpit {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  .cockpit-p-name,
  .player-name-text {
    font-size: 15px !important;
  }

  .cockpit-score-display {
    font-size: 20px !important;
  }

  /* 5-Variant TTX Setup & Battle */
  .ttt-arena-wrapper {
    padding: 14px 10px !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .ttt-arena-wrapper div[style*="grid-template-columns: 1fr 1fr"],
  .ttt-arena-wrapper div[style*="repeat(auto-fit, minmax(260px, 1fr))"],
  .ttt-arena-wrapper div[style*="repeat(auto-fit,minmax(260px,1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .select-card {
    padding: 12px 10px !important;
    min-width: 0 !important;
  }

  .select-card-title {
    font-size: 14.5px !important;
  }

  .select-card-meta {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .btn-ttt {
    padding: 14px 10px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .ttt-central-hud {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px 10px !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 12px !important;
  }

  .ttt-central-hud > div {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* Results Screen on Mobile */
  .results-podium-card {
    padding: 20px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .trophy-winner-icon svg {
    width: 44px !important;
    height: 44px !important;
  }

  .winner-name-grand {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.25 !important;
  }

  .winner-reason-text {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .results-comparison-table {
    min-width: 100% !important;
    display: table !important;
  }

  .results-comparison-table th,
  .results-comparison-table td {
    padding: 8px 6px !important;
    font-size: 11.5px !important;
  }

  #btn-results-pdf {
    padding: 12px 14px !important;
    font-size: 13px !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .tactical-box {
    padding: 16px 10px !important;
    border-radius: 12px !important;
  }

  .battle-grades-wrapper {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .grade-evaluation-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 14px 10px !important;
  }

    /* Elite Ranking Center Mobile Overrides (Ultra-Responsive Phone Ergonomics) */
  .ranking-screen-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  .ranking-title {
    font-size: 21px !important;
  }

  .ranking-subtitle {
    font-size: 12px !important;
  }

  .ranking-header-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .btn-ranking-action {
    padding: 8px 4px !important;
    font-size: 11px !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .ranking-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .ranking-kpi-card {
    padding: 12px 10px !important;
  }

  .kpi-val {
    font-size: 22px !important;
  }

  .ranking-tabs-nav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .ranking-tab-btn {
    padding: 8px 6px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }

  .tactical-empty-hud {
    padding: 32px 12px !important;
  }

  .radar-hud-reticle-wrap {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 14px !important;
  }

  .radar-hud-svg {
    width: 72px !important;
    height: 72px !important;
  }

  .tactical-empty-title {
    font-size: 16px !important;
  }

  .tactical-empty-desc {
    font-size: 12px !important;
  }

  .tactical-empty-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-tactical-cta {
    width: 100% !important;
    justify-content: center !important;
  }

  .ranking-podium-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tables & History */
  .admin-table-wrapper,
  .history-table-wrapper {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 16px !important;
  }

  .admin-table {
    min-width: 580px !important;
    width: 100% !important;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .admin-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .admin-kpi-card {
    padding: 12px 8px !important;
  }

  .kpi-val {
    font-size: 20px !important;
  }

  .kpi-label {
    font-size: 11px !important;
  }

  /* Admin Tabs on Mobile */
  .admin-tab-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .admin-tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .curriculum-topic-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Modals on Mobile */
  .modal {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  .modal-content,
  .modal-dialog,
  .admin-pin-dialog {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 12px !important;
    margin: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  .admin-pin-title {
    font-size: 16px !important;
  }

  .admin-pin-keypad {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .pin-btn {
    min-height: 44px !important;
    font-size: 17px !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* Touch Performance, Zero-Lag & iOS Zoom Prevention for All Mobile Screens */
@media (max-width: 768px) {
  button, .btn, .ranking-tab-btn, .option-btn, .quiz-opt-btn, .sidebar-nav-item, .tactical-action-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  input, select, textarea {
    font-size: 16px !important;
  }

  /* GPU Hardware Acceleration for zero-lag mobile scrolling */
  .screens-container, .main-viewport, .admin-table-wrapper {
    -webkit-overflow-scrolling: touch !important;
    transform: translateZ(0);
  }
}

/* 4. Compact Android Phones (<= 480px) */
@media (max-width: 480px) {
  .hero-title-grand {
    font-size: 18px !important;
  }

  .hud-val {
    font-size: 18px !important;
  }

  .quiz-question-text {
    font-size: 15px !important;
  }

  .opt-text-content {
    font-size: 13px !important;
  }

  .btn {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    min-height: 44px !important;
  }

  .circular-timer-box {
    width: 54px !important;
    height: 54px !important;
  }
}

/* 5. Ultra-compact devices (<= 360px - down to 320px) */
@media (max-width: 360px) {
  .hero-title-grand {
    font-size: 16px !important;
  }

  .hero-metrics-hud {
    grid-template-columns: 1fr !important;
  }

  .admin-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .tactical-breadcrumbs .bc-active {
    max-width: 100px !important;
    font-size: 11.5px !important;
  }

  .mobile-menu-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .tactical-action-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 4px 6px !important;
  }

  .quiz-opt-btn,
  .option-btn {
    padding: 10px 8px !important;
    gap: 8px !important;
  }

  .opt-key-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 12px !important;
  }

  .opt-text-content {
    font-size: 12px !important;
  }

  .btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* 6. Mobile Landscape Mode Optimization */
@media (max-height: 520px) and (orientation: landscape) {
  .tactical-top-bar {
    height: 46px !important;
  }

  .screens-container {
    padding: 6px 8px !important;
  }

  .hero-command-banner {
    padding: 10px 14px !important;
  }

  .circular-timer-box {
    width: 48px !important;
    height: 48px !important;
  }

  .battle-arena-split {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .quiz-question-card {
    padding: 12px 10px !important;
    margin-bottom: 10px !important;
  }

  .quiz-options-grid {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 8px !important;
  }
}

/* 7. Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===================================================
   TOUCH SCREEN & SMART BOARD INTERACTIVE OPTIMIZATIONS
   =================================================== */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

button, a, input, select, textarea,
.sidebar-nav-item,
.tactical-tile,
.game-mode-card,
.metric-hud-card,
.btn,
.sidebar-toggle-btn,
.modal-close,
.nav-link,
.option-btn,
.quiz-opt-btn,
.duel-btn,
.tactical-choice-btn,
[onclick] {
  touch-action: manipulation !important;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
}


/* Subjects Tactical Grid */
.subjects-tactical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 14px;
}
@media (max-width: 768px) {
  .subjects-tactical-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}



/* ==================== SECTION 3: HIERARCHY & BREADCRUMBS ==================== */
.hierarchy-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(13, 22, 33, 0.7);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 22px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  gap: 12px;
}

.hierarchy-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.hierarchy-breadcrumbs .h-crumb {
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
}

.hierarchy-breadcrumbs .h-crumb:hover {
  color: var(--cyber-blue);
  background: rgba(0, 255, 200, 0.08);
}

.hierarchy-breadcrumbs .h-crumb.active {
  color: var(--premium-gold);
  font-weight: 800;
  background: rgba(214, 181, 109, 0.12);
}

.hierarchy-breadcrumbs .h-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}

/* Topics Tactical Grid - Balanced Symmetrical Layout */
.topics-tactical-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  padding: 10px 4px 40px;
}

/* 5-topic subjects (like Ot ochish tayyorgarligi): 3 on Row 1, 2 centered on Row 2 */
.topics-tactical-grid.count-5 .command-card:nth-child(1),
.topics-tactical-grid.count-5 .command-card:nth-child(2),
.topics-tactical-grid.count-5 .command-card:nth-child(3) {
  grid-column: span 2;
}

.topics-tactical-grid.count-5 .command-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.topics-tactical-grid.count-5 .command-card:nth-child(5) {
  grid-column: 4 / span 2;
}

/* 3-topic subjects: exactly 1 balanced row of 3 cards */
.topics-tactical-grid.count-3 .command-card {
  grid-column: span 2;
}

/* 2-topic subjects: exactly 1 balanced row of 2 wide cards */
.topics-tactical-grid.count-2 .command-card {
  grid-column: span 3;
}

/* 4-topic subjects: 2x2 grid */
.topics-tactical-grid.count-4 .command-card {
  grid-column: span 3;
}

/* Default fallback */
.topics-tactical-grid:not(.count-5):not(.count-4):not(.count-3):not(.count-2) .command-card {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .topics-tactical-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
  .topics-tactical-grid .command-card {
    grid-column: span 1 !important;
  }
  .topics-tactical-grid.count-5 .command-card:nth-child(5) {
    grid-column: 1 / span 2 !important;
  }
}

@media (max-width: 700px) {
  .topics-tactical-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .topics-tactical-grid .command-card {
    grid-column: auto !important;
  }
}

/* ==========================================================================
   TACTICAL SESSIONS GRID & SESSION CARD ELITE
   ========================================================================== */
.sessions-tactical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 4px 40px;
}

.sessions-tactical-grid.count-1 {
  display: flex;
  justify-content: center;
}

.sessions-tactical-grid.count-1 .command-card {
  max-width: 880px;
  width: 100%;
}

/* Session Card Elite */
.command-card.session-card-elite {
  position: relative;
  background: radial-gradient(130% 110% at 50% 0%, rgba(15, 23, 42, 0.94) 0%, rgba(9, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 26px 28px 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.command-card.session-card-elite:hover {
  transform: translateY(-6px);
  border-color: var(--subj-color, #38bdf8);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 28px color-mix(in srgb, var(--subj-color, #38bdf8) 28%, transparent);
  background: radial-gradient(130% 110% at 50% 0%, rgba(20, 30, 55, 0.96) 0%, rgba(9, 14, 28, 0.99) 100%);
}

.command-card.session-card-elite:hover .subject-card-laser-top {
  opacity: 1;
  height: 3.5px;
  box-shadow: 0 0 12px var(--subj-color, #38bdf8);
}

.command-card.session-card-elite:hover .subject-card-corner-notch {
  opacity: 1;
}

.session-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}

.session-badge-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.session-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--subj-color, #38bdf8) 20%, transparent) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid color-mix(in srgb, var(--subj-color, #38bdf8) 45%, transparent);
  color: var(--subj-color, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.command-card.session-card-elite:hover .session-icon-box {
  transform: scale(1.08);
}

.session-code-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--subj-color, #38bdf8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--subj-color, #38bdf8) 35%, transparent);
  color: var(--subj-color, #38bdf8);
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.session-code-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--subj-color, #38bdf8);
  box-shadow: 0 0 6px var(--subj-color, #38bdf8);
}

.session-order-tag {
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.5px;
  padding-left: 2px;
}

.session-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.session-format-badge .format-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.session-card-title {
  font-family: var(--font-display, 'Orbitron', 'Rajdhani', sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 10px;
  transition: color 0.25s ease;
}

.command-card.session-card-elite:hover .session-card-title {
  text-shadow: 0 0 14px color-mix(in srgb, var(--subj-color, #38bdf8) 45%, transparent);
}

.session-card-desc {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 22px;
}

.session-variants-deck {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.variant-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.variant-pill-tag .vp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

.variant-pill-tag .vp-name {
  font-size: 12px;
  font-weight: 800;
  color: #e2e8f0;
}

.variant-pill-tag .vp-sub {
  font-size: 10.5px;
  color: #94a3b8;
}

.variant-pill-tag.gold-ttx {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
}

.variant-pill-tag.gold-ttx .vp-dot.gold {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.variant-pill-tag.gold-ttx .vp-name.gold {
  color: #fbbf24;
}

.variant-pill-tag.gold-ttx .vp-sub.gold {
  color: #fde68a;
  font-weight: 700;
}

.session-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  gap: 12px;
  flex-wrap: wrap;
}

.session-footer-specs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.session-footer-specs .spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.session-footer-specs .spec-divider {
  color: var(--subj-color, #38bdf8);
}

.session-footer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--subj-color, #38bdf8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--subj-color, #38bdf8) 40%, transparent);
  color: var(--subj-color, #38bdf8);
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}

.session-footer-action-btn .action-btn-arrow {
  transition: transform 0.25s ease;
}

.command-card.session-card-elite:hover .session-footer-action-btn {
  background: color-mix(in srgb, var(--subj-color, #38bdf8) 25%, transparent);
  border-color: var(--subj-color, #38bdf8);
  box-shadow: 0 0 16px color-mix(in srgb, var(--subj-color, #38bdf8) 40%, transparent);
}

.command-card.session-card-elite:hover .session-footer-action-btn .action-btn-arrow {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .sessions-tactical-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TACTICAL BATTLE FORMATS GRID & FORMAT CARD ELITE (1, 2, 4 KISHILIK)
   ========================================================================== */
.battle-formats-tactical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px 4px 40px;
}

@media (max-width: 1100px) {
  .battle-formats-tactical-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
}

.command-card.format-card-elite {
  position: relative;
  background: radial-gradient(130% 110% at 50% 0%, rgba(15, 23, 42, 0.94) 0%, rgba(9, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.command-card.format-card-elite.format-solo {
  --format-color: #38bdf8;
}
.command-card.format-card-elite.format-battle {
  --format-color: #f97316;
}
.command-card.format-card-elite.format-team {
  --format-color: #10b981;
}

.command-card.format-card-elite:hover {
  transform: translateY(-6px);
  border-color: var(--format-color);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 30px color-mix(in srgb, var(--format-color) 28%, transparent);
  background: radial-gradient(130% 110% at 50% 0%, rgba(20, 30, 55, 0.96) 0%, rgba(9, 14, 28, 0.99) 100%);
}

.command-card.format-card-elite:hover .subject-card-laser-top {
  opacity: 1;
  height: 3.5px;
  background: var(--format-color);
  box-shadow: 0 0 14px var(--format-color);
}

.command-card.format-card-elite:hover .subject-card-corner-notch {
  opacity: 1;
  border-color: var(--format-color);
}

.format-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}

.format-badge-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.format-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--format-color) 20%, transparent) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid color-mix(in srgb, var(--format-color) 45%, transparent);
  color: var(--format-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.command-card.format-card-elite:hover .format-icon-box {
  transform: scale(1.08);
}

.format-identity-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.format-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--format-color);
  background: color-mix(in srgb, var(--format-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--format-color) 32%, transparent);
  padding: 3px 9px;
  border-radius: 6px;
}

.format-code-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--format-color);
  box-shadow: 0 0 6px var(--format-color);
}

.format-status-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding-left: 2px;
}

.format-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--format-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--format-color) 28%, transparent);
  padding: 4px 10px;
  border-radius: 20px;
}

.format-mode-pill .format-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--format-color);
  box-shadow: 0 0 8px var(--format-color);
}

.format-mode-pill .format-text {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--format-color);
  text-transform: uppercase;
}

.format-card-title {
  font-family: var(--font-display, inherit);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.format-card-desc {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.55;
  margin-bottom: 18px;
  min-height: 40px;
}

.format-specs-deck {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.fspec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 600;
}

.fspec-pill .fspec-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--format-color);
}

.format-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  margin-top: auto;
  gap: 12px;
}

.format-footer-specs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.format-footer-specs .spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.format-footer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: color-mix(in srgb, var(--format-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--format-color) 45%, transparent);
  padding: 8px 16px;
  border-radius: 10px;
  transition: all 0.25s ease;
}

.command-card.format-card-elite:hover .format-footer-action-btn {
  background: var(--format-color);
  color: #050b14;
  box-shadow: 0 0 16px var(--format-color);
  font-weight: 900;
}

.command-card.format-card-elite:hover .format-footer-action-btn .action-btn-arrow {
  transform: translateX(4px);
}

.format-footer-action-btn .action-btn-arrow {
  transition: transform 0.2s ease;
}

/* Empty State Card */
.empty-state-card {
  background: var(--bg-surface);
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  max-width: 680px;
  margin: 32px auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.empty-state-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.08);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--cyber-blue);
}

.empty-state-card h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.empty-state-card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 24px;
}

/* 4-Variants Grid */
.variants-4-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.variant-card-item {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  text-align: center;
}

.variant-card-item:hover {
  transform: translateY(-3px);
  border-color: var(--cyber-blue);
  box-shadow: 0 8px 25px rgba(0, 255, 200, 0.15);
}

.variant-card-item.selected {
  border-color: var(--cyber-blue);
  background: rgba(0, 255, 200, 0.08);
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.2);
}

.variant-card-item.card-ttx {
  border-color: rgba(214, 181, 109, 0.4);
  background: rgba(214, 181, 109, 0.05);
}

.variant-card-item.card-ttx:hover {
  border-color: var(--premium-gold);
  box-shadow: 0 8px 25px rgba(214, 181, 109, 0.25);
}

.variant-card-item.card-ttx.selected {
  border-color: var(--premium-gold);
  background: rgba(214, 181, 109, 0.15);
  box-shadow: 0 0 25px rgba(214, 181, 109, 0.35);
}


/* ==========================================================================
   TTX DOSSIER & EDUCATIONAL KNOWLEDGE BASE (SECTION 4)
   ========================================================================== */
.ttx-hero-card {
  background: linear-gradient(135deg, rgba(20, 28, 38, 0.95), rgba(10, 16, 24, 0.98));
  border: 1px solid rgba(214, 181, 109, 0.35);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(214, 181, 109, 0.05);
  margin-bottom: 24px;
}
.ttx-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--premium-gold);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.ttx-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.ttx-block-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: all 0.25s ease;
}
.ttx-block-card:hover {
  border-color: rgba(214, 181, 109, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.ttx-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13.5px;
}
.ttx-specs-table th {
  background: rgba(214, 181, 109, 0.12);
  color: var(--premium-gold);
  font-weight: 800;
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(214, 181, 109, 0.3);
}
.ttx-specs-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-color);
}
.ttx-specs-table tr:hover td {
  background: rgba(0, 255, 200, 0.03);
}
.ttx-specs-table td.param-name {
  color: var(--text-bright);
  font-weight: 600;
  width: 45%;
}
.ttx-specs-table td.param-val {
  color: var(--cyber-blue);
  font-weight: 700;
  font-family: var(--font-mono);
}

.ttx-notes-box {
  background: rgba(0, 255, 200, 0.04);
  border: 1px solid rgba(0, 255, 200, 0.25);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.ttx-empty-state-box {
  text-align: center;
  padding: 60px 30px;
  background: var(--bg-card);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  margin-top: 20px;
}


/* ==========================================================================
   2 VS 2 TEAM ARENA (SIMULTANEOUS 4-PLAYER 2x2 GRID) - SECTION 5.3 & 5.6
   ========================================================================== */
.team-arena-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 992px) {
  .team-arena-2x2 {
    grid-template-columns: 1fr;
  }
}

.team-player-cockpit {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  transition: all 0.2s ease;
}

.team-player-cockpit.t1-sniper {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.07), rgba(15, 23, 42, 0.95));
}
.team-player-cockpit.t1-spotter {
  border-color: rgba(0, 255, 200, 0.45);
  background: linear-gradient(135deg, rgba(0, 255, 200, 0.07), rgba(15, 23, 42, 0.95));
}
.team-player-cockpit.t2-sniper {
  border-color: rgba(249, 115, 22, 0.45);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.07), rgba(15, 23, 42, 0.95));
}
.team-player-cockpit.t2-spotter {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.07), rgba(15, 23, 42, 0.95));
}

.team-cockpit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.team-cockpit-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-tag-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-q-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  min-height: 48px;
  margin-bottom: 12px;
}

.team-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.team-opt-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 8px 12px;
  text-align: left;
  color: var(--text-color);
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  user-select: none;
}

.team-opt-btn:hover {
  background: rgba(0, 255, 200, 0.1);
  border-color: var(--cyber-blue);
  color: #fff;
}

.team-opt-btn.opt-correct {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

.team-opt-btn.opt-wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

.team-timer-badge {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 255, 200, 0.12);
  color: var(--cyber-blue);
  border: 1px solid rgba(0, 255, 200, 0.3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.team-timer-badge.urgent {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
  border-color: #ef4444;
  animation: pulse-urgent 1s infinite alternate;
}


/* ==========================================================================
   HOMEPAGE AND SUBJECT HUB CUSTOM MENU CARDS
   ========================================================================== */
.home-subjects-banner {
  background: 
    radial-gradient(circle at 90% 25%, rgba(0, 255, 200, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 85%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #101923 0%, #0d151e 60%, #080D13 100%);
  border: 1px solid rgba(0, 255, 200, 0.22);
  border-radius: var(--radius-xl);
  padding: 30px 34px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.home-subjects-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #21E6A1, var(--premium-gold), #24B8FF, transparent);
  box-shadow: 0 0 12px #21E6A1;
}
.home-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 200, 0.1);
  border: 1px solid rgba(0, 255, 200, 0.3);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--cyber-blue);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.home-main-heading {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
}
.home-sub-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 780px;
  margin: 0;
}
.home-count-badge {
  background: rgba(0, 255, 200, 0.08);
  border: 1.5px solid rgba(0, 255, 200, 0.3);
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  text-align: center;
}
.home-count-badge .badge-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--cyber-blue);
  display: block;
  line-height: 1;
}
.home-count-badge .badge-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 4px;
  display: block;
}

/* Subject Hub Action Cards (5 Cards: 1 kishilik, 2 kishilik, 4 kishilik, Natijalar, Admin) */
.subject-hub-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}
.subject-menu-card {
  background: linear-gradient(135deg, rgba(16, 25, 35, 0.9) 0%, rgba(10, 16, 24, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.subject-menu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--card-accent, #38bdf8), transparent);
  opacity: 0.7;
}
.subject-menu-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-accent, #38bdf8);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.15);
}
.subject-menu-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.subject-menu-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.subject-menu-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid;
}
.subject-menu-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.subject-menu-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}
.subject-menu-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
  margin-top: auto;
}
.subject-menu-meta-text {
  font-size: 11.5px;
  color: var(--text-muted);
}
.subject-menu-action-btn {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--card-accent, #38bdf8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ==========================================================================
   PREMIUM ARENA UPGRADE — 1-KİŞİLİK, 2-KİŞİLİK, 4-KİŞİLİK
   Futuristic Dark Tech – Elite Competition Design
   ========================================================================== */

/* ── SHARED ARENA BACKGROUND ─────────────────────────────────── */
#screen-solo,
#screen-battle,
#screen-team {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(36,184,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(255,120,31,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(33,230,161,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #070c14 0%, #0a1118 50%, #060a10 100%);
  min-height: calc(100vh - 65px);
  padding: 10px 24px 20px;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── SOLO QUIZ TOP HUD — COMPACT TACTICAL ──────────────────────── */
.quiz-top-hud {
  background:
    linear-gradient(135deg, rgba(20,30,42,0.95) 0%, rgba(10,15,22,0.98) 100%);
  border: 1.5px solid rgba(36,184,255,0.22);
  border-radius: 14px;
  padding: 10px 20px;
  margin-bottom: 10px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(36,184,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.quiz-top-hud::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #24B8FF 25%,
    #21E6A1 50%,
    #D6B46A 75%,
    transparent 100%);
  animation: hud-line-sweep 4s ease-in-out infinite;
}

.quiz-top-hud::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,184,255,0.3) 50%,
    transparent 100%);
}

@keyframes hud-line-sweep {
  0%   { background-position: -200% center; }
  50%  { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── SOLO QUESTION CARD — VIEWPORT FIT & TACTICAL COCKPIT ───────────────────────── */
.solo-cockpit-card {
  width: 100%;
  max-width: 960px;
  margin: 10px auto 14px;
  padding: 24px 30px 18px;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(18,29,44,0.98) 0%, rgba(9,15,24,0.99) 100%);
  border: 1.5px solid rgba(36,184,255,0.28);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.75),
    0 0 40px rgba(36,184,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

/* Integrated Razor-Thin Laser Progress Line on top edge */
.solo-laser-progress-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  z-index: 5;
}

.solo-laser-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24B8FF, #21E6A1, #D6B46A);
  box-shadow: 0 0 12px rgba(36, 184, 255, 0.9);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solo Cockpit Integrated Header */
.solo-cockpit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(36, 184, 255, 0.12);
  position: relative;
}

.solo-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* Center Chronometer 40s */
.solo-timer-cockpit {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solo-timer-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.solo-timer-svg .timer-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
}

.solo-timer-svg .timer-circle-progress {
  fill: none;
  stroke: #24B8FF;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear, stroke 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(36, 184, 255, 0.6));
}

.solo-timer-svg .timer-circle-progress.warning {
  stroke: #FFB020;
  filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.7));
}

.solo-timer-svg .timer-circle-progress.danger {
  stroke: #FF3B30;
  filter: drop-shadow(0 0 10px rgba(255, 59, 48, 0.9));
  animation: pulse-danger-timer 0.6s infinite alternate;
}

@keyframes pulse-danger-timer {
  from { stroke-width: 6; }
  to { stroke-width: 8; }
}

.solo-timer-digits-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  z-index: 2;
}

.solo-timer-num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 0 10px rgba(36, 184, 255, 0.6);
}

.solo-timer-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyber-blue);
  margin-left: 2px;
  opacity: 0.85;
}

.solo-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.solo-header-abort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.solo-header-abort:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.6);
  color: #FFF;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.solo-cockpit-card .quiz-question-text {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.5;
  color: #FFFFFF;
  margin-bottom: 22px;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.quiz-question-card {
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(18,28,42,0.97) 0%, rgba(9,15,24,0.99) 100%);
  border: 1.5px solid rgba(36,184,255,0.22);
  border-radius: 16px;
  padding: 18px 26px 14px;
  margin-bottom: 10px;
  box-shadow:
    0 16px 45px rgba(0,0,0,0.65),
    0 0 0 1px rgba(36,184,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}

.quiz-question-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #24B8FF 0%, #21E6A1 50%, transparent 100%);
  border-radius: 16px 0 0 16px;
}

/* Corner scan lines */
.quiz-question-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background:
    radial-gradient(circle at 100% 0%, rgba(36,184,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* ── QUESTION TEXT ───────────────────────────────────────────── */
.quiz-question-text {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  color: #FFFFFF;
  border-left: none;
  padding-left: 0;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ── SOLO OPTIONS GRID — COMPACT ─────────────────────────────── */
.quiz-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.quiz-opt-btn,
.option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: linear-gradient(135deg, rgba(20,32,46,0.85) 0%, rgba(12,20,30,0.95) 100%);
  border: 1.5px solid rgba(154,171,191,0.14);
  border-radius: 12px;
  color: #F4F7FB;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  min-height: 48px;
}

.quiz-opt-btn::before,
.option-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(36,184,255,0.3);
  border-radius: 12px 0 0 12px;
  transition: all 0.2s ease;
}

.quiz-opt-btn:hover:not(:disabled):not(.disabled),
.option-btn:hover:not(:disabled):not(.disabled) {
  background: linear-gradient(135deg, rgba(36,68,100,0.75) 0%, rgba(20,36,54,0.95) 100%);
  border-color: rgba(36,184,255,0.55);
  transform: translateX(4px);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.45),
    0 0 16px rgba(36,184,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.quiz-opt-btn:hover:not(:disabled):not(.disabled)::before,
.option-btn:hover:not(:disabled):not(.disabled)::before {
  background: rgba(36,184,255,0.9);
  box-shadow: 0 0 10px rgba(36,184,255,0.6);
}

/* Correct state */
.quiz-opt-btn.correct,
.option-btn.correct {
  background: linear-gradient(135deg, rgba(33,230,161,0.22) 0%, rgba(14,60,38,0.55) 100%) !important;
  border-color: #21E6A1 !important;
  box-shadow:
    0 0 24px rgba(33,230,161,0.4),
    inset 0 0 14px rgba(33,230,161,0.15),
    0 4px 16px rgba(0,0,0,0.4) !important;
  animation: flash-correct 0.3s ease;
}

.quiz-opt-btn.correct::before,
.option-btn.correct::before {
  background: #21E6A1 !important;
  box-shadow: 0 0 12px rgba(33,230,161,0.8) !important;
}

@keyframes flash-correct {
  0%   { box-shadow: 0 0 0 rgba(33,230,161,0); }
  50%  { box-shadow: 0 0 35px rgba(33,230,161,0.6); }
  100% { box-shadow: 0 0 24px rgba(33,230,161,0.4); }
}

/* Wrong state */
.quiz-opt-btn.wrong,
.option-btn.wrong {
  background: linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(100,20,20,0.55) 100%) !important;
  border-color: #ef4444 !important;
  box-shadow:
    0 0 20px rgba(239,68,68,0.35),
    inset 0 0 12px rgba(239,68,68,0.12),
    0 4px 16px rgba(0,0,0,0.4) !important;
  animation: shake-wrong 0.3s ease;
}

.quiz-opt-btn.wrong::before,
.option-btn.wrong::before {
  background: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239,68,68,0.8) !important;
}

@keyframes shake-wrong {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* Opt key badge inner premium */
.opt-key-badge {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  background: rgba(10,16,24,0.9);
  border: 1.5px solid rgba(36,184,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 900;
  color: var(--cyber-blue);
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 6px rgba(0,0,0,0.4);
  margin: 6px 12px 6px 14px;
}

.opt-text-content {
  font-size: 14.5px;
  font-weight: 600;
  color: #EEF3F8;
  line-height: 1.35;
  flex: 1;
  padding-right: 14px;
}

/* ── CIRCULAR TIMER — COMPACT 54px ───────────────────────────── */
.circular-timer-box {
  position: relative;
  width: 54px;
  height: 54px;
  min-width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(36,184,255,0.4));
}

.timer-circle-bg {
  stroke: rgba(36,184,255,0.1);
  fill: none;
  stroke-width: 6;
}

.timer-circle-progress {
  fill: none;
  stroke: #24B8FF;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear, stroke 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(36,184,255,0.7));
}

.timer-digits {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.5px;
}

.timer-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 800;
  color: rgba(36,184,255,0.85);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 1px;
  display: block;
  text-align: center;
}

/* Timer urgent */
.circular-timer-box.urgent .timer-circle-progress,
.circular-timer-box .timer-circle-progress.urgent {
  stroke: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.8));
}
.circular-timer-box.danger .timer-circle-progress,
.circular-timer-box .timer-circle-progress.danger {
  stroke: #ef4444;
  filter: drop-shadow(0 0 10px rgba(239,68,68,0.9));
  animation: danger-pulse 0.6s ease-in-out infinite;
}
@keyframes danger-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ── PROGRESS BAR — PREMIUM ──────────────────────────────────── */
.quiz-progress-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: visible;
  position: relative;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24B8FF 0%, #21E6A1 60%, #24B8FF 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(36,184,255,0.7), 0 0 4px rgba(33,230,161,0.5);
  transition: width 0.4s ease;
  animation: progress-shimmer 2s linear infinite;
  position: relative;
}

.quiz-progress-fill::after {
  content: '';
  position: absolute;
  right: -2px; top: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(36,184,255,1), 0 0 4px rgba(33,230,161,0.8);
}

@keyframes progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 1v1 BATTLE ARENA — PREMIUM ──────────────────────────────── */
.battle-match-header {
  background: linear-gradient(135deg, rgba(16,24,36,0.98) 0%, rgba(10,15,22,0.99) 100%);
  border: 1.5px solid rgba(255,120,31,0.2);
  border-radius: 18px;
  padding: 16px 28px;
  margin-bottom: 20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,120,31,0.05),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}

.battle-match-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #24B8FF 0%,
    transparent 30%,
    rgba(251,191,36,0.9) 50%,
    transparent 70%,
    #FF781F 100%);
}

/* Central scoreboard upgrade */
.battle-center-scoreboard {
  background: linear-gradient(135deg, rgba(10,15,22,0.9) 0%, rgba(16,22,34,0.9) 100%);
  border: 1px solid rgba(251,191,36,0.25);
  padding: 8px 24px;
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(251,191,36,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
  gap: 20px;
}

.score-digit {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.p1-score-digit {
  color: #24B8FF;
  text-shadow: 0 0 16px rgba(36,184,255,0.7), 0 0 32px rgba(36,184,255,0.3);
}

.p2-score-digit {
  color: #FF781F;
  text-shadow: 0 0 16px rgba(255,120,31,0.7), 0 0 32px rgba(255,120,31,0.3);
}

.battle-vs-glow {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251,191,36,0.8);
}

/* ── PLAYER COCKPIT — PREMIUM ────────────────────────────────── */
.player-cockpit {
  background: linear-gradient(170deg, rgba(16,26,38,0.97) 0%, rgba(10,16,25,0.99) 100%);
  border: 1.5px solid rgba(154,171,191,0.14);
  border-radius: 20px;
  padding: 22px;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.player-cockpit.p1-side {
  border-color: rgba(36,184,255,0.3);
  background: linear-gradient(170deg, rgba(20,36,56,0.97) 0%, rgba(10,16,25,0.99) 100%);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    0 0 0 1px rgba(36,184,255,0.06),
    inset 0 1px 0 rgba(36,184,255,0.1);
}

.player-cockpit.p1-side::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #24B8FF 0%, rgba(36,184,255,0.3) 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(36,184,255,0.5);
}

.player-cockpit.p2-side {
  border-color: rgba(255,120,31,0.3);
  background: linear-gradient(170deg, rgba(38,22,16,0.97) 0%, rgba(10,16,25,0.99) 100%);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,120,31,0.06),
    inset 0 1px 0 rgba(255,120,31,0.1);
}

.player-cockpit.p2-side::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,120,31,0.3) 40%, #FF781F 100%);
  box-shadow: 0 0 10px rgba(255,120,31,0.5);
}

/* Cockpit score */
.cockpit-score-display {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  min-width: 56px;
  text-align: center;
}

.p1-side .cockpit-score-display {
  color: #24B8FF;
  text-shadow: 0 0 16px rgba(36,184,255,0.8), 0 0 32px rgba(36,184,255,0.3);
}

.p2-side .cockpit-score-display {
  color: #FF781F;
  text-shadow: 0 0 16px rgba(255,120,31,0.8), 0 0 32px rgba(255,120,31,0.3);
}

/* Cockpit question card */
.cockpit-question-card {
  background: rgba(8,13,20,0.8);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.p1-question-card {
  border-left: 3px solid #24B8FF;
  box-shadow: inset 0 1px 0 rgba(36,184,255,0.06), -2px 0 12px rgba(36,184,255,0.08);
}

.p2-question-card {
  border-left: 3px solid #FF781F;
  box-shadow: inset 0 1px 0 rgba(255,120,31,0.06), -2px 0 12px rgba(255,120,31,0.08);
}

.cockpit-q-text {
  font-size: 15px;
  font-weight: 700;
  color: #EEF3F8;
  line-height: 1.55;
  min-height: 52px;
}

/* Battle option items in cockpit */
.battle-option-item {
  padding: 12px 16px;
  background: rgba(16,24,36,0.9);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  min-height: 52px;
}

.p1-side .battle-option-item:hover {
  background: rgba(20,42,66,0.9);
  border-color: rgba(36,184,255,0.45);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 14px rgba(36,184,255,0.12);
  transform: translateX(4px);
}

.p2-side .battle-option-item:hover {
  background: rgba(42,22,14,0.9);
  border-color: rgba(255,120,31,0.45);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 14px rgba(255,120,31,0.12);
  transform: translateX(4px);
}

.battle-option-item.opt-correct {
  background: rgba(33,230,161,0.18) !important;
  border-color: #21E6A1 !important;
  box-shadow: 0 0 22px rgba(33,230,161,0.35), inset 0 0 10px rgba(33,230,161,0.1) !important;
  animation: flash-correct 0.4s ease;
}

.battle-option-item.opt-wrong {
  background: rgba(239,68,68,0.18) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239,68,68,0.3), inset 0 0 10px rgba(239,68,68,0.1) !important;
  animation: shake-wrong 0.35s ease;
}

.battle-opt-text {
  font-size: 14px;
  font-weight: 600;
  color: #EEF3F8;
  line-height: 1.45;
}

/* Player name & avatar */
.player-name-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}

/* Player stats mini */
.player-stats-mini {
  display: flex;
  gap: 10px;
}

.mini-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
}

.correct-stat {
  background: rgba(33,230,161,0.12);
  color: #21E6A1;
  border: 1px solid rgba(33,230,161,0.3);
}

.wrong-stat {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
}

/* ── BATTLE ARENA SPLIT ───────────────────────────────────────── */
.battle-arena-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
}

.battle-arena-split::after {
  content: '';
  position: absolute;
  top: 20px; bottom: 20px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(251,191,36,0.4) 20%,
    rgba(251,191,36,0.6) 50%,
    rgba(251,191,36,0.4) 80%,
    transparent 100%);
  box-shadow: 0 0 8px rgba(251,191,36,0.2);
  pointer-events: none;
  transform: translateX(-50%);
}

/* ── 4-KISHILIK TEAM COCKPIT — PREMIUM ───────────────────────── */
.team-player-cockpit {
  background: linear-gradient(170deg, rgba(14,22,34,0.97) 0%, rgba(10,16,24,0.99) 100%);
  border: 1.5px solid rgba(154,171,191,0.14);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
}

.team-player-cockpit.t1-sniper {
  border-color: rgba(56,189,248,0.4);
  background: linear-gradient(170deg, rgba(16,32,52,0.97) 0%, rgba(10,16,24,0.99) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(56,189,248,0.07);
}

.team-player-cockpit.t1-sniper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, #38bdf8 0%, rgba(56,189,248,0.3) 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(56,189,248,0.5);
}

.team-player-cockpit.t1-spotter {
  border-color: rgba(0,255,200,0.4);
  background: linear-gradient(170deg, rgba(10,32,28,0.97) 0%, rgba(10,16,24,0.99) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,255,200,0.07);
}

.team-player-cockpit.t1-spotter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, #00ffc8 0%, rgba(0,255,200,0.3) 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(0,255,200,0.5);
}

.team-player-cockpit.t2-sniper {
  border-color: rgba(249,115,22,0.4);
  background: linear-gradient(170deg, rgba(38,22,10,0.97) 0%, rgba(10,16,24,0.99) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(249,115,22,0.07);
}

.team-player-cockpit.t2-sniper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(249,115,22,0.3) 30%, #f97316 100%);
  box-shadow: 0 0 10px rgba(249,115,22,0.5);
}

.team-player-cockpit.t2-spotter {
  border-color: rgba(251,191,36,0.4);
  background: linear-gradient(170deg, rgba(36,30,10,0.97) 0%, rgba(10,16,24,0.99) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.07);
}

.team-player-cockpit.t2-spotter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(251,191,36,0.3) 30%, #fbbf24 100%);
  box-shadow: 0 0 10px rgba(251,191,36,0.5);
}

.team-q-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #EEF3F8;
  min-height: 52px;
  margin-bottom: 12px;
}

.team-opt-btn {
  background: rgba(10,16,24,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 9px 12px;
  text-align: left;
  color: #E0EAF4;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.16s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.team-player-cockpit.t1-sniper .team-opt-btn:hover  { border-color: #38bdf8; background: rgba(20,44,70,0.9); }
.team-player-cockpit.t1-spotter .team-opt-btn:hover { border-color: #00ffc8; background: rgba(10,38,34,0.9); }
.team-player-cockpit.t2-sniper .team-opt-btn:hover  { border-color: #f97316; background: rgba(42,22,10,0.9); }
.team-player-cockpit.t2-spotter .team-opt-btn:hover { border-color: #fbbf24; background: rgba(42,32,10,0.9); }

.team-opt-btn.opt-correct {
  background: rgba(34,197,94,0.22) !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 16px rgba(34,197,94,0.3) !important;
  animation: flash-correct 0.4s ease;
}

.team-opt-btn.opt-wrong {
  background: rgba(239,68,68,0.22) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239,68,68,0.25) !important;
  animation: shake-wrong 0.35s ease;
}

/* Team timer badge premium */
.team-timer-badge {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(36,184,255,0.12);
  color: #24B8FF;
  border: 1px solid rgba(36,184,255,0.3);
  box-shadow: 0 0 10px rgba(36,184,255,0.2);
}

.team-timer-badge.urgent {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.5);
  box-shadow: 0 0 12px rgba(251,191,36,0.3);
  animation: pulse-urgent 0.9s ease-in-out infinite;
}

.team-timer-badge.danger {
  background: rgba(239,68,68,0.2);
  color: #ef4444;
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 0 14px rgba(239,68,68,0.4);
  animation: danger-pulse 0.6s ease-in-out infinite;
}

/* ── ARENA 2×2 GRID UPGRADE ──────────────────────────────────── */
.team-arena-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
  position: relative;
}

/* Vertical & horizontal center lines for 2×2 */
.team-arena-2x2::before {
  content: '';
  position: absolute;
  left: 50%; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.08) 70%,
    transparent 100%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

/* ── SECTION HEADERS — BATTLE ─────────────────────────────────── */
.battle-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  padding: 5px 14px;
  border-radius: 6px;
  background: rgba(255,120,31,0.12);
  color: #FF9A5C;
  border: 1px solid rgba(255,120,31,0.35);
  box-shadow: 0 0 14px rgba(255,120,31,0.15);
}

/* ── KEYBOARD HINTS ──────────────────────────────────────────── */
.keyboard-hints {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.key-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  background: rgba(10,16,26,0.9);
  border: 1px solid rgba(154,171,191,0.3);
  border-bottom: 2px solid rgba(154,171,191,0.5);
  border-radius: 6px;
  color: #9AABBF;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 4px rgba(0,0,0,0.5);
}

/* ── SCREEN TRANSITION ───────────────────────────────────────── */
.screen.active {
  animation: arena-enter 0.38s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes arena-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Q-SEQ BADGE UPGRADE ─────────────────────────────────────── */
.q-seq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(36,184,255,0.15) 0%, rgba(36,184,255,0.05) 100%);
  color: #24B8FF;
  border: 1.5px solid rgba(36,184,255,0.3);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  box-shadow: 0 0 12px rgba(36,184,255,0.1);
}

/* ── EXPLANATION BOX UPGRADE ─────────────────────────────────── */
.explanation-box {
  display: none;
  margin-top: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(16,42,30,0.6) 0%, rgba(10,24,18,0.75) 100%);
  border: 1.5px solid rgba(33,230,161,0.4);
  border-radius: 14px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.4),
    0 0 20px rgba(33,230,161,0.08),
    inset 0 1px 0 rgba(33,230,161,0.08);
  animation: screenFadeIn 0.3s ease;
}

.explanation-box.show {
  display: block !important;
}

/* ── NEXT BUTTON PREMIUM ─────────────────────────────────────── */
.btn-next-action {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #21E6A1 0%, #18B77E 100%);
  color: #060D12;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 20px rgba(33,230,161,0.45),
    0 0 0 1px rgba(33,230,161,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
}

.btn-next-action:hover {
  box-shadow: 0 8px 28px rgba(33,230,161,0.6), 0 0 0 2px rgba(33,230,161,0.4);
  transform: translateY(-2px);
}

/* ── ABORT BUTTON PREMIUM ─────────────────────────────────────── */
.btn-abort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: rgba(239,68,68,0.08);
  border: 1.5px solid rgba(239,68,68,0.3);
  color: #f87171;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.04);
}

.btn-abort:hover {
  background: rgba(239,68,68,0.2);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 20px rgba(239,68,68,0.35), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}


/* ═══════════════════════════ END PREMIUM ARENA ═══════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════════════
   SECTION 11 & 12: PROFESSIONAL REYTING MARKAZI VA PDF HISOBOTLAR MARKAZI STYLES
   Intelligent Ranking, Performance Analytics & Military PDF Reporting Engine
════════════════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   ELITE MILITARY RANKING CENTER & ARCHIVE (ULTRA-MODERN HUD RE-DESIGN)
   ========================================================================== */

/* 1. SCREEN HEADER */
.ranking-screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 14, 28, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #38bdf8;
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-wrap: wrap;
}

.ranking-header-text {
  flex: 1;
  min-width: 320px;
}

.ranking-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}

.pulsing-radar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: radarPulse 1.8s infinite;
}

@keyframes radarPulse {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px #3b82f6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #60a5fa; }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px #3b82f6; }
}

.ranking-title {
  font-family: var(--font-display, 'Orbitron', 'Rajdhani', sans-serif);
  font-size: 27px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 40%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6));
}

.ranking-subtitle {
  color: #94a3b8;
  font-size: 13.5px;
  margin-top: 5px;
  max-width: 760px;
  line-height: 1.5;
}

.ranking-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-ranking-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-transform: uppercase;
}

.btn-ranking-primary {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(2, 132, 199, 0.45) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);
}
.btn-ranking-primary:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.45) 0%, rgba(2, 132, 199, 0.7) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55);
  transform: translateY(-2px);
}

.btn-ranking-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}
.btn-ranking-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-ranking-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.btn-ranking-danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-2px);
}

/* 2. THE 6 KPI TELEMETRY CARDS */
.ranking-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1400px) {
  .ranking-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .ranking-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ranking-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(8, 14, 28, 0.98));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--kpi-border, rgba(56, 189, 248, 0.7));
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 0;
}

.ranking-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: radial-gradient(ellipse at top, var(--kpi-glow, rgba(59, 130, 246, 0.2)) 0%, transparent 70%);
  pointer-events: none;
}

.ranking-kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: var(--kpi-border, #38bdf8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 24px var(--kpi-glow, rgba(59, 130, 246, 0.3));
}

.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.kpi-label {
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.3;
}

.kpi-icon-wrap {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.kpi-val {
  font-family: var(--font-display, 'Orbitron', 'Rajdhani', sans-serif);
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.15;
  margin: 4px 0 6px;
  text-shadow: 0 0 16px var(--kpi-glow, rgba(59, 130, 246, 0.4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-subtext {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.kpi-subtext::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kpi-border, rgba(255, 255, 255, 0.4));
  box-shadow: 0 0 6px var(--kpi-border, transparent);
  flex-shrink: 0;
}

/* 3. SYMMETRICAL 5x2 TACTICAL TAB MATRIX (NO STRANDED TABS!) */
.ranking-tabs-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: rgba(10, 16, 29, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 1150px) {
  .ranking-tabs-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ranking-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #94a3b8;
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-height: 42px;
}

.ranking-tab-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ranking-tab-btn.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(14, 165, 233, 0.25) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ranking-tab-btn[data-tab="snipers"].active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(2, 132, 199, 0.45) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.4);
}
.ranking-tab-btn[data-tab="spotters"].active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(4, 120, 87, 0.45) 100%);
  border-color: #10b981;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4);
}
.ranking-tab-btn[data-tab="teams"].active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35) 0%, rgba(126, 34, 206, 0.45) 100%);
  border-color: #c084fc;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.4);
}
.ranking-tab-btn[data-tab="subjects"].active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(180, 83, 9, 0.45) 100%);
  border-color: #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.4);
}
.ranking-tab-btn[data-tab="groups"].active {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.35) 0%, rgba(190, 18, 60, 0.45) 100%);
  border-color: #fb7185;
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.4);
}
.ranking-tab-btn[data-tab="history"].active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.35) 0%, rgba(161, 98, 7, 0.45) 100%);
  border-color: #eab308;
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.4);
}
.ranking-tab-btn[data-tab="analytics"].active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.35) 0%, rgba(8, 145, 178, 0.45) 100%);
  border-color: #06b6d4;
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.4);
}
.ranking-tab-btn[data-tab="personal"].active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(67, 56, 202, 0.45) 100%);
  border-color: #818cf8;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.4);
}
.ranking-tab-btn[data-tab="pdf-center"].active {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.35) 0%, rgba(13, 148, 136, 0.45) 100%);
  border-color: #14b8a6;
  box-shadow: 0 0 18px rgba(20, 184, 166, 0.4);
}

.ranking-tab-content-container {
  min-height: 480px;
}

.ranking-tab-pane {
  display: none;
}
.ranking-tab-pane.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

/* 4. PODIUM TOP 3 CARDS */
.ranking-podium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .ranking-podium-grid {
    grid-template-columns: 1fr;
  }
}

.podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 26px rgba(0,0,0,0.35);
}

.podium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}

.podium-card.podium-gold {
  border-color: rgba(234, 179, 8, 0.55);
  background: radial-gradient(circle at top, rgba(234, 179, 8, 0.16) 0%, rgba(15, 23, 42, 0.9) 70%);
  box-shadow: 0 10px 32px rgba(234, 179, 8, 0.22);
  order: 2;
}

.podium-card.podium-silver {
  border-color: rgba(148, 163, 184, 0.45);
  background: radial-gradient(circle at top, rgba(148, 163, 184, 0.12) 0%, rgba(15, 23, 42, 0.9) 70%);
  box-shadow: 0 8px 26px rgba(148, 163, 184, 0.15);
  order: 1;
}

.podium-card.podium-bronze {
  border-color: rgba(217, 119, 6, 0.45);
  background: radial-gradient(circle at top, rgba(217, 119, 6, 0.12) 0%, rgba(15, 23, 42, 0.9) 70%);
  box-shadow: 0 8px 26px rgba(217, 119, 6, 0.15);
  order: 3;
}

.podium-medal-badge {
  font-size: 34px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.podium-rank-title {
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.podium-gold .podium-rank-title { color: #facc15; }
.podium-silver .podium-rank-title { color: #cbd5e1; }
.podium-bronze .podium-rank-title { color: #fb923c; }

.podium-participant-name {
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.podium-participant-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.podium-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}

.podium-action-btn {
  font-size: 11.5px;
  padding: 5px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 700;
}

.podium-action-btn:hover {
  background: rgba(59, 130, 246, 0.35);
  border-color: #3b82f6;
  color: #ffffff;
}

/* 5. TACTICAL RADAR HUD EMPTY STATE */
.tactical-empty-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 28px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
}

.radar-hud-reticle-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-hud-svg {
  width: 96px;
  height: 96px;
  animation: radarSpin 14s linear infinite;
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-hud-center-icon {
  position: absolute;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5));
}

.tactical-empty-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
}

.tactical-empty-title {
  font-family: var(--font-display, 'Orbitron', 'Rajdhani', sans-serif);
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tactical-empty-desc {
  font-size: 13.5px;
  color: #94a3b8;
  max-width: 580px;
  line-height: 1.6;
  margin: 0 auto 26px;
}

.tactical-empty-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-tactical-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 12px;
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.22s ease;
  text-transform: uppercase;
}

.btn-tactical-cta.primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid #38bdf8;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.35);
}
.btn-tactical-cta.primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.6);
  transform: translateY(-2px);
}

.btn-tactical-cta.secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
.btn-tactical-cta.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-2px);
}

.ranking-table-card {
  background: radial-gradient(120% 100% at 50% 0%, rgba(15, 23, 42, 0.92) 0%, rgba(8, 13, 24, 0.98) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.table-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 7, 18, 0.55);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-card-title {
  font-family: var(--font-display, 'Orbitron', 'Rajdhani', sans-serif);
  font-size: 16.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.table-card-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 13px;
}

.rank-medal.gold {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #0f172a;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.5);
}

.rank-medal.silver {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #0f172a;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.4);
}

.rank-medal.bronze {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.4);
}

.rank-medal.normal {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-profile-open {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-profile-open:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
}

/* Subjects Ranking Grid */
.subjects-ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  padding: 20px;
}

.subject-rank-card {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.25s ease;
}

.subject-rank-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.subject-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.subject-rank-code {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.subject-rank-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}

.subject-progress-bar-wrap {
  background: rgba(255, 255, 255, 0.08);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.subject-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.subject-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.subj-stat-num {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.subj-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Analytics Dashboard Wrapper */
.analytics-dashboard-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.analytics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

.analytics-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.analytics-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Grade Distribution Bar */
.grade-dist-bar {
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.06);
}

.grade-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  transition: all 0.3s ease;
}

.grade-legend-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grade-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.grade-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Horizontal Bar List */
.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hbar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hbar-label {
  width: 130px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-track {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.5s ease;
}

.hbar-val {
  width: 50px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

/* Personal Dossier Tab */
.personal-dossier-search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(15, 23, 42, 0.7);
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.personal-select-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 280px;
}

.empty-state-card {
  padding: 60px 30px;
  text-align: center;
  background: rgba(15, 23, 42, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* PDF Center Form & Archive */
.pdf-center-container {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .pdf-center-container {
    grid-template-columns: 1fr;
  }
}

.pdf-form-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdf-archive-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

/* Profile Modal Custom Elements */
.profile-dossier-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(2, 6, 23, 0.6);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.profile-avatar-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
  flex-shrink: 0;
}

.profile-name-big {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.profile-badge-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.profile-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
}

.profile-pill.highlight {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.4);
  color: #facc15;
}

/* Test Detail Modal */
.test-detail-item {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
}

.test-detail-item.is-correct {
  border-left: 3px solid #10b981;
}

.test-detail-item.is-wrong {
  border-left: 3px solid #ef4444;
}

.test-detail-q-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}

.test-detail-q-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 8px 0;
}

.test-detail-answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12.5px;
}

.ans-box {
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.ans-box.selected-correct {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.ans-box.selected-wrong {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.ans-box.correct-target {
  background: rgba(16, 185, 129, 0.1);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  color: #34d399;
}



/* ════════════════════════════════════════════════════════════════════════════════════
   SECTION 13: PREMIUM INTRO SCREEN (DASTURGA KIRISH ANIMATSIYASI VA OVOZ EFFEKTI)
   Cinematic 3-Second Opening Sequence with Light Flash and Gunshot SFX
════════════════════════════════════════════════════════════════════════════════════ */

.intro-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: opacity, transform;
}

.intro-screen-overlay.fade-out {
  opacity: 0;
  transform: scale(1.035);
  pointer-events: none;
}

.intro-screen-overlay.hidden {
  display: none !important;
}

/* Ambient Dual Aura (Blue on left, Red on right) */
.intro-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-glow-circle {
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  animation: auraBreathe 3s ease-in-out infinite alternate;
}

.glow-blue {
  left: -15%;
  background: radial-gradient(circle, #2563eb 0%, rgba(37, 99, 235, 0) 70%);
}

.glow-red {
  right: -15%;
  background: radial-gradient(circle, #dc2626 0%, rgba(220, 38, 38, 0) 70%);
}

@keyframes auraBreathe {
  0% { transform: scale(0.92); opacity: 0.28; }
  100% { transform: scale(1.08); opacity: 0.42; }
}

/* Central Stage */
.intro-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 85vh;
  z-index: 5;
}

.intro-image-wrapper {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
    0 12px 60px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(37, 99, 235, 0.3),
    0 0 80px rgba(220, 38, 38, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  animation: introImageReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity, filter;
  background: #000;
}

@keyframes introImageReveal {
  0% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(14px) brightness(0.6);
  }
  40% {
    opacity: 0.7;
    filter: blur(6px) brightness(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1.0);
    filter: blur(0px) brightness(1.0);
  }
}

.intro-main-image {
  display: block;
  max-width: 84vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  transition: filter 0.25s ease, transform 0.25s ease;
}

/* Gunshot Recoil Animation */
.intro-image-wrapper.shot-recoil {
  animation: shotRecoil 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shotRecoil {
  0% { transform: scale(1.0); filter: brightness(1.0); }
  25% { transform: scale(1.035); filter: brightness(1.8) drop-shadow(0 0 35px #fff); }
  60% { transform: scale(0.99); filter: brightness(1.15); }
  100% { transform: scale(1.0); filter: brightness(1.0); }
}

/* Sweeping Laser Sheen */
.intro-laser-sweep {
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.08) 40%, 
    rgba(255, 255, 255, 0.35) 50%, 
    rgba(56, 189, 248, 0.3) 60%, 
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  animation: laserSheen 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes laserSheen {
  0% { left: -120%; }
  40% { left: -120%; }
  100% { left: 160%; }
}

/* Gunshot Flash Screen Overlay */
.intro-flash-overlay {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}

.intro-flash-overlay.flash-active {
  animation: introGunshotFlash 0.38s ease-out forwards;
}

@keyframes introGunshotFlash {
  0% { opacity: 0; }
  15% { opacity: 0.88; }
  40% { opacity: 0.35; }
  100% { opacity: 0; }
}

/* Subtle Progress Bar */
.intro-progress-bar-wrap {
  width: 100%;
  max-width: 400px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 20px;
}

.intro-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #ef4444);
  border-radius: 2px;
  transition: width 0.05s linear;
}

/* Top Right Controls */
.intro-hud-controls {
  position: absolute;
  top: 24px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 25;
}

.intro-skip-btn, .intro-sound-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.intro-skip-btn:hover, .intro-sound-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.intro-sound-toggle-btn.needs-permission {
  border-color: #3b82f6;
  background: rgba(37, 99, 235, 0.25);
  animation: soundPulse 1.4s infinite;
}

@keyframes soundPulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@media (max-width: 768px) {
  .intro-main-image {
    max-width: 92vw;
    max-height: 60vh;
  }
  .intro-hud-controls {
    top: 16px;
    right: 16px;
  }
  .intro-skip-btn, .intro-sound-toggle-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
}




/* 13.4. Interactive Audio Unlock Prompt (Autoplay Safeguard) */
.intro-tap-prompt {
  position: absolute;
  bottom: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(59, 130, 246, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 25px rgba(59, 130, 246, 0.35);
  border-radius: 30px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f8fafc;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 25;
  animation: promptPulse 1.8s ease-in-out infinite alternate;
  transition: all 0.25s ease;
  user-select: none;
}

.intro-tap-prompt:hover {
  background: rgba(30, 58, 138, 0.9);
  border-color: #60a5fa;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.7), 0 0 35px rgba(59, 130, 246, 0.55);
}

.intro-tap-prompt.unlocked {
  border-color: #10b981;
  background: rgba(6, 78, 59, 0.85);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 25px rgba(16, 185, 129, 0.45);
  animation: none;
}

.tap-pulse-icon {
  font-size: 16px;
  display: inline-block;
  animation: iconBounce 1s infinite alternate ease-in-out;
}

@keyframes promptPulse {
  0% { transform: scale(0.98); opacity: 0.88; box-shadow: 0 0 15px rgba(59, 130, 246, 0.25); }
  100% { transform: scale(1.02); opacity: 1; box-shadow: 0 0 30px rgba(59, 130, 246, 0.5); }
}

@keyframes iconBounce {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.2); }
}

/* ==========================================================================
   SECTION 14: SNIPERIQ DESIGN SYSTEM & UI/UX ENHANCEMENTS
   PREMIUM FUTURISTIC TECHNOLOGY + ELITE COMPETITION + TACTICAL INTELLIGENCE
   ========================================================================== */

:root {
  /* 14.2 Color Palette */
  --sec14-bg-graphite: #0b0f17;
  --sec14-bg-navy: #0f172a;
  --sec14-bg-card: #131b2e;
  --sec14-bg-card-hover: #18233c;
  --sec14-blue-electric: #2563eb;
  --sec14-cyan-neon: #06b6d4;
  --sec14-indigo-premium: #6366f1;
  --sec14-text-white: #f8fafc;
  --sec14-text-muted: #94a3b8;
  --sec14-text-dim: #64748b;
  --sec14-green-emerald: #10b981;
  --sec14-red-soft: #ef4444;
  --sec14-yellow-amber: #f59e0b;
  --sec14-border-glow: rgba(37, 99, 235, 0.25);
  --sec14-border-subtle: rgba(255, 255, 255, 0.08);
  --sec14-radius-sm: 8px;
  --sec14-radius-md: 12px;
  --sec14-radius-lg: 16px;
  --sec14-radius-xl: 22px;
  --sec14-shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sec14-shadow-hover: 0 16px 40px -8px rgba(37, 99, 235, 0.25), 0 0 0 1px rgba(6, 182, 212, 0.4);
}

/* --------------------------------------------------------------------------
   A. SIDEBAR NAVIGATION STYLING (14.3.A, 14.10) - ELITE MILITARY TACTICAL OVERHAUL
   -------------------------------------------------------------------------- */
.app-sidebar {
  background: linear-gradient(180deg, #070d18 0%, #050912 60%, #03060c 100%) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.14) !important;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.75) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-header {
  padding: 16px 14px !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(8, 13, 22, 0.8) 100%) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  opacity: 0.7;
}

.sidebar-brand {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: transform 0.2s ease;
}

.sidebar-brand:hover {
  transform: translateY(-1px);
}

.brand-crest {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #0c1626 0%, #020611 100%);
  border: 2px solid #eab308;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.35), 0 0 8px rgba(56, 189, 248, 0.35);
  transition: all 0.25s ease;
  cursor: pointer;
  overflow: hidden;
}

.brand-crest:hover {
  transform: scale(1.06);
  box-shadow: 0 0 24px rgba(234, 179, 8, 0.6), 0 0 14px rgba(56, 189, 248, 0.55);
}

.brand-crest-ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px dashed rgba(56, 189, 248, 0.5);
  pointer-events: none;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.brand-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-main {
  font-family: 'Rajdhani', 'Orbitron', -apple-system, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  background: linear-gradient(135deg, #ffffff 40%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.35));
}

.brand-sub {
  font-family: 'Rajdhani', monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  color: #38bdf8 !important;
  text-transform: uppercase !important;
  opacity: 0.9;
}

.sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #94a3b8 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.sidebar-toggle-btn:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.sidebar-nav {
  padding: 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

.nav-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 4px 8px;
  font-family: 'Rajdhani', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #64748b;
  text-transform: uppercase;
}

.nav-section-label:first-of-type {
  padding-top: 2px;
}

.nav-section-label .section-dash {
  width: 10px;
  height: 2px;
  background: rgba(56, 189, 248, 0.4);
  border-radius: 1px;
}

.sidebar-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  text-align: left !important;
  width: 100% !important;
}

.sidebar-nav-item:hover {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.sidebar-nav-item .nav-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.sidebar-nav-item:hover .nav-icon {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
}

.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.22) 0%, rgba(6, 182, 212, 0.08) 100%) !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.18), inset 0 0 12px rgba(56, 189, 248, 0.1) !important;
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3.5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  box-shadow: 0 0 12px #38bdf8, 0 0 4px #2563eb;
}

.sidebar-nav-item.active .nav-icon {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(37, 99, 235, 0.3) 100%) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

.sidebar-nav-item.active .nav-label {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

.sidebar-nav-item.active .nav-subtext {
  color: #7dd3fc !important;
}

.sidebar-nav-item.active .nav-active-arrow {
  display: block !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) !important;
}

.nav-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nav-label {
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.nav-subtext {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
}

.nav-tactical-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', monospace;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 5px;
  border-radius: 5px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.nav-tactical-tag.red {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

.nav-tactical-tag.cyan {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

.nav-tactical-tag.gold {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.nav-pill-count {
  font-family: 'Rajdhani', monospace;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.nav-active-arrow {
  display: none !important;
  opacity: 0;
  color: #38bdf8;
  transition: all 0.2s ease;
  transform: translateX(-4px);
  flex-shrink: 0;
}

/* Sidebar collapsed state */
.app-sidebar.collapsed {
  width: 72px !important;
}

.app-sidebar.collapsed .sidebar-brand .brand-title,
.app-sidebar.collapsed .nav-text-group,
.app-sidebar.collapsed .nav-section-label,
.app-sidebar.collapsed .nav-tactical-tag,
.app-sidebar.collapsed .nav-pill-count,
.app-sidebar.collapsed .nav-active-arrow,
.app-sidebar.collapsed .sidebar-status-footer {
  display: none !important;
}

.app-sidebar.collapsed .sidebar-nav-item {
  justify-content: center !important;
  padding: 10px 0 !important;
}

.app-sidebar.collapsed .sidebar-nav-item::before {
  display: none;
}

/* Tooltip for collapsed sidebar item */
.app-sidebar.collapsed .sidebar-nav-item:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid var(--sec14-cyan-neon);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1000;
}

.sidebar-status-footer {
  padding: 12px 12px 16px 12px !important;
  border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.4) 0%, rgba(3, 7, 13, 0.8) 100%) !important;
}

.tactical-status-indicator {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
  border: 1px solid rgba(16, 185, 129, 0.28);
  box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.06), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.status-indicator-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.status-indicator-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec14-green-emerald);
  box-shadow: 0 0 8px var(--sec14-green-emerald);
  animation: sec14Pulse 2s infinite ease-in-out;
}

.status-text-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--sec14-green-emerald);
}

.status-mini-tag {
  font-family: 'Rajdhani', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
}

.status-sub-desc {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.3px;
}

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

/* --------------------------------------------------------------------------
   B. TOP NAVBAR STYLING (14.3.B)
   -------------------------------------------------------------------------- */
.tactical-top-bar {
  background: rgba(10, 16, 26, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--sec14-border-subtle) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  padding: 8px 24px !important;
  min-height: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 99 !important;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tactical-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.bc-home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sec14-cyan-neon);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.bc-home-icon:hover {
  transform: scale(1.15);
  color: #fff;
}

.bc-sep {
  color: var(--sec14-text-dim);
}

.bc-sector {
  color: var(--sec14-text-muted);
  font-size: 11.5px;
  letter-spacing: 0.5px;
}

.bc-active {
  color: var(--sec14-text-white);
  font-weight: 700;
}

/* Center Search & Clock */
.top-bar-center {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-nav-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: 20px;
  padding: 6px 14px;
  width: 280px;
  transition: all 0.25s ease;
  cursor: text;
}

.top-nav-search-wrap:focus-within {
  width: 340px;
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--sec14-cyan-neon);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.top-nav-search-wrap .search-icon {
  color: var(--sec14-text-muted);
  flex-shrink: 0;
}

.top-nav-search-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12.5px;
  outline: none;
  width: 100%;
}

.top-nav-search-input::placeholder {
  color: var(--sec14-text-dim);
}

.search-shortcut-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--sec14-text-dim);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

/* Top bar right buttons */
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tactical-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  color: var(--sec14-text-muted);
  border-radius: 8px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tactical-action-btn:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--sec14-blue-electric);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-notifications {
  position: relative;
  padding: 7px 10px;
}

.notification-badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--sec14-cyan-neon);
  color: #0b0f17;
  font-size: 9.5px;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px var(--sec14-cyan-neon);
}

.user-profile-tactical-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: 24px;
  padding: 4px 12px 4px 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-profile-tactical-pill:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--sec14-blue-electric);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
}

.profile-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.profile-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec14-green-emerald);
  border: 2px solid #0f172a;
}

.profile-info-wrap {
  display: flex;
  flex-direction: column;
}

.profile-rank-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}

.profile-badge-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--sec14-cyan-neon);
}

/* --------------------------------------------------------------------------
   C. BOSH SAHIFA WELCOME BANNER (14.4)
   -------------------------------------------------------------------------- */
.home-hero-welcome-banner {
  position: relative;
  border-radius: var(--sec14-radius-xl);
  background: linear-gradient(135deg, #0e1526 0%, #0a0e19 100%);
  border: 1px solid rgba(37, 99, 235, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 38px 42px;
  margin-bottom: 28px;
}

.hero-tech-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.8;
}

.hero-glow-radial {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}

.hero-glow-blue {
  top: -120px;
  right: -50px;
  background: #2563eb;
}

.hero-glow-cyan {
  bottom: -150px;
  left: 20%;
  background: #06b6d4;
  opacity: 0.12;
}

.hero-content-wrapper {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.hero-badge-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--sec14-green-emerald);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
}

.hero-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sec14-green-emerald);
  box-shadow: 0 0 8px var(--sec14-green-emerald);
  animation: sec14Pulse 1.8s infinite;
}

.hero-platform-tag {
  color: var(--sec14-cyan-neon);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.hero-brand-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px 0;
  line-height: 1.1;
}

.hero-brand-gradient {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ffffff 30%, #38bdf8 70%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(56, 189, 248, 0.3));
}

.hero-brand-sub {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--sec14-text-muted);
}

.hero-salutation-text {
  font-size: 16px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 10px;
}

.hero-mission-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sec14-text-muted);
  margin-bottom: 24px;
  max-width: 740px;
}

.hero-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   D. BUTTON DESIGN SYSTEM (14.7, 14.8)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--sec14-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%) !important;
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.5) !important;
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--sec14-text-white) !important;
  border-color: var(--sec14-border-subtle) !important;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.btn-success {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
}

.btn-success:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-2px);
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
}

.btn-danger:hover {
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-2px);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn-hero-cta {
  padding: 13px 26px;
  font-size: 14.5px;
  border-radius: var(--sec14-radius-lg);
}

/* --------------------------------------------------------------------------
   E. 6 KPI STAT CARDS (14.4)
   -------------------------------------------------------------------------- */
.home-kpi-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 1200px) {
  .home-kpi-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .home-kpi-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .home-kpi-stats-grid { grid-template-columns: 1fr; }
}

.kpi-card {
  background: var(--sec14-bg-card);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--sec14-shadow-card);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.kpi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: var(--sec14-shadow-hover);
}

.kpi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon-box.icon-cyan { background: rgba(6, 182, 212, 0.15); color: var(--sec14-cyan-neon); }
.kpi-icon-box.icon-blue { background: rgba(37, 99, 235, 0.15); color: var(--sec14-blue-electric); }
.kpi-icon-box.icon-emerald { background: rgba(16, 185, 129, 0.15); color: var(--sec14-green-emerald); }
.kpi-icon-box.icon-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.kpi-icon-box.icon-amber { background: rgba(245, 158, 11, 0.15); color: var(--sec14-yellow-amber); }
.kpi-icon-box.icon-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

.kpi-trend-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--sec14-cyan-neon);
  background: rgba(6, 182, 212, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
}

.kpi-card-value {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 4px;
}

.kpi-card-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sec14-text-white);
  margin-bottom: 2px;
}

.kpi-card-sub {
  font-size: 11px;
  color: var(--sec14-text-dim);
}

/* --------------------------------------------------------------------------
   F. 3 BATTLE MODE SHOWCASE CARDS (14.9)
   -------------------------------------------------------------------------- */
.home-section-header {
  margin-top: 10px;
  margin-bottom: 20px;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.section-tag-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--sec14-cyan-neon);
  background: rgba(6, 182, 212, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(6, 182, 212, 0.25);
}

.section-main-title {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  margin: 0;
}

.section-sub-desc {
  font-size: 13.5px;
  color: var(--sec14-text-muted);
  margin: 0;
}

.battle-modes-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

@media (max-width: 992px) {
  .battle-modes-showcase-grid { grid-template-columns: 1fr; }
}

.tactical-battle-mode-card {
  background: var(--sec14-bg-card);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-xl);
  padding: 26px 24px;
  box-shadow: var(--sec14-shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.tactical-battle-mode-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sec14-shadow-hover);
}

.mode-card-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

.mode-card-individual .mode-card-backdrop { background: rgba(37, 99, 235, 0.15); }
.mode-card-duel .mode-card-backdrop { background: rgba(6, 182, 212, 0.15); }
.mode-card-team .mode-card-backdrop { background: rgba(99, 102, 241, 0.15); }

.mode-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.mode-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.tactical-battle-mode-card:hover .mode-icon-circle {
  transform: scale(1.1);
}

.mode-icon-circle.icon-blue { background: rgba(37, 99, 235, 0.18); color: #38bdf8; border: 1px solid rgba(37, 99, 235, 0.35); }
.mode-icon-circle.icon-cyan { background: rgba(6, 182, 212, 0.18); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.35); }
.mode-icon-circle.icon-indigo { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.35); }

.mode-participant-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--sec14-cyan-neon);
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
}

.mode-title {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.mode-desc {
  font-size: 13px;
  color: var(--sec14-text-muted);
  line-height: 1.5;
  margin: 0 0 16px 0;
  min-height: 40px;
}

.mode-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.feature-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--sec14-text-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  padding: 4px 10px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   G. 9 SUBJECT CARDS GRID (14.5)
   -------------------------------------------------------------------------- */
.subjects-tactical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  padding: 10px 4px 36px;
}

@media (max-width: 1100px) {
  .subjects-tactical-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 700px) {
  .subjects-tactical-grid { grid-template-columns: 1fr; gap: 16px; }
}

.command-card {
  background: var(--sec14-bg-card);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-lg);
  padding: 22px 20px;
  box-shadow: var(--sec14-shadow-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   ELITE MILITARY SUBJECT CARDS (COMMAND CARD ELITE)
   ========================================================================== */
.command-card.subject-card-elite {
  position: relative;
  background: radial-gradient(130% 110% at 50% 0%, rgba(15, 23, 42, 0.94) 0%, rgba(9, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Laser Top Accent Line */
.subject-card-laser-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, var(--subj-color, #38bdf8) 50%, transparent 100%);
  opacity: 0.55;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

/* Sci-Fi Corner Notches */
.subject-card-corner-notch {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  border-color: var(--subj-color, #38bdf8);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.sc-tl { top: 6px; left: 6px; border-top: 2px solid var(--subj-color, #38bdf8); border-left: 2px solid var(--subj-color, #38bdf8); }
.sc-tr { top: 6px; right: 6px; border-top: 2px solid var(--subj-color, #38bdf8); border-right: 2px solid var(--subj-color, #38bdf8); }

/* Hover States */
.command-card.subject-card-elite:hover {
  transform: translateY(-6px);
  border-color: var(--subj-color, #38bdf8);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 28px color-mix(in srgb, var(--subj-color, #38bdf8) 28%, transparent);
  background: radial-gradient(130% 110% at 50% 0%, rgba(20, 30, 55, 0.96) 0%, rgba(9, 14, 28, 0.99) 100%);
}

.command-card.subject-card-elite:hover .subject-card-laser-top {
  opacity: 1;
  height: 3.5px;
  box-shadow: 0 0 12px var(--subj-color, #38bdf8);
}

.command-card.subject-card-elite:hover .subject-card-corner-notch {
  opacity: 1;
}

/* Header Area */
.command-card.subject-card-elite .command-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Tactical Icon Container (58x58 with Dual Ring Pedestal) */
.command-card.subject-card-elite .command-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--subj-color, #38bdf8) 18%, transparent) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid color-mix(in srgb, var(--subj-color, #38bdf8) 45%, transparent);
  color: var(--subj-color, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 16px color-mix(in srgb, var(--subj-color, #38bdf8) 15%, transparent);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.command-card.subject-card-elite .command-icon-box svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--subj-color, #38bdf8) 65%, transparent));
  transition: transform 0.3s ease;
}

.command-card.subject-card-elite:hover .command-icon-box {
  transform: scale(1.08);
  border-color: var(--subj-color, #38bdf8);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--subj-color, #38bdf8) 45%, transparent);
}

.command-card.subject-card-elite:hover .command-icon-box svg {
  transform: scale(1.05);
}

/* Callsign Badge (FAN-01 ... FAN-09) */
.command-card.subject-card-elite .command-badge-wrap {
  display: flex;
  align-items: center;
}

.command-card.subject-card-elite .command-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--subj-color, #38bdf8) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--subj-color, #38bdf8) 35%, transparent);
  color: var(--subj-color, #38bdf8);
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.command-card.subject-card-elite .command-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--subj-color, #38bdf8);
  box-shadow: 0 0 6px var(--subj-color, #38bdf8);
}

/* Card Title */
.command-card.subject-card-elite .command-card-title {
  font-family: var(--font-display, 'Orbitron', 'Rajdhani', sans-serif);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 12px 0 22px 0;
  line-height: 1.32;
  min-height: 56px;
  display: flex;
  align-items: center;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

.command-card.subject-card-elite:hover .command-card-title {
  color: #ffffff;
  text-shadow: 0 0 16px color-mix(in srgb, var(--subj-color, #38bdf8) 55%, transparent);
}

/* Card Description (Removed per user request for ultra-clean modern aesthetic) */
.command-card.subject-card-elite .command-card-desc {
  display: none !important;
}

/* Card Footer */
.command-card.subject-card-elite .command-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

/* Footer Stats Pill */
.command-card.subject-card-elite .command-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 700;
}

.command-card.subject-card-elite .footer-stat-icon {
  font-size: 12px;
}

.command-card.subject-card-elite .footer-stat-text {
  font-weight: 700;
}

.command-card.subject-card-elite .footer-stat-dot {
  color: var(--subj-color, #38bdf8);
  opacity: 0.8;
  margin: 0 2px;
}

/* Footer Action Button ("Fanni oçiş ->") */
.command-card.subject-card-elite .command-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--subj-color, #38bdf8) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--subj-color, #38bdf8) 35%, transparent);
  color: var(--subj-color, #38bdf8);
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}

.command-card.subject-card-elite .command-footer-link .footer-link-arrow {
  transition: transform 0.25s ease;
}

.command-card.subject-card-elite:hover .command-footer-link {
  background: color-mix(in srgb, var(--subj-color, #38bdf8) 22%, transparent);
  border-color: var(--subj-color, #38bdf8);
  box-shadow: 0 0 14px color-mix(in srgb, var(--subj-color, #38bdf8) 35%, transparent);
}

.command-card.subject-card-elite:hover .command-footer-link .footer-link-arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   H. QUICK RANKING PREVIEW (14.17.7)
   -------------------------------------------------------------------------- */
.home-quick-ranking-section {
  background: var(--sec14-bg-card);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-xl);
  padding: 24px 28px;
  box-shadow: var(--sec14-shadow-card);
  margin-bottom: 30px;
}

.quick-ranking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.q-rank-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.q-rank-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--sec14-cyan-neon);
}

.q-rank-title {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.quick-podium-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .quick-podium-preview { grid-template-columns: 1fr; }
}

.quick-podium-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
}

.quick-podium-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.q-medal-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.q-medal-gold { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.35); }
.q-medal-silver { background: rgba(203, 213, 225, 0.15); border: 1px solid rgba(203, 213, 225, 0.35); }
.q-medal-bronze { background: rgba(180, 83, 9, 0.15); border: 1px solid rgba(180, 83, 9, 0.35); }

.q-info-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.q-info-meta {
  font-size: 11px;
  color: var(--sec14-text-dim);
}

.q-info-score {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--sec14-cyan-neon);
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   I. TACTICAL FOOTER (14.3.D)
   -------------------------------------------------------------------------- */
.tactical-footer {
  display: none !important;
  margin-top: 40px;
  padding: 24px 30px;
  background: rgba(11, 15, 23, 0.95);
  border-top: 1px solid var(--sec14-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-brand-text {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
}

.footer-ver-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--sec14-cyan-neon);
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
}

.footer-sub-text {
  color: var(--sec14-text-muted);
  font-size: 11.5px;
}

.footer-sys-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sec14-green-emerald);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.footer-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sec14-green-emerald);
  box-shadow: 0 0 6px var(--sec14-green-emerald);
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--sec14-text-dim);
}

.footer-security-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #f59e0b;
}

/* --------------------------------------------------------------------------
   J. MODAL WINDOWS & TOAST SYSTEM (14.12)
   -------------------------------------------------------------------------- */
.modal-tactical-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-dark-glass {
  background: #0f172a !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  border-radius: var(--sec14-radius-xl) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15) !important;
  color: #fff;
  width: 100%;
  overflow: hidden;
}

.modal-search-dialog { max-width: 640px; width: 100%; }
.modal-notifications-dialog { max-width: 500px; width: 100%; }
.modal-participants-dialog { max-width: 720px; width: 100%; }

.modal-search-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sec14-border-subtle);
  background: rgba(255, 255, 255, 0.02);
}

.modal-search-input {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #fff;
  outline: none;
  width: 100%;
}

.modal-search-close-btn, .modal-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sec14-border-subtle);
  color: var(--sec14-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-search-close-btn:hover, .modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--sec14-red-soft);
  color: #fff;
}

.modal-search-body {
  max-height: 380px;
  overflow-y: auto;
  padding: 16px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}

.search-result-item:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(6, 182, 212, 0.35);
  transform: translateX(4px);
}

.search-res-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-res-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.search-res-meta {
  font-size: 11px;
  color: var(--sec14-text-muted);
}

.notifications-list-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--sec14-border-subtle);
  transition: background 0.2s ease;
}

.notification-item.unread {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
}

.notif-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.notif-desc { font-size: 11.5px; color: var(--sec14-text-muted); line-height: 1.4; margin-bottom: 4px; }
.notif-time { font-size: 10px; color: var(--sec14-text-dim); }

/* Participants directory */
.modal-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sec14-border-subtle);
  gap: 14px;
  flex-wrap: wrap;
}

.filter-search-box {
  flex: 1;
  min-width: 220px;
}

.filter-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: 8px;
  padding: 7px 12px;
  color: #fff;
  font-size: 12.5px;
  outline: none;
}

.filter-role-pills {
  display: flex;
  gap: 6px;
}

.role-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  color: var(--sec14-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.role-pill-btn.active {
  background: var(--sec14-blue-electric);
  border-color: var(--sec14-cyan-neon);
  color: #fff;
}

.participants-roster-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 20px;
}

.roster-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--sec14-border-subtle);
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.roster-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(6, 182, 212, 0.3);
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.toast-alert {
  pointer-events: auto;
  min-width: 280px;
  max-width: 400px;
  background: #0f172a;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.25s ease;
}

.toast-alert.toast-exit {
  opacity: 0;
  transform: translateX(30px);
}

.toast-success { border-color: rgba(16, 185, 129, 0.4); }
.toast-success .toast-icon { color: var(--sec14-green-emerald); }
.toast-error { border-color: rgba(239, 68, 68, 0.4); }
.toast-error .toast-icon { color: var(--sec14-red-soft); }
.toast-info { border-color: rgba(6, 182, 212, 0.4); }
.toast-info .toast-icon { color: var(--sec14-cyan-neon); }
.toast-warning { border-color: rgba(245, 158, 11, 0.4); }
.toast-warning .toast-icon { color: var(--sec14-yellow-amber); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ==========================================================================
   SECTION 15: MULTIPLAYER, HOST & JOIN, WI-FI / CLOUD & MOBILE COCKPIT
   ========================================================================== */

/* ==========================================================================
   SECTION 15: MULTIPLAYER, HOST & JOIN, WI-FI / CLOUD & MOBILE COCKPIT
   ========================================================================== */

/* --- 15.6. MULTIPLAYER SHOWCASE CARD (DASHBOARD) --- */
.multiplayer-network-card {
  position: relative;
  background: linear-gradient(135deg, #0e172a 0%, #090e1a 100%);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: var(--sec14-radius-xl);
  padding: 28px 34px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.mp-card-backdrop {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.mp-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.mp-card-left {
  max-width: 650px;
}

.mp-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--sec14-cyan-neon);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.mp-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sec14-cyan-neon);
  box-shadow: 0 0 8px var(--sec14-cyan-neon);
  animation: sec14Pulse 1.6s infinite;
}

.mp-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
}

.mp-desc {
  font-size: 13.5px;
  color: var(--sec14-text-muted);
  line-height: 1.5;
  margin: 0;
}

.mp-card-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- 15.6. HOST MODE STYLING --- */
.host-header-banner {
  background: linear-gradient(135deg, #0d1527 0%, #080d18 100%);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: var(--sec14-radius-xl);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  box-shadow: var(--sec14-shadow-card);
}

.host-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sec14-cyan-neon);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.host-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: sec14Pulse 1.8s infinite;
}

.host-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px 0;
}

.host-sub-desc {
  font-size: 13px;
  color: var(--sec14-text-muted);
  margin: 0;
}

.host-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .host-main-grid { grid-template-columns: 1fr; }
}

.host-config-panel, .host-connect-panel {
  background: var(--sec14-bg-card);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-xl);
  padding: 24px;
  box-shadow: var(--sec14-shadow-card);
}

.panel-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sec14-border-subtle);
}

.panel-section-title h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.config-field-group {
  margin-bottom: 20px;
}

.config-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sec14-text-white);
  margin-bottom: 8px;
}

.mode-select-pills, .network-select-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mode-pill-btn, .net-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-md);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.mode-pill-btn:hover, .net-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.mode-pill-btn.active, .net-pill-btn.active {
  background: rgba(37, 99, 235, 0.2) !important;
  border-color: var(--sec14-cyan-neon) !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.25);
}

.pill-icon { font-size: 22px; }
.pill-name { font-size: 13px; font-weight: 800; color: #fff; }
.pill-meta { font-size: 11px; color: var(--sec14-text-dim); }

.config-row-selects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  .config-row-selects { grid-template-columns: 1fr; }
}

.sub-label {
  display: block;
  font-size: 11px;
  color: var(--sec14-text-dim);
  margin-bottom: 4px;
}

.tactical-select {
  width: 100%;
  background: #0b0f17;
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-sm);
  padding: 8px 10px;
  color: #fff;
  font-size: 12.5px;
  outline: none;
}

.tactical-select:focus {
  border-color: var(--sec14-cyan-neon);
}

.slot-variants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.slot-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-sm);
  padding: 8px 12px;
}

.svr-title { font-size: 12px; font-weight: 700; color: #fff; }
.svr-select { background: #0b0f17; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--sec14-cyan-neon); font-size: 11.5px; padding: 4px 8px; border-radius: 4px; outline: none; }

/* Room credentials card */
.room-credentials-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--sec14-radius-lg);
  padding: 18px;
  text-align: center;
  margin-bottom: 20px;
}

.room-code-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.rc-label { font-size: 11px; font-weight: 800; color: var(--sec14-text-muted); letter-spacing: 1px; }

.rc-value {
  font-family: 'Rajdhani', monospace;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--sec14-cyan-neon);
  text-shadow: 0 0 16px rgba(6, 182, 212, 0.6);
  background: rgba(6, 182, 212, 0.1);
  padding: 4px 16px;
  border-radius: 8px;
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.rc-copy-btn {
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.rc-copy-btn:hover { transform: scale(1.2); }

.room-qr-display-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.room-qr-display-box svg {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.room-url-info {
  font-size: 11.5px;
  margin-top: 8px;
}

.url-label { color: var(--sec14-text-dim); display: block; margin-bottom: 2px; }
.url-link { color: #38bdf8; text-decoration: none; word-break: break-all; font-family: monospace; }
.url-link:hover { text-decoration: underline; }

/* Connected roster box */
.connected-roster-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-md);
  padding: 14px;
  margin-bottom: 20px;
}

.roster-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rh-title { font-size: 12.5px; font-weight: 800; color: #fff; }
.rh-count { font-size: 11px; font-weight: 800; color: var(--sec14-cyan-neon); background: rgba(6, 182, 212, 0.1); padding: 2px 8px; border-radius: 4px; }

.slots-live-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sec14-border-subtle);
  transition: all 0.2s ease;
}

.slot-row-item.connected {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.slot-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slot-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #64748b;
}

.slot-status-dot.active {
  background: var(--sec14-green-emerald);
  box-shadow: 0 0 8px var(--sec14-green-emerald);
}

.slot-badge-team1 {
  background: rgba(37, 99, 235, 0.2);
  color: #38bdf8;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.slot-badge-team2 {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.slot-player-name { font-size: 12.5px; font-weight: 700; color: #fff; }
.slot-player-meta { font-size: 10.5px; color: var(--sec14-text-dim); }

.slot-ready-chip {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.chip-ready { background: rgba(16, 185, 129, 0.15); color: var(--sec14-green-emerald); }
.chip-waiting { background: rgba(245, 158, 11, 0.15); color: var(--sec14-yellow-amber); }

.btn-start-match {
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: 1px;
}

.host-sub-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.host-sub-actions button {
  flex: 1;
}

/* Host Live Monitor */
.host-live-monitor {
  background: var(--sec14-bg-card);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-xl);
  padding: 24px;
  box-shadow: var(--sec14-shadow-card);
}

.monitor-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sec14-border-subtle);
  margin-bottom: 20px;
}

.mh-left { display: flex; align-items: center; gap: 10px; }
.live-dot-pulse { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: sec14Pulse 1.2s infinite; }
.mh-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 800; color: #fff; }
.mh-match-code { font-size: 12px; font-weight: 800; color: var(--sec14-cyan-neon); background: rgba(6, 182, 212, 0.1); padding: 2px 8px; border-radius: 4px; }

.monitor-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.monitor-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mc-player-name { font-size: 14px; font-weight: 800; color: #fff; }
.mc-role-badge { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.mc-progress-bar-wrap { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 10px 0; }
.mc-progress-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #06b6d4); transition: width 0.3s ease; }
.mc-stats-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--sec14-text-muted); }
.mc-score { font-size: 16px; font-weight: 800; color: #38bdf8; }

/* --- 15.7. JOIN MODE STYLING --- */
.join-screen-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 20px;
}

.join-card {
  max-width: 480px;
  width: 100%;
  background: var(--sec14-bg-card);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--sec14-radius-xl);
  padding: 32px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.join-card-header { text-align: center; margin-bottom: 24px; }
.join-icon-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(6, 182, 212, 0.15); color: var(--sec14-cyan-neon); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px auto; border: 1px solid rgba(6, 182, 212, 0.3); }
.join-title { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 900; color: #fff; margin: 0 0 6px 0; }
.join-subtitle { font-size: 13px; color: var(--sec14-text-muted); margin: 0; line-height: 1.4; }

.join-form-body { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 700; color: var(--sec14-text-white); }
.form-input, .form-select {
  background: #0b0f17;
  border: 1px solid var(--sec14-border-subtle);
  border-radius: 8px;
  padding: 11px 14px;
  color: #fff;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-input:focus, .form-select:focus { border-color: var(--sec14-cyan-neon); box-shadow: 0 0 10px rgba(6, 182, 212, 0.25); }
.code-input { font-family: 'Rajdhani', monospace; font-size: 22px; font-weight: 800; letter-spacing: 3px; text-align: center; color: var(--sec14-cyan-neon); }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.role-choose-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  color: var(--sec14-text-muted);
  border-radius: 8px;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.role-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.role-btn.active { background: rgba(37, 99, 235, 0.2); border-color: var(--sec14-cyan-neon); color: #fff; box-shadow: 0 0 10px rgba(6, 182, 212, 0.3); }

.join-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.btn-join-submit { padding: 13px; font-size: 14px; }

/* Lobby card */
.lobby-badge-strip { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.lobby-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--sec14-green-emerald); }
.lobby-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sec14-green-emerald); box-shadow: 0 0 8px var(--sec14-green-emerald); animation: sec14Pulse 1.5s infinite; }
.lobby-code-tag { font-size: 11px; font-weight: 800; color: var(--sec14-cyan-neon); background: rgba(6, 182, 212, 0.1); padding: 3px 8px; border-radius: 4px; }

.lobby-seat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--sec14-radius-lg);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.seat-badge { font-size: 10.5px; font-weight: 800; color: #38bdf8; margin-bottom: 6px; }
.seat-role-title { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 900; color: #fff; margin: 0 0 6px 0; }
.seat-player-name { font-size: 15px; font-weight: 700; color: var(--sec14-cyan-neon); margin-bottom: 4px; }
.seat-meta-info { font-size: 12px; color: var(--sec14-text-dim); }

.lobby-action-box { margin-bottom: 20px; }
.btn-ready-toggle { padding: 14px; font-size: 15px; letter-spacing: 1px; }

.lobby-waiting-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--sec14-text-muted);
  line-height: 1.4;
}

.waiting-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--sec14-cyan-neon);
  border-radius: 50%;
  animation: spin 1s infinite linear;
  flex-shrink: 0;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* --- 15.11. MOBILE-FIRST INDIVIDUAL TEST COCKPIT STYLING --- */
.mobile-cockpit-wrapper {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #090e18;
  position: relative;
}

.mobile-test-hud {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sec14-border-subtle);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-hud-user { display: flex; align-items: center; gap: 10px; }
.m-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #06b6d4); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.m-user-name { font-size: 13px; font-weight: 700; color: #fff; display: block; }
.m-user-badge { font-size: 9.5px; font-weight: 800; color: var(--sec14-cyan-neon); }

.m-hud-timer-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-timer-svg { transform: rotate(-90deg); }
.m-timer-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 5; }
.m-timer-indicator {
  fill: none;
  stroke: var(--sec14-green-emerald);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.m-timer-num {
  position: absolute;
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.m-hud-score { text-align: right; }
.m-score-val { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 900; color: #38bdf8; display: block; line-height: 1; }
.m-score-lbl { font-size: 9.5px; font-weight: 800; color: var(--sec14-text-dim); letter-spacing: 0.5px; }

.m-test-progress-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
}

.m-test-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  transition: width 0.3s ease;
}

.m-test-main-card {
  flex: 1;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
}

.m-q-meta-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.m-q-num-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--sec14-cyan-neon);
  background: rgba(6, 182, 212, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.m-q-variant-tag {
  font-size: 11px;
  color: var(--sec14-text-dim);
}

.m-q-text {
  font-size: 16.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 24px;
  min-height: 60px;
}

.m-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-option-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sec14-border-subtle);
  border-radius: var(--sec14-radius-md);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: #fff;
  transition: all 0.18s ease;
  min-height: 54px;
}

.m-option-btn:active {
  transform: scale(0.98);
}

.m-opt-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-opt-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.m-option-btn.selected-correct {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: var(--sec14-green-emerald) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}

.m-option-btn.selected-wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: var(--sec14-red-soft) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
}

.m-test-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--sec14-border-subtle);
  background: rgba(15, 23, 42, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--sec14-text-muted);
}

.m-status-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.m-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sec14-green-emerald);
  box-shadow: 0 0 6px var(--sec14-green-emerald);
}

/* ==========================================================================
   PARTICIPANT TABLE ACTION BUTTONS (PDF & DELETE)
   ========================================================================== */
.ranking-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  vertical-align: middle;
}

.btn-table-pdf {
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #38bdf8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-table-pdf:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
  transform: translateY(-1px);
}

.btn-table-pdf:active {
  transform: translateY(0);
}

.btn-table-del {
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-table-del:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.btn-table-del:active {
  transform: translateY(0);
}

/* ==========================================================================
   UNIVERSAL TOP BAR & NAV BACK BUTTONS
   ========================================================================== */
.top-bar-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 12px;
  white-space: nowrap;
}

.top-bar-back-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
  transform: translateX(-2px);
}

.top-bar-back-btn:active {
  transform: translateX(0);
}

.btn-nav-back {
  transition: all 0.2s ease;
}

.btn-nav-back:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
  transform: translateX(-2px);
}

/* Hide redundant duplicate back button in hierarchy bar since top bar has universal back button */
#hub-back-btn {
  display: none !important;
}

/* ==========================================================================
   PARTICIPANT VARIANT SELECTOR CHIPS (1-VAR, 2-VAR, 3-VAR, TTX)
   ========================================================================== */
.variant-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .variant-chips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.btn-var-chip {
  padding: 10px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.btn-var-chip:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

.btn-var-chip.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(37, 99, 235, 0.35)) !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}

.btn-var-chip.active .chip-badge {
  color: #38bdf8 !important;
}

.btn-var-chip.chip-ttx.active {
  background: linear-gradient(135deg, rgba(214, 181, 109, 0.25), rgba(180, 140, 60, 0.35)) !important;
  border-color: var(--premium-gold) !important;
  color: var(--premium-gold) !important;
  box-shadow: 0 0 14px rgba(214, 181, 109, 0.4) !important;
}

.btn-var-chip.chip-ttx.active .chip-badge {
  color: var(--premium-gold) !important;
}


/* ===================================================
   SNIPER / SPOTTER COMBAT ROLE SELECTOR STYLES
   =================================================== */
.role-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.btn-role-select {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.btn-role-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

/* Player 1 / Solo Active States (Cyan / Blue) */
.btn-role-select.active-p1-sniper {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.32)) !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

.btn-role-select.active-p1-spotter {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(13, 148, 136, 0.32)) !important;
  border-color: #06b6d4 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45) !important;
}

/* Player 2 Active States (Orange / Amber) */
.btn-role-select.active-p2-sniper {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(234, 88, 12, 0.32)) !important;
  border-color: #f97316 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.45) !important;
}

.btn-role-select.active-p2-spotter {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(202, 138, 4, 0.32)) !important;
  border-color: #eab308 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.45) !important;
}

.player-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.player-role-pill.p1-role {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.player-role-pill.p2-role {
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #f97316;
}

/* ==========================================================================
   GRAND HOME PORTAL (BO'SH SAHIFA - ULTIMATE TACTICAL ELITE CENTERPIECE)
   ========================================================================== */
#screen-home.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 30px 20px;
}

.home-grand-portal {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  min-height: 580px;
  padding: 32px 44px 44px;
  background: radial-gradient(130% 120% at 50% 28%, rgba(13, 22, 38, 0.94) 0%, rgba(8, 14, 25, 0.97) 55%, rgba(2, 5, 14, 0.99) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 28px;
  box-shadow: 
    0 30px 100px rgba(0, 0, 0, 0.9),
    0 0 70px rgba(14, 165, 233, 0.22),
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 0 60px rgba(56, 189, 248, 0.08);
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Sci-Fi HUD Corner Brackets */
.portal-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 10;
  border-color: #38bdf8;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.85));
}

.portal-corner-tl {
  top: 14px;
  left: 14px;
  border-top: 2.5px solid #38bdf8;
  border-left: 2.5px solid #38bdf8;
}

.portal-corner-tr {
  top: 14px;
  right: 14px;
  border-top: 2.5px solid #38bdf8;
  border-right: 2.5px solid #38bdf8;
}

.portal-corner-bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 2.5px solid #38bdf8;
  border-left: 2.5px solid #38bdf8;
}

.portal-corner-br {
  bottom: 14px;
  right: 14px;
  border-bottom: 2.5px solid #38bdf8;
  border-right: 2.5px solid #38bdf8;
}

/* Tech Ambient & Backdrop Effects */
.grand-portal-tech-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.portal-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.85;
}

.portal-radar-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 90px, rgba(56, 189, 248, 0.08) 91px, transparent 92px, transparent 160px, rgba(56, 189, 248, 0.06) 161px, transparent 162px, transparent 240px, rgba(56, 189, 248, 0.04) 241px, transparent 242px, transparent 310px, rgba(56, 189, 248, 0.02) 311px, transparent 312px);
  pointer-events: none;
}

.portal-laser-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.15) 20%, #38bdf8 50%, rgba(56, 189, 248, 0.15) 80%, transparent 100%);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.8);
  animation: portalLaserGlider 7s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes portalLaserGlider {
  0% { top: -10px; opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { top: 102%; opacity: 0; }
}

.portal-glow-radial {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.portal-glow-gold {
  width: 440px;
  height: 340px;
  background: rgba(245, 158, 11, 0.16);
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.portal-glow-cyan {
  width: 520px;
  height: 380px;
  background: rgba(14, 165, 233, 0.2);
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Top Tactical Status HUD Bar */
.portal-hud-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
}

.portal-hud-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  opacity: 0.7;
}

.hud-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #34d399;
}

.hud-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: liveDotPulse 1.8s ease-in-out infinite;
}

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

.hud-center-id {
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #64748b;
}

.hud-center-id .hud-bracket {
  color: #38bdf8;
  font-weight: 700;
}

.hud-ver-badge {
  padding: 5px 14px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #38bdf8;
}

/* Portal Content Centerpiece */
.grand-portal-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 16px 0 10px;
}

/* Official Tactical Emblem / Crest with High-Tech Military Framing (Enlarged Elite Masterpiece) */
.grand-emblem-wrap {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 6px auto 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emblem-halo {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.42) 0%, rgba(245, 158, 11, 0.32) 42%, rgba(14, 165, 233, 0.12) 68%, transparent 76%);
  filter: blur(28px);
  animation: emblemPulseAura 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes emblemPulseAura {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.06); opacity: 1; }
}

.emblem-laser-ring {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35), inset 0 0 20px rgba(56, 189, 248, 0.2);
  animation: reticleSpinReverse 45s linear infinite;
  pointer-events: none;
}

@keyframes reticleSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.emblem-reticle-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(245, 158, 11, 0.75);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
  animation: reticleSpin 28s linear infinite;
  pointer-events: none;
}

@keyframes reticleSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.emblem-reticle-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.emblem-reticle-ticks .tick {
  position: absolute;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8, 0 0 4px #fff;
  border-radius: 2px;
}

.emblem-reticle-ticks .tick-top {
  top: -34px;
  left: 50%;
  width: 3px;
  height: 16px;
  transform: translateX(-50%);
}

.emblem-reticle-ticks .tick-bottom {
  bottom: -34px;
  left: 50%;
  width: 3px;
  height: 16px;
  transform: translateX(-50%);
}

.emblem-reticle-ticks .tick-left {
  left: -34px;
  top: 50%;
  width: 16px;
  height: 3px;
  transform: translateY(-50%);
}

.emblem-reticle-ticks .tick-right {
  right: -34px;
  top: 50%;
  width: 16px;
  height: 3px;
  transform: translateY(-50%);
}

.emblem-crosshair-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.emblem-crosshair-lines .ch-line-h {
  position: absolute;
  top: 50%;
  left: -85px;
  right: -85px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.4) 15%, rgba(56, 189, 248, 0.85) 32%, transparent 38%, transparent 62%, rgba(56, 189, 248, 0.85) 68%, rgba(56, 189, 248, 0.4) 85%, transparent 100%);
  transform: translateY(-50%);
}

.emblem-crosshair-lines .ch-line-v {
  position: absolute;
  left: 50%;
  top: -85px;
  bottom: -85px;
  width: 1.5px;
  background: linear-gradient(180deg, transparent 0%, rgba(56, 189, 248, 0.4) 15%, rgba(56, 189, 248, 0.85) 32%, transparent 38%, transparent 62%, rgba(56, 189, 248, 0.85) 68%, rgba(56, 189, 248, 0.4) 85%, transparent 100%);
  transform: translateX(-50%);
}

.emblem-badge-frame {
  position: relative;
  z-index: 5;
  width: 272px;
  height: 272px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 55%, rgba(2, 6, 23, 1) 100%);
  border: 3.5px solid rgba(245, 158, 11, 0.95);
  box-shadow: 
    inset 0 0 0 2px rgba(254, 240, 138, 0.55),
    0 0 50px rgba(245, 158, 11, 0.55),
    0 0 100px rgba(56, 189, 248, 0.38),
    0 24px 60px rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
  cursor: pointer;
}

.grand-emblem-wrap:hover .emblem-badge-frame {
  transform: scale(1.04) translateY(-3px);
  box-shadow: 
    inset 0 0 0 2px rgba(254, 240, 138, 0.8),
    0 0 65px rgba(245, 158, 11, 0.75),
    0 0 120px rgba(56, 189, 248, 0.55),
    0 28px 70px rgba(0, 0, 0, 0.95);
}

.grand-emblem-img {
  width: 252px;
  height: 252px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px rgba(245, 158, 11, 0.75)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.95));
  position: relative;
  z-index: 6;
  pointer-events: none;
}

/* Grand Platform Title: SniperIQ */
.grand-platform-title {
  margin: 0;
  line-height: 1.02;
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-transform: none; /* Preserves exact case: SniperIQ */
}

.grand-title-sniper {
  font-family: var(--font-display, 'Orbitron', 'Inter', sans-serif);
  font-size: clamp(66px, 9vw, 106px);
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 28%, #CBD5E1 65%, #64748B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.4));
  display: inline-block;
}

.grand-title-iq {
  font-family: var(--font-display, 'Orbitron', 'Inter', sans-serif);
  font-size: clamp(66px, 9vw, 106px);
  font-weight: 900;
  letter-spacing: 6px;
  margin-left: 4px;
  background: linear-gradient(180deg, #F0F9FF 0%, #38BDF8 30%, #0284C7 75%, #0369A1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 35px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 70px rgba(14, 165, 233, 0.75));
  display: inline-block;
}

/* Subtle Laser Baseline Under Title */
.grand-title-laser-base {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  margin: 16px auto 0;
  gap: 12px;
}

.grand-title-laser-base .laser-line-left {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #38bdf8);
}

.grand-title-laser-base .laser-line-right {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, #38bdf8, transparent);
}

.grand-title-laser-base .laser-diamond {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8, 0 0 4px #fff;
}

/* Tactical Sub-title with Tech Lines */
.grand-platform-subtitle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 820px;
  margin-bottom: 34px;
}

.subtitle-flank-line {
  flex: 1;
  height: 1px;
}

.subtitle-flank-line.left {
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.45) 100%);
}

.subtitle-flank-line.right {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.45) 0%, transparent 100%);
}

.grand-platform-subtitle {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(12px, 1.5vw, 14.5px);
  font-weight: 800;
  letter-spacing: 3px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.grand-platform-subtitle .sub-uz {
  color: #e2e8f0;
}

.grand-platform-subtitle .sub-separator {
  color: #38bdf8;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

.grand-platform-subtitle .sub-en {
  color: #38bdf8;
  font-weight: 700;
}

/* Prestigious Author Plaque (Grand Commander Level) */
.grand-author-plaque {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 48px;
  margin-bottom: 30px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(30, 41, 59, 0.92) 50%, rgba(245, 158, 11, 0.16) 100%);
  border: 1.8px solid rgba(245, 158, 11, 0.75);
  border-radius: 20px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(245, 158, 11, 0.28),
    inset 0 1px 2px rgba(254, 240, 138, 0.55),
    inset 0 0 20px rgba(245, 158, 11, 0.1);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.grand-author-plaque:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 22px 50px rgba(0, 0, 0, 0.75),
    0 0 45px rgba(245, 158, 11, 0.45),
    inset 0 1px 2px rgba(254, 240, 138, 0.7);
}

.plaque-sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(254, 240, 138, 0.22), transparent);
  transform: skewX(-25deg);
  animation: plaqueSheenMove 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes plaqueSheenMove {
  0%, 65% { left: -100%; }
  100% { left: 200%; }
}

/* Plaque Corner Notches */
.plaque-corner-notch {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-color: #fbbf24;
}

.notch-tl { top: 6px; left: 6px; border-top: 2px solid #fbbf24; border-left: 2px solid #fbbf24; }
.notch-tr { top: 6px; right: 6px; border-top: 2px solid #fbbf24; border-right: 2px solid #fbbf24; }
.notch-bl { bottom: 6px; left: 6px; border-bottom: 2px solid #fbbf24; border-left: 2px solid #fbbf24; }
.notch-br { bottom: 6px; right: 6px; border-bottom: 2px solid #fbbf24; border-right: 2px solid #fbbf24; }

.author-badge-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.author-badge-top .author-star {
  font-size: 15px;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.9);
}

.author-badge-top .author-badge-role {
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #fef08a;
  text-transform: uppercase;
}

.author-hero-name {
  margin-bottom: 8px;
}

.author-hero-name .author-name-text {
  font-family: var(--font-display, 'Orbitron', 'Inter', sans-serif);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #FEF08A 0%, #F59E0B 45%, #D97706 80%, #B45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(245, 158, 11, 0.85)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.95));
  display: inline-block;
}

.author-rank-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #cbd5e1;
}

.author-rank-subtitle .rank-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}

.author-rank-subtitle .rank-text {
  color: #94a3b8;
}

/* Military Standard & Defense Clearance Tag */
.grand-defense-standard {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  max-width: 90%;
}

.defense-crest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
  flex-shrink: 0;
}

.defense-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}

.defense-primary-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.defense-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  flex-shrink: 0;
  animation: liveDotPulse 2s infinite ease-in-out;
}

.defense-text {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: #e2e8f0;
}

.defense-secondary-line {
  padding-left: 15px;
}

.defense-subtext {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #64748b;
  text-transform: uppercase;
}